How to Add a Contact form on WordPress
access_time
hourglass_empty
person_outline

How to Add a Contact form on WordPress

Did you know that a contact form can give you better customer engagement? It will be a convenient place for users to communicate with you online and ask for help.

A contact form is a dedicated space on your website, that allows your visitors to easily reach you at any time.

In this article, you are going to learn how to add a contact form in WordPress with the help of WP Forms and Contact Form 7.

Why Do You Need a Contact Form?

Having a contact form on a website is beneficial, both for the owner and the users. Here are several advantages:

  • Effective communication ‒ a contact form makes it easy for users to reach you. The form is accessible all the time and customers only need to fill out the provided fields.
  • Source of information ‒  you can require users to enter information that might be valuable for future purposes, such as an email address, a social media username, etc. Having said that, some fields like age or gender should be optional, should you really need them.
  • Spam prevention ‒ if you have a contact form, you don’t need to expose your email address on the website. That way, spammers can’t locate it easily and you will receive a lot less junk.
  • Professionally looking site ‒ your website can look more professional and appealing by having a contact form inside. Readers know that you will listen to them and in turn, they will trust you more.

Sounds very promising, right? Without further ado, let’s learn how to add a contact form in WordPress!

How to Add a Contact Form in WordPress?

We can add a contact form in WordPress using a plugin, which is very easy to install.

To start off, you need to access your WordPress dashboard, open the Plugin menu, and click on Add New. Search the plugin’s name and then select Install. Once finished, choose Activate.

For this tutorial, we’ll be working with two of the most popular WordPress contact form plugins — WPForms and Contact Form 7. They are reliable, powerful, and customizable.

WPForms

wpforms

WPForms is a super user-friendly WordPress contact form plugin. Don’t worry if this is your first time using such a tool because you can easily master it in no time. It has a drag-and-drop editor and provides you with many predesigned form templates.

What’s great, this plugin also allows you to create a subscription, registration, and payment form. You can build them in a few minutes and integrate it with popular platforms like PayPal, Stripe, MailChimp, and so on.

WPForms offer you four premium plan options, Basic ($79.00), Plus ($199.00), Pro ($399.00), and Elite ($599.00) per year. There is also a free version that doesn’t include several core features like third-party addons and user registration forms.

Step 1 ‒ Create a Contact Form Using WPFoms

  1. After you have activated the plugin, go to the WPForms menu. There is a handy instruction to help you complete the form under 5 minutes. If you don’t want to follow it, then just click on Add New.
  2. Enter your form name and select from several templates to speed up the process. Or, you can choose a blank form to have more creative freedom to start with.
  3. Now you can add fields based on your needs. Just drag the desired option from the left column to the live editor.
    Adding fields on your contact form
  4. Once you’re finished, click Save at the top.

Step 2 ‒ Set up WPForms Notifications and Confirmations Settings

To notify you and your users every time a form is submitted, you need to configure the notification and confirmation settings.

  1. On the same WPForms menu, select Settings and go to Notifications. There, you need to set up your email address, the subject, and other info. If everything is ready, choose Add New Notifications.
  2. As for the confirmation, you can add a thank you note for users as well as redirect them to a certain URL. This is also a great opportunity to inform customers how long they should expect to get a reply from you.
    setting-up-confirmation

Step 3 ‒ Add a Contact Form in a Page, Post, and Sidebar

  1. On a page or a post using the WPForm button — on the page or post editor, tap on the plus icon. Expand the Widgets area and choose WPForms block.
  2. On a page or a post using the shortcode — copy the shortcode from the WPForms menu and paste it to the Shortcode block on the post editor.
    Copy the shortcode from WPForms

Here’s an example when a contact form is displayed on a page or a post.example contact form post page

On the sidebar — Go to Appearance -> Widgets. Locate and click the WPforms widget. After that, choose Sidebar.
Choose sidebar to display WPForms on the sidebar

This is how it’s going to look like on your sidebar.

example contact form sidebar

Contact Form 7contact form 7

Contact Form 7 has a deeper learning curve since you need to learn about the tags and syntax first. Thankfully, the developer has prepared a comprehensive guide on how to do so. Once you get used to the interface, it can turn out to be a very powerful tool.

What’s great, it offers a handful of features that usually only comes with a paid plugin, such as third-party extensions, multiple forms, and so on. Other notable functions include reCAPTCHA, quiz, and file uploading and attachment.

Most importantly, you don’t have to pay anything for this plugin. We’ll show you how to add a contact form on WordPress using Contact Form 7.

Method 1 ‒ Display Contact Form 7’s Default Contact Form

If you want to display the contact form the simple way, there is a prebuilt form that should be ready to use. It has come with all essential fields like name, email, subject, and message.

  1. First of all, you need to access the Contact menu from the WordPress admin page. Then, copy the available shortcode next to the contact form name.
    You need to copy the shortcode from contact form 7 setting menu
  2. Paste it on the Shortcode block to the post or page editor.

Method 2 ‒ Create a New Contact Form Using Contact Form 7

You can create the contact form from scratch, as well. That way, you have the power to personalize it to your own liking. Here’s how you do it.

  1. Hit Add New on the Contact Menu. The editor box will provide you with many field tags.
  2. Let’s say we want to add a phone number field. To do that, choose tel and complete all the required information.
  3. Write the template in this syntax to give the field a label after you insert the tag.
    <label> Phone Number     
    [tel* PhoneNumber] </label>

    Congratulations, you have successfully added a new field!
    The phone number field has been added

  4. Now that you are finished with the contact fields, you can continue to adjust the notification on the Mail settings. You are free to change your email and the headers, among other information.
  5. Lastly, if you want to edit the automated reply, go to the Messages tab. Contact Form 7 lets you alter the thank you note, error messages, and many other responses.You can edit your responses from the Messages tab. Don’t forget to hit Save every time you modify the settings.

Similar to the default one, you also need to copy and paste the shortcode to the desired post/page in order to display the new contact form.

Conclusion

If you want to engage with your website visitors and gather their valuable feedback, you should add a contact form on your WordPress site. With it, you can also build trust and avoid getting spammed.

What’s great, creating a contact form is not as hard as it seems, thanks to these two great plugins — WPForms and Contact Form 7. Here’s a summary to do that.

  1. First, look for WPForms or Contact Form 7 on the WordPress plugin directory.
  2. Once they are installed and activated, navigate to their setting page.
  3. Personalize your contact form by changing the fields, notifications, and responses based on your needs.
  4. Insert the contact form on a page/post/sidebar using a dedicated button or the shortcode.

Good luck and leave a comment below if you run into any trouble!

The Author

Author

Alberto Ceccolini / @albertoceccolini

Alberto is a WordPress developer who worked on everything from small blogs to large scale e-commerce sites. When he's not making websites succeed, he likes to play football with his buddies.

Related tutorials

Author

Saddam Kassim Reply

April 14, 2018

Contact form 7 has always been a great choice for wordpress beginners as it is 100% free but with regards to customization, it is a little bit tricky. Like if someone wants to have two column then they must have to deal with CSS, Usually, beginners avoid to use CSS due to lack of knowledge. but this article is helpful. Thanks team.

Author

chad Reply

January 21, 2019

Are you are able to provide a quote for your services?

    Author

    Domantas G.

    Replied on September 26, 2019

    Hey Chad, You can see our pricing here: https://www.hostinger.com/pricing

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

Become a part of Hostinger now!

More in WordPress
How to Fix Eliminate render-blocking JavaScript and CSS on WordPress
How to Eliminate render-blocking JavaScript and CSS on WordPress

Close