How to Install and Setup Contact Form 7

Install and Setup Contact Form 7

How to Install and Setup Contact Form 7

Install and Setup Contact Form 7

Contact Form 7 is a free WordPress plugin that you can use to create a variety of contact forms for your website. Not only is this plugin free, but the custom shortcode for each contact form you create makes it easy to add your contact forms to any post, page or widget area.Learn How to Install and Setup Contact Form 7

Often times you want a way for customers, potential clients or regular readers to contact you. You could buy a theme that has a custom contact page built-in, or try to code a contact page yourself, but these options are either costly or complicated. You don’t have time for that, which is why you should use Contact Form 7. 

Before we start we would like to offer you:
When having your website on WordPress you will need to choose a Good Looking Optimized theme , Speed optimization plugin and understand How to do Good SEO 

How to Install and Setup Contact Form 7

Installation is easy. Just navigate to Plugins > Add New and use the Search option to find the Contact Form 7 plugin. Install and activate the plugin. Once active you should see a handy dandy “Contact” menu item in your WordPress dashboard. Click on it to go your main contact form management page.

Contact Form 7 Installation

The plugin authors were nice enough to include quick start links for you right in the dashboard. Feel free to dismiss this notice at any time. Now click Add New to create your first contact form. You’ll see a lot of options when your contact form opens. Don’t be scared – I promise it’s easy.

Contact Form 7 Options

Contact Form 1
In this box you can change the name of your form by click where it reads Contact form 1. Rename the form something that makes sense to you or your business, or just leave it as is. This is also where you will find the contact form shortcode. Copy and paste this code to add it to any text field. Or, if you are using something like the Visual Composer Drag & Drop page builder plugin, you might not even have to use the shortcode. Visual Composer includes a page builder module specifically for Contact Form 7 so all you have to do is select the form you want to use from a drop-down.

The Form box is where you will actually build your contact form. Contact Form 7 uses various tags to add different form sections. The default contact form includes name, email, subject, message and send button fields. To delete a field simply delete its code from the form. To add a field use the Generate Tag button to create your custom field tag code, then copy and paste the long code into your form section. You can generate tags for text, email, URL, phone, spinbox number, slider number, date, large text area, drop-down menu, checkboxes, radio buttons, acceptance (e.g. terms), quiz, CAPTCHA, file upload and submit button.

Contact Form 7 Generate Custom Tags

Mail (Mail 2)
This is where you can make changes to the email you receive when users submit contact forms. By default the plugin will use your site admin’s email address, but you can easily change this to a support email or multiple email addresses. Also, if you choose to add custom tags to your form be sure to add the short code chunk generated to your Mail Message body. If you don’t paste in that bit of code you won’t receive the answers users submit for that field.

The Mail 2 option can be used if you’d like to send a different email to different recipients. Maybe you want to receive emails with the full contact form information included, but you only want your support staff to receive emails with one or two fields. You can customize the second mail section to send your staff only certain fields from contact form submissions.

Edit the messages displayed to users for a variety of completed (or incomplete) tasks. You can create customized messages for events such as a successful contact submission, validation errors, incorrect CAPTCHA and more.

Once you’re done editing make sure to save your changes. Now you can copy the form shortcode  to insert into a page. Or if you are using the Visual Composer page builder, you can simply add a Contact Form 7 module and select your form from the drop-down.

Contact Form 7 Page Builder Block

Contact Form 7 Advanced Tips

Now if you want, you can get really fancy with Contact Form 7. Here are a few of my favorite tricks that you can use to create an impressive contact form for your website.

Place Holder Text: Maybe you don’t want headings on your forms fields, or maybe you’d like to add text to demonstrate to users what they should be entering in a particular filed. Adding a placeholder is easy, just add the text with quotes to the end of your code like so:

[ text* your-name "Your Name"]

Full-Width Entry Fields: I personally don’t love how the default text fields are so short. There are two ways to change the width of a text field. The cheater way is to simply add the character length width you want to the code for that field in the form section. So if you want a full-width field with room for 300 characters, add 300 followed by a backslash like so:

[ text* your-name 300/ "Your Name"]

If you want to do it the right way, you’ll need to add the following code to your CSS stylesheet:

input.wpcf7-text { width: 100%; }

But this will effect ALL the Contact Form 7 text fields on your entire WordPress installation. If you are using the Visual Composer Page Builder you have the option to work around this and target a specific row on a specific post or page so only one isolate contact form is style. First click on the the row and add a custom Row ID. Then save.


Next click on the CSS button just above the main content area of your post or page and type #YOUR-ROW-ID followed by the CSS code mentioned above.


Side-by-Side Entry Fields: Another neat trick is to add your fields side by side. I think this keeps the contact form super clean and professional. To do this with the Total WordPress Theme we’ve made it easy for you and added a custom class. Just add in class=”one-half” to your p tags like so:

<p class="one-half first">[ text* your-name "Your Name"]</p>

<p class="one-half">[ email* your-email "Your Email"]</p>

<p>[ textarea your-message] </p>

<p>[ submit "Submit Form"]</p>



  1. Eric Jones

    Hey, this is Eric and I ran across a few minutes ago.

    Looks great… but now what?

    By that I mean, when someone like me finds your website – either through Search or just bouncing around – what happens next? Do you get a lot of leads from your site, or at least enough to make you happy?

    Honestly, most business websites fall a bit short when it comes to generating paying customers. Studies show that 70% of a site’s visitors disappear and are gone forever after just a moment.

    Here’s an idea…

    How about making it really EASY for every visitor who shows up to get a personal phone call you as soon as they hit your site…

    You can –

    Talk With Web Visitor is a software widget that’s works on your site, ready to capture any visitor’s Name, Email address and Phone Number. It signals you the moment they let you know they’re interested – so that you can talk to that lead while they’re literally looking over your site.

  2. Barbara Atyson


    We’d like to introduce to you our explainer video service which we feel can benefit your site

    Kind Regards,

  3. Claudia Clement

    Hi, We are wondering if you would be interested in our service, where we can provide you with a dofollow link from Amazon (DA 96) back to

    The price is just $77 per link, via Paypal.

    If you’d be interested in learning more, reply to this email but please make sure you include the word INTERESTED in the subject line field, so we can get to your reply sooner.

    Kind Regards,

Leave a Reply

Your email address will not be published. Required fields are marked *