How to Add a Contact Form to WordPress: Beginner’s Guide

I don’t think I ever worked on a WordPress site that didn’t need a contact form… Contact forms are just a cleaner solution than displaying your email address out there in the open (ripe for every bot imaginable to scrape).

That said, though, not all contact form solutions are created equal, and some of them end up being much too complex than they need to be. With the right tool, you should be able to set up contact forms anywhere on your site in a matter of minutes.

In this post, you’ll learn how to add a contact form to WordPress in a few quick steps. You’ll also find some tips and tricks on how to make your contact forms even more useful. Let’s get to it!

How to add a contact form in WordPress

In this section, you’ll see how to add a contact form in WordPress using Otter Blocks. You can use other plugins to set up contact forms, but the process should be fairly similar. This tutorial uses Otter Blocks because it’s free, beginner-friendly, and is in active use on more than 300,000 websites. 𝒾Otter Blocks is made by Themeisle, the same team behind this blog

Step 1: Install and activate Otter Blocks

To get started, go to Plugins → Add New, search for “Otter Blocks,” then install and activate the plugin.

Otter Blocks adds a big collection of new elements to the block editor. You can use the new blocks anywhere the editor works, and it also adds several new patterns that will help you build professional-looking pages faster.

The blocks you add using the plugin come with unique settings. You can also add custom CSS to each block and configure animations for them. Once you open the Block Editor, you’ll notice the new blocks have distinctive red icons, so they’re easy to recognize:

The free version of Otter Blocks includes a Contact Form block, which is what the rest of this tutorial uses.

Step 2: Add and customize a contact form

To get started, open any page for editing and click the main “+” button to add a new block. Look for the Form block:

Then, select Contact Form:

By default, the contact form block will include name, email, and message fields. It’ll also display the error or success messages that users will see after making a submission:

You can edit the default fields using the Block settings menu in the right sidebar. For example, you can set the types of the fields, their widths, help texts, and more.

You can also add more fields by first selecting the main form block on the canvas and then clicking on Add Input Field in the sidebar:

Lastly, you can realign the fields with drag and drop or by using the up and down arrows on the main canvas:

You can set any field to Required to make it compulsory for users to fill it out before being able to make a submission. It’s a good idea to enable this option for the contact form’s core fields, so you don’t get half-empty submissions.

💡 If spam ever becomes a problem, Otter also includes a Captcha block that you can drop right inside the form. It works with Google reCAPTCHA or Cloudflare Turnstile.

Once you’re happy with the fields in the contact forms, return to the main Block settings tab. Scroll down to Form Options and select which email to submit entries to:

By default, the block will submit new queries to the administrator email, but you can change that by setting a new address in the EMAIL TO field. You can also configure a title for these contact form submissions, so you can recognize them.

Form Options hides a few more settings worth knowing about: you can add CC and BCC recipients, set a Reply-To address for the notification emails, and redirect visitors to a thank-you page after they hit submit.

The block settings also include a Submit Messages section, where you can configure the error and success messages for the contact form. These are important elements since they’re the only indicators that tell users if they need to resubmit the form:

If you want the form to match your site’s look, switch to the Style tab in the block settings. You can change the colors of the labels, fields, and submit button there, adjust the spacing and borders, and set how the button behaves on hover.

When you’re happy with the form’s setup, go ahead and save the draft or publish the page right away. Before you make the form public, though, you’ll want to test it.

Step 3: Test the form

Now that you know how to add a contact form in WordPress, you’ll want to test it. To get started, publish or preview the page that contains the contact form and fill out all the required fields:

When you’re done, click on Submit and that’s it. If the contact form works, you’ll see a success message, and you should receive a corresponding email almost instantly.

If you see a success message, but you don’t get an email, check your spam folder just in case. Every valid submission is also saved in your dashboard under Otter Blocks → Submissions, so a message is never truly lost. You might also run into the occasional error where WordPress is not able to send emails, but that is easy to troubleshoot.

Bonus: Automatically reply to submissions with AI

Otter can actually handle not only delivering user messages to you, but also responding to them automatically with AI.

The great thing here is that this doesn’t have to be a generic response, but can actually be something that already solves the user’s request and is based on your site’s knowledge base.

To use it, first, enable Reply with AI in form settings:

Next, you can edit the prompt that’s going to be responsible for generating the reply. Click on the Edit Autoresponder Message button that you see in the image above.

This is where you can add a detailed prompt that instructs AI on how to draft a response. You can also include information about your business there so that the response is educated and tries to solve the user’s problem right there and then.

For example, if you’re interested, click below to reveal the actual prompt I’ve been testing this solution with.

You're my personal agent who helps draft responses to any message I get through my website. 

Some context: I'm a writer who works on web article about technology, AI, WordPress, software. My website contact form is how people usually get in touch.

Your task is to draft a response to a contact message I get. 

I will provide you with a knowledge base about my exact service. Treat it as a source of truth for when you're drafting responses. 

<rules>
- Never quote a price, rate, turnaround.
- Never promise a ranking, traffic number, or SEO result. The offer is process and quality, not guaranteed outcomes.
- One clear next step per reply. Almost always: the content fit form, intake call, or a direct question that unblocks scoping.
- Keep it short. 80–150 words for a first reply.
- Flag, don't answer, anything involving: contracts, invoicing, NDAs, legal terms, refunds, or a complaint. 
- Use everyday words and make your text understandable to a 12th grader.
- Keep sentences brief and clear. 
- Pick common words over complex ones. Use technical terms only when needed.
- Skip overused business terms and jargon like: delve, digital age, cutting-edge, leverage, proactive, pivotal, seamless, fast-paced, game-changer, quest, resilient, thrill, unravel, embark.
- NEVER, UNDER ANY CIRCUMSTANCES USE THE WORDS "WHETHER" or "FLUFF" or "FILLER"
- Use standard punctuation.
- Don't use sentences with less than 4 words EVER.
</rules>

<response_format>
- Don't comment non what you're doing
- Deliver only the finished response.
</response_format>

<knowledge_base>
[SUMMARY OF YOUR SERVICES/OFFERING IN MARKDOWN FORMAT]
</knowledge_base>

The contact message to process:

Sent by: NAME_MAGIC_TAG
From: EMAIL_MAGIC_TAG

MESSAGE:

MESSAGE_MAGIC_TAG

When anyone sends you a message through the form, you’ll see the submission in Otter Blocks → Submissions along with the AI-generated response:

As you can see, the response is quite good. 👍

Conclusion 🤓

🦦 You can do this using Otter Blocks, which also adds a whole collection of other blocks (more than 30 of them) and patterns to the block editor. Here’s how to do it:

1. Install and activate Otter Blocks
2. Add and customize a contact form
3. Test the contact form.

And if you’d like your form to answer visitors instantly instead of just collecting messages, the AI Form Autoresponder covered above can take care of that, too.

Do you have any questions about how to add a contact form to WordPress? Let’s talk about that in the comments section below!

FREE GUIDE

4 Essential Steps to Speed Up Your WordPress Website

Follow the simple steps in our 4-part mini series and reduce your loading times by 50-80%. 🚀

Site Speed Guide - Below Post

Your Email *

Subscribe to our newsletter

Subscribe to our newsletter

FREE ACCESS

If you are human, leave this field blank.

Δ