How to Create and Add a Contact Form in WordPress (2024)

Including a contact form on your WordPress site gives visitors an easy way to get in touch with you. They don’t have to leave your site, dial a phone number, copy an email address, or do anything else. Plus, it gives you an opportunity to communicate with prospects while keeping personal information private.

There are a few different ways to add a contact form to your WordPress site. In this article, we’ll show you everything you need to know about contact forms, including how to create them, embed them, and secure them.

Why having a WordPress contact form is a good idea

There are a few reasons you might want to add a contact form to your WordPress site. Here are some of the most common ones:

• It helps keep your email address private. By having a contact form, visitors can get in touch with you, but you don’t have to publicly share your email address. This can help to cut down on spam emails.
• It’s more user-friendly than an email link. A lot of people are hesitant to click on email links because they don’t want to go through the trouble of opening and using an email client. Plus, if they’re not super familiar with your site, they might not want to click unknown links for fear of being directed to less-than-friendly sites. With a contact form, they can send a message quickly and safely.
• It looks more professional than an email link. If you’re running a business website, then you’ll want to come across as professional as possible. Having a contact form can help with that.
• It offers spam protection. You can add contact form spam protection to cut down on the amount of unwanted submissions you receive.
• It aids in lead generation. If you’re looking to generate leads, you’ll want to provide several easy ways for people to reach out. A contact form is a top choice for many users, and you don’t want to leave them out of your lead generation process. You can add a form to your website and offer something in exchange for visitors’ contact information, like an eBook or white paper.

Now that we’ve gone over some of the reasons that having a contact form is a good idea, let’s take a look at how to create one.

How to create a WordPress contact form with a plugin

There are a few plugins that you can use to create a contact form, each bringing something a bit different to the table. Here are a few of the most popular options:

• Contact Form 7: This is one of the most popular contact form plugins for WordPress. It’s free and easy to use, with a simple interface that allows you to create complex forms with just a few clicks.
• Gravity Forms: Gravity Forms is a premium plugin that offers a great deal of flexibility when it comes to creating forms. It’s perfect for creating forms with multiple steps, such as order forms or surveys.
• WPForms: WPForms is another popular contact form plugin that boasts an easy-to-use drag-and-drop interface. With this tool, you can create intricate forms without having to write any code.

And while these are all solid choices, the best option for adding contact forms to WordPress is Jetpack.

Creating a contact form with Jetpack

1. Install and activate Jetpack

To begin, you’ll need to install and activate the Jetpack plugin. To do this, head over to your WordPress dashboard and navigate to Plugins → Add New.

In the search bar, type in “Jetpack” and hit enter. Click Install Now. After the plugin is installed, click Activate.

Lastly, once you’ve activated the plugin, you’ll be prompted to connect it to your WordPress.com account. If you don’t have a WordPress.com account yet, don’t worry — you can create one for free.

2. Create a contact form

Once you have Jetpack installed and activated, creating a contact form is easy. Simply navigate to Pages → Add New in your WordPress dashboard to get started.

If using the Block Editor, you can add a contact form block by clicking on the (+) symbol and selecting it from the list of available blocks. Scrolling down should take you to the section with Jetpack blocks. Or, you can search for it by name. Click Form when you find it.

From there, you can select the type of form you wish to create, including:

• Contact Form
• Newsletter Sign-up
• RSVP Form
• Registration Form
• Appointment Form
• Feedback Form

3. Configure your contact form settings

Now it’s time to configure your contact form settings. Here, you’ll be able to specify which email address you want the form submissions to be sent to, as well as what you want the subject line of the email to be.

To access these options, open the left-hand side List View and click on “Form”:

Here you can adjust the email address your contact form submissions are sent to, what the email subject line says, and what message someone sees upon submission. You can also choose to send users to a specific URL once they’ve completed their submission.

4. Choose which fields you want to include in your contact form

The default contact form appears as follows:

However, you can make adjustments to this. Jetpack includes a variety of default fields, such as name, email, website, and message.

You can do this by first selecting the form field you’d like to change and then clicking the green icon on the left.

In the above example, we selected the default name field. You can change this (or any) field to whatever you’d like, including:

• Text
• Name
• Email
• Website
• Date Picker
• Phone Number
• Message

To make a field required (or optional), click on it, then select the asterisk.

To add a field to your form, click the blue + icon at the top left, scroll down to Jetpack blocks, and select the field type. You can then change the order of the form fields by dragging them.

5. Preview your contact form

Once you’ve configured your settings, it’s a good idea to preview your contact form to make sure everything looks correct. To do this, simply click on the View button at the top of the page.

The next logical step would be to publish your form, but before we discuss that process, let’s first talk about security concerns and some of the more advanced customization options available.

How to secure and customize your contact form

Now that you know how to create a contact form, it’s important to discuss some of the security concerns you’ll need to keep in mind. By default, contact forms are not secure, which means they’re susceptible to spam submissions and other malicious attacks.

Fortunately, there are a few steps you can take to mitigate these risks:

1. Use a CAPTCHA

A CAPTCHA is a type of challenge-response test that helps to ensure that only humans can submit your contact form. Visitors will need to answer a question or solve a math problem to prove that they’re an actual person.

There are also more advanced options, called reCAPTCHA, that involve checking a box or that even work invisibly to identify robots based on common user characteristics.

Learn more about stopping contact form spam on WordPress.

2. Block spam with Akismet

Another great way to combat spam submissions is by using Akismet. Akismet is a plugin that often comes pre-installed with WordPress, and it does an impressive job of automatically filtering out spam comments and contact form submissions.

It works behind the scenes so it doesn’t add any extra work for your users. It utilizes global learning from millions of websites to identify spam based on phrases used, IP addresses, and other characteristics of known spammers. It automatically filters out spam submissions so you never see them, but you can review them manually at any time if you’d like.

To configure Akismet for your contact form, go to Plugins → Add New. Search for “Akismet,” then click Install Now → Activate.

You’ll need to configure a few more things. Follow this guide to activating Akismet to be up and running in just a couple of minutes!

3. Add a honeypot field

A honeypot is a hidden form field that helps catch spam submissions. By default, Jetpack includes a honeypot field in all of its contact forms. Some other form plugins have options to add a honeypot field as well. If the one you’re using does not, you’ll need to add one manually.

Use the CSS style “display: none !important;” to make the field hidden and tabindex=”-1″ autocomplete=”false;” to ensure the field is empty by default.

Once you’ve done this, be sure to mark the field as required so that it’s always filled out when the form is submitted.

4. Customize the look of your contact form

In addition to securing your contact form, you may also want to customize its appearance to match the overall look and feel of your website. Advanced users can do this by adding custom CSS.

But the good news is that you can make many appearance changes from within the block editor.

For instance, if you select the button on your form, you can make changes to it via the settings panel that appears on the right-hand side of the screen.

You can change the button to be filled or outlined, change the text and background colors, and adjust the border radius. Here’s an example after playing around with the settings:

Or you can set the background color to a gradient, even going so far as changing the angle of the gradient, how much of each color is shown, and whether you’d like the gradient to be linear or radial.

You can also change the background color of the entire form by first selecting the form block, then scrolling down to Color in the block’s settings. Again, choose between a solid color and a gradient.

Want to change the width of individual fields? That’s an option, too. Simply select the field you want to edit, then choose Field Width in the settings panel. In the example below, we’ve changed the Name field to only take up 50% of the form’s width.

5. Add radio buttons and checkboxes

In addition to standard text-based fields, you can add options like checkboxes and radio buttons to your form. You’ll do this by following a similar process to adding other fields.

Navigate to the form you want to edit. Press the blue + icon at the top left of the screen.

Find the section titled Jetpack and choose from the list of fields. For example, if you want a list of radio buttons, choose the Radio field. Then, drag it into your form.

You can click the + icon within the block to add the options that visitors will choose from.

6. Add conditional logic to your contact form

Another useful customization is conditional logic. This allows you to show or hide fields based on how a user fills out your form. While Jetpack doesn’t include this functionality, you can do this with a plugin like Gravity Forms.

Let’s say that you offer interior design services. You might have a form field that asks visitors whether they’re interested in a virtual or in-person consultation. If they select “in-person,” you want to find out where their home is located.

We’re assuming that you’ve already installed Gravity Forms and created your initial form. Now, you would need to start by adding an Address field. Click on the field and scroll down in the Settings panel. Expand the Conditional Logic section and toggle the box to enable it. Choose “Show” and “All” for the first two dropdowns. Then, select the “What type of consultation are you interested in?” question for the next dropdown, followed by “is” and “In-Person.”

Now, the address field will only appear when someone is interested in an in-person consultation. And feel free to play around here — there are a variety of options you can choose from.

7. Enable file uploads

You might also want site visitors to be able to upload files. Perhaps you’d like them to submit a photo of the project they want help with or a PDF version of their resume. You can also do this with the Gravity Forms plugin.

When editing your form, go to Add Fields and expand the Advanced Fields section. Then, drag and drop the File Upload field into your form. Click on it to configure settings like file size and whether or not you’ll accept multiple files at once.

Where and how to embed your contact form

There are a variety of places you can embed contact forms other than pages and posts. Let’s take a look at a few options.

1. In the sidebar

The sidebar can be a great place to add a contact form because it appears on multiple pages or posts throughout your site. If you’re using a block theme with full site editing capabilities, you’ll need to use the Editor to make changes to your sidebar.

In the WordPress dashboard, go to Appearance → Editor, then select the template you want to edit from the top dropdown. You’ll want to click Browse All Templates to see the full list of templates. For example, if you want to edit the sidebar on all of your blog posts, choose the Single Post template.

Now, click the + icon at the top left of the Editor, search for your form block, and drag it into your sidebar column. Make any necessary changes and click Save.

If you’re not using full site editing, go to Appearance → Widgets and then expand your Sidebar area. Click the + sign to add a new block and select the appropriate Form block associated with your plugin.

2. In a template file

If you’re using a block-based theme that allows for full site editing, you can also add your contact form into any templates that you create.

Let’s say you want to add a form to your blog post template. In the WordPress dashboard, navigate to Appearance → Editor and select the template you want to edit from the dropdown at the top. You might need to click Browse All Templates to see the full list.

Now, simply click the blue + icon at the top left, find your contact form block, and drag it into the template. There, you can edit the settings and make whatever changes you’d like.

3. In the footer

You might want to add your contact form to the footer so that visitors can access it no matter where they are on your site. If you’re using a block-based theme with full site editing, the steps are similar to adding a form to a template. In the WordPress dashboard, go to Appearance → Editor and select Footer from the dropdown at the top.

Click the blue + icon at the top left, find your contact form block, and drag it into the footer wherever you’d like it to go. Make any necessary changes, and save them.

If you’re not using the full site editor, you can still add a contact form to your footer. Navigate to Appearance → Widgets in the WordPress dashboard. Scroll to the Footer section —you may have multiple footer columns — click the + sign and add your contact form block wherever you’d like. Now, just edit the settings and save!

4. As an on-click popup

If you want to display your contact form as an on-click popup, there are a few WordPress plugins that can help. Let’s look at how you can do this using WPForms and the Popup Maker plugin.

Once you’ve installed and activated the plugins, simply head to WPForms → Add New in your WordPress dashboard. Then, select Use Template. Build your form and click Save.

Next, you’ll need to create a popup. Go to Popup Maker → Create Popup in your WordPress dashboard. Give it a name. Then click the Add Form button. Select the form you just made a few moments ago from the dropdown list and then click Add Form. This will insert a shortcode for the form.

Next go to Popup Settings and click the Triggers tab to configure the settings related to how and when your popup will appear. Be sure to click Add when done making your selections and customizations.

From there, go to the Targeting tab and select the conditions for where the popup will appear. This is where you’ll choose which pages, devices, etc. it’ll display on.

Continue clicking through the tabs in Popup Maker to set the popup’s appearance. Once you’re done making changes, click Publish. Be sure to navigate to the page(s) where you’ve set the popup form to appear to verify it’s working properly.

How to create a WordPress contact form without a plugin

If you don’t want to use a plugin to create your contact form, you can always do it yourself using WordPress core functionality. However, this method is more complex and requires some basic knowledge of HTML, CSS, and PHP.

You’ll also have to code all of the error handling and form field validation that comes by default when using a dedicated plugin, making what should be a simple task complex and time consuming.

If that doesn’t deter you, let’s dive in.

Note: Any changes made here should be done a) after a full WordPress website backup and b) using a child theme.

We’re now going to walk you through how to create a very basic contact form, with fields for name, email address, and message. Of course, you can add more fields if you’d like to. You’ll start by adding the HTML for the form —this specific code was created by Daext:

<form id="contact-form" action="<?php echo esc_url( get_permalink() ); ?>"method="post"><input type="hidden" name="contact_form"><div class="form-section"><label for="full-name"><?php echo esc_html( 'Full Name', 'twentytwentyone' ); ?></label><input type="text" id="full-name" name="full_name"></div><div class="form-section"><label for="email"><?php echo esc_html( 'Email', 'twentytwentyone' ); ?></label><input type="text" id="email" name="email"></div><div class="form-section"><label for="message"><?php echo esc_html( 'Message', 'twentytwentyone' ); ?></label><textarea id="message" name="message"></textarea></div><input type="submit" id="contact-form-submit" value="<?php echo esc_attr( 'Submit', 'twentytwentyone' ); ?>"></form>

Now, you’ll need to sanitize the data from your contact form, which means cleaning or filtering it. WordPress offers data sanitization functions to make this process easier. In this case, you’ll use the sanitize_text_field() and sanitize_texarea() functions.

Next, you’ll need to set up form validation, which validates that fields aren’t left empty when the form is submitted. You’ll also add error messages that appear if a field doesn’t pass validation. You can use the following code to do this, editing the messages if you’d like:

//Validate the dataif ( strlen( $full_name ) === 0 ) {$validation_messages[] = esc_html__( 'Please enter a valid name.', 'twentytwentyone' );}if ( strlen( $email ) === 0 or! is_email( $email ) ) {$validation_messages[] = esc_html__( 'Please enter a valid email address.', 'twentytwentyone' );}if ( strlen( $message ) === 0 ) {$validation_messages[] = esc_html__( 'Please enter a valid message.', 'twentytwentyone' );}

You’ll also need to add code to display the error messages, send an email with the form submission to the site administrator, and create a shortcode that allows you to add the form to one of your pages. You can then style the form to match your site’s design.

You can find more detailed instructions and code for all of those functions in the walkthrough from Daext.

Frequently asked questions about WordPress contact forms

Now let’s review a few of the most commonly-asked questions about creating contact forms in WordPress.

1. Do I need a plugin to create a contact form in WordPress?

There are plugins that can assist you in creating a contact form, but you may also accomplish it without one. This approach is more difficult and necessitates some fundamental HTML, CSS, and PHP knowledge.

2. How do I add a contact form to my WordPress website?

There are two methods you can use to add a contact form to your WordPress website. You can either use a plugin or do it yourself using code.

If you want to use a plugin, Jetpack is a great choice. It’s easy to use and comes with everything you need to create a powerful contact form.

3. What should I do if I’m not receiving emails from my contact form?

If you’re not receiving emails from your contact form, there are a few things you can check.

First, contact your hosting provider to see if there are any restrictions in place that could be blocking the email from being sent.

Next, check the settings of your contact form to make sure the email is being sent to the correct address.

If none of that fixes the problem, you may need to use an SMTP plugin to help validate and send your emails.

4. Can I add a contact form to my WordPress sidebar?

Yes! If you want to add a contact form to your WordPress sidebar, just insert the Jetpack Form Block into your page or post template (if using full site editing) or sidebar widget area.

5. Do I need a separate contact page on my WordPress website?

No, you don’t necessarily need a separate contact page on your WordPress website. However, you may want one so that visitors can easily find your contact form. Plus, it gives you an opportunity to include additional information about how visitors can get in touch with you.

For example, you may want to include your email address, phone number, and social media links on your contact page. This way, visitors can choose the method they’re most comfortable with.

6. Do I need a separate contact form for each page on my WordPress website?

No, you don’t need a separate contact form for each page on your WordPress website. However, this could allow you to collect more relevant data from your visitors.

For example, if you have a form on your contact page, you may want to ask visitors for their name and email address. But if you have a contact form on a support page, you may want to ask for their name, email address, and to select a type of issue they’re experiencing.

7. What is the best way to stop spam on WordPress contact forms?

There are a few things you can do to stop spam on your WordPress contact forms.

We recommend enabling Akismet. Using AI learning from millions of websites to identify common traits of spam, it works behind the scenes to stop unwanted messages before they ever reach your inbox.