WPForms Blog

WordPress Tutorials, Tips, and Resources to Help Grow Your Business

Create a Simple Contact Form in WordPress

How to Create a Simple Contact Form in WordPress

by Lindsay Liedke on Jun 21, 2018

Do you want to add a contact form to your WordPress site? As a site owner, you need to give your readers an easy way to get in touch with you. With WPForms, we’ve made it easy to create a simple contact form in WordPress.

When you’re a new website owner, you may wonder why you should add a contact form to your website when you can just include your email on a contact page for site visitors to use.

Well, creating a contact form provides more benefits than adding your email address to your contact page:

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

Now let’s take a look at how to create a simple contact form in WordPress.

Step 1: Create a Contact Form in WordPress

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.

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. Rename your form if you want to.
  • Form Description. Give your form name a description.
  • Submit Button Text. Customize the copy on the submit button.
  • Spam Prevention. Enable the anti-spam honeypot feature to prevent spambots from submitting forms. This feature is automatically enabled on all WordPress forms. If you decide to use another form of spam prevention, just unclick this option.
  • 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. In addition, 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.

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 start, create a new post or page in WordPress and then click on the Add Form button.

Next, select your contact form in the modal popup and click Add Form.

Add Form

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

Final Contact Form

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-part form 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.

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.

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 🙂

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.