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.
How to create a contact form in WordPress Website?
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.
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.
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.
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.
But let’s add a new form. You can create a new one by clicking on Add a New Form button.
After that, it gives you the option to choose a form template or a blank form. For now, choose a new black form.
With that, you’ll enter the drag-and-drop interface to create your form.
First, give your form a name. Then, add form fields like name, email, text, etc. by clicking on the plus (+) button.
For more ease, you can directly drag and drop the fields into the editor interface.
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.
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.
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.
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.
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.
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.
All done! You can then publish the page and see it on the live site. Or, click on Preview to view how it looks.
Once you preview/publish the page – your contact form will show up on the front-end as seen below –
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.
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.
Once done, you can check your page sidebar. It would look something like this.
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.