How to Add a Contact Form to Your WordPress Website or Blog

I'm Robert. Passionate Web Developer and Designer who specialises in WordPress :).
. 49 Comments

As a website owner, you should definitely learn how to add a contact form to WordPress. Your website is not some 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 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 the how, let’s examine the why. 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 up front. 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 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 on 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.

1. Installation

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.

2. Creating a 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 which 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.

3. Form Configuration

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 I 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

4. Mail 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.

5. 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. I find that these are already pretty good so I 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.

6. 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 setting 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.

7. Adding the Form to a Page

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 at 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.

8. Including a Contact Form in a Sidebar

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 about 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 the personal data safe. It is also considered common practice now. Check out our guide for how to implement it.

From everything I 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
  • Great solution to create simple forms

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

HappyForms (free)

HappyForms 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

WPForms (freemium)

WPforms

Another drag-and-drop solution that is especially beginner friendly. WPForms has a free version in the directory and you get premium features with the paid edition. These include:

  • Connect with all major email marketing services
  • Ability to split long forms into several pages
  • Conditional logic for contact forms
  • Easy to make GDPR compliant (they even have an article on that topic)

Plus, the contact form plugin is quite affordable. Plans start at $49/year.

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 forms

Gravity Forms is probably the most popular premium solution. It is pretty advanced, has a good user interface and 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
  • 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 premium edition starting at $6.24/month.

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 as 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

captcha

  • +

49 comments

Leave a Reply

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

*

  1. Does anyone know of a good contact form for uploading very large files? I am building a site which will have audio files submitted to it, and some are likely to be very long, and therefore large (up to 300mb). I am currently testing with Contact Form 7 and it’s working, technically, but so far the upload has taken an hour (and is still going!).
    Thanks

  2. Robert,
    Thanks for the information. I was trying to figure out how to set-up a Contact page on my website and this has been a great help.
    I took your advice and decided to use the Contact Form 7 plugin. You are right, this is very simple to install and it does provide some flexibility should I need to adjust how it works in the future.

    • ’m not really sure how to answer that, but I think that you need some mail service (mostly built in with your host) to be able to receive emails from contact form 7, since contact form 7 needs to send the messages to your email, and SMTP means ‘Simple Mail Transfer Protocol’, so yeah, you’ll need SMTP to get contact form 7 working.

  3. Thank you so much for this tip! I installed Contact Form 7 prior to seeing this, so I was relieved that my choice was already part of your tutorial. I haven’t launched my blog yet (site looks SO plain right now) because I’m almost a complete newbie and am trying to teach myself how to use WordPress. Seeing the contact form finally appear on my contact page was just exhilarating.

  4. Thank you very much. This has helped me so much. I almost cracked my head when I saw all those codes but this tutorial made life very easy for me 🙂

  5. Thanks for all the help this is great! Hopefully this isn’t to dumb of a question, however how do I set up the email to which I want the contact us form to be sent to? Where does it go right now ha ha?

  6. Hello! I’ve installed a contact form 7 plugin and followed the steps, however, new “contact” page with a form didn’t appear. I’ve created it under “About” page, but only “about” section is active. What could I do in this case? Thanks a lot for your time!
    Best regards,
    Monika

    • Hi Monika,

      Can you send me an email and I’ll have a look at it (without a charge). At first glance it’s hard to tell me what went wrong…

  7. Robert, we stumbled on your site and…you’re such a great educator!

    Your step to step guides on website building are superb. Thanks for offering all this valuable information free of charge!

    Great man! Great website! Great guides!

  8. I had gone through both of plugins listed above and getting different benefits from them. Contact Form 7 is on my website’s default contact page and gravity contact form is on a custom discussion page. Both of them helped me for make my website more dynamic and interactive.

  9. Hi Robert,
    Thank you so much, I found your site and it was so helpful! I have the contact form all set up but the only problem I am having is that when people type into the boxes it doesn’t show what has been written unless you highlight it. I could really use your help.

    Thank you so much
    Kathy

  10. Hi Rob – is there a way to send an acknowledgement email to user who filled out the form? User would have provided email ID as part of the form, so instead of just showing an On Submit message, I am looking to send an email thanking the user with next step from me (if any).

    Currently under settings I am able to send myself an email with the html format of the form filled. Can I use user’s email ID from the form in the To field of this email setting?

    Thanks,
    C

  11. This was very helpful. Thank you for such detail. I was trying to add contact for my Podcast webstie and this was easy to understand…

  12. Great video, simple and direct!! I have a problem though with my generator tags, to add new fields. When I click on a generator tag, nothing seems to be adding to my form. Any suggestions are more than welcome. Many thanks.

  13. Thank you so much, Robert! I’m not a computer type of person and usually need everything explained in details, however, this was really easy to follow! 🙂 Keep up the good work! Have a great day!
    Cheers!

  14. Hi Robert,

    Thanks for the helpful article. I am trying to edit an already existing contact form on my website. When I add new fields, they are automatically placed at the end of the form. I would like to manually place these new fields in the middle of form. Otherwise, my questions are scattered and unrelated, so I need to structure them. Is there a way to do this?

    • Hi, in Contact Form 7 the fields show up in the same order as the code for them when you edit the form. So if you move the code for one field in between the code of other fields, it will reflect in the final result too.

  15. These two spam choices–
    Akismet – the most popular spam protection plugin for WordPress, and Google’s reCAPTCHA – to prevent bot submissions. Are they free? I believe we used to use Jetpack for the contact from but I followed your directions. PERFECT. Easy for someone just learning. But the emails ended up in the spam folder.

  16. I’m a total website creation newbie and I was having an issue with getting my emails from my website. Your super helpful screenshots fixed the issue. Thanks for writing such a detailed post!

  17. Hi, is it okay if I build an Ecommerce website for a company that sells products such as furniture, IT products and electrical things using WordPress? I’m worrying about the security problems. Any suggestions for me?

  18. 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. ***

    • 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.

  19. 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.

    • 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 🙂