Create a Simple Contact Form in WordPress

How to Create a Simple Contact Form in WordPress

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.

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.

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

Here are some quick links to make things easier on you:

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.

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.

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.

Create a Simple Contact Form

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. 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. Thanks for reading this article – I hope you found it helpful.

    I wanted to let you know about our new WordPress survey plugin that allows you to build interactive polls and surveys within minutes. You also get best-in-class reporting, so you can make data-driven decisions.

    You can get it 100% free when you purchase WPForms Pro plan.

    Get Started with WPForms Today and see why over 1 million websites choose WPForms as their preferred online form builder.

    Syed Balkhi
    CEO of WPForms

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

  2. 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! 🙂

  3. 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 🙂

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

  5. 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 🙂

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

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

  8. 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?

  9. 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?

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.