Did you ever give a thought why a contact form is important? If you have answer to this question, you will know why you need a contact form on your WordPress site. In this article, I am going to tell you the reasons why you need a contact form followed by a step-by-step guide on how to create a contact form.
So, if you are bored, you better shed that thing off, because what you are going to learn here today is going to help you in your blogging journey and creating a viable alternative income stream that everyone looks for during these unprecedented times.
Thus, without further ado, let us begin.
Why is a contact form important and why you need one?
You can get away by just putting up your email id on your website’s contact page. People can contact you easily. If so, what is the need for a contact form?
Well, there are several reasons.
#1. It Prevents Spam
Spam needs no introduction. You already know about it, and you also know that spam can be a menace. There are crawlers everywhere, crawling webpages to find contact information so that they can be spammed.
Putting up your email id on your webpage only opens a floodgate for spam hitting your inbox every now and then. If you want to avoid that, you should be using a contact form that will not display your email id.
A contact form comes with various spam protection measures like Google’s reCAPTCHA service or even an image captcha that you can use for preventing automated bots from posting. Of course, if someone is using a captcha breaker service, that is a different issue. But in general, contact forms are far safer.
#2. Necessary Information
When people contact you, you might need specific information from them. If you are throwing in an email id, the likelihood of a person sending the much-needed information in the first contact is always slim. You can get over this problem by using a contact form where different fields can be made mandatory, thereby forcing people to provide you the information you are looking for. This can save you a lot of time.
#3. Give Out Information
When you put up a contact form on your site, you can add a lot of information to the form, thereby informing people of what to expect and what not to expect. This again is a time saving tactic because only those people will contact you who have the right set of expectations.
#4. Easy Filtering
You can have different contact forms for different purposes. For instance, you may setup a contact form for those who want to sponsor a post on your website. You can have a different one for those who want to report an error on your site, and so on. With different contact forms in place, you can quickly filter the responses and take swift actions.
Okay, now that you know why a contact form is important for your website, it is time to figure out how to add a contact form in WordPress.
Let us begin.
Add Contact Form in WordPress – Step-by-Step Guide
There are two ways you can go about this thing. First, you can custom code a contact form for your website. This will require you to have coding skills, or you can hire a developer to do that for you.
Hiring a developer might not always be a feasible option. So, the best thing to do in this case is to develop it by yourself or find a work around.
If you do not have coding skills, you can settle for the next solution.
The second solution is that of using a plugin. There are many popular plugins available. In this segment, I will walk you through the most popular and the easiest plugin available today.
WPForms – Easiest Contact Form Plugin
WPForms is the easiest form plugin for WordPress. It is now widely used by many people who switched from Contact Form 7 (that once used to be the de facto form maker plugin for WordPress). One reason why WPForms became so insanely popular is that it comes with an intuitive drag-and-drop interface that is much easier to use.
So, let us go through the steps of setting up a basic contact form using WPForms.
Step 1: Install and Activate the Plugin
The plugin is freely available for download through the WordPress plugin repository. You can upgrade to get a premium version with many additional features, but the free version is more than enough for most of the sites.
To install the plugin, head over to Dashboard >> Plugins >> Add New. From there, search for WPForms and install the plugin, and then activate it.
Step 2: Create Form from Welcome Screen
After you have installed the plugin and activated it, you will see a welcome screen. This is what the screen looks like:
Notice that the welcome screen has an orange button that says, “Create Your First Form.” You can start creating your form right away by clicking on that. If you do not want to start there, you can always check the menu on the left. You can start from there:
No matter what you select, it is all the same. You have to start by creating a new form.
When you click on the create form button, you will get multiple templates to work with, which include, Blank form (that is, you build the form from scratch), Simple Contact Form (a very simple contact form that will ask for name, email, and message), a Newsletter Signup Form, and a Suggestion Form.
I usually prefer using the Blank form, and that is what I will select for this tutorial.
Step 3: Start with a Blank Form
Start by adding a form name right on the top (check the image above) and then click on the Blank Form option.
Clicking on the Blank Form will show you this screen:
You will notice that there are fields on the left and then there is blank slate on the right. Click + hold and drag any field on the left and release it on the right (blank slate). This will add the field to the form you are creating.
In the image above, I have dragged and dropped three fields – name, email, and paragraph text.
You can add fields as you wish.
You will notice the options of Fancy Fields and Payment Fields, but they are available only and only for paid users of WPForms.
Step 4: Working with Field Options
You can determine how the fields that you are adding look and behave. For this you need to work with Field Options you see on the top (highlighted with a red box in the image below).
When you click on Field Options, you will notice this screen:
See how the Name field gets auto selected (with a highlighted background color on the right) and the options for the field show up on the left.
Any changes you make on the left will immediately show up on the right. For instance, I add a description to the name field on the left and it shows up right under the name boxes on the right.
It is fairly simple, and you can toy around with the options you have there until you get the desired look & feel and functions.
To edit the next field, just click on that field on the right and the corresponding settings options will show up on the left.
Once you are done with the settings, you hit the “save” button the top to ensure that you do not lose any setting because of unexpected interruptions like loss of internet connection or loss of connection to server and so on.
Step 5: Working with Form Settings
So far what you did was play around with the form fields and its overall look and feel. Once you are done, you need to move to work around with the overall form settings using the settings menu you see on the left.
Clicking on the Settings menu item on the left will show this screen to you:
For the free version, there will be only three options available (on the left side of the screen), which are General settings, Notifications settings, and Confirmation settings.
In the General settings area you can play around with the form name and description. You can even add a CSS class if you want to change the look and feel of the form using CSS codes. You can rename the submit button if you want, and even add CSS class to the button for changing its design using CSS codes.
Once you are done with the edits, click the save button again and then move on to the Notifications segment.
This is where you can define whether you want to get notifications when someone sends an enquiry through the form or not. You can turn off the notifications completely if you want.
Turning off notifications makes sense only when you have hundreds of form submissions every day. In a scenario like that, if you keep the notifications on, you will get hundreds of emails, which might not be a desired option.
You can define the email ID where you want WPForms to send notifications to. You can define the Email subject and more. In case you are unable to figure out the optimal settings for notifications, you can leave the default options as is. They are good enough. Alternatively, you can visit this detailed guide by WPForms to learn how to customize the settings.
Unfortunately, the unpaid or free version of WP Forms will restrict you to the default settings only. The most you can change is the Email Subject and the From Name fields. Keeping admin email is the desired thing to do, but you can always change the email address and add the one you like.
Finally, you have the Confirmations settings where you can decide what happens after someone successfully submits a form.
WPForms allows you to display a thank you message or show a certain page, or even redirect to a defined URL. The default setting is to show a confirmation message with a thank you note.
This is how the confirmation settings looks like:
You can edit the message you want.
Once you are done with the settings, you can hit the save button.
Adding the Contact Form to Your Site
Now that you have completed the creation of your contact form, it is time that you add it to your website.
There are two ways you can add the contact form. First, you can add it on a separate contact page and second option is to add the contact form to your site widget.
How to Add Contact Form to a Page
You can have a separate contact page. You can add the newly created form to that page with ease. WPForm has a dedicated Gutenberg block available.
On your contact page, add a new block and search for WPForms.
Once the block shows up, click on it to add to your page. The block will allow you to add select a form from a dropdown menu.
Select the form you just created from the dropdown and then decide whether you want to show title and description or not. The options show up on the right.
Now hit the publish or update button and you are done!
Adding Contact Form to a Widget
If you want to add the contact form to your website’s sidebar or footer, you can do that using a widget. Just go to Dashboard >> Appearance >> Widgets and select WPForms. It will show you the available placement options. Click on the option you want and then select the form from the widget area.
Here I add the form in the Primary widget. You can choose to display form name and description if you want and give a title to the form.
Once you are done adding the form, click the save button and you are done!
Conclusion
As I said earlier, there are many plugins for adding contact form to your WordPress site. For instance, if you are using Jetpack, you can have a simple contact form. You can use Contact Form 7 plugin or any from the wide range of plugins available. For example, you can even use Gravity Forms, Ninja Forms, Forminator, Smart Forms and so on.
The reason why I prefer WPForms is that it is the simplest option and the most user-friendly option you will get. Their basic form templates work perfectly out-of-the-box and most of the settings options are dynamically populated by the plugin, making your life much easier.
