How to create contact form in WordPress

How to create contact form in WordPress

Want to collect your visitors’ data?

Looking to generate leads from your website?

Adding a contact form to your web site is a great way of capturing the data of your website visitors.

In WordPress, we have a plugin ‘Contact Form 7’ to easily integrate beautiful forms to your website. It provides us a lot of options to customize the functionality of the form and even has the addon plugins like ‘Contact form 7 DB’ to auto store the leads of the visitors after the successful submission of the form.

We can also add different functionalities like redirecting the visitors after the form submission.

Let us look at the step by step process of integrating the form to a website.

Step 1:

Go to the ‘plugins’ section on the WordPress dashboard and click on ‘Adnew’ button on the top. Now search for ‘Contact form 7’ and click the ‘install’ button followed by the ‘activate’ button to add a plugin to your site.

Step 2:

After the activation of the plugin, you can find the ‘Contact’ option on the sidebar. Clicking on which allows you to see the default contact form, hover the pointer on it and click on the edit option to see the code of the form fields.

It might be difficult to understand the code, but, before going into the details of the code, copy the shortcode of the form which is right below the form title and paste it on the page you wanted to add a form and then check the output of the page.

Look at the number of fields displayed on the page, and check back the contact form code. Now compare both the fields displayed and the contact form code to understand the relation between them..

You have all the available field options as tabs right above the code, you just need to click on the tab you like and then ‘insert’. After  insert the shortcode of that particular field gives the preview of the field on the page. 

[text* your-name] displays the name field in the output.

The * next to the ‘text’ indicates that it is a mandatory field. You can remove the * mark to make it a normal field. Next, your-name this is just a name to the fields, it can be anything, you can even change that one. Rest of the fields also works the same way.

Now, if you look at the section, the name next the will be a helping text for the user to understand which field is of what.

With this you are done with the form creation, now let’s look at mail configuration. For this, click on the ‘Mail’ tab next to the form.

You should provide the email id in ‘To’ field to which you wanted to receive the data on successful submission of the form.

Form field, you can replace whatever you want in place of ‘Madhan Tutorials’. To make the form work as expected you must replace ‘@madhantutorials.com’ with your domain name.

Subject field, you can add the subject you wish or you can add the subject which the user fills in a subject field while submitting the form by adding [your-subject]. [your-subject] is the shortcode which generates the subject field in the output.

Leave the additional header as it is. In the message body, we need to add the shortcode of all the fields to receive the data filled by the user to your mail. Here you can decide how you receive the user data to your email Id.

You can watch the video here!

Leave a Reply

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