how-to-create-a-contact-form-in-wordpress_o

NEW! How to Create a Contact Form in WordPress (2020)

Do you want to add a contact form to your WordPress website?

As a site owner, you need to give your readers an easy way to get in touch with you. In this article, we’ll show you how to create a simple contact form in WordPress.

Why Create a Simple Contact Form in WordPress?

When you’re a new website owner, you may wonder whether to use a contact form or provide an email address on your website’s Contact Page (or in other places).

To help answer that question, here are the benefits of adding a contact form to your website:

  • Communication. Contact forms are a great way to allow your readers to quickly communicate with you.
  • Security. You keep your email safe from spammers. Since your contact form doesn’t show your email address, spammers can’t steal it.
  • Organization. With a contact form you can create specific subject lines, so people always know their emails are coming from you, and more importantly what the email is about.
  • Information. You control the information collected by adding only the fields you want site visitors to fill out on the form. This cuts down on the back and forth emails between you and a potential client.

How to Create a Contact Form in WordPress

Now let’s take a look at how to add a contact form in WordPress both by taking the WPForms Challenge and the traditional way you’ll create forms after knowing how to use WPForms.

Take the WPForms Challenge – Create a Form in Under 5 Minutes

We created WPForms with the intention of it being the easiest, most beginner friendly form builder plugin in the market. And to prove that to you, we created the WPForms Challenge. We challenge all new users of WPForms to create their first form in under 5 minutes to show them just how simple this contact form solution is.

WPForms is the best WordPress Form Builder plugin. Get it for free!

The first thing you’ll need to do is install and activate the WPForms plugin. For more details, see this step by step guide on how to install a plugin in WordPress.

Once activated, you’ll be prompted with WPForms’ setup wizard and the option to take the WPForms Challenge.

Click Start the WPForms Challenge to get started.

start the wpforms challenge

Step 1: Create Your First Form

You’ll be taken immediately to the WPForms form builder when you start the WPForms Challenge. This is where you’ll create your first form and configure all of its settings.

You’ll see in the bottom right hand corner that there is a convenient checklist that will follow you as you create your form so you know you haven’t missed any steps. It also has a timer to show you how long you’ve spent creating your form.

challenge checklist and timer

The first step in the challenge is to name your form. For our example, we’ll name our form Simple Contact Form.

name your form

Click Done to move to the next step. You’ll see in the next step that the checklist has crossed out the Name Your Form step. This shows you that you’re on the right track.

Step 2: Customize Your Form Fields

Next it’s time to select a pre-designed template or use the blank template if you prefer to build your form from scratch. Since we’re creating a contact form, we’ll select the Simple Contact Form template.

select a template

When you click on the template you want to use, you’ll be taken to the part in the form builder that lets you add or remove form fields and customize the way they look and function. This part of form creation is optional.

add form fields to form

We strive to make form building as simple and beginner friendly as possible. All of our templates have the basic form fields you’ll need without having to add or remove any fields.

That said, we also strive to pack WPForms with powerful features so you can extend your form building capabilities and customize your forms to meet your needs.

You can add additional fields to your contact form by dragging them from the left hand panel to the right hand panel.

Then, click on the field to make any changes. You can also click on a form field and drag it to rearrange the order on your contact form.

Once you’re finished customizing your form, click Done.

Step 3: Check Notification Settings

The next step in the WPForms Challenge deals with your form’s notification settings.

form notifications

Notifications are a great way to send an email whenever a contact form is submitted on your website. In fact, unless you disable this feature, whenever someone submits a contact form on your site, you’ll get a notification about it.

If you use smart tags, you can also send a notification to the site visitor when they submit a contact form, letting them know you received their form and will be in contact shortly. This assures site visitors their form has gone through properly.

For help with this step, check out our documentation on how to set up form notifications in WordPress.

Adding to this, if you want to keep branding across your emails consistent, you can check out this guide on adding a custom header to your email template.

Custom Email Header

When your form’s notifications are configured properly, click Done.

Step 4: Embed Your Simple Contact Form in a Page

The last step in the WPForms Challenge is embedding your simple contact form in a WordPress page.

WPForms is Gutenberg ready and has its very own block to help make adding forms to your website a cinch. To add a form to your WordPress page, start by clicking the Add Block button and searching for WPForms.

wpforms gutenberg block

When you click on WPForms, select your form from the dropdown menu and watch it automatically add to your WordPress page.

add contact form

You can preview your form before publishing it on your website by clicking Preview, just like you would any time you wanted to check your content before pushing it live.

When your form looks the way you want, and you’re ready to make it live on your website, finish up the WPForms Challenge by clicking Done one last time.

If you’ve completed the challenge successfully, you’ll see a congratulations message with the amount of time it took you to create your first simple contact form.

finish wpforms challenge

If you want, you can even rate WPForms and share your story with others so they can see how easy it is to create a simple contact form in WordPress.

Just don’t forget, you’ll need to click Publish for your form to go live on your site.

Note: If you’re still using the Classic Editor, adding your form to your website is still simple. Click the Add Form button in the Visual Editor, select your form from the dropdown menu, and click Add Form. Then publish your page so your form appears on your site.

How to Create a Contact Form in WordPress

These step by step instructions are for those that don’t want to take the WPForms Challenge, or have already done it and want to know how to create a simple contact form in a more traditional way.

Step 1: Create a Simple Contact Form

The first thing you’ll need to do is install and activate the WPForms plugin, the world’s best WordPress form plugin. For more details, see this step by step guide on how to install a plugin in WordPress.

Next, go to WPForms » Add New to create a new form.

On the setup screen, name your form and select the Simple Contact Form template.

simple contact form template

WPForms will create a simple contact form.

Simple Contact Form

Here, you can add additional fields to your contact form by dragging them from the left hand panel to the right hand panel.

Then, click on the field to make any changes. You can also click on a form field and drag it to rearrange the order on your contact form.

Once you’re done customizing your form, click Save.

Now we’ll take a look at how to configure your simple contact form settings.

Step 2: Configure Your General Contact Form Settings

Go to Settings » General.

General Settings

Here you can configure the following:

  • Form Name — Change the name of your form here if you’d like.
  • Form Description — Give your form a description.
  • Submit Button Text — Customize the copy on the submit button.
  • Spam Prevention — Stop contact form spam with the honeypot feature or Google reCAPTCHA. The honeypot feature is automatically enabled on all WordPress forms so if you decide to use another form of spam prevention, unclick this option.
  • AJAX Forms — Enable AJAX settings with no page reload.
  • GDPR Enhancements — You can disable the storing of entry information and user details, such as IP addresses and user agents, in an effort to comply with GDPR requirements. Check out our step-by-step instructions on how to add a GDPR agreement field to your simple contact form.

When you’re done, click Save.

Step 3: Configure Your Contact Form’s Notifications

Notifications are a great way to send an email whenever a contact form is submitted on your website.

Notifications

In fact, unless you disable this feature, whenever someone submits a contact form on your site, you’ll get a notification about the contact form sent to the WordPress admin (or whoever is in the Send To Email Address field).

If you use smart tags, you can also send a notification to the site visitor when they submit a contact form, letting them know you received their form and will be in contact shortly. This assures site visitors their form has gone through properly.

For help with this step, check out our documentation on how to set up form notifications in WordPress.

Adding to this, if you want to keep branding across your emails consistent, you can check out this guide on adding a custom header to your email template.

Custom Email Header

Step 4: Configure Your Contact Form Confirmations

Form confirmations are messages that display to site visitors once they submit a contact form on your website. They let people know that their form has been processed and offer you the chance to let them know the next steps.

WPForms has three confirmation types to choose from:

  1. Message. This is the default confirmation type in WPForms. When a site visitor submits a contact form, a simple message confirmation will appear letting them know their form was processed. Look here for some great success messages to help boost customer happiness.
  2. Show Page. This confirmation type will take site visitors to a specific web page on your site thanking them for their form submission. For help doing this, check out our tutorial on redirecting customers to a thank you page. In addition, be sure to check out our article on creating effective Thank You pages for boosting customer loyalty.
  3. Go to URL (Redirect). This option is used when you want to send site visitors to a different website.

Let’s see how to set up a simple form confirmation in WPForms so you can customize the message site visitors will see when they get in touch with you using your site’s contact form.

To start, click on the Confirmation tab in the Form Editor under Settings.

Next, select the type of confirmation type you’d like to create. For this example, we’ll select Message.

Confirmation Message

Then, customize the confirmation message to your liking, and click Save.

For help with other confirmation types, see out documentation on setting up form confirmations.

Now you’re ready to add your contact form to your website.

Step 5: Add Your Contact Form to Your Website

After you’ve created your simple contact form, you need to add it to your WordPress website.

WPForms allows you to add your forms to many locations on your website, including your blog posts, pages, and even sidebar widgets.

Let’s take a look at the most common post/page embed option.

To begin, create a new page or post in WordPress, or go to the update settings on an existing one.

After that, click inside the first block (the blank area below your page title) and click on the Add WPForms icon.

contact us page wpforms widget spot

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

The handy WPForms widget will appear inside of your block. Click on the WPForms dropdown and pick which one of the forms you’ve already created that you want to insert into your page. Select your Simple Contact Form.

add contact form to page with wpforms widget

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Then, publish your post or page so your contact form will appear on your website.

Final Contact Form

Final Thoughts

And there you have it! You now know how to create a simple contact form in WordPress.

If your website’s contact forms need multiple form fields, consider creating a multi-step form in WordPress to prevent form fatigue and encourage people to finish filling your forms out. And don’t forget to check out our multi-page form examples if you need some inspiration.

And if you really want to get more information from your contact forms, without scaring away your visitors, check out these clever web form hacks to unlock hidden customer data with the WPForms hidden field.

So, what are you waiting for? Get started with the most powerful WordPress forms plugin today.

And don’t forget, if you like this article, then please follow us on Facebook and Twitter.

Using WordPress and want to get WPForms for free?

Enter the URL to your WordPress website to install.

Comments

    1. Hi Marcia,

      Sure, you can definitely further customize the widths of fields with custom CSS. As an example, here’s the default CSS used to create a medium-sized field:

      div.wpforms-container-full .wpforms-form input.wpforms-field-medium, 
      div.wpforms-container-full .wpforms-form select.wpforms-field-medium, 
      div.wpforms-container-full .wpforms-form .wpforms-field-row.wpforms-field-medium {
          max-width: 60%;
      }
      

      To change this, you can add this CSS to your site (here’s a tutorial from WPBeginner on how to do that). Then, you can change the maximum width of 60% to any value you’d like.

      Just a word of caution, though — this CSS will apply to all WPForms on your site. If you’d like to only apply these changes to a single form, please see this tutorial (under ‘Method 2: Styling a Form Individually’).

      I hope this helps! If you have any questions, please contact our support team and we’ll be happy to assist further. Thanks! 🙂

  1. If I create a newsletter optin form, is there a way I can see a list of the people who signed up, or do I need to upgrade to pro for that?

    1. Hi Nicole,

      Sure, if you decide to upgrade to our paid version your entries will start saving to your site’s database so that you can easily view and manage entries within your site’s admin area. This functionality comes with any of our licenses.

      It’s important to note, though, that entries can only be stored after the paid plugin version is installed. Any entries collected while using the Lite version are stored only in the notification email that’s sent out.

      And in case it helps for your newsletter, we have integrations with several email marketing options:
      Constant Contact (available to everyone)
      MailChimp, GetResponse, AWeber, and Campaign Monitor (available with our Plus license level or higher)

      I hope that helps! 🙂

  2. I always recommend WPForms as this is really a great worpdress contact form plugin and I use it on all my client’s websites.

    1. Hi Ahmed,

      Your form will respond to the size of it’s container, so if you place it in a sidebar the form fields will size themselves to fit within the size of the sidebar. In case it helps, here’s our tutorial with more details on adding a form to a sidebar.

      If you’d like to make your form even smaller, this will require custom CSS. This can get a bit more tricky, but you’re welcome drop us a line in support so we can provide more specific tips.

      If you have a WPForms license, you have access to our email support, so please submit a support ticket.

      Otherwise, we provide limited complimentary support in the WPForms Lite WordPress.org support forum.

      Thanks 🙂

  3. What’s the best way to add a WPForm using Cornerstone on WordPress? I’ve tried adding it on a Content Area element – the form does appear but the text boxes are not full width (they all appear 1/4 width they should be). Text size and layout is ok.

    Many thanks!

  4. I’d like to change the color of the Contact Form fields from white to light grey to match my theme.

    Do I put some CSS into the Field Options > Advanced Options > CSS Classes?

    If so, what CSS would I use?

    1. Hi Tom,

      Great question. For all the details on how to add custom CSS to your site, I’d recommend you check out WPBeginner’s tutorial: How to Easily Add Custom CSS to Your WordPress Site.

      Here’s the specific CSS you could use:

      div.wpforms-container-full .wpforms-form input[type=date], div.wpforms-container-full .wpforms-form input[type=datetime], div.wpforms-container-full .wpforms-form input[type=datetime-local], div.wpforms-container-full .wpforms-form input[type=email], div.wpforms-container-full .wpforms-form input[type=month], div.wpforms-container-full .wpforms-form input[type=number], div.wpforms-container-full .wpforms-form input[type=password], div.wpforms-container-full .wpforms-form input[type=range], div.wpforms-container-full .wpforms-form input[type=search], div.wpforms-container-full .wpforms-form input[type=tel], div.wpforms-container-full .wpforms-form input[type=text], div.wpforms-container-full .wpforms-form input[type=time], div.wpforms-container-full .wpforms-form input[type=url], div.wpforms-container-full .wpforms-form input[type=week], div.wpforms-container-full .wpforms-form select, div.wpforms-container-full .wpforms-form textarea {
          background-color: #eee;
      }
      

      This will add a light grey background (hex value #eee) to your form fields, though you can use any hex value you’d like. And in case it helps, here’s a site I like to easily look up hex values for colors.

      For more details and snippets for styling your forms, I’d recommend checking out our beginner’s guide to form styling (this includes links out to a bunch of other helpful tutorials, as well).

      I hope this helps! 🙂

    1. Hi Jean,

      Sure, you can use WPForms to collect resort bookings. There are a few things to consider, depending on whether you’d like to integrate these bookings with a specific service, etc, but you can view a fairly basic demo that integrates with Google Calendar in our client booking example.

      In order to replicate the steps in that article, you’d need a Pro license or higher (which would provide access to our Zapier addon).

      I hope this helps! If you’d like to discuss this in more detail, please get in touch and we’d be happy to assist further 🙂

  5. Hello, I would like to center my wpform, could you suggest a CSS I can use for this purpose? The url is [url removed]
    thank you!

  6. I created a contact form for my blog using WPForm. When it was tested, I received a notification that it was not successful. What could possibly be wrong?

  7. Hi,
    I added up WP Contact Form in my Page, I want to get the Form entries and perform back end processing with the form entry as input in php code using phpstorm editor.
    Eg:
    Username

    1.How to locate the form element id “username” in wordpress files?
    2. how to invoke action for the wp_form to fireup the backend code?
    Does WP_Form support the above actions?

  8. I have not installed any kind of plugin. If I click on ADD A NEW PAGE on my wordpress.com blog there is an option to ADD A CONTACT FORM. When I click on that, the contact form appears and it seems that I can publish my page.

    What I don’t understand is why I am able to do this without having to install the plugin and go through all the steps you list in this tutorial. Am I missing something? Is the way that I have outlined above wrong? Will the contact from actually work if I use this simple method? Will I get notifications if I use this method?

    1. Hi Laverne,

      While this definitely sounds odd, I would recommend checking the Plugins page on your site to make sure nothing has been installed. If there’s nothing there, it’s a possibility this contact form could be coming from your site’s theme. Some themes include the option (or an integrated feature) to allow you to add a contact form to your site so it may not necessarily be WPForms if you know for a fact (and can see in the Plugins page of your site) that you have not installed it. Unfortunately I can’t say for sure whether or not you’d get notifications from this since we don’t know if this contact form is actually coming from WPForms at all.

      I hope this helps!

    1. Hi Mark,

      I’m afraid I don’t entirely understand your question so I apologize! Can you provide some more details about what you’re trying to do?

  9. I am using it on my website for rental requests. Some times I get call from the applicants that they submitted the online form and are still waiting for response. So I am missing some submitted forms.

    1. Hi Muhammad,

      I’m sorry but I don’t quite understand your question. Are the entries not being saved to your site at all or are you not receiving the email notifications when a form is submitted? Please note that if you’re using the free version of our plugin, WPForms Lite, entries will NOT be saved to your site.

      If you’re having problems with the email notifications, however, I’d recommend checking out our article on how to fix these issues using the WP Mail SMTP plugin.

      I hope this helps!

  10. I’ve successfully created the form and added to the website. How do I create a hotlink on other pages on my site? I’ve copied the embed link, but it doesn’t connect back to the form page of the website. Any suggestions would be great!

  11. Hello people,

    I used the form in multiple pages, eg: page1, page 2, page 3 page 4 etc … When I receive a request (coming from the form), how do I know which page it was sent from?
    I hope I explained myself, thanks and good work

    1. Hi Giovanni!
      Great question!
      You can use the {page_title} Smart tag in your notification email to see from which page this form submission was sent.
      I hope this helps.
      Have a good one 🙂

  12. Hi, nice article and a create plugin.

    I will like to customize the submit button to my taste with custom CSS. I have check your docs for that and I didn’t find it, could you pls direct me in the right direction.

    Thanks

    1. I created a contact form with Wpforms and received a mail that told me I have a new entry but cannot see the content of it. Is that normal ?
      As it’s the main interest of this widget I’m a little bit disappointed.

      Thanks in advance,

      Sandra

      1. Hi Sandra!
        With any of our paid licenses, you can see your form entries under WPForms > Entries. If you are using WPForms Lite, then entries are not stored in the database and are only available as the notification emails sent to the user and site administrator.
        I hope this helps.
        Have a good one 🙂

  13. I have created contact form added to my web page and used SendGrid to sent the mail. Test mail works fine but when it comes to contact form it does not send mail to desired email.

  14. WPForms seems perfect but I can’t get it to work.
    I don’t get any emails, neither from the form nor from WordPress in fact.

    After some research I tried to reconfigure the wordpress PHP mailer with WP Mail SMTP but it doesn’t work either for me : I correctly entered the server name, username password etc, I tried with SSL, without SSL. With the different ports 2525, 465, 587.
    I tried with all mailers (except Gmail) and with different email addresses as well.

    I also disabled the Modsecurity firewall in CPanel, and disable spam filter : The tests for sending email are always negative.

    With the WP Mail Log Plugin I get the following error: Invalid address: (setFrom). (But i have checked many times, the address is valid and password is correct).

    I contacted my host (Mochahost), they tell me that there are no blocked ports on their side, no additional firewall and that everything is ok.
    After searching for a long time for the problem on different forums, I still haven’t found a solution. If someone has an idea, thank you in advance.

    1. Hi Pierre!
      I apologize for any confusion over this issue!
      If you have a WP Mail SMTP or WPforms license, you have access to our email support, so please submit a support ticket.
      I hope this helps.
      Have a good one 🙂

  15. Hi,
    Can you help me to resolve this problem please.
    in fact when i fill the contact form, i will be redirected to the same page with / # wpcf7-f235-p6-o.
    “https://vipimmigrationcanada.org/tester-page/#wpcf7-f214911-p214912-o1”
    I have already the message that the details have been sent.
    thanks in advance
    Reda

    1. Hey Deirdre – Sorry to hear you are facing issues in getting emails. To troubleshoot the issue, you can check that your form notification settings are correct using this tutorial.

      If your notification settings are correct, the issue is likely due to incorrect server settings, and/or strict email spam protection settings that are wrongly detecting the notification emails as spam. In that case, this tutorial should help you.

      For any further help on this, please feel welcome to reach out to our support! If you have a WPForms license, you have access to our email support, so please submit a support ticket. Otherwise, we provide limited complimentary support in the WPForms Lite WordPress.org support forum.

      Thanks 🙂

  16. Hi there,
    I now have notifications set up correctly for my forms (lite version) and receive notifications when a new form is filled in. I received an email from “WPForm Summary” indicating I have had 9 entries but I didn’t previously have notifications set up properly. So, am I able to see/find these entries retrospectively? Without having to buy WPForms Pro. Or are they now just unviewable/lost?!
    Many thanks in advance

    1. Hi Flora — I’m glad to hear you got your notification emails all set up now! WPForms Lite is only able to store entry details to your notification emails, not to your site, and so unfortunately we don’t have a way to help you see past entry details. But just in case it helps, some hosting providers may keep logs of emails sent from your site. If you reach out to your site’s webhost, you could find out if they have any logs you can see.

      I’m sorry I don’t have a more ideal answer for you here. If you have any follow up questions, please know that we provide limited complimentary support to our Lite users in our WordPress.org forum. So if you post questions there, we’d be happy to help out.

  17. hello, i’ve followed all the steps to set up my simple contact form. embedded it, set notifications, but i’m not getting any emails through to me. can you advise? thank you

    1. Hey Natalie – I would suggest cross-checking if all your notification settings are correct as per this tutorial. If notification settings are correct and still you are not getting emails, it must be due to some server configuration issues. In that case, I would suggest setting up an SMTP plugin following this tutorial.

      For further help on this, I would suggest contacting the support team.

      If you have a WPForms license, you have access to our email support, so please submit a support ticket. Otherwise, we provide limited complimentary support in the WPForms Lite WordPress.org support forum.

      Thanks 🙂

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.