Contact Form 7

featured-img-cf7

Contact Form 7 is one of the most popular and oldest WordPress contact form plugins around. Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup.
In this tutorial, I will show you how to install and use the contact form 7 plugin.

1. log in to your WordPress backend and go to Dashboard >> click on Plugins >> Add New.

dashboard-plugin-addnew

2. In the search box, search for the ‘Contact Form 7’ plugin. Install and activate the plugin.

search-contact-form-7

3. Once the plugin gets installed, on the left-hand side you will see a contact form link as Contact.

contact-link

4. Click on the Contact link and you will see there is a contact form named ‘Contact form 1’. You can see here one form created already. It gives us a shortcode. We need to install this form on a page.

5. But if we go and look at the format by clicking Edit, you will see it’s a very simple form. It is a form that looks like on most websites.

6. The first field is your name, the second field is email, the third field is the subject, and the fourth field is the message. So this form is asking for the name, email, subject, and message which is pretty much what all contact forms on all websites ask for.

7. So what I am going to do with this form is to show you how to integrate that onto a page.

8. What you need to do is copy this shortcode, add a new page by hovering over Pages, and click Add New. We will call this page Contact Us. And we will paste that shortcode right into the page and click publish.

9. Now if we go and view this page by clicking the View Page link, we will see there’s a contact form on the page. And that’s how easy it is to create the Contact Us page if you want to use this generic contact form.

10. Now if we go back to that form, that was created for us when we installed the plugin, click on edit. We gonna look at some additional settings that you can set in regards to this form. So on this form tag, we have this basic form structure. You can add other variables and other fields.

11. But if we click on the Mail tab, we have the settings for where the email is sent. So the first field is To, where the email is sent once the form is submitted.
The Form field is where the email will be coming from. So when you receive the email, it will say the name of the person who sent it.
It will include the subject that they entered in the form.
The Reply-To email will be the email that they entered.
And the body will be their name, their email, the subject line, and the message.
In this Message Body, you can add anything you want.

12. Now go to the Messages Tab. Here are the success and error messages that are shown during the form filled out.

message-tab-cf7

13. Then we have the Additional Settings tab, where you can add customization code snippets. For more details, see the Additional Settings Link.

additional-settings-cf7

14. So what we can do is add another field to our Contact form. So in this case, as an example, I am going to add a dropdown menu where people can tell us where they found our website.

15. So the first thing I am going to do is copy and paste one of these entries, and I will change the text to “How did you find our website?”. We will Add the Dropdown menu option.
Click on save to save the changes.
We will go back to our contact form and refresh the page. And we should have a dropdown added.

26. Now we need to add the variable to the email that is generated. We need to copy the name of the field, go to the mail and then open and close square brackets and paste that name into those brackets. And above we can say something like “This is how I found your website.”.

24. This is how you can customize your form, but make sure when you include fields, those fields need to be added to the Message Body of the Mail Tab otherwise that information will be lost.
We can store the submitted information in the database. To know how to store contact form 7 in the database click here.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.