Search
Close this search box.

How To Add Contact Form In WordPress

Mastering the Art of Contact Forms in WordPress: A Step-by-Step Guide

Big Question. How people will contact you through your website?

The answer is “Contact Form”.

I assume you’ve already built your website using WordPress and it’s up and running, but you’d like to add some more features to encourage your visitors to contact you.

After all, you will love to get some lovely notes and feedback from your visitors, right?

For that reason, in this article, you will learn how to add a contact form to your WordPress website.

We will also talk about how to change the design of your form and implement spam protection. What’s more, we will examine contact forms and personal data protection.

What is a Contact Form?

A contact form is a user input form that enables users of websites or applications to enter information that can be seen by the owners of those websites or apps.

The contact form provides an immediate, convenient way for users to ask the company questions.

Importance of Contact Form

There are so many good reasons to use a contact form instead of just posting your email address directly on your website.

  • Spam Protection— If you publish your email address on your website, spammers will bombard you with unwanted emails. Spam is a nuisance. When you have a WordPress website that employs blog comments, you’ll notice it right away.
  • Organized Information — Most of the time people who get in touch with you don’t send all the information you need. With a contact form, you can specifically ask for it upfront.
  • Schedule Time — You can also use the form to schedule meetings or tell the user the next steps they should take. Like, watch a video or wait up to 24 hours to get a response, so they don’t send you multiple inquiries.

You can precisely request all the information you require by having a customized contact form page on your website.

contact form page mockup

There are lots of plugins available in WordPress, and you’ll have a lot of alternatives when it comes to choosing different contact forms.

We will, however, use Contact Form 7 in this lesson.

The plugin is available for free in the WordPress directory and has been consistently among the most popular plugins of all time.

How To Add Contact Form 7 in WordPress?

1. Go to your WordPress admin panel.

2. On the left side of your Dashboard, hover over Plugins and click on Add New.

3. Then you will see a search box on the top right corner of the page.

4. Simply type Contact Form 7 into the search box to find the plugin, then click Install Now.

5. After the installation is complete, click Activate to activate the plugin.

Once it’s activated, you can find the plugin’s functionality in the new Contact area of your WordPress dashboard.

The plugin will create a basic contact form for you automatically.

copy shortcode

You can access it by going to Contact → Contact Forms. The form is functional and you will see a code that looks like [**contact-form-7 id=”4164″ title=” contact form 1″].

Copy and paste the shortcode onto the page where you want your contact form to appear.

As soon as you publish the page, your visitors will be able to use it to contact you directly.

basic contact form 7 layout

If you want to create a form from scratch and customise it according to your website requirements then here we go.

How To Customize Contact Form 7?

Almost every WordPress plugin, including the contact form, can be customized, and it’s a simple process.

First, click the edit option as shown below to customise your contact form.

edit

You will notice that the plugin has automatically created some basic form fields like name, email, subject, and message.

basic form field

In most cases, you’ll probably want to keep these fields and maybe add a few more depending on your needs. We’ll show you how to add a telephone number field, for example.

However, I recommend that you maintain your contact form simple and orderly.

To add a telephone number field, click on the tel tag. A popup will appear immediately.

add telephone number

In the popup, there are a number of options. You can leave the Name, Default value, ID attribute, and Class attribute intact. Select the Required field option and then click on Insert Tag.

Next, add a label to your new field. Here’s what it should look like (highlighted in the image)

edit telephone field label

Here’s what’s going on there:

  • The <label> and </label> tell the plugin where the new field begins and ends.
  • tel* indicates that we’re dealing with a telephone number field.
  • tel-887 is the unique ID of the field. Warning; in your case, that number will be different – unique to your specific form and field.
  • Phone Number is just my own piece of text that I want to put next to the form field itself. This one is just an example. You can make yours whatever you like.

Save the form.

Configure Mail Delivery Settings

Now it’s time to customize what happens after anyone tries to contact you using it.

This is an important step because if the emails are not properly configured then you won’t be notified when someone fills out the form.

Or the form will not be delivered to your inbox.

To configure it, go to the mail tab and start editing as shown below.

mail delivery setting in contact form

To — The email address where the emails will be delivered. By default, Contact Form 7 uses the site admin’s email, but you can change it if you don’t want to use that one.

From — Sender of the email. By default, it is set to the name of the person using your contact form.

Subject — This is where you can customize the subject of the email message you’ll get.

Additional Headers — Space for additional message header fields. When you Reply, the default settings send your response to the person’s email address who contacted you, not to the email it came from. (i.e. your site)

Message Body — The main message of the email you will receive.

Exclude lines with blank mail tags from the output — When you check this if any of the used tags are empty, the plugin will exclude them from the message.

Use HTML content type — The message is sent in plain text by default. If you want to receive messages with HTML content, check this box.

File Attachments — If your form supports file uploads, this is where you should put the tags for those files. It can also be used to upload files to your server.

Mail (2) — An additional mail template often used as an autoresponder. Check to activate.

mail 2 setting of contact form

This can be a useful feature if you’re using the form for marketing purposes or want to confirm to the person that you’ve received their email.

Form Message Field

Next is the Messages tab. You can customize the message that your visitors will see while filling out the form.

These are error messages, success messages, or simple instructions on how to utilize the form properly.

configure form messages for contact form 7

If you have a reason to change any of them (for example, to fit the tone of your website), feel free to do so.

Customize Additional Settings

It’s not important for our purposes but you can find all the different options in the documentation.

Add Contact Form To Your Website

Now that you’ve finished setting the form, it’s time to put it on your website. First and foremost, you must save the form.

A shortcode will display on the screen after you’ve saved your form:

contact form 7 shortcode

Copy the shortcode and paste it onto the page where you’d like your contact form to appear.

Can We Add More Than One Contact Form On Our Website?

Of course, you can add more than one contact form; in fact, you may be able to add an unlimited number of contact forms.

To do so, click the “Add New” button, customize the new form and get the shortcode the same way we did before.

The screenshot below is highlighted with a red box for reference.

add multiple contact form

Where Does The Message Go, When Someone Submits Their Message Through The Contact Form?

The message will be forwarded to the email address linked to your WordPress account if you do not customise your primary form.

However, by following the steps below, you can modify the email address from your WordPress dashboard (For reference see the attached screenshot).

1. Go to the contact form

2. Locate the “Mail” option

3. Edit the email address where you want to receive the messages

mail forwarder

Implementing Spam Protection In Contact Form

When it comes to the internet and websites, spam is a popular issue.

If you leave your email address unsecured on your website, a number of automated programs will take it up and begin sending you unsolicited offers, phishing emails, and other forms of spam.

The same is true with contact forms, unfortunately. Unless you put in place safeguards to keep it from happening.

Fortunately, reCAPTCHA is included in Contact Form 7. This is a Google spam-fighting service. You’ll need an API key and Contact Form 7 to use it. The official instructions can be found here.

To include it in your form, simply utilise the reCAPTCHA tag.

Spam protection can also be provided by third-party plugins. Of course, Akismet is the most well-known, and Contact Form 7 provides thorough instructions on how to use Akismet with a contact form.

Contact Forms and GDPR

If you fall under the jurisdiction of the regulations (and most people do now), you need to pay attention to some things.

Why is that important? Because Contact forms collect personal data.

Tips to Make Your Contact Form GDPR Compliant

Here’s how to build GDPR Compliant contact forms:

1. Don’t collect data you don’t need – If there’s any data you don’t actually need, stop collecting it.

2. Disable any tracking – To be GDPR compliant, you must disable any contact forms that track cookies, user agents, and/or user IP addresses.

3. Have a privacy policy in place – A privacy policy must be shown on a website that describes what data is collected and how it is used. You should also give visitors the option of requesting that their personal information be deleted.

4. Implement HTTPS –  To keep personal data safe, this is critical for contact forms. It is now considered standard procedure. For instructions on how to use it, see our guide on HTTPS.

Full Disclosure: This website is reader-supported. If you purchase with our referral links, we may earn a commission. Thanks for supporting us.

5 Best Contact Form For WordPress Website

Aside from Contact Form 7, there are a few more WordPress plugins that may be used to create a contact form.

1. WPForm

2. Ninja Form

3. Gravity Form

4. Happy Form

5. Jetpack Form

1. WPForms (Freemium)

wpform

This plugin provides a user-friendly interface for creating forms. It has a free version as well as a premium edition with more features, add-ons, support, layouts, and other features.

Features of WPForms:

  • Drag and drop layout
  • Easily connect with common email marketing services
  • Ability to accept payments through your forms

2. Ninja Forms (Freemium)

ninjaforms

This plugin provides a user-friendly interface for creating forms.

It has a free version as well as a premium edition with more features, add-ons, support, layouts, and other features. These are some of them:

  • Easily connect with common email marketing services
  • Ability to accept payments through your forms
  • Sync forms with CRM like Salesforce

Memberships for Ninja Forms cost $49.50/year and upward.

3. Gravity Forms (Premium)

gravity form

Gravity Forms is the most often used premium plugin. It’s quite complex, with a well-designed user interface and an excellent support system.

Unlike the other plugins on this list, this one is only available as a premium option, but you get a lot of value for your money.

  • More than 30 types of form fields
  • Wide range of add-ons
  • File uploads
    The ability for user submissions to appear on the front end
  • Multi-page forms
  • Conditional logic and advanced calculations

If you are interested in Gravity Forms, their plans start at $59/year.

4. Happy Forms (Free)

Happy Form

HappyForms is a newcomer to the market. It’s simple to use and connects with the WordPress customizer, making it ideal for beginners.

Happy form has the following features:

  • Lightweight and fast
  • Completely free to use (but comes with branding)
  • Lets you build forms via drag-and-drop
  • Shows form submissions in the WordPress dashboard
  • Comes with built-in spam protection

5. Jetpack Forms (Free)

jetpack form

Jetpack is a collection of WordPress.com’s most powerful plugins. Make sure to utilize some kind of spam protection when using Jetpack forms.

Here are Jetpack Form features:

  • Quick and easy to use
  • Email alerts to let you know about form submissions
  • Make any adjustments from inside the WordPress editor
  • A great solution to create simple forms

Frequently Asked Questions on Contact Forms

The code [contact-form-7 404 “Not Found”] is a sign that the contact form specified by the shortcode couldn’t be found. Make sure you are using the correct shortcode.

Insert a form-tag into the Form tab panel field. As shown above in the guide.

You could think that learning the form-tag syntax is difficult at first, but don’t worry about it. You can use the tag-generator buttons above the entry field to help you out.

Yes, of course. Simply check the “Use mail (2)” box in the Mail tab panel and set up Mail (2) as the template for autoresponder mail.

Mail (2) is an additional mail template that works in the same way as the primary Mail template, but Mail (2) is sent only when Mail has been sent successfully.

This problem is caused by a combination of two misconfigurations. First, AJAX JavaScript is not functioning on your contact form. Due to this problem, your contact form needlessly redirects after submission.

Second, your contact form uses unavailable words in the names of input fields. This issue confuses WordPress, resulting in the 404 (“Not Found”) error.

2 thoughts on “How To Add Contact Form To WordPress Website”

  1. Thank you for this Article. I was running around the bush and landed on this awesome article. AWESOME!!

Comments are closed.

Sign up for our Newsletter

Fastcomet

Award winning hosting company for your website

Elementor

Best page builder for creating a stunning website

Astra

The most popular theme among webmasters

We use cookies for essential website functions and to better understand how you use our site, so we can create the best possible experience for you ❤️

elegantespace logo png

How To Add Contact Form To WordPress Website (Write Your Opinion)