Web Hosting

How to Add Contact Form in WordPress: Step-by-Step Guide

Web Hosting

Contact Form is necessary for your website because of the customer perspective. If anyone has visited your website and contact you then he or she contacts you through the Contact Us page on your website. So you should know about How to Add Contact Form in WordPress.

What is the Contact Form?

A Contact Form is used to take the data like Name, Email, Phone Number, Message from a customer through a Form.

With the help of this form, you have known about What the Customer problem and then contact them.

Why You Should Add Contact Form?

  • If any customer visits your website and asks the solution to any problem then he or she can do contact you through Contact Form.
  • By adding a contact form to your website, your website counts as a genuine website.
  • You collect the information of your customers through the Contact form.
  • Avoid spam activity through contact forms.

So use contact form for your website to get the detailed information of your customers.

How to Add Contact Form in WordPress?

So you can add Contact Form through Plugin or Coding. Here we will tell you about How to Add Contact Us Form in WordPress through Plugin.

How to Add Form Using Contact Form 7 in WordPress?

Step 1: Login into your WordPress Admin Dashboard and Go to the Plugins section.

Step 2: Go to Plugins and click Add New.

Step 3: Search for Contact Form 7.

Contact Form 7

Step 4: Click on Install Now. Install and Activate this plugin.

Step 5: Then Contact Option is available in the sidebar after installations.

Step 6: Go to Contact and click on Add New.

Add New Contact Form

Step 7: Then you will see an option to add New Contact Form. Give Title to your form and select your required fields for customer data in Form.

There is another option will show like Mail, Message, Additional Settings.

  • In Mail, it will show you the Contact Form format.
  • After Mail you will see Message, It will show the message to the customers during the procedure of Form filling. These messages prevent the spam form.
  • In Additional settings, you can add new designs through code.
New Contact Form

Step 8: It will provide you the Name, Email, Subject, Message field automatically.

If you want to add a particular field then put that field between <label></label> tags.

Example: If you want to add Name then Click on the text. It will provide you the following interface to add the text field.

It will provide you the form tag generator.

Form Tag Generator
  • If you want to make this field Required then click on Required Field under Field type.
  • It will generate Name automatically. If you want to change then you can change the name.
  • In default value, you can write Name.
  • You want to show the Name as Placeholder, you can choose this option otherwise leave as it is.
  • In the end, It will create a tag and Click on Insert tag.
  • Your tag will insert in the form and put this tag between <label></label> like this.
<label> Your Name (required)

        [text* text-684 placeholder "Name"] </label>

it will show your field like this.

Name

Note: If you want to show the Your Name(required) before the Name section then you will write this line after <label>.

So this is the guide, how you can add any field.

If you do not want to add any field then leave the form as it is. Save the form by clicking on Save.

After Save the form, Contact Form 7 will provide you a shortcode like this.

[contact-form-7 id="401" title="Contact Form"]

Copy this Shortcode. Paste the Shortcode where do you want to add the Contact Form.

There are two conditions here.

  • Add Contact Form in a Separate Contact Us Page.
  • And You can add Contact form in Sidebar.

First Condition:

How to Add Form in Contact Us Page?

  • Create a Separate Page under Page Section.
  • Go to Pages and click on Add New.
  • Put the above shortcode in the page and Write Contact us in Page title.
Contact Us Page
  • After putting the Shortcode and Page Title. Publish the Page.

Your Contact Form has shown like this.

Contact Form

So your Contact form will show in your Contact Us page.

How to Add Contact Form in Sidebar?

  • Go to Appearance and Click Widget.
Widgets
  • You will see the Custom HTML. Click on Custome HTML and it will ask you where you will add the Contact form Sidebar or in footers.
  • Choose Main Sidebar under Custom HTML.
Custom HTML In Widgets
  • Click on Add Widget.
  • It will add the Custom HTML section in the sidebar.
  • Put the Shortcode under the Content section in the Custom HTML section.
  • Click on Save and it will save your Contact Form in Sidebar like this.

So on our website, Contact Form has shown after the Category section.

With the help of Contact Form 7, you can add the Contact Form in your WordPress website Pages or Sidebar.

Contact Form in the Sidebar

This is a simple process for adding the contact form. You should apply this method, by this you can easily add the Contact Form.

You can use other plugins like WP Forms to create the Contact Form.

Conclusion:

So by this article, you have learned How to Add Contact Form in WordPress using plugins. Apply this method and add the Contact form on your website early. Make your website genuine and get the customer’s data easily through the Contact form.

If you have liked this article, share it on your social media platforms. Like Our Facebook Page.

Will you want to apply for this method? Tell us in the comment section.

Read More:

5 Best Contact Form Plugins for WordPress for Collecting Details

7 Best WordPress Email Newsletter Subscription Plugins for List Building

How to Add Facebook Page to WordPress?

How to Add Social Sharing Buttons to WordPress?

Last Modified on by Vishal Tyagi

Leave a Reply

Get 67% Off on SiteGround Shared Web Hosting Plans Now checkout >>>BUY NOW
0 Shares
Share
Tweet
Pin
Share
Share