How to add a contact form to your WordPress website

In this guide, we’ll show you how to add a contact form to your WordPress website. It’s a simple process, and there are lots of options available for you to achieve this. The good news is that the process is relatively simple and in no time at all your website visitors will be able to get in touch through a contact form.

In this lesson for how to add a contact form to your WordPress website, we will be using Contact Form by WPForms – Drag & Drop Form Builder for WordPress. We’ve found it to be one of the most reliable, lightweight and easiest contact form plugins to use that comes with spam protection built-in. Let’s get started.

Why would you want a contact form on your website? Well, for starters, they offer a great channel for the public to get in touch. Sure, emails work, but in a time-limited world people rarely want to copy an email address, go to another app or tab and create an email to ask a simple question. If you’re offering a service you want the communication to be as easy as possible. While live chat can be another good solution, sometimes the time constraints limit the ability of the public to sit down and discuss things. I personally only use live chat when I can’t find a contact form or when I actually have the time to sit down for a discussion. A contact form allows for time-constrained users to be able to quickly get in touch.

How to add a contact form to your WordPress website

As we mentioned, we are installing Contact Form by WPFormsSee the plugin image below and the plugin page on WordPress

1. Step 1. Install the plugin. If you don’t know how to install a plugin please read our guide on how to install a WordPress plugin. Once you have installed the plugin it’s time to create the contact form.

2. Once the plugin is activated it will automatically take you to the following page

3. Click the orange create your first form button. It will lead to the page as seen below

4. As you can see, there are a few options available to us for creating a contact form. For ease of learning how the form builder works we will begin with the simple contact form. Simply click on the box containing simple contact form. It will load the following page which does look scary, but it’s easy to use

5. As you can see, this form contains all the bare essentials for a contact form, and you could just add it to your website and end it here, but we need to show you how to add more fields and change the look.

On the left side as the fields and on the right side is the form. Click and drag the single line text to the form in the spot you want it to appear. As you move it around the other form fields will make way for it. Place it in the spot and a second or two later it will load the field. Well done. You added a field. But we are far from done.

6. Click on the field you just moved. This will open the field options tab where we can change the options for the field.

7. Begin by changing the name. Click on label in the left side and give it a new name. it will appear on the form. In this example we called it my new field

8. Next we need a description. The description is for the end user and can be used as instructions on what to enter. Click on the description text field and give it a description. This isn’t a requirement when adding a new field.

9. If you want this field to be required select the checkbox. When a field is required the user will not be able to submit it until all fields have been filled

10. The advanced options will allow us to apply some styling. Begin by changing the field size. Select small, medium or large. You will see the size change as you select different sizes.

11. Enter a placeholder text. A placeholder text appears in the field as a hint for the user and will disappear when any tet begins to be entered. Placeholder text traditionally appears lighter than the fille din text and can be used in place of a label. Enter a description for the field. In this example, I entered John Smith to indicate it can be used as a name field

12. Next option you can hide the label which will then use the placeholder as the label for the form. Quite often the placeholder can look better than a label.

13. The next option allows us to limit the length of the entered text by character or word count. This could be useful if you need to keep things short, say for a label. Here I set it to limit to 4 words

14. The default value field will allow you to prefill the form with a value of your choosing. You may want a default colour of blue and to avoid people not entering a colour entering a default one will save you a lot of headaches. If you want to use a default value enter it here. This will appear on the form as a filled in value.

15. CSS classes. Don’t get these CSS classes confused with CSS classes that you would normally attribute. In a form the CSS classes will determine the layout. If you click the show layouts you will see how the form fields can be displayed, as shown here

16. Click on the 2 column side by side layout then click on the left side. When another form field above or below it is set to the other side the form fields will appear side by side. Go ahead and click on the email form, go to the advanced options, click on show layouts on the CSS classes, select the two column layout then the right side one. It’s important to remember that the field on top must be the left side and the bottom one must be right side. The order is top to bottom will flow left to right. Even though it won’t display on the form builder, the fields will be side by side

17. The final field is the input mask one. You may never need this option, but here’s a description of what it can be used for. Custom input masks allow you to set rules for the value a user is allowed to enter into a field. This can be useful for international phone numbers, zip codes, and more. Learn more about this option on the WP Forms website found here

18. It’s now time to save the form, but we’re not done yet. This will prevent losing any of our work. Click save in the top right of the screen

19. Next click on settings on the side menu.

20. On the general settings, which will be opened by default, you can set many of the options.

21. The general settings allow us to give the form a name and description for our own reference. Go ahead and enter a name and description

22. The next option is for a custom CSS class. This will place the custom class as a wrapper around the form and allow you to use your own styling. You don’t have to use this, and most beginners won’t. I will give it a unique name as an example

23. If you want to change the default wording of the button you can do that too. Simply delete Submit and call it something else.

24. You can also change the sending text to something else. Delete what is there and add something else

25. Similar to the form wrapper you can give the submit button its own CSS class so you can apply your own styles to it.

26. The final three options are for more advanced users.

  • Enable anti-spam honeypot. A honeypot is a field added to the form that the users can’t see due to CSS or JavaScript (which hides the field), but bots do see. Bots will fill these fields in and because they filled the field in they will wind up in a black hole. These honeypots can be useful as they are less intrusive for users and only catch bots
  • Enable dynamic fields population allows you to prefill some form fields with parameters from the URL. This is quite advanced and best described in detail here
  • Enable AJAX form submission basically means the page doesn’t need to reload to send the form. this can result in a faster form submission for the user, but if something goes wrong the user may never know

27. Click the notifications tab. In this tab we will configure where the email notifications will go when a user completes a contact form. You will see a page similar to below.

28. Send To Email Address. This is the address that the contact form will be sent to. This is typically the administrator, editor or anyone else who needs to see the email. If you click the smart tag option it will open a field showing tags which will auto insert. You can also manually enter an email address such as your personal email account here. Simply separate the email addresses with a comma

29. Email Subject. This will be the subject line of the email you receive. Once again it has smart tags that you can use or you can set your own message. You can also combine smart tags with your own words. In the example below I created a subject that will say new message from (name) with (field-id-3) which is the field we created. If the field we created was called subject it could appear as New message from John with About my order. This gives you incredible power to personalise each contact form message. This is important as when you reply to users it will go back to them with the same subject line.

30. From Name. Once again you have access to smart tags. In this situation, it’s recommended to use the name field as it is coming from the user. Simply delete what’s there and use the name field smart tag

31. From Email. This option and the one after it can be a little confusing. The from email is the email address that is sending the email. As the email is being sent from the website it is strongly recommended to use an email address associated with the website to ensure deliverability. If you use admin_email please ensure that your email address is one that’s @yourdomain.com (replace yourdomain.com with your actual website URL). If the admin email is for gmail or Outlook you can manually enter a domain based email. Please make sure the email exists too. most hosts allow the creation of free email accounts and there are services like Zoho (free) and g Suite (google). This will improve the chances of your email being delivered and not blocked.

32. Reply-To. This is the email address that will be replied to once you receive the email. Typically you want this to be the users email address. It should be filled by default, but if it isn’t you can use a smart tag to add the field

33. Message. This is the final option in the notification tab. By default, it should include the smart tag from the message field, but you can configure it further. You can add additional smart tags and/or your own text to the field. Underneath the field is a quick tag that you can copy and paste that includes all fields. Keep in mind that when replying to the email your user can see this information is it is sent back to them, so it’s best to keep it simple and polite.

[wpforms id=”794″ title=”false” description=”false”]

34. The final step in configuring the contact form is the confirmation tab. This tab will define what happens after the user submits the form. As this is a short page we’ll run through the options all together

  •   Confirmation Type. You have three options for the success message.1. show a message. This is the default setting. When show a message is selected you can enter a message in the box below it that will appear when after submission.

2. Show page. When this is selected you can select a page from a lost of published pages below it. This option can be good for upselling a product or service.

3. Redirect to URL. When this is selected you can redirect to any URL, even a URL not on your site. An example might be a redirect to a sign up page or a product.

35. Click save. The form has been completely configured and now it’s time to add it to a page. You can click on the marketing tab and connect it to constant contact is you wish, but all other options from here on in require a paid version of WP Forms. After clicking save click embed beside it. You will see s page similar to below

36. Copy the [wpforms id=”794″ title=”false” description=”false”] shortcode. The shortcode will vary from site to site. Don’t worry if your shortcode looks different.

37. Create a new page. To learn how to create a new page visit our how to create a page in WordPress guide here

38. Fill in all the fields such as title and template. In the body of the content simply paste the shortcode. In Gutenberg blocks you can use either the shortcode block of=r the classic editor block. Click publish

39. Once published visit the page. The contact form should now be visible and working. Feel free to create a test contact form.

If you find that you aren’t receiving emails from the contact form there are a few things that you can check and try. First, double-check the sending email and make sure it matches your website. If that’s correct check your junk folder to see if it arrived but was incorrectly marked as junk. If it was you can whitelist the email, but you will probably need more measures to prevent this from happening.

One reason this can happen is due to a new website or new hosting. Email inboxes will need time to become familiar with your website and IP address to ensure nothing bad is happening. You will find that as time progresses your emails will be filtered correctly.

To help with deliverability you can also use an SMTP service. There are many great providers out there, but we prefer Sendgrid. Sendgrid has an easy integration method and also a free tier. If you are going to be sending more than 100 emails a day you will need a paid account though.

Now you know how to add a contact form to your WordPress website using WPForms. You’ll now be able to create many different forms that perform different actions on your website

Spread the love

Written by: John Cook

Author

About: As the founder of Swift Designs, WC Success Academy, Wiz Plugins and Learn Wp by Swift Designs, my goal is to empower website owners around the world to take full control of their WordPress powered websites. I've been developing websites for close to 10 years and have a deep understanding of WordPress and how it works. As an active plugin developer with several plugins in the WordPress plugin repository, this gives me a unique understanding of the inner workings of WordPress. My goal with Learn WP is to allow WordPress website owners the ability to discover the true potential WordPress has to offer in an uncomplicated and easy to understand way

Leave a Reply

Please Login to comment
  Subscribe  
Notify of