Contact Form 7 is the most popular contact form plugin in the WordPress community, and it is currently running on 1+ million websites/blogs. In terms of sheer volume of installation it has the biggest share in contact form niche. It is promoted by its author, Takayuki Miyoshi as – “Just another contact form plugin. Simple but flexible”. Despite of it is of its simplicity; it has a lot of customization features and is sufficient for a simple blog or website. It delivers all the basic functionality of a simple contact form that one would require. It works well with other plugins such as Akismet for spam filtering, Simple Captcha, etc. The plugin can handle multiple contact form and file uploads. In this post, I will show steps to setup Contact Form 7 plugin in WordPress. Here are some of the features of Contact Form 7.
Features of Contact Form 7
- It’s free and you can install it in as many sites as you like.
- To upgrade the functionality of Contact Form 7, there are many third party plugins available in WordPress repository and most of them are absolutely free.
- If you want a simple contact form then don’t think, just go for it.
- It features file uploads and ajax powered form submission.
- The form and email templates are customizable.
Setup Contact Form 7 Plugin in WordPress
Step 1. Plugin Installation
To install the plugin go to WordPress Dashboard >Plugins > Add New and search for “Contact form 7“ in search box, Click Install Now and then click on Activate to activate the plugin.
Step 2. Creating Contact Form
You’ll see a new menu item in the Dashboard as Contact as shown above. Click Contact and you will be redirected to Contact Form Dashboard as shown above. By default a form is already created for you, called “Contact form 1”. You can edit this form or create a new one. To create a new contact form click Add New located on top as shown above. .
A new page will open as shown in above. Enter a suitable title for the contact form eg. “Author Contact Form” or “Contact Us”. Here we have Contact Form 7 Test as the title. In the same screen above there are four tabs: Form, Mail, Message, and Additional Settings. The Most important ones are Form and Mail Tab.
You can add various fields like text, email, URL, number, date, drop-down menu, checkboxes, radio buttons, reCAPTCHA, file, etc. to your form. Click on the respective buttons in Form Tab to add the fields to your contact form.
Click on the type of field you need to add. For testing, we will be adding a Phone no. to our contact page. So we click on tel button and you will see a popup screen as above. Add Name, default value as per needed. Here we have named the field as “your-telephone” and left others as blank. Now click on Insert Tag button to insert the field in the form.
Your newly created field will be added as [tel your-telephone] as in the image above. Modify the HTML as per needed.
Step 3. Customizing Emails and Messages
Now it’s time to configure the email. Click on the Mail tab. You can configure fields like – To, From, Subject, Additional Header and Message Body as shown above. You would likely see [your-mail], [your-message] etc in the form. They are the names of the field that you configured in Form Tab. You might only need to modify the Message body to customize the email message and keep everything as it is.
Now we, Click on Message Tab to configure the custom messages for success message, validation error, etc. You can leave the default values or create custom messages here. The Additional Setting tab that you can see in the above image is for advanced users and is normally unused. Once you are done, Click Save button to save the contact form.
Once saved, you will get a short-code something like [contact-form-7 404 "Not Found"] as shown above. Copy the short-code. Now we can add contact form to a new page by pasting this shortcode.
Step 4. Adding Contact Form in Page
Create a new page (Go to Dashboard > Pages > Add New). Add a suitable title Contact Us or any. Here we have Contact Me as a title. Paste the short-code in the editor as shown above. Click on Publish/Update to save the page. Finally, click on the Permalink below the title of the page to see our newly created contact page.
And your contact page will look similar to above screenshot depending upon the theme installed.
Try this plugin if you want basic contact form functionality in your WordPress blog/website. For more information and development of the plugin please visit plugin’s official website. If you want more advanced contact form then you might like to look into Gravity Forms, Visual Form Builder, etc.
Latest posts by Jems (see all)
- 5 Best Contact Form Plugin for WordPress 2016 - June 16, 2016
- Setup Contact Form 7 Plugin in WordPress - May 30, 2016
- Create a Simple Contact Form with WPForms Plugin in WordPress - May 27, 2016