How to Create a WordPress Contact Form and Improve Engagement

A contact form is a short web-based form that allows visitors to get in touch with the site owner. They can ask questions, give feedback, and share opinions about the website with just a few clicks.

From the website owner’s point of view, it can help find new potential customers, collect their information – such as email addresses and phone numbers – and use that to offer them products or services.

This article will provide a WordPress tutorial for creating from a basic contact form to more complex forms with the user-friendly plugin WPForms.

We will also elaborate on why we recommend this contact form plugin and go over various methods to add a contact form to a WordPress website.

How to Create a Contact Page Using a WordPress Plugin – Video Tutorial

Follow our tutorial to learn how to create a WordPress Contact Us page using the free version of the contact form plugin Ninja Forms.

Creating a basic contact form is an excellent way of interacting with site visitors. They only need to fill out and submit a form to report errors, require customer support, or generally inquire about your website.

Apart from increasing customer engagement, there are other advantages of using a contact form:

• Reduce spam email. Contact forms are great for spam protection, as you don’t need to expose your email address on the website, making it more difficult for spammers to locate it.
• Increase the website’s credibility. Having a contact form shows that your website is open to visitors’ feedback and suggestions, which you can use to improve user experience and performance.
• Automate email responses. Generate new leads by sending automated messages to visitors who submit forms, such as promotional emails or special discounts.

If you run a WordPress site, creating and adding a contact form is quite simple with the help of a WordPress contact form plugin.

The most popular WordPress contact form plugins include WPForms, Ninja Forms, Contact Forms 7, and Formidable Forms.

For this tutorial, we will work with WPForms, one of the best contact form plugins. You can download its free version from the WordPress plugin directory or purchase the premium version on its official website.

This user-friendly form plugin offers powerful features, such as:

• A drag-and-drop form builder. Create a contact form without coding.
• Smart conditional logic. Collect the most relevant information from your visitors.
• Entry management. All the contact form entries will be accessible from the WordPress dashboard.
• Mobile friendly. Visitors can access the contact form via their mobile devices.

This contact form plugin also has many pre-designed form templates for building customized forms for different purposes, such as user registration, subscription, and payment.

Additionally, it integrates various platforms and other plugins, like MonsterInsights, WP Mail SMTP, and Constant Contact, into your contact forms.

The premium version of this WordPress form plugin includes four paid plans:

• Basic – available for $49.50/year, it offers unlimited forms and user accounts, spam protection, and can be used in one WordPress website.
• Plus – for $99.50/year, it includes all the features from the Basic plan plus form automation tools and additional marketing integrations.
• Pro – costs $199.50/year and lets you accept payments via integrations with Stripe, PayPal, and other platforms.
• Elite – for $299.50/year, in addition to even more powerful features, you can use it on unlimited websites and receive premium support.

If you consider upgrading to one of the premium plans, keep in mind that there’s no free trial. Thus, we recommend trying the free version of this contact form plugin first to ensure it fits your needs.

1. Install and Activate the WordPress Contact Form Plugin

Installing a plugin on a WordPress website is pretty simple.

First, log in to the admin area via your WordPress hosting account or by typing the website URL followed by /wp-admin on the browser’s address bar.

From the dashboard, navigate to Plugins → Add New. Type the keyword wpform in the search bar to locate it.

Click Install and wait until the installation process is complete. Then, click the Activate button to start using this WordPress plugin.

2. Create a Contact Form in WordPress

After the contact form plugin is activated, start creating a new contact form.

On a fresh WPForms installation, this form plugin will display a handy guide called The WPForms Challenge to help you create a WordPress contact form easily and in under five minutes.

However, if you want to explore the form creation process, skip the help assistant and click Add New or Create Your Form – either option will take you to the contact form builder.

On the Setup section of the form builder, fill out the Name Your Form field. If you don’t, this WordPress plugin will use the default name of the template you choose.

After that, pick a template in the Select a Template field. Use the template categories or the search bar in the left column to filter the options.

Once you have found a suitable template, hover over it and click Use Template. It is also possible to preview each option by clicking on the View Demo button.

Meanwhile, if you prefer to manually create advanced forms, dynamic forms, or even simple contact forms, select the Blank Form template and click on the Create Blank Form button.

3. Customize the Contact Form

The next step is to customize your chosen contact form template.

The Standard Fields section is available in the free version, containing basic form fields that allow you to create a simple contact form.

Meanwhile, the Fancy Fields and Payment Fields sections are only available for users of the premium version. These two sections help to create advanced forms by adding ratings, payment options, and more.

There is no need for heavy customization when using a pre-designed template. However, you can still replace, add, and edit the form fields to create more complex forms.

Adding a New Contact Form Field

To add a new form field, head to the Add Fields on the left column of the form builder. Choose a field to add and drag and drop it into the live editor. The other fields will automatically align with it.

Alternatively, click on the desired form field to instantly add it to the live editor. However, you may need to rearrange the form, as the field will be automatically placed below the others.

Removing a Form Field

The Simple Contact Form template contains three default form fields – Name, Email, and Comment or Message. To delete one of them, select it and click on the Trash Can icon.

Duplicating a Form Field

You can also copy a form field by selecting it and clicking on the Duplicate Field icon.

A pop-up message will appear asking whether you want to duplicate the form field. Click OK to confirm.

Rearranging the Form Field Order

To adjust the fields, simply drag them to your preferred position.

Editing the Form Field

This WordPress contact form plugin also provides a feature to configure the details of each field.

Select a form field to access Field Options. It will display three tabs: General, Advanced, and Smart Logic. Note that the Smart Logic option is only available on WPForm’s premium version.

Under the General tab, set the field label, format, and description. Meanwhile, the Advanced tab is for adjusting the field size, placeholder, default value, and CSS classes.

Once you finish customizing the form settings, hit the Save button.

4. Set Up the Notification and Confirmation Settings

This form plugin allows you to automatically send out emails whenever visitors submit forms – whether to be notified or provide quick responses.

From the contact form builder, navigate to Settings → Notifications. It’ll display all options to customize the contact form notifications. Keep in mind that they’re enabled by default for all active contact forms.

The fields for configuring email notifications include:

• Send to email address. By default, this field is set to {admin_email}, meaning you will get email notifications from all form submissions. Modify it by editing the value or adding multiple email addresses.
• Email subject line. This field works as the email header. It can come in handy if you have multiple WordPress contact forms, as it’ll display the form’s name.

Additionally, you can set up the following fields to send a response or form confirmation message to the visitors:

• From name. This field’s default value is set to {field_id=”0”}, which uses the Name field. We recommend changing the value to your company or website name.
• From email. This field is set to the admin email of your WordPress site, but it is possible to change it.
• Reply-to email address. This field’s default value is {field_id=”1”}, which refers to the sender’s email address.
• Email message. Add and customize the email body text. It is also possible to use the HTML format and add inline CSS.

Configuring the Contact Form Confirmation Settings

It’s also possible to display a confirmation or success message for all form submissions. To do that, go to Settings → Confirmations.

Next, choose one of the following confirmation types:

• Message. It is the default confirmation type. It displays a pop-up text message on the web page where the form is embedded. Moreover, you can edit and customize the text on the Confirmation Message field.
• Show page. This confirmation type redirects visitors to a different web page after submitting a form. Make sure that you have already created the page before choosing this option.
• Go to a URL (redirect). By choosing this option, visitors will be redirected to a different page or website according to the URL provided.

Click on the Save button once you have finished configuring the notification and confirmation settings.

5. Add the WordPress Contact Form to Your Site

You can add WordPress forms to the website using the block editor, the classic editor, a shortcode, or embedding them into widgets.

There’s no need to write any code during the process, so it works for beginners and advanced WordPress users.

Using the WordPress Block Editor

The block editor offers a user-friendly, drag-and-drop editor so you can effortlessly add elements to a page or post, including custom forms.

Here are the steps for adding a contact form to a WordPress site via the block editor:

1. Access the WordPress admin area.
2. We recommend creating a dedicated page for your WordPress form. So, navigate to Pages → Add New. Name the page – for example, Contact Us – and click Publish.
3. Inside the block editor, click the Block Inserter icon on the top toolbar or type a forward slash (/) to add a block.
4. Look for the WPForms block or type wpforms in the search bar. Then, click on it to insert the block into the live editor.

5. This WordPress form plugin will ask which contact form to add. Use the Select a Form dropdown menu and click on the desired option.

6. Preview the page to ensure that the form is correct. Then, click on the Update button to save the changes.

Using a WordPress Shortcode

Another method to add a contact form is by creating a shortcode, a shortcut that allows you to embed elements on posts and pages. These shortcodes usually consist of a single line of code.

First, navigate to WP Forms → All Forms to find the shortcode of the form to include in the page or post.

Then, here is how to add a form to a WordPress post using a contact form shortcode:

1. From the WordPress dashboard, navigate to Posts → All Posts. Open the desired post using the block editor.
2. Scroll down to the section where you want to place the contact form and press the forward-slash (/) key. Then, select the Shortcode block.

3. Paste the contact form’s shortcode into the block. Alternatively, manually write it down.

4. Preview the post to ensure the shortcode works properly. Then, click Update to save the changes.
5. That’s what the post looks like after we add a contact form in WordPress using a shortcode:

Using the WordPress Classic Editor

If you have an older WordPress version, you can also use the classic editor to add a form to a page.

To add a WordPress contact form using the classic editor, follow these steps:

1. Go to Pages → All Pages. Select a page to add with a form and click Edit.
2. Inside the classic editor page, click on the Add Form button.

3. It will display the Insert Form window. Select a contact form from the dropdown menu and click Add Form.

4. Click Preview Changes to check the contact form. Then, hit the Update button to save the changes.

Adding to a WordPress Widget

Alternatively, insert a contact form into a WordPress widget. There are two ways of adding a contact form to a WordPress widget – via the Widgets page or the theme customizer.

To insert a contact form via the Widgets page, follow the steps below:

1. Navigate to Appearance → Widgets.
2. If you use the Twenty Twenty theme, there will be three active widgets – Footer #1, Footer #2, and Inactive widgets. Select Footer #1 or the theme’s corresponding widget.
3. Click the plus (+) icon to access the block inserter. Search the WPForms block and insert it.

4. Select a contact form to include in the widget.

5. Once finished, Click Update to save the changes.

If you prefer to add a WordPress contact form via the theme customizer, follow these steps:

1. From the WordPress dashboard, go to Appearance → Customize or visit the website and click on the Customize button on the top toolbar.
2. Inside the editor, head to the left side panel and click Widgets.

3. Select the desired widget area. For example, Footer #1.

4. Click on the plus (+) icon and select the WPForms block.

5. Use the dropdown menu to select a contact form.
6. Click on the Publish button to save the changes. Visit the website to check whether the contact form was successfully inserted.

Conclusion

Having a contact form on your WordPress site can help increase visitor engagement and minimize spam emails. You can also use it to improve the website’s performance and credibility by implementing feedback shared by visitors.

There are many WordPress contact form plugins available to create dynamic forms. In this article, we used WPForms, one of the best WordPress plugins, to build customized forms.

We have also provided a complete guide on how to make a contact form using this free WordPress form plugin:

1. Install and activate the free version of the WPForms plugin via the WordPress admin area.
2. Create a contact form with the WPForms form builder.
3. Customize the form.
4. Set up the contact form’s notification and confirmation settings.
5. Add the contact form to a WordPress page, post, or widget using the block editor, the classic editor, or a shortcode.

We hope this article has helped you understand how to create and add a WordPress contact form to your website.

Leave a comment below if you run into any issues, and we will get back to you soon. Good luck on your online journey!