Contact Form In WordPress

How to Add a Contact Form to WordPress

Last Updated on by Michael Brockbank

Adding a contact form in WordPress can do wonders to drive engagement. Whether you’re just blogging or run your business online, you need a way for people to get in touch. And using WordPress forms is a prime way to do this.

Of course, you want to give visitors a wide scope of ways to contact you. Everyone has their preference, and adding things like a Contact Us page is only part of the user experience.

If you prefer, here is my video on setting up a contact form in WordPress.
GreenGeeks Web Hosting

What is a Contact Form and Why Do You Need One?

A contact form gives people who don’t feel comfortable or have the time to call you directly or sit with live chat. Visitors can simply write out a quick message and hit the submit button.

This also provides a chance to stay in contact with people 24/7. Your business might have set hours throughout the day, but the contact form is always available.

In turn, it may very well increase the chances of gaining potential customers or further insights into your target audience.

WPForms
Support the blog and check out WPForms!

How to Build a Contact Us Page in WordPress

If you’ve ever seen a “contact us” page from a business, it often has addresses and phone numbers alongside a form you can fill out. Right off the bat, this information provides three ways of access.

But, you might want to skip out on the address and phone number aspects if you’re a freelancer or a blogger. However, a contact form can be instrumental in any case.

For instance, I receive a lot of activity through the form on this site. Clients, fans and more can select the topic of the message and send an email to me directly from the blog.

This is how I set it up.

Using WPForms to Add a Contact Form

WPForms Lite

In this tutorial, I’m going to demonstrate a bit of what WPForms can do to help you set up a contact form. It’s a free plugin that has a lot of useful tools.

For now, I am focusing on the “free” version of the plugin. You can upgrade if you wish to provide more functionality such as incorporating a payment system.

Install and activate “WPForms Lite,” also known as “Contact Form by WPForms.”

WPForms Lite Install

Once the plugin is activated, you will see a kind of welcome screen. Click the button to “Create Your First Form.”

Your First Form

OR

For future reference, you can also access the forms area by going to “WPForms” on the left and selecting, “Add New.”

Add New Form

Setting Up the Form in WordPress

WPForms Lite uses a drag-and-drop interface. You won’t need to worry about coding of any kind and it is easy to operate.

For this tutorial, we’re just going to use the default contact form that comes with the plugin.

Click the “Simple Contact Form” option in the middle of the screen.

Simple Contact Form

This will load up the editing screen for the contact form in WordPress.

From here, you have a variety of options. By default, the layout includes the name, email, and comment or message portions. These are all currently mandatory fields and might serve your purpose.

However, you have access to a bunch of other things you can add to the form, such as text boxes and multiple-choice questions. If you upgrade to the pro version, you can also include uploads, star ratings, and various payment fields.

For now, I’m going to create a dropdown section asking for the purpose of the message. Drag and drop the field into the form in any location you see fit.

Add New Field

Each field will have its own settings. In this case, the dropdown lets you create specific choices for your purpose.

Click the field in the contact form to edit its functionality.

Edit Form Field

Options for the field will appear to the left of the contact form in WordPress. Fill out the settings for the field. In my case, I am adding choices for the dropdown box.

Field Settings

There are two options I want you to be aware of when setting up the form. These are the “Required” checkbox and “Advanced Options.”

Required Checkbox

The Required checkbox makes it so the field is necessary before users can submit the form. Depending on the field itself, it can greatly reduce the impact of spam beyond any plugins you may already have in place.

Click the “Required” checkbox to make the field a requirement.

Required

Advanced Options

The Advanced Options area is different with each field you add. This offers more functionality and features you may want to consider. For instance, the dropdown field can have placeholder text, dynamic choices, and custom CSS.

Fill in the Advanced Options in this WordPress form builder to your liking. This is purely optional and depends greatly on what you want the form to do and look like.

In this example, I am merely adding a placeholder text to tell visitors to “Please Make a Selection.”

Advanced Options Area

Once you are done designing your contact form, click the “Save” button on the top right.

Save Form

Contact Form Settings

Next, we need to make sure the email from the contact form goes to the right address.

Click the “Settings” option on the left.

Form Settings

In the General tab, you can change the form name, description, CSS class, or even the text displayed on the submit button. By default, WPForms has Honeypot anti-spam feature enabled. This works with the most popular anti-spam plugins including Akismet.

To keep things simple in this tutorial, we’re going to leave the general settings alone for now. The default layout in this section is good for most purposes, anyway.

Notification Settings

Click the “Notifications” tab on the left.

Notifications Tab

In this section, you can control a variety of different things.

By default, WPForms will use the admin email associated with your WordPress install when sending messages to you from visitors. However, you can change the address by editing the “Send To” option.
Notification Options

Other fields to consider include:

  • Email Subject:
    This is what you’ll see in the inbox of your email client. You can change this if you want to make it more recognizable when someone submits the contact form.
  • From Name:
    The “From” name will appear as the name of your website according to WordPress. If you want something different, you can simply change the field.
  • From Email:
    This information is pulled directly from WordPress as the admin email. Again, you can choose any address that you need for your purpose.
  • Reply-to:
    If you require users to enter their email addresses, it will show automatically in the reply area of the message. It’s probably best to leave this option alone.
  • Message:
    In this section, all aspects of the form are added to the email you will receive. For now, you may want to leave this option be as well.

These are all optional changes. Personally, I changed the “Send to Email Address” portion because I have a separate address for contact inquiries. I don’t want messages going to my primary admin email account.

Once you’re done with the notifications, click the “Save” button on the top.

Save Notifications

Confirmation Settings

Next, we’ll want to change a few confirmation settings. These are things that affect the use of your WordPress form directly.

Click the “Confirmation” tab on the left.

Confirmation Settings

In this screen, you’ll only have a couple of options available depending on the type of confirmation you want to provide.

  • Message
    The message option is selected by default. From here, you can build a “thank you” email for the user. This is to let them know you will respond. WPForms Lite supports HTML message confirmations, so you can make this email visually appealing if you’d like.
  • Show Page
    If you have any pages on your WordPress website, they will show up when selecting this option. You can then send visitors to a specific page after they hit the submit button on the contact form. A good example of this is a “Thank You” page with links to your other content.
  • Go to URL
    If you want to send users to a completely different URL or perhaps content on your site that is not a page, such as a post or other custom content types, you can enter the address in the “Confirmation Redirect URL” field.

Choose the confirmation that works best with your needs and click the “Save” button.

Save Confirmations

Getting the Contact Form Shortcode

Now, it’s time to get the shortcode for the form. You will use this little piece of code to paste the contact form in WordPress. In this tutorial, I am going to add it to a page.

Click the “Embed” button on the right.

Embed Form Shortcode

This will load up a new window. Copy the shortcode from the top. Usually, I paste this into something like a Notepad document so I don’t forget it or lose the shortcode.

Copy Form Shortcode

You can also find the shortcode anytime by accessing the WPForms control panel on the left in WordPress.

Once you are done with the form, click the grey “X” in the top right corner.

Close WPForms

Adding the WPForms Shortcode to a Page or Post

It’s incredibly easy to add the shortcode for your contact form in WordPress. All you really need to do is paste the code from above into virtually any post or page on your website.

For this example, I’ll simply create a new page in WordPress and call it, “Contact Us.”

Paste the shortcode into the WordPress editor.

Paste Shortcode

NOTE: If you’re using the Gutenberg editor in WordPress 5+, you can add the contact form using the shortcode or the WPForms block.

WPForms in Gutenberg

Once you publish or update the page, you will see the contact form on the frontend of your website.

Contact Form Appearance

Adding a Contact Page to the Nav Bar

If you made a new page for contact information, you’ll need it accessible to your visitors. This means it’ll be a good idea to add it to the navigation bar of your WordPress theme.

Go to Appearance and click, “Menus.”

WordPress Menus

Now, each theme will have its own menu layout. In my case, I have the Primary menu which controls everything along the top of the website. You will have to decide to which menu you are adding the contact form.

In this example, my top navigation menu is selected by default.

Since I am adding a Contact Us page, I want the “Pages” menu items selected.

Select Menu Item Category

Select the page or post you want to add to the navigation bar and click, “Add to Menu.”

Add Page To Menu

Once it’s added to the menu, you can drag it to any location. This way, you can keep your navigation elements organized. You can even create sub-menu items by dragging things underneath other options.

The submenu item will offset slightly to the right of the “parent” above it.

Since this is the only element on my nav bar for this example site, I really don’t have anywhere to move the contact form.

Click the “Save Menu” button.

Save Menu

After saving the menu, you should see your contact form easily accessible from your website.

Contact Us Menu

Marketing Your Contact Form

After using the WordPress form builder, you might want to spend a bit of time marketing. You don’t need to go all-out as you would with a post. However, letting people know they can contact you directly can help improve engagement.

Here are a few simple ways you can get people to use the form.

Add it Into Your Email Signature

A lot of people use “no-reply” email accounts and automated messaging systems. Add the URL of the form to these email signatures.

Something like, “If you have any questions, feel free to contact me” with a link to the page would suffice.

Most email apps have a place to include an email signature. And these can offer a more professional appearance if you set them up correctly.

Adding the form gives them an option from auto-responders.

Use it as a Link on Social Profiles

Alongside the URL of your website, add the contact form link as well. This way, people have quick access to send you a direct message if they see something that catches their attention.

It merely cuts out an additional step if someone wants to send a more focused message than just replying to a Tweet or Facebook post. Especially if your social account blocks DMs.

Mention it in YouTube Videos

One thing I tend to do in YouTube videos is to let people know they can get in touch with me through the contact form. For instance, I’ll mention how they can reach out through social media or use the form on my website.

Then, I add the link to the contact page in the video’s description.

This has worked exceptionally well for me ever since I added the page to WriterSanctuary.com.

Behold, the Glory of the Contact Form in WordPress

WordPress forms of all kinds are relatively easy to set up and manage. This is especially true when using WPForms. Its drag-and-drop interface and easy-to-understand language takes a lot of the guesswork out of development.

Give your visitors a way to reach out and build your target audience or improve sales through engagement.

Michael Brockbank
Follow Me...

Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments