How To Add A Contact Form To My Wordpress Blog

Adams Waaked · Thursday, December 2, 2021

WordPress forms

This is one of the most important things you should know when creating your WP site: how to add a contact form in WordPress.

Most websites in the world make use of contact forms.

If it's not obvious why, let me give you some clues:

you can get more leads because you make it very easy for visitors to reach out to you,
there are people who don't like to phone companies and would rather choose email,
it removes the friction of having visitors send an email to the email you list as contact detail,
you can automate email sequences and better keep track of records.

The contact form is usually part of the contact page. And a contact page is essential for pretty much every website. It is clear proof the company is real, offers transparency and a real means for people to get in touch with the team members.

Now, we should not resume forms to contact forms only. Forms can also come in the format of a quiz, a survey, a payment form, sign-up forms, newsletter subscription form…You've encountered these multiple times, haven't you?

The moment you understand how one form works, you'll be able to create any other form. Maybe you have an ebook, that you want to offer in exchange for an email (like we did below). You'll need a form for that. lead generation form example

Now, in this article, I'm going to:

Show you the most popular WordPress contact form plugins,
Guide you through adding a contact form in WordPress using a plugin,
Give you web form design tips,
Show you some cool and smart forms.

Deal?

The most popular 4 WordPress form plugins

WordPress form plugin	Installs	Reviews (stars)	What we love about the plugin
Contact Form 7	5.000.000+	4	it works as a block as well (aka Guternberg-ready) it has pre-made form templates it has multiple custom fields to choose from you can import and export contacts via the Export/Import WordPress tools re-CAPTCHA can be added to prevent spam really intuitive to use works with shortcodes it has email functionalities that you can use for follow-ups
WPForms	4.000.000+	4.9	intuitive interface mobile-friendly it has 100+ pre-built form templates it works by drag and drop probably the fastest WordPress form builder forms cand be customized with custom HTML and CSS spam protection add or remove fields based on conditional logic, isn't this cool? preview forms before going live
Ninja Forms	1.000.000+	4.4	multi-page forms works by drag and drop you can use conditional logic you can export submissions as pdf, xls, or Google Sheets integrations with some of the best email tools out there (eg: Mailchimp, Campaign Monitor) SEO and mobile-friendly
Forminator	100.000+	4.9	drag and drop visual builder options to creates polls, surveys and quizzes calculation option available (maybe you want to implement an interest rate calculator on your website) lots of integrations available with email tools you can build your own integrations via developer API Forminator block available email routing options

These 4 plugins are the best out there, but beware that some of the features are free, some of them are paid. Before deciding, you can definitely take them for a spin, and see how you get along.

Let's build a WordPress contact form

In this exercise, I'm going to use the SkylineWP theme, together with the Colibri page builder. The builder is expanding the SkylineWP features, by giving it drag and drop options. Also, it gives me access to tens of pre-designed content blocks (among which "contacts us" forms as well). Now, most of the page builders and theme Customizers out there behave similarly. So don't get nervous if you're not using the same theme as I do.

The plugin that I will be installing is Forminator.

Let's get going!

Step 1 – Install and activate a contact form plugin

From the WordPress Dashboard, head over to Plugins->Add new. Search for the plugin by name, then select "Install Now", then "Activate".

How to install a form plugin in WordPress

Step 2: Open the theme's Customizer

From the WordPress Dashboard, head over to Appearance->Customize,

or

from the WordPress Dashboard, head over to "Pages". Hover over a page and select "Customize" or "Edit" (if you're using the Default WordPress Editor).

In my case, because I'm using the Colibri page builder, there is the option to "Edit in with Colibri". Opening the WordPress Customizer

Now I'm inside the Customizer.

Inside the Customizer

Step 3 – Add a contact form to your WordPress page

My current page already has a contact form block, by design. But I'm going to add one more. I can do this by adding a contact block.

I'm going to the bottom of the page and select "Add Predefined Block". A new window will show up to the left. I'm typing in "contact" to see all the contact blocks.

Adding a contact block to a WordPress page

I'm selecting a design.

My WordPress contact form

Now, you don't see any fields right now, because the form needs to be configured in Forminator. We'll do this in a minute.

But first, I want to explain what a shortcode is. Shortcodes in WordPress are tiny bits of code that allow you to do various things in WordPress such as: inserting a table, a form, etc. Don't worry about the term "code" in there, you won't have to write the code by yourself. the code is generated by a plugin. You will just have to give it some inputs. You'll understand this better in the next step.

Step 4 – Creating a WordPress form with Forminator

Then, you have to go back to the WordPress Admin dashboard. On the left-hand side menu, select "Forminator".

Forminator WordPress form plugin

A Forminator menu will show up below. Select "Forms", then head over to "Create"

Creating a WordPress contact form

Step 5 – Customizing the contact form in WordPress

You can start a form from scratch or from a template. I'm going to select "Contact Form".

Choose a form template

After clicking on "Continue", you can name the contact form.

Naming the WordPress contact form

Then, start customizing the form fields.

customizing contact form in Forminator

There are various form fields available in both the free and the pro plans. WordPress Forminator contact form fields

I'm deleting the "Phone number" field because people are usually reluctant to share their phone numbers.
Editing form fields

When selecting "Edit Field" you can:

choose whether a certain field is required or not (inside "Settings"),
choose to hide or not a specific field based on some rules (this is a cool and useful one!),
change the default labels with the ones that best correspond to your contact form fields,
change the placeholders. This means that inside the E-mail field you can give an email example, or just type something like "Insert your email here",

The moment the form fields are set, it's time to move on to "Appearance".

In here you can:

choose a design for the form,
make font and color changes,
make adjustments to spacing and borders,
add your own CSS styling.

changing the design of the contact form

When the appearance is set, it's time to move on to "Behavior". After submission form behavior

Here you should decide what happens after the form submissions: will you show a message or a new page (usually called Thank You page)?

Next, you can set up email notifications. You probably want to be notified when a new submission happens, right?

We're almost done, so bear with me :).

Now, if you're using an email provider such as Mailchimp, or Hubspot, you can integrate Forminator with it. You can also use Slack, Sheets, Trello, or other integrations.

Before publishing the form, you need to go to Settings and make privacy and spam settings.

Privacy settings and more in Forminator

And you're ready to hit "Publish". The moment you do this, you'll receive a shortcode. Remember I mentioned it earlier? Copy it. You'll paste it a bit later in the Customizer.

The form shortcode

Now, if you go back to "Forms", under "Forminator" you can see a list with all your forms and reports on the submissions.

Every form has an "Edit" option, so you can make changes afterward. From here you can also preview, publish, and delete a form. A key aspect of this "Edit" option is that it gives you the shortcode as well.

Copy contact form shortcode

Step 6 – Adding the form to the contact form in WordPress

Now, it's time to get back to the Customizer.

Let's head over to the contact form, and click on "Add shortcode here".

adding the shortcode to the contact form

On the left-hand side, paste the shortcode inside "Form shortcode".

Paste the contact form shortcode

Save and publish your page.

You're set.

It was pretty straightforward, wasn't it?

Step 7 – Check if the contact form works properly

Now, make a dummy form submission and see if it gets reported.

Web design forms – the best case practices

The anatomy of web forms is quite simple:

form fields (eg: name, email, phone, etc.),
call to action (aka a button inviting to take action: buy, download, sign up, etc),
consent.

Now, there are some optimization recommendations that will help you have higher form fill-in rates, or conversion rates, depending on your scope.

So, let's see some do's and don'ts, shall we?

add a header to your form: "Contact us",
use placeholders to make sure users understand exactly how the forms need to be filled in,
prefill some of the fields when you have some information available,
use dropdowns with autosuggest. For example, when someone starts typing a country, you can make suggestions.
use reCaptcha only when you receive lots of spam responses, else it might affect fill in rates,
only use "required" for fields that are really necessary,
make sure that the active form field is in focus,
make error messages clear: eg: "The password should contain at least a capital letter and a number",
don't mask passwords, unless really necessary. How many times weren't you pissed off that the password you typed in does not match the previous password? And there's no way to spot the error,
make sure that the call to action text and the button have proper contrast,
remove unnecessary fields, the more fields you have, the fewer the people that will be filling up your form. there are certain cases when you want more fields filled in. If you're offering something really valuable, like a guide, or another important resource, people might fill in your info if they consider that the value they get is worth their while. Also, in B2B, marketers use multiple fields to segment their target audience and to personalize the follow-ups.

Source: Growth Tribe

On the other hand, there are tools such as Clearbit that can enrich the data you have on a potential prospect. Based on the name and email, you can have access to data such as company name, position, country, etc. But, this can get pricey.

In the case of checkout forms, there's a study that shows that the average checkout display twice as many form fields as needed! and this is leading to a drop in sales. People just abandon the checkout process. And this, ladies and gents, means bye-bye client…

Web forms: some inspiration

Neil Patel

Neil Patel is one of the biggest online marketing influencers out there, so he should really nail a contact form.

The title for his form is "How can I help?". It's not as cold as "Contact us". It feels familiar and…helpful. Under the title, there is another text that clarifies the purpose of the contact form.

Neil Patel contact form

He's using a dropdown to make it easier for him to follow up on a particular topic. He does not use any other fields for segmentation.

Neil Patel contact form enquiries

Shopify. Frictionless free trial signup.

start a free trial form - shopify

AirSlate – marketing automation platform. The form has multiple fields. The intent is to segment by company size, company name, and job title. In B2B knowing these details can really help out in the sales process. It can help prioritize prospects.

Airslate contact us page

QArea – web design company

There are certain forms where an explanation of the next steps comes in handy. For the vast majority of IT outsourcing companies, there's this practice of requesting project estimates via the contact form. What's nice about QArea is that they are setting up the expectations. The process is made of 3 steps, and you can find out the details. All clear, right?

Qarea contact us form

Paperpillar – web design company

They have a contact form that pops up after clicking on a call to action (CTA). They make it clear for the person submitting the form that a reply will come in about 2 days. Also, you are invited to check the spam folder as well ✔.

Paperpillar contact form

Contact form design featured on Dribbble: my favorite design inspiration platform!

This form has a visual next to it to help it stand out. Don't neglect the visual aspect, folks!

Dribbble contact form example

Source: https://dribbble.com/shots/5299288-Daily-UI-28-Contact-us

Aaand that's a wrap!

Now, if you liked this article, and you want to learn more about how to build a WordPress website , make sure to subscribe to our Youtube channel and follow us on Twitter and Facebook!