How to create a contact form in WordPress Website?

The tools and plugins recommend in the site are the ones we use, have tried or tested ourselves and recommend to our readers. Marketing With WP is supported by readers like yourself. If you take an action (such as a purchase) we might earn an affiliate revenue at no extra cost to you.

A contact form is your website’s most valuable if not one of the most valuable asset. Along with enhancing communication, contact forms are beneficial for increasing leads and conversion for your business. In this article, we explain how to create a contact form in WordPress.

Moreover, we will also walk-through how to configure and add the contact form on various parts of your website.

First let us explore why contact forms are essential.

Why do you need a Contact form?

Contact form is useful for both you and your visitors in many ways. As a website owner, you can use it for different purposes like communication, marketing, data collection, etc.

Following are some of the benefits –

  • Easy to get in touch: Contact forms make it easy for people to reach you. It just requires them to fill out a simple form and type in their messages. It’s possible anytime and anywhere.
  • Grow your list: Some contact forms can be connected with email service provides and used to opt-in users who want to subscribe to your newsletter.
  • Collect additional information: Forms can be quizzes or detailed responses to get additional information from your visitors.
  • Prevent Spam: Personal favorite, contact forms are the best way to prevent Spam. Giving out email addresses on your website can result in lots of spam emails coming to your inbox. With contact forms, you don’t have to expose your email address. So, you protect your email account from unnecessary threats.
  • Professional: A contact form looks professional and naturally adds credibility to your website. It signifies users that you actively listening to your customers.

Choosing the Best Contact Form Plugin

Since WordPress lacks a built-in form feature, you’ll need to add a contact form plugin to enable form functionality.

There are many options for a WordPress contact form plugin, both free and premium ones. But, deciding on which one to use is very important.

In our experience, we found the plugin WP Fluent Forms best for creating contact forms. The reasons being – Fluent form is super lightweight, the support team is fast and responsive.

Fluent Forms Form Builder Plugin For WordPress
Choose WP Fluent Forms for creating contact forms

WP Fluent Forms makes creating contact forms very easy and quick. In addition, it can also be used to create forms for subscription, checkout, user registration, and so on.

Fluent forms offers a feature-packed free option. Also, the premium version is very reasonably-priced and feature-rich compared to other ones.

Let’s get started with creating a form with WP Fluent Forms –


How to create a contact form in WordPress

Step 1) Install a Contact Form Plugin (WP Fluent Forms) in WordPress

To install WP Fluent Forms, log in to your WordPress website admin area. Then from your left sidebar menu, go to

Plugins > Add New.

Then, search for ‘WP Fluent Forms’ and install the plugin that appears at the top of the list.

Install WP FLuent Forms from WordPress Dashboard
Install WP FLuent Forms

After that, activate the plugin by clicking on the Activate button.

The plugin installation is now complete and you’ll see the Fluent Forms menu on your dashboard.

If you have any difficulties installing the plugin, we have a detailed guide on how to install a WordPress plugin.


Step 2) Create a Contact Form in WordPress

Now, let’s go ahead and create a contact form.

Firstly, click on Fluent Forms from the left menu.

Fluent Forms Menu in WordPress Dashboard
Go to Fluent Forms Menu

On the next page, you can see some demo contact forms already created for you. You can make little adjustments and use it too. Just click on Edit below it to make adjustments.

Choose and Edit Demo Form in WP Fluent Forms
Click on ‘Edit’ to customize the demo contact form

But let’s add a new form. You can create a new one by clicking on Add a New Form button.

Create a new form in WP Fluent Forms
Add a New Form

After that, it gives you the option to choose a form template or a blank form. For now, choose a new black form.

WP Fluent Forms Blank Template
Choose Blank Form Template

With that, you’ll enter the drag-and-drop interface to create your form.

WP Fluent Forms Form Building Interface
Form Interface

First, give your form a name. Then, add form fields like name, email, text, etc. by clicking on the plus (+) button.

WP Fluent Forms Editor Block Fields
Add Fields by clicking on ‘+’

For more ease, you can directly drag and drop the fields into the editor interface.

Drag and Drop Form fields in WP Fluent Forms
Drag and Drop Fields

You can use multiple other fields like address, drop down, date & time, multiple choices, etc. Just add them as your requirement. However, a contact form generally has the name, email address, and message text fields. So, we’ll stick to the basics.

Now, you can edit each field with the provided Input Customization option. For example, here we added the Text Area field and customized it as we wanted.

Customize Fields in WP Fluent Forms
Edit Fields

Similarly, you can edit the Submit Form button too, with the offered customization options.

Once you are done with edits, click on the Save Form button at the top of the page.

Click on Save Form in WP Fluent Forms
Click on ‘Save Form’ after Creating and Customizing the Form

After that, you’ll have to configure the notification and configuration which we’ll see next.


Step 3) Configuring Form Confirmations and Notifications

In this step, we’ll manage what users will see after they submit the form. After that, we’ll also set up our email address for receiving the submitted form.

Go to Settings & Integration at the top. On the Form Settings, you can configure display messages and web pages that users encounter after submitting.

WP Fluent Forms Settings and Integration
Edit Form Settings

The available options are –

  • Same page: You can display a thank-you message on the same page. It lets you write a custom message and hide/reset the form after submission.
  • To a different page: It has an alternative option to redirect users to a different page on your website. Also, you can display a custom message there. We recommend creating a “Thank You” page to redirect successful form submissions. This is essential in tracking goal completions from a data analytics perspective.
  • To a custom URL: Else, you can also redirect users to a different URL. It lets you enter the redirecting URL.

Next, go to Email Notifications on the same menu for configuring how you receive the submitted message as an admin.

From there, the first thing you need to do is enable the notification email. Then, click on the blue Edit button to customize it.

Email Notification in WP Fluent Forms
Email Notification – Enable Status and Edit Notification

On the next page, you’ll see the available settings. It already has default values filled on those fields. You can go ahead with it or edit them as you like.

Firstly, give a name to the email notification. Then, enter the email address where you want the triggered message to appear. It lets you enter multiple accounts separated by commas.

Next, set up the email subject and body for the emails you’d receive. You can use text as well as short-codes for special data.

Edit Email Notification in WP Fluent Forms
Edit Email Notification

After making changes, save it by clicking the Save Notification button.

Your email confirmations are not setup and configured. Whenever you receive a new contact form submission, you will receive all the relevant information to your email address.


Step 4) Adding WordPress Contact Form to a WordPress Page

We’ve successfully created and configured the contact form. However, it is not currently displayed anywhere. Now, let’s add it to the front end to display it on a page.

You can either go to your contact us page or create a new page by going to

Pages > Add New.

It will open your post editor. If you’re on Gutenberg editor, then add a new block with the plus (+) button. After that, add the block ‘Fluent Forms’ and then, choose the form you want to add with its name.

Add Form in WordPress with WP Fluent Forms
Add WP Fluent Forms Block in WordPress Page

All done! You can then publish the page and see it on the live site. Or, click on Preview to view how it looks.

Preview or Publish Page in WordPress Page with WP Fluent Forms
Preview or Publish Page After Adding Form

Once you preview/publish the page – your contact form will show up on the front-end as seen below –

Contact Form Created with WP Fluent Forms
Preview of the Form in a “Contact Us” Page

You might be done as of this point. However, some people also want to add a contact form in the side bar. More instructions on adding it on a sidebar below.


Step 5) Adding WordPress Contact Form in a Sidebar

Now, let’s see how you can add your contact form in your website’s sidebar.

Fluent Form plugin offers a widget that makes adding a form in the sidebar easy.

First, go to Appearance > Widgets.

Go to Widgets in WordPress Admin Dashboard
Go to Appearance > Widgets

There you’ll see a lot of widgets on the left and the widget areas on the right. Now, you’ll have to find the WP Fluent Forms widget and add it to the Main Sidebar widget area.

You can simply drag the widget and drop it under Main Sidebar. Don’t forget to choose your form from the dropdown. Also, give it a title to appear on the sidebar.

Drag and Drop WP Fluent Forms Widget in Sigebar
Drag and Drop Form Widget in Sidebar

Once done, you can check your page sidebar. It would look something like this.

Contact Form Created with WP Fluent Forms on Sidebar
Preview of the Form in a Sidebar

Conclusion

How easy was that! Congratulations, you’ve got your awesome new contact form ready.

Just to recap, we created a new contact form using WP Fluent Forms. Then we added the form in different areas on a WordPress website. Now you are ready to get awesome new emails from your potential customers easily from your website.

If you are new to WordPress or building your own website, we recommend you to check out our article on must-have pages for a small business website.

Ankit S J B Rana

Ankit S J B Rana

Ankit S J B Rana is a marketing enthusiast originally from the Himalayas of Nepal and currently based out of Bangkok, Thailand.

He is currently the Marketing Director at Mbrella Films and Filma.io

Marketing With WP is Ankit's blog full of marketing insights to turn your website into a 24 hour marketing machine.

Articles: 150