WordPress.com vs WordPress.org: Learn how the two flavors of the most popular content management platform in the world compare Are you a novice to the WordPress Universe and have just heard that this content management system comes in two major forms? Wondering what the differences between these two editions are? Read this post to answer […]
Surely, you have seen numerous sites with contact forms, and you are likely to create one on your page. This post looks into reasons to add WordPress contact forms and the easiest ways to do it. Continue reading and create your form effortlessly.
Reasons to Add a Contact Form to a Website
Let’s look at the main reasons why adding a contact form is a good idea.
Providing Consistent Information
A contact form is an excellent way to communicate with website visitors and get the necessary information. This communication, in fact, comprises many aspects and is far more than just finding out users’ names and emails.
Various contact forms (registration, ordering, appointment, donation, etc.) cover numerous niches and purposes. Consequently, by adding a contact form with specific fields that users must fill, you ensure that people will not forget to provide all the necessary details. The person processing contact forms will also get answers structured in the same way, which is time saving.
Improving User Experience
Contact forms can add a personal touch to websites, as users know that they can ask a specific question and get a personalized answer.
Also, due to the integration with email marketing services and payment gateways, a contact form can become a way to place an order. Thus, you facilitate the process of buying for users.
Tracking Users’ Behavior
If you run advertising campaigns, you can provide a link to the page with a contact form and later analyze conversions. This helps you adjust campaigns if necessary and look for efficient leads.
Advantages of Adding a WordPress Contact Form With a Plugin
The easiest way to create a contact form in WordPress is by using a plugin.
First, contact form plugins contain templates that let you create a form faster. Also, it’s possible to start with a blank form and build it from scratch.
Second, plugins allow you to create a custom contact form in WordPress. You can choose from available fields, add the necessary options, change the order, and remove the ones you don’t need. Moreover, it can be possible to customize the look of the contact form.
Third, you will surely get the necessary information in the required format (e.g. numbers). Some fields can be compulsory, so you decide when users can submit the form. Additionally, a plugin ensures that visitors provide the data in the appropriate format.
You can choose free WordPress contact form plugins. Evaluate your needs (what type of form you require, how important customization and styling are, etc.) and pick what suits you best. Sometimes, advanced features are available only in paid plugin versions.
How to Add a Contact Form in WordPress Using Plugins
To add a contact form to your website and make it work, first choose a plugin for creating forms and then install and activate it. Afterward, follow these basic steps.
- Customize a template form or create a form from scratch.
- Adjust confirmation and notification settings.
- Insert the form on the desired page.
Now, let’s look at the most popular and handy plugins for adding contact forms. We’ll show the steps listed above and the peculiarities of working with each plugin.
Contact Form by WPForms
Contact Form by WPForms is a handy drag-and-drop form builder with more than five million installations. It works with WordPress 5.2 or higher, and its latest update has been tested up to the 5.9 version. You can use it easily even if you are a beginner. The plugin also has clear, detailed documentation providing explanations on different forms, and you can reach it effortlessly while working with forms.
The plugin has free and paid versions. It offers an astonishing variety of pre-made templates, classified into groups (business operations, customer service, education, feedback, registration, etc.). Moreover, you can view the demo of each form before customizing it.
The variety of form templates aims to cover different niches and serve various users. For instance, the Merchandise Order Form lets you sell physical or digital goods by collecting the information and receiving payments from customers. The Lesson Plan Form organizes teaching materials and helps you deliver lessons.
Many forms are available in the free version. The pro version offers numerous additional forms, such as:
- request a quote
- job application
- resume collection
- product feedback
- book review
and many more.
The pro version forms include the fields that are not accessible in the free version. We’ll talk about them a bit later.
Customizing a Form With WPForms
After installing and activating the plugin, you can create your custom contact form in WordPress. To do this, find the WPForms menu on your WordPress dashboard and click on the ‘Add New’ item.
You can also press ‘Add New’ in the main part, in the Form Overview section.
Then, you need to name your form, and you can proceed to the next step – selecting a form template or creating a blank form.
If you choose a template, you’ll have predefined fields in the form. You can edit these fields (rename or reorder) and add other fields that you need.
There are different and advanced options that vary according to the type of field.
Now, we’ll speak about the fields. With the free plugin version, you’ll get the following fields:
- paragraph and single-line text
- numbers and number slider
- multiple choice
In the pro version, you’ll also get so-called ‘Fancy Fields’ and ‘Payment Fields’. The fancy fields include many useful fields, such as phone, date and time, address, file upload, password, rating, and many more. Specific payment fields aim to collect payments, donations, and online orders.
Besides various field types, the pro version allows you to adjust smart logic in each field. Nevertheless, the free version has numerous customization possibilities. As you can see in the screenshot below, you can create a dropdown list, set your own choices, add a field description to let users know what information you want to get, and mark the field as ‘required’ if you want to make the field mandatory.
When you’ve finished adding the necessary fields, you can save the form and preview it. If you are not satisfied with how it looks, you can continue editing.
A confirmation message lets users know that they have successfully submitted the form. WPForms plugin allows you to customize confirmation types. In the free version, you can have only one message, while the pro version lets you create numerous confirmations for different cases.
The WPForms plugin features three types of confirmation:
- a message that people can read
- a website page that will open after the form is submitted
- a URL address where customers will be redirected.
Thus, using these types of confirmation, you can inform people about successful submission, show further information, or provide access to specific files via the URL.
As you can see, the friendly builder lets you edit the text easily, applying various font types.
So, choose the necessary confirmation type, personalize the message, and proceed to notification settings.
You can get an email informing you about form entry submissions when you set notifications. It’s possible to adjust the email subject line, the ‘from’ name and email, the reply-to email address, and the message.
After choosing the necessary settings, remember to save the form. Then, proceed to insert the form into the page.
Adding a Contact Form to the Page with WPForms
You can quickly add your contact form by clicking the Embed button in the upper part of the plugin’s menu.
The plugin lets you choose the embed way you prefer, so you can
- add a contact form to an existing page
- create a new page with a contact form
- embed the form manually
- use a shortcode
If you select an existing page, you will be redirected to it after clicking ‘Let’s Go!’.
Then, depending on the builder that you use, you can add a block and find the WPForms widget.
In Elementor, drag the widget into the block. Afterward, if you have created several forms, select the one you want to add.
The form will appear on the page. Then, you can preview the page with the form and update it.
The process of manual form adding is very similar. Open the page via the WordPress dashboard and edit it with the preferred builder. In Gutenberg, for instance, just like in Elementor, you’ll find the WPForms block that you can easily add to the page. In the screenshot below, you can see that we have chosen the Newsletter Subscription form that we created. The block settings on the right let you customize your form.
It’s also possible to add a contact form via a shortcode. To do this, first copy the form shortcode that you can see in the list of forms in the WPForms list.
Next, open the page where you want to insert the form and find the Shortcode widget or block.
After adding the widget to the page and entering the copied shortcode into the field, you’ll see the form on the page.
Remember to apply the shortcode and update the page.
If you need to insert a contact form into a sidebar, you should follow similar steps. You can customize the necessary sidebar via your WordPress customizer in the Appearance menu. In the OceanWP theme, open Widgets to find the sidebar.
In the list of widgets, select the necessary sidebar and expand it.
Next, choose where you want to add a block with the form.
In the list of available widgets, you can find WPForms or a shortcode (if you prefer to add a form via the code).
If you prefer WPForms, you can select the necessary form from the dropdown list.
After that, you’ll see the form block in the sidebar. Using the settings on the right, you can adjust block options.
Remember to press ‘Update’ to save the sidebar. Then, you can view the sidebar on your website pages to make sure it looks good.
It’s worth mentioning that the WPForms plugin has integrated hCaptcha and reCAPTCHA services that help you protect your website from spam. You can choose the desired protection type in the settings.
If you decide that free plugin features are not enough, you can choose from four paid plans:
- Basic (starting from $39.50/year for 1 site)
- Plus (starting from $99.50/year for 3 sites)
- Pro (starting from $199.50/year for 5 sites)
- Elite (starting from $299.50/year for unlimited sites)
There are special introductory prices in all plans, and all renewals are at full price. Evaluate your needs (the features you require) and choose an option accordingly.
Gutenberg Forms: WordPress Form Builder Plugin
WordPress Form Builder Plugin – Gutenberg Forms by WPChill is a simple tool for adding a contact form when using Gutenberg. This plugin is suitable for WordPress 5.0 or higher, and its latest version has been tested up to WordPress 5.8.4.
Similar to WPForms, Gutenberg Forms have a number of templates that let you create a contact form in WordPress with predefined fields. You’ll find the following templates:
- applications (including job applications)
- appointments (doctor, teacher appointments, client and medical consultation)
- booking (car booking)
- bug reports and complaints
- contact (emergency, help desk request, etc.)
- online quiz
- order form
The plugin lets you create forms by adding blocks directly while editing the page with the Gutenberg Editor. Let’s see some examples and the process of working with Gutenberg Forms.
Creating and Customizing the Form With Gutenberg Forms
After installing and activating the plugin, you’ll see the Gutenberg Forms item on your WordPress dashboard.
To create the form, proceed to the Forms submenu and press the ‘Add Form’ button.
Then, you can label the form and choose a standard, a multi-step form, or a template.
A standard contact form includes a name, email, and message fields and the ‘Submit’ button. If necessary, you can add other blocks (as shown in the screenshot below).
On the right, you can edit contact form block settings. Particularly, it’s possible to customize form design, selecting the font, accent, field background, and button colors.
Afterward, you can preview your form and update it.
When you create your form, you’ll see it in the list with its shortcode.
Adding a WordPress Contact Form with Gutenberg Forms
Open the page where you wish to add your form with the Gutenberg Editor. Then, use the shortcode block to insert the form into the page, as shown in the screenshot below.
Alternatively, you can find the Gutenberg Forms block by typing the name.
Then, you can add an existing form or create a new one.
We’ve already mentioned that the Gutenberg Forms plugin contains various templates that you can use. If you want to create a form based on a template, choose the ‘Insert Form’ and select the necessary template.
The templates are customizable, so you can see what your form looks like while editing the page and add or remove any fields. For instance, we’ll modify the standard donation form by deleting some fields.
When finished, you can open the page preview and make sure your form looks great.
How to Track Contact Form Conversions
Tracking form submissions is not compulsory. Yet, this can be a useful tool to understand which channels or campaigns generate leads.
Suppose you want to analyze users’ behavior and track form conversions in Google Analytics. In that case, you’ll have to create a special tag in Google Tag Manager, make sure that Google Tag Manager is connected to Google Analytics, and set up Events in Analytics.
If you create forms with WPForms and track Google Analytics with the MonsterInsights plugin, you can install the MonsterInsights Forms add-on. It doesn’t require configuring, and you’ll see the information about forms in the MonsterInsights reports found on your WordPress dashboard.
Tips and Caveats
After creating and adding the form to your website, it’s highly recommended to test it before publishing the page. Thus, you will know for sure that your form works properly and that you get email notifications.
It can happen that you don’t receive email notifications about form submissions. Spam filters of many email services can block default emails sent by WordPress. In this case, you can try using an SMTP (Simple Mail Transfer Protocol) by Gmail. Its authentication differs from the PHP in WordPress, so the chances are you’ll get your emails.
Exceptional WordPress Development Services from PSD2HTML
Still have questions about adding a contact form to your WordPress website? Ask our expert WordPress developers. With 16+ years of industry experience and thousands of successfully completed WP projects, we know everything about the world’s most popular CMS.
Reach out to us with any WordPress-related task, from building a custom theme or enhancing your current one to Core Web Vitals optimization and plugin development.