Skip to main content
WordPress made easy with the drag & drop Total WordPress Theme!Learn More

Contact Form 7 Free WordPress Plugin

Disclosure: If you click the links below and purchase the item we may make a comission.

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.

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. We love this plugin so much that practically every WPExplorer theme supports it, even out greatest premium WordPress theme Total.

Using 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>

Fancy Email Tags: Sometimes you need more information than the user submits. This is where Contact Form 7’s special email tags come in handy. With these you can add email time stamps, submission IP address, the ID or title for the post containing the contact form and more. All these tools can help you keep your form submissions organized.

Learn More About Contact Form 7

For more tips on using Contact Form 7 please reference their documentation. Here you will find detail explanations of the various tags and what they are capable of, useful tips from the plugin authors, and helpful articles on troubleshooting if for some reason the plugin isn’t working for you. Contact Form 7 is one of the best free plugins available, and it’s one of the best options for creating contact forms on any WordPress website,