Contact forms are basic elements for any website. These forms are used to contact the site owner, make inquiries, provide suggestions, request a quote for services, etc. While it is possible to create contact forms manually, WordPress has lots of plugins that allow you to create contact forms easily.
Contact Form 7 is one of the most popular contact form plugins for WordPress. This simple but powerful plugin creates personalized forms and comes with lots of interesting options.
In the video below I walk you through how to create a contact form using the Contact Form 7 plugin. If you’d rather read, then a text version of the tutorial is below the video.
Creating a New Form
To create a form with Contact Form 7, install and activate the plugin in your WordPress site. This will create a new menu item titled ‘Contact’ in your website dashboard. To add a new form, go to Contact > Add New.
Click the ‘Add New’ button. If you want to create the form in any other supported language, select the language from the drop-down list and click the ‘Add New’ button located right after the language name. For this tutorial, we will create the form in English.
In the new page, provide a name for your form.
Customizing the Form
After the title section, you will find the ‘Form’ section. This section is divided into two parts. On the left side, you will find a draft form that is provided as default. You can edit or delete any element of this draft. In order to add additional fields, you have to use ‘Generate Tag’, which is located on the right side of the ‘Form’ section.
Clicking on ‘Generate Tag’ will open a drop-down menu. Select the type of tag you want to use. You can configure all the relevant options from the below fields. It is possible to provide an id, class, placeholder text, etc. for the tags.
After making all the changes, copy the code from the ‘Copy this code and paste it into the form left’ field and paste it into the left side box. You can add as many tags as you want. You can also provide titles for the tags.
Configuring the Mail
So far, we have customized the form that will be displayed to the visitors. But every time a visitor fills up the form and submits it, you will receive an email too. And Contact Form 7 lets you customize those emails. To do that, check out the ‘Mail’ section.
Similar to the Form section, the Mail section also has two parts. On the right side, you can set the basic email settings like the receiver email address, from email address, subject, headers, etc. On the left side, you can customize the actual email body. If you want to add custom tags, create them on the Form section and place them on the form. Then, copy the ‘And, put this code into the Mail fields below’ shortcode and paste it into the ‘Message body’ area of the ‘Mail’ section.
Customizing Notifications
Once the user submits a form successfully, they will get different notifications depending on the form type. You can customize the notifications messages from the ‘Messages’ section.
Using the Form
After making all the changes, click ‘Save’. At this point, you will get a ‘Contact form created’ notice along with a shortcode for the form. Copy and paste the shortcode into any post, page or widget to use the form.
So, that’s how you use Contact Form 7 to create forms for your website. Do you use Contact Form 7 on your website? If so, please share your experience with us. And if you use any other plugin to create contact forms, let us know about that too.