Nick Schäferhoff
Editor in Chief

How to add a contact formAs a website owner, you should definitely learn how to add a contact form to WordPress. Your website is not an anonymous entity. Most people want to know and occasionally interact with whoever is behind the content they read. Why do you think there are author profiles and blog comments?

For that reason, in this article, you will learn how to add a contact form to your WordPress website. The post will first go over the reasons why it’s a good idea and then you will get a step-by-step guide on how to include a contact form on your site via a plugin.

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 – something that has come more into focus lately. Finally, you will find a list of plugins you can use to add a contact form in WordPress.

It might sound much, but don’t worry – we will keep it simple!

Why Should You Use a Contact Form on Your WordPress Site?

Before getting into how to let’s examine why it’s necessary. There are many good reasons to use a contact form on your site instead of posting your email address directly for example.

  • Protection from email spam — Spam is a pest. You will notice it quickly when you have a WordPress website that uses blog comments. One thing spammers do is automatically scan websites for unprotected email addresses so that they can add them to their mailing lists. Contact forms keep that from happening by giving visitors a chance to get in touch without publishing your address online.
  • Ask for the right information — People who get in touch with you don’t always send all the information you need. With a contact form, you can specifically ask for it upfront. It also gives you a way to filter inquiries, for example by type. This makes your life easier and reduces a lot of back and forth.
  • Inform your clients — Conversely, contact forms can also act as the first point of information. You are able to include information for callers to let them know about the expected response time and steps they can take in advance to address their inquiry. This reduces the likelihood of multiple emails from the same impatient person.

Convinced that contact forms are useful? Then let’s get to the practical part of this tutorial.

How to Add a Contact Form in WordPress With Contact Form 7

There are many WordPress plugins out there to add a contact form to your site, both free and premium. We will talk about a few of them later in this article. For the following tutorial, we will be using Contact Form 7.

The plugin is available for free in the WordPress directory and has been consistently among the most popular plugins of all time (in fact, at the time of this writing it’s in the first place). In addition to that, it’s easy to use, has a nice feature list and sensible add-ons.

That’s why we are choosing it to teach you how to add a contact form in WordPress.

Step 1. Install Contact Form 7 Plugin

Installing Contact Form 7 is as easy as any other WordPress plugin. Simply log into your site, go to Plugins > Add New and type its name into the search box.

install contact form 7 to add contact form in wordpress

It should appear in the first place. Click on Install Now to download it on your site. When it’s done, click Activate to start using the plugin.

Step 2. Create Your New Contact Form

After the installation, you will find a new menu item named Contact in your WordPress sidebar. Clicking it gets you to this screen.

contact form 7 main-menu

You get a number of tooltips for making your contact form better such as using spam protection. We will get to that stuff later.

More importantly, you will find a list of all contact forms on your site. It includes a sample form that you can, theoretically, use right away. Either click it to start editing or hit Add New at the top of the screen. Both will get you here:

how to add contact form to wordpress with contact form 7

It looks a bit cryptic at the beginning, but don’t worry – you will understand it soon.

In order to work, your contact form needs fields. Fields are where visitors input their name, email address or the message they want to send you, or anything else you might want them to add.

Contact Form 7 creates those with a little bit of HTML plus custom tags. Everything between <label>...</label> denotes one field of your contact form plus the text description belonging to it. The actual fields are created by what’s between the square brackets.

Does that mean that in order to create a contact form you need to learn programming languages? Fortunately, the plugin comes with tools to generate these automatically.

Step 3. Configure Your Form

At the moment, the default form we have in the back end will look like this on the page.

Contact Form Configuration
“add a contact form in WordPress” example form

It’s all standard. Let’s say that you want to add a drop-down menu to choose the purpose of getting in contact with you. That way, you are able to immediately see the messages which to give priority to.

To do so, you first need to place the cursor where you want the menu to appear in the contact form. In this case, that’s between the email address and subject.

Click on the drop-down menu in the toolbar on top. It gets you to this menu:

contact form 7 create drop-down menu

Here’s how to fill in different fields:

  • Field type — Choose whether the field is required to submit the contact form or not.
  • Name — This denotes the name used in the tag. It won’t appear for visitors but makes it easier for you to remember the purpose of the tag and also configure the email sent to your account later.
  • Options — Input the options available for visitors using the drop-down menu. Put one per line. You also have the option to allow multiple selections and use a blank item as default.
  • Id/Class attribute — In this place you can assign a CSS class or id to the field. This is very useful for custom styling. We will talk about it later.

Here’s how we filled it out:

filled in form tag generator contact form 7

When you are satisfied, click on Insert Tag to put it into the form.

add form tags for drop-down menu to contact form 7

Be aware that once you understand how the tags work, you can also create them or make changes in the text field. For example, to make the new drop-down menu a non-required field, you could simply delete the asterisk after select. The more you use the plugin, the better you understand how it works.

Now all that’s left is to add a label. That is the text which accompanies the contact form field to explain what it does. Simply copy and paste the existing code from other fields and then adjust it to your needs.

add html code to form tags in contact form 7

Step 4. Edit Email Settings

Next up, you have to configure the email sent to you from the contact form. Unsurprisingly, you do this under the Mail tab at the top.

configure Contact form 7 mail settings

You will find the fields pre-filled with similar tags as the contact form earlier. It also provides you with available field tags including any new ones you created earlier (if you have saved the form). You can use those to customize how you will receive messages from your contact form.

Here’s what each field means:

  • To — The email address to which the messages will be sent. You can usually leave this as is.
  • From — Sender of the email. By default, it is set to the name of the person using your contact form.
  • Additional Headers — Space for additional message header fields. The standard settings send your response to the email of the person contacting you, not the email it came from (i.e. your site) when you hit Reply. It’s also possible to put addressees to CC or BCC in there.
  • Message Body — The body of the email you will receive.
  • Exclude lines with blank mail-tags from 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 — By default, the message is sent in plain text. Check this box to use HTML instead.
  • File Attachments — If your form allows file uploads, the tags for these files belong here. You can also use it to attach files hosted on your server.
  • Mail (2) — An additional mail template often used as an autoresponder. Check to activate.

The standard options are pretty good. The only thing we need to change for our example is the subject line.

set up a filter in your mail program

Using the format above, you can now set up a filter in your mail program to sort messages by subject line, giving priority to business inquiries. That’s all about mail settings for now.

Step 5. Add a Form Messages

Next up is the Messages tab. You have the ability to configure the messages your visitors might encounter while using the form.

configure form messages for contact form 7

These are error messages, success messages or just hints on how to use the form correctly. We find that these are already pretty good so we usually leave everything as is. If you have a reason to change any of them (for example, to fit the tone of your website), feel free to do so.

Step 6. Customize Additional Settings

Finally, you get to the additional settings.

contact form 7 additional settings

By default, these are empty. You can do different things – from limiting the ability for only logged-in people to submit the contact form to set the form to demo mode for testing purposes. It’s not important for our purposes but you can find all the different options in the documentation.

Step 7. Add The Form To Your Website

Now that you are done configuring the form, it’s time to get it on your site. The first thing you need to do is save the form via the button of the same name.

Before you do that, you might want to add a name to the top. This will make the form more distinguishable in case you create several ones.

Once you saved your form, a shortcode will appear on the screen:

contact form 7 shortcode to add contact form to wordpress

You will use it to place the form wherever you want. The first thing you want to do is to mark and copy it. Once it’s done, go to the page where you want to place the form. For example, you might simply create a new page and name it Contact. Paste the shortcode into the WordPress editor.

contact form 7 shortcode in wordpress editor

When you now publish the page and go to the front-end:

Contact form 7 form in page

There it is. Notice the drop-down menu we created earlier. It is now part of the contact form as needed.

Simple, right? Plus, you can use the same method to place the form anywhere else.

Step 8. Include a Contact Form in a Sidebar (Optional)

There’s nothing easier than placing the contact form in a sidebar. Just go to Appearance > Widgets. Add a text widget to whatever widgetized area you want the contact form to appear and paste the shortcode.

add contact form to wordpress widget

Don’t forget to save the widget! When you now go back to the front-end of your site, there it is:

contact form in WordPress widget

You have just mastered the basics of adding a contact form in WordPress. We are not at the end yet. There’s still a bunch of things to do to further improve your forms.

Contact Forms in WordPress – Next Steps

Once you have the form on your site, the work doesn’t end. There are still some important things to take care of, e.g styling your form, protecting it from email spammers and implementing protective measures for personal data. Let’s do this in order:

Changing the Form Design

Ideally, there is no need to change the styling of your contact form. This is likely in our case because Contact Form 7 uses standard HTML code like label or input[type="text"] to create form fields.

In good WordPress themes, these are defined in the style sheet. Consequently, the contact form most likely automatically fits your site design. You could see this in the example website above. In case you still need to make adjustments, you have several options.

As mentioned, Contact Form 7 forms have standard HTML markup. You may simply change the associated CSS and thus the way the forms look. Just keep in mind that this also has consequences for other input fields on your site which share the same markup.

Additionally, every form created with Contact Form 7 comes with a plugin-specific code. You can find the code by using the developer tools in your browser.

change contact form design via css

For example, you are able to make changes to the entire form’s styling by using the .wpc7-form CSS class. Be aware that it has consequences for all forms created with Contact Form 7, but leaves other input fields on your site untouched.

If you want to get even more specific and change the styling only for particular forms, you are in luck. As you can see from the screenshot above, every Contact Form 7 form gets its own CSS id.

You can use this to target elements on a per-form basis. Additionally, it is possible to give to the elements on your forms their own CSS classes and ids.

add css class and id to contact form 7 form

With those, you are able to target them even more specifically.

In short, whatever you want to change your forms’ design, you have all the tools to do so.

Implementing Spam Protection

Spam is a big topic when it comes to the web and websites in general. If you leave your email address unprotected on your site, there are a lot of automatic programs out there that will pick them up and start sending you unsolicited offers, fishing emails and worse.

Unfortunately, the same is true for contact forms. Unless you set measures in place to prevent it, there are also programs that can send you spam via contact forms.

Fortunately, Contact Form 7 offers easy ways to prevent this. One of them is simple: include a quiz into your form that bots can not answer, like a simple equation.

contact form 7 spam protection via quiz

The quiz tag makes it possible. It is as easy to use as all other tags in Contact Form 7 and you can find additional information here.

Aside from that, there is reCAPTCHA. This is a Google service for fighting spam. You need an API key and integrate it with Contact Form 7. Find instructions here. This might have consequences for protecting personal information. More on that in the next section.

You can use the reCAPTCHA tag to add it to your form. The maker of Contact Form 7 also has a Captcha plugin called Really Simple CAPTCHA that you can use for the same purpose.

You also have the ability to use third-party plugins for spam protection. The most well-known is, of course, Akismet and Contact Form 7 offers detailed instructions on how to use the two together.

There are others, e.g Contact Form 7 Honeypot or WPBruiser. For the latter, you need a paid extension for it to work with Contact Form 7. There are also more options that you can find easily.

Important Side Note: Contact Forms and GDPR

You might be aware that there have recently been some changes to Internet privacy laws in Europe. On 25 May 2018, the General Data Protection Regulation (GDPR) came into effect.

It brought a number of changes to laws that concern the use of personal information online. It also threatens hefty fines for anyone in violation of the regulations.

Why is that important? Contact forms collect personal data. For that reason, if you fall under the jurisdiction of the regulations (and most people do now), you need to pay attention to some things.

First Things First: We Are Not a Law Office!

Below, you will find a number of tips on how to make your contact form GDPR compliant. These tips have been compiled to the best of our abilities.

However, nobody here at websitesetup.org is a lawyer nor do we play one on TV. For that reason, the below does not replace a professional law consultation and should not be seen as legal advice.

Ok, so much for the “if you get in trouble, please don’t come back and sue us” part. Let’s get to the tips!

Tips to Make Your Contact Form GDPR Compliant

Here’s how to build privacy-conscious contact forms:

  1. Don’t collect data you don’t need — Contact forms give you a choice of which fields to include. If there’s any data you don’t actually need, stop collecting it. That way, if there’s a breach, you can’t lose it.
  2. Disable any tracking — If you are using a contact form that tracks cookies, user agents and/or user IPs, you need to disable this to be GDPR compliant. Contact Form 7 seemingly does neither, so there’s nothing to do. Check your contact form of choice if you use anything else.
  3. Get absolute consent — Add a way to your form for people to consent to you collecting their data. For example, Contact Form 7 offers an acceptance box. Important: don’t set the checkbox to be enabled by default. Users have to do that themselves. Also, include a message that says what you collect and for what purpose plus a link to your privacy policy.
  4. Have a privacy policy in place — Speaking of which, under GDPR every professional website needs to display a privacy policy that explains what data they collect and how they use it. You also need to give visitors the ability to ask for their personal data and have it removed. This is a more complex topic than we can cover here. Use the link below to find more information.
  5. Implement HTTPS — Using SSL/HTTPS encrypts the data exchange between browser and server. This is important for contact forms to keep personal data safe. It is also considered common practice now. Check out our guide for how to implement it.

From everything we have read, the above should be enough for making contact forms compliant with the new law. Of course, there’s more to this topic for website owners. You can find out more here and here.

Other Great Contact Form Plugins for WordPress

Aside from Contact Form 7, there are a bunch more plugins out there to create contact forms in WordPress. Here are a few other good candidates.

Jetpack Forms (free)

jetpack forms

Jetpack is a suite of powerful plugins produced by WordPress.com (see our comparison of WordPress.org vs WordPress.com). These include a module for creating contact forms. When you switch it on, you can start inputting forms into your WordPress website right from the post and page editor.

Here are some standout 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

When you use Jetpack forms, be sure to implement some type of spam protection. we’re speaking from experience. The aforementioned WPBruiser is a free option.

HappyForms (free)

HappyForm logoHappyForms is relatively new on the market. It integrates with the WordPress Customizer, which makes getting started really easy. Aside from that, it 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

Contact Form 7 (free)

Contact Form 7

With Contact Form 7 you can manage multiple different contact forms with a basic easy to use interface. They have a premium version as well, but it is meant as a donation. The premium doesn’t really do or give anything (besides a new mouse loading animation).

  • Quick and easy to use
  • You can make adjustments inside WordPress
  • Conditional logic for contact forms

Great free option.

Ninja Forms (freemium)

Ninja Forms

This plugin lets you build forms through a user-friendly interface. It has a free version but also offers a premium edition with additional features, add-ons, support, layouts and more. These include:

  • 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 $99/year and upward.

Gravity Forms (premium)

gravity logo

Gravity Forms is probably the most popular premium solution. It is pretty advanced, has a good user interface and a great support system. Unlike other entries on this list, this plugin is premium only, but you get a lot 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.

Caldera Forms (freemium)

caldera forms

The final entry on this list also lets you build forms with a graphic interface. Aside from that, it has the following features:

  • Give visitors the possibility to submit their own posts
  • Auto-responders
  • Anti-spam features
  • Completely responsive web forms

Besides the free version, there is also a starter edition starting at $6.24/month – $74.99/year.

WordPress Contact Forms in a Nutshell

Learning to add a contact form to WordPress is something anyone who owns a website should do. It’s one of the most important ways for people to get in touch with you. A contact form makes your site look more professional, protects you from spammers, makes sure you get the information you need and acts like a doorman.

In this article, we have covered how to add a contact form to WordPress using Contact Form 7. We have gone over advanced styling and spam protection for your form. Besides that, the post covered the important topic of GDPR compliance for contact forms and tips on how to achieve it. Finally, we looked at a number of other excellent plugins you can use to add a contact form to your WordPress site.

By now, you know everything you need to add a form to your own website. We hope it will lead to great opportunities and interesting new contacts.

Do you have any questions on how to add a contact form to your site? If so, please let us know in the comments section below.

Want to ask a question or leave a comment?

Ask me anything

  • Avatar
  • Avatar
  • Avatar
  • Avatar
  • Avatar
  • +


Leave a Reply

Your email address will not be published. Required fields are marked *


  1. Avatar

    I’m interested in creating my own contact form, not using a pre-made one. The suggestion for dealing with spam is not ideal as you still have to deal with spam. I want to create code in the submit button that doesn’t send an email if the quiz field value is not correct. That way, you will not get any spam bot emails.

  2. Avatar

    This all works the emails come through as “empty email”.
    I am using ses and the public Lambda forwarder. I suspect the forwarder is dropping the content. Any ideas?


    1. Avatar

      Hey Larry, if you suspect that it is the forwarder, I would get in touch with support. They might already be familiar with that problem.

  3. Avatar

    Nice article. Wondering how to make your WordPress site more interesting? You can install the WordPress quiz plugins that inspire users to keep on visiting your site. These plugins help you to set up an interactive platform where users can communicate with each other.

  4. Avatar

    Nick, thanks a ton for publishing such a wonderful info.
    How can I get the dropdown field into the mail body as I followed your steps as per above but I don’t get user’s choice from dropdown in the email body.
    Please advice

    1. Avatar

      Hey Tejas, if I understand you correctly, you want to add a drop-down menu to the email sent to you from the form, correct? That’s unfortunately not how it works. You can only include the input from the form in the mail body, not the form fields themselves.

      1. Avatar

        Hi Nick, That’s correct.
        In that case, how can I know what choice customer has made?
        I have created the dropdown mfield but I am not able to know what choice customer is making.
        Appreciate if you can advice how to fix it.

        1. Avatar

          Oh, that is actually described in the post above. You need to input the shortcode for the drop-down menu somewhere in the email. Check where it says [contactpurpose] in the tutorial on top.

  5. Avatar
    Geoffrey Stevenson

    Thanks so much for this tutorial. Very helpful and really well written. I’ve installed the plug-in, pasted the short code, etc. and it shows up nicely on the Contact page of my wordpress site. However, I am unable to get it to send the message, from any computer / other user. Hosting by eUKhost, website management through Plesk. I’ve added [email protected]{domain name} to the site email handling. Do you have any other suggestions please?

    1. Avatar

      Hey Geoffrey, that’s very hard to diagnose remotely without any additional information. I think your best option would be to get in touch with your host’s technical support. They should be able to help you.

  6. Avatar

    Nice how-to, but I’m scratching my head wondering why the WordPress devs can’t provide a contact form by default in WordPress. Why do users have to use a plugin? As you have indicated in your introduction, a contact form is a necessity.

    The reviews for Contact Form 7 on WordPress.org are mixed. I use WPForms Lite, but I’m trying to figure out a way to combat the spam I’m getting via my contact form. I don’t see a way to do that with WPForms Lite.

    1. Avatar

      Hey Van, glad you liked the tutorial!
      The reason why there is no built-in contact form in WordPress is because the platform’s concept is that it delivers a great core product that can be customized into whatever you need via plugins and themes. Not every single website wants or needs a contact form. So, leaving out this feature allows WordPress to be leaner.
      Plus, the needs of those who do want a contact form can be very different. Because forms are not part of the core product, you and others can choose exactly which type of contact form you want and which plugin delivers that.
      I hope this makes sense.
      Cheers and thanks for the comment!

  7. Avatar


    To begin with, WOW! Thank you very much for this amazing and easy to follow posting. How do you add a form if I used Elementor to build the website? I would like the form on a few different pages.

    Thank you again,

    ~ Lesley

  8. Avatar

    Jetpack workflow is an awesome plugin but before using it takes a look at the available modules and thinks about which ones you like. For one or two modules is better to go for individual plugins that add the same feature. Although the Jetpack plugin has a lot of different modules, none of them are the best at what they do. Going for a standalone, dedicated plugin, gives you better delivery since you’re likely to find one that’s better developed, faster, easier to use, and with more options than the Jetpack module. If you are willing to stand substandard delivery on one plugin, I suggest you try the Jetpack plugin for its frequent updates and wonderful support. Check out other Jetpack reviews for an informative decision.

    1. Avatar

      Thanks for the input, Naman! Yes, Jetpack can be a bit overloaded but I still like it. However, your proposal of going for dedicated solutions rather than the entire collection makes a lot of sense as well.

  9. Avatar

    I want to thank you very much for the extremely helpful tutorial on the Contact forms. It was at the right level for me and answered the little questions I’ve had about using the ‘wizards’ in WP.

    Do you have any that walk through setting up the spacing, boxes and margins?

    Thanks again.

    1. WebsiteSetup Editorial
      WebsiteSetup Editorial

      Hi Jeff,

      Glad you enjoyed it! I don’t have tutorial on that but if you’re having trouble with something specific or need learning resource recommendations then feel free to send me an email 🙂

  10. Avatar

    Great article! It made creating a contact form so easy. When testing the form I did get the below error message but don’t think I have anything in the form that requires javascript. Any ideas?
    *** Forbidden. Please enable JavaScript. ***

    1. WebsiteSetup Editorial
      WebsiteSetup Editorial

      Hi NC, it sounds like it might be due to a plugin conflict, particularly if you run security plugins such as Spamshield. Could also be an issue with browser extensions. Feel free to send me a message via my contact form about which other plugins you run and we can figure it out from there.