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.
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.
The most popular 4 WordPress form plugins
WordPress form plugin
What we love about the plugin
Contact Form 7
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
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
add or remove fields based on conditional logic, isn't this cool?
preview forms before going live
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
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
|WordPress form plugin||Installs||Reviews (stars)||What we love about the plugin|
|Contact Form 7||5.000.000+||4||
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”.
Step 2: Open the theme’s Customizer
From the WordPress Dashboard, head over to Appearance->Customize,
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”.
Now I’m 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.
I’m selecting a design.
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”.
A Forminator menu will show up below. Select “Forms”, then head over to “Create”
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”.
After clicking on “Continue”, you can name the contact form.
Then, start customizing the form fields.
There are various form fields available in both the free and the pro plans.
I’m deleting the “Phone number” field because people are usually reluctant to share their phone numbers.
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.
When the appearance is set, it’s time to move on to “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.
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.
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.
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”.
On the left-hand side, paste the shortcode inside “Form shortcode”.
Save and publish your page.
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),
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 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.
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.
- Shopify. Frictionless free trial signup.
- 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.
- 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?
- 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 ✔.
- 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!
Aaand that’s a wrap!