Tuesday, August 31, 2021

Create a WordPress Contact Form

Create a WordPress Contact Form

It doesn't matter if you are running a simple blog or a proper business through your website. Providing a proper channel for communication between you and your clients or visitors benefits everyone. You can do this either via comments, social media accounts or a contact form etc. Each of them have their own advantages and disadvantages.

Contact forms are the way to go in more formal settings or if you need personal information from clients. In this post, you will learn how to create a contact form in WordPress for free. It might take a little time but the benefits make it worth the effort.

Why Do You Need a Contact Form?

Lets begin this discussion by asking another question. Isn't it simpler to just provide some email address and other related contact information on a Contact Us page somewhere on the website? Of course, we can do that but the time you save during the initial setup will be wasted multiple times over when you have to filter out all the spam.

Anyone who has managed a modestly popular website knows that the Internet is filled with spam bots. They keep scraping webpages for any information they can get to post spam. This could include posting shady links in comments or sending emails to whatever email addresses they can lay their hands on while scraping a page.

For you, this basically means getting bombarded with spam emails that can contain potentially harmful links. It could also result in lost revenue if the spam overload prevents your from reading an important email from clients.

Get the Information You Need

Your clients might not always know exactly what information they need to provide in order for you to quickly resolve their issue. When you create your own contact form, you can set it up in a way that clients or visitors who fill it up provide all the necessary information.

Show Them Additional Resources

Once the users have filled out a contact form, you can show them additional information based on their input in the contact form. This can include things like expected response times, help articles or other ways to contact you.

How to Create a WordPress Contact Form?

WordPress has a robust plugins-based ecosystem which gives you a huge variety of options when it comes to setting up a contact form. In this tutorial, we will use a free plugin to create our contact form.

Go to Plugins > Add New inside you WordPress Admin dashboard and then search for Contact Form. This will show you a bunch of plugins. Read their reviews and features to see which one would be ideal for you now and in the near future.

Contact Forms in WordPress Plugins DirectoryContact Forms in WordPress Plugins DirectoryContact Forms in WordPress Plugins Directory

For our tutorial, we will use the Forminator Plugin which allows you to create a bunch of other forms in the future if need arises. The first step is to Install and Activate the plugin.

After that, you should navigate to Forminator > Dashboard and then click on the Create button under the Forms section.

Forminator Dashboard Create FormForminator Dashboard Create FormForminator Dashboard Create Form

The plugin comes with a bunch of basic templates for common types of forms. We will just select Contact Us and then click Continue.

Forminator Contact Us FormForminator Contact Us FormForminator Contact Us Form

Specify a name for the contact form the make it easier to identify for you later, in case you decide to create a bunch of other forms.

Forminator Contact Form NameForminator Contact Form NameForminator Contact Form Name

You will see that there are some already-added fields on the next screen which include First Name, Email Address, Phone Number and Message. The asterisk beside First Name and Email Address means that they have been marked as required.

Forminator Pre-Added Contact Form FieldsForminator Pre-Added Contact Form FieldsForminator Pre-Added Contact Form Fields

You can click on the Insert Fields button to add other fields to the form. We have added a Select dropdown for choosing a department that will handle this submission and an Input field to specify the account number for easy identification in our case. Click on Settings for the Select dropdown field to make filling it out a requirement.

Forminator Select Dropdown RequiredForminator Select Dropdown RequiredForminator Select Dropdown Required

Edit the label of the of the dropdown to read Choose Department and provide a list of departments for people to select.

Forminator Select OptionsForminator Select OptionsForminator Select Options

Finally, click Apply to apply all these settings to our dropdown.

Forminator Apply SettingsForminator Apply SettingsForminator Apply Settings

You can always check what your form will look like by clicking on the Preview button before actually publishing it.

Forminator Preview and PublishForminator Preview and PublishForminator Preview and Publish

Click on the Publish button and you will see a shortcode. Place the shortcode wherever you want the contact form to appear.

Forminator Published Form ShortcodeForminator Published Form ShortcodeForminator Published Form Shortcode

For this tutorial, I have placed it on the contact us page and it looks like the image below.

Forminator Published Contact FormForminator Published Contact FormForminator Published Contact Form

The plugin also gives you to option to add a Google reCAPTCHA to the form to counter spam submissions. It is easy to integrate once you get your keys and secret from Google.

As you might have noticed the contact form itself comes with very minimal styling so that it blends in easily with the rest of the website design. There are four different styles under Appearance tab to choose from and they all provide minimal styling while giving a unique look at the same time. You can even tell the plugin to get rid of all the styling and use the CSS in the website's theme to style it.

Customizing the Form Submission Behavior

It is a good practice to give users some kind of acknowledgement that you have received their submission after they click the Send Message button. Almost all contact form plugins will have some settings that you can configure to either redirect users to some other page after a successful submission or show them a custom message.

Forminator gives you the option to customize form submission behavior by visiting Forminator > Forms from the WordPress admin dashboard. Select the form whose behavior you want to modify and then go to the Behavior tab. In our example, we simply tell the users that we appreciate their submission and will get back to them within 48 hours.

Form Submission BheaviorForm Submission BheaviorForm Submission Bheavior

Final Thoughts

Our goal in this tutorial was to show you how to create a contact form for your WordPress website with minimal effort. We began the post by explaining why you should add a contact form to your website instead of simply placing your contact information on a webpage. After that, we moved on to discuss how we can use free plugins to create a basic WordPress Contact form.

Hopefully, you should now have a basic contact form that can show you information submitted by users. Eventually, you will be able to create more complicated contact forms that give you granular control over the flow of users and information from one step to the next.

To learn more about the options for creating contact forms in WordPress, including some tips on some of the best premium contact form and best form builder WordPress plugins available, check out some of our other posts here on Envato Tuts+.


No comments:

Post a Comment