Tutorials

How to Add a Contact Form & Page on WordPress? (Easy Guide)

  • Updated on
Add Contact Form in WordPress

Are you wondering how to add contact form in WordPress? Or do you want to learn how to add a contact page on WordPress? If yes, then, this guide is for you.

Every website needs a contact page with a contact form. Adding a contact form allows your visitors to connect and interact with your site easily.

Also, this helps your visitors to clear their doubts and queries about your services or products. This may enhance both the interaction and conversion on your site.

Besides, you’re able to collect the email addresses of your visitors via the contact form. With the collected information, you’re able to update customers about products/services, campaigns, news, etc. Hence, it helps develop strong relationships with customers.

Having said that, you might be wondering whether it’s easy to create contact forms for your WordPress site or not. So, to help you, we’ve prepared an easy guide on how to add a contact form in WordPress.

So, let’s get started!

Why Need a Contact Form and Page on Your Website?

Before getting into the steps to add the contact form, let’s discuss the reasons you need it for the site. 

  • Easy to Contact: A contact form makes it simple for visitors to reach you without searching for your email or social media.
  • Get Important Info: You can ask visitors to fill in details like name and contact, which you can’t do by just showing your email.
  • Stops Spam: A contact form protects your email from spam and keeps unwanted messages away.
  • Stay in Control: You decide what information visitors provide, making it easier than long email exchanges.
  • Keeps Things Neat: Contact forms organize messages with clear subject lines and details.
Importance of Contact Form
Importance of Contact Form

With that said, now let’s go and see how to make a contact form and contact page in WordPress.


What’s the Best Way to Add a Contact Form in WordPress?

As we’ve already known about the importance of having a contact form in WordPress. Now, we also need to figure out the best way to create a contact form on the website. So, let’s have some discussion on different ways to add contact forms. 

Generally, developers can code themselves to create a contact form on their website. It’s one of the ways of having a contact form. But not everyone who wants a website has coding skills. 

Thankfully, in WordPress, there’s no need to code! There are plenty of easy-to-use plugins that help you build contact forms super fast and super easy. Best of all, most of them are available free of cost. 

So, here are some of the best WordPress contact form plugins you can use:

1. WPForms

WPForms is a beginner-friendly WordPress form builder plugin. It allows you to create amazing forms without coding skills.

WPForms WordPress Plugin

This plugin provides you with pre-built templates of different types of forms to effortlessly start your task. Hence, you can easily create any forms such as contact forms, feedback forms, subscription forms, payment forms, etc. 

Pricing: 

You can easily download WPForms for free from WordPress.org or install it directly by searching “WPForms” in your WordPress dashboard under Plugins.

However, you can upgrade to the paid plans for extra features like 2000+ form templates, complete entry management inside WordPress, etc. The pricing plans include:

  • Basic Plan: $49.50/year, use on 1 site, unlimited forms, subscriptions, and users, features like file uploads, field validation, etc.
  • Plus Plan: $99.50/year, use on 3 sites, all Basic features plus marketing integration, form automation, and more.
  • Pro Plan: $199.50/year, use on 5 sites, all Plus features plus advanced form features, accept payments, etc.
  • Elite Plan: $299.50/year, use on unlimited sites, all Pro features plus site management, premium integrations, etc.

2. Fluent Forms

Fluent Forms is a fast and easy-to-use WordPress form builder plugin trusted by over 500,000 businesses worldwide. It allows users to create smart contact forms quickly using a drag-and-drop visual builder with over 60 customizable input fields.

Fluent Forms WordPress Plugin

Moreover, it offers various features, that include form scheduling to display forms at the right time, and mobile responsiveness. Along with email notifications to receive instant alerts when a form is submitted.

Pricing: 

Fluent Forms is a freemium plugin. Meaning, you can download the free version right from your WordPress dashboard.

However, if you wish for more features, then you can upgrade to the premium version that’s available to you at the following pricing costs:

  • Single Site License: $63/year or $279 as a one-time payment for 1 domain license.
  • Agency License: $127/year or $479 as a one-time payment for 5 domain licenses.
  • Unlimited License: $239/year or $719 as a one-time payment for unlimited domain licenses.

All the above-mentioned plans come with unlimited plugin updates, unlimited priority support, and all pro features.


3. Contact Form 7

Contact Form 7 is the most popular free WordPress contact form plugin with 10+ million active installations.

Contact Form 7 WordPress Plugin

It allows you to create and manage multiple contact forms easily. Moreover, it includes other features like CAPTCHA, integration with Akismet spam filtering, and so on.

Pricing: 

Contact Form 7 plugin is completely free to use and you can easily download from WordPress.org.


Our Recommendation – WPForms

Among the mentioned plugins, we’ve chosen WPForms for this tutorial. 

Because WPForms is the most user-friendly plugin to create any type of form. You can create form by 3 ways, whether by using a template or from scratch or by using AI. The choice is absolutely yours!

On top, it also allows you to easily insert your forms in the blog posts, pages, sidebar, widgets, footer, and many more. 

Not only that, but you can also get instant notifications while you receive the form submitted by customers.


How to Create a Contact Form in WordPress?

Here, we’re going through the step-by-step process to create a contact form on your WordPress site by using the WPForms plugin. Also, you can use any WordPress theme for your website. Here, we’ll be using the Astra theme.

So, let’s check out the steps given below:

Step 1: Install and Activate WPForms

First of all, log in to the dashboard of your WordPress website. Then go to the ‘Plugins’ menu and click on ‘Add New Plugin‘.

Search & Install WPForms Plugin
Search & Install WPForms Plugin

After that, you can see a search bar at the top-right side of your dashboard. There you need to type “WPForms” to search for the plugin for installation.

Once you’ve found the plugin, click on the ‘Install Now‘ button.

Activate WPForms Plugin
Activate WPForms Plugin

After completing the installation, you can see the ‘Activate‘ button.

New WPForms Menu In Dashboard
New WPForms Menu In Dashboard

After activating the plugin, you can see an extra menu ‘WPForms‘ in your dashboard.

Also, to explore the full potential of WPForms plugin, you can upgrade to its premium version and then install it via upload method.


Step 2: Create a Contact Form

With that done, you’ll be able to start creating your contact form easily. 

First of all, go to the ‘WPForms > All Forms’ menu and click on ‘Add New’ or ‘Create Your Form’ from your dashboard.

Go to WPForms & All Forms & Click on Create New Form
Go to WPForms & All Forms & Click on Create New Form

With that, you’ll be directed to the Setup page. You can write the name of your form before creating one. There, you can see the templates and use them to create different types of forms. Also, you can get the blank form to create from scratch. 

Glimpse of Setup Page & Name Your Form
Glimpse of Setup Page & Name Your Form

So, there are 3 methods:

  • Using a Template
  • Creating it From Scratch.
  • Generating With AI

The steps for each method are given below. Now, let’s start!

Method 1: Use a template

Here’re the steps to create a contact form using the template. 

Click on Use Template Option of Your Chosen Template
Click on Use Template Option of Your Chosen Template

After finding your suitable template, when you hover it, you can see the “Use Template‘.button. Click on it. Or before using the template, you can just click on the ‘View Demo‘ button to see how the form appears.

We’ve selected the ‘Simple Contact Form‘ template to show you a demo.

Editing Section of Simple Contact Form
Editing Section of Simple Contact Form

After clicking on the template, you’ll go to editing the form page. There, you can see the Fields section on the left side to add any fields using the “Add Fields” menu. You can see standard fields and other options of fields, which can simply be dragged to add fields in the template. 

Adding Required Fields in Form
Adding Required Fields in Form

Also, you can customize the contents of added fields as you want. For that, go to the “Field Options” menu. Then, on the ‘General’ tab, you can easily change the label, formats, descriptions, and so on. 

Configuring General Field Options
Configuring General Field Options

Likewise, you can explore the ‘Advanced’ options and configure or leave it as default.

Explore the Advanced Options & Configure or Leave it As Default
Explore the Advanced Options & Configure or Leave it As Default

Similarly, you can go to the ‘Smart Logic’ tab and enable ‘Conditional Logic’ if you want or just leave it as default.

Enable Conditional Logic Via Smart Logic
Enable Conditional Logic Via Smart Logic

Once all is done, don’t forget to click on the ‘Save’ button on the top right corner.

Click on Save Button to Save Contact Form
Click on Save Button to Save Contact Form

Method 2: Create a Form From Scratch

Similarly, to create a form from scratch, go to the “Blank Form” section. Then hover on it and click on the Create Blank Form button. 

Click on Create Blank Form Option
Click on Create Blank Form Option

Now, you’ll be directed to the editing section of the “Blank Form”. There you can see standard field options in the Fields section, using the “Add Fields” menu. 

Add Fields As Required
Add Fields As Required

Simply drag & drop the required fields to include in your form as explained in “Method 1: Use a template”. You can insert any field according to your choice. Also, edit the field’s content with the same process by going into the “Field Options”.

Once done, your form will look something as shown below.

Glimpse of Form Created From Scratch & Click on Save
Glimpse of Form Created From Scratch & Click on Save

Now, don’t forget to click on the ‘Save’ button on the top-right side. 

Method 3: Generate a Form With AI

Quite recently, WPForms has introduced this new feature where you can create form with AI.

For that, all you’ve to do is go to the setup page, then click on the ‘Generate Form’ under Generate With AI option.

Click on Generate Form Option
Click on Generate Form Option

Next, you’ll be asked to install some addons, for that just click on the ‘Yes, Install’ button to proceed.

Click on Yes Install Button to Proceed
Click on Yes Install Button to Proceed

Once done, you’ll see the page as shown below, where you can give a prompt for the kind of page that you want to create. Also, there are a few ready-made prompt.

Click on Relatable Prompt
Click on Relatable Prompt

For example, let’s say, you want to create a contact form for online event registration. Now, simply click on the relatable prompt as shown above.

With that, you’ll see the new contact form for online registration has been created. Now, click on the ‘Use This Form’ option.

Click on Use This Form Option
Click on Use This Form Option

Now, you can further customize the form with several prompts. For that, all you’ve to do is select a particular field and click on the ‘Generate Choices’ option.

Select a Particular Field & Click on Generate Choices
Select a Particular Field & Click on Generate Choices

Then, you need to give the prompt and hit the ‘Enter’ option.

Give The Prompt & Hit Enter
Give The Prompt & Hit Enter

Following that, it gives you what you asked for, now you need to click on the ‘Insert Choices’ option.

Click on Insert Choices Option
Click on Insert Choices Option

Once you’re satisfied with the AI-created form, then you can create on the ‘Save’ button on the top right corner.

Click on Save Button for AI Created Form
Click on Save Button for AI Created Form

Step 3: Configure Form Settings

Moving further, the next step is to configure the settings for the form you’ve just created. To do so, go to the Settings section on the left side of your WPForms screen. There, you’ll find 3 setting options: General, Notification, and Confirmations. Because we’re using the free version, other options are available only for pro users. 

Now, let’s configure all the 3 options.

General

The first one is General settings. There, you can configure different options like form name, form description, submit button text, etc. You can customize those contents as you want.

Here’s a quick explanation of each section:

  • Form Name: This is where you give your form a name. For instance, here we’ve named “Online Event Registration”.
  • Form Description: You can add a description to explain what the form is about.
  • Tags: This allows you to categorize your form using keywords or you can just leave it as default.
  • Submit Button Text: This is the text that will appear on the submit button. Here, we’ve set to “Register Now”.
  • Submit Button Processing Text: From here, you can specify the text displayed when the form is being submitted. It is set to “Sending…”
Configuring General Settings
Configuring General Settings

Besides, you’ll also be able to configure advanced sections such as adding a CSS class for forms and buttons, enable prefill or not, enable AJAX form submission, etc.

You can simply leave the default settings but don’t forget to click on the ‘Save’ button after configuring them.

Spam Protection and Security

Similarly, another settings tab is Spam Protection and Security. This setting help you prevent spam and ensure secure form submissions.

Here you can configure the following settings:

  • Protection: Using this feature, you can block spam automatically and ensures submissions take at least a set time (e.g., 2 seconds) to prevent bots. You can also choose to store spam entries for review or discard them automatically.
  • CAPTCHA: You can add CAPTCHA to helps distinguish real users from bots by requiring your users simple verification tasks. Also, you get options like Google Invisible reCAPTCHA that work in the background without disrupting the user experience.
  • Filtering: You can enable country and keyword filter if you want to restrict form submissions based on geographical location or specific words. This helps prevent unwanted entries and ensures data relevance.
Configuring Spam Protection & Security
Configuring Spam Protection & Security

Besides, you get additional spam protection tools like Custom Captcha, hCaptcha, Cloudflare Turnstile, and Akismet. These options add verification challenges and enhance security while maintaining user privacy.

Once you configure, don’t forget to click on the ‘Save’ option.

Themes

Likewise, the next tab is Themes section. From here, you can customize the appearance of your forms using pre-made themes or by applying your own colors to match the brand.

The theme and style settings are available in the Block Editor, where you can see real-time previews of the changes.

Glimpse of Themes Settings
Glimpse of Themes Settings

A video tutorial is also provided to guide you through the process of styling forms with WPForms themes. Additionally, there’s an option to request the theme feature in the form builder if you are not using the Block Editor. Also, we’ll cover this design part a bit later portion of this article.

Notifications

The Notification allows you to receive alerts when visitors submit their forms. In this setting, you can configure how you’ll receive emails or messages. 

Configuring Notifications Settings
Configuring Notifications Settings

By default, there are “Enable Notifications” but you can disable them to avoid notifications. 

The first element to configure is “Send to Email Address”. The default email address used is {admin_email}, which pulls the administrator’s email from your WordPress settings. However, you can also add other email addresses of recipients using commas.

The next one is “Email Subject Line” which is by default written “New Entry: Online Event Registration.” But by using smart tags, you can add field options as well.

Moving ahead, you can also customize the content of the “From Name.” By default, it is set to “SiteSaga,” but you can change it to reflect your preferred sender name.

Similarly, “From Email” is set to {admin_email} by default, but it is recommended to use a custom email address to avoid delivery issues.

The other element is “Reply-To Email Address,” which can be left empty or set to a specific address where replies should be sent. Setting this correctly ensures smooth communication. So it’s better to set the “From Email” element to your own email address or to the admin’s email.

The final element is the “Email Message,” which by default contains {all_fields}, meaning all submitted data will be included. However, you can customize the email’s content to include only relevant information.

Once you customize these, don’t forget to click on the ‘Save’ option at the top.

Confirmations

‘Confirmations’ is the another section of the configuration. Here, it lets you configure confirmation messages for visitors who’ve submitted their forms.

The Confirmation Type element gives you 3 options: message, show page and go to URL. 

Configuring Confirmation Settings
Configuring Confirmation Settings

By default, the confirmation type is set to “Message,” but you can change it to a page or a custom URL.

The “Confirmation Type” lets you choose how to respond after form submission. The default option shows a message, but other options include redirecting to a page or URL.

The “Confirmation Message” displays “Thank you for registering for our event! We look forward to seeing you there.” You can edit this message and format it using bold, italics, or links.

The option “Automatically scroll to the confirmation message” is enabled by default. It helps users see the message without manual scrolling.

The “Show entry preview after confirmation message” option is turned off. Enabling it will show a summary of the submitted form details to users.

Other Confirmation Options
Other Confirmation Options

Besides, the other option is Show Page. In this option, you can direct the visitors who’ve submitted the form to any of the web pages of your website. You can enter the page name from the Confirmation Page.

The last option is to Go to URL. This redirects your visitors to any URL you’ve entered in the Confirmation Redirect URL. For that, simply add any link to the pages you want your visitors to redirect.

Once all is done, don’t forget to click on the ‘Save’ button.


Step 4: Save Your Contact Form

Besides, there are several other settings options like Surveys and Polls, Calculations, Dropbox, and so forth.

Lastly, once you made the required changes, you can click on the Preview button to see how your form appears to your users.

Click on Preview & Save Button
Click on Preview & Save Button

If you think your form is perfect, just click on the Save button.


How to Add a Contact Page on WordPress?

After you’ve finished creating the form, let’s take a look at how to add a form to your page. So, let’s begin!

Step 1: Create a New Page on Your WordPress Site

Adding New Page to create contact form in WordPress

First of all, you need to create a new page on your website to add forms. So, go to the dashboard, click on the ‘Pages’ and go to ‘Add New’ to add a new page on your website.

After that, you’ll be taken to the editing section of the page.


Step 2: Add Your Contact Form on the Page & Publish

After creating a new page, add a title for your page as we’ve written: “Online Registration Form” You can also write as ‘Contact Us’ as per your convenience.

Add WPForms In Page
Add WPForms In Page

Now click on the + button in the “Type/or choose a block”. Then, you’ll see the search bar where you need to enter “WPForms”

Once you’ve found the WPForms, click on it and the wizard of WPForms will appear in your text editor. Now, click on “Select a Form” where you’ll get the options of forms you’ve created. Select any of the forms you want to embed in your page and the form will appear in your text editor.

Select a Form of Your Choice
Select a Form of Your Choice

With that, you’ll see the form has been added to the editor panel as shown below.

Glimpse of Added Form in Editor Panel
Glimpse of Added Form in Editor Panel

What’s more, you can further click on the form and make the further design changes from the right-hand side.

Click on Form to Access WPForms Settings
Click on Form to Access WPForms Settings

For example, here we’ve specified the ‘Fern’ option for Theme settings and specified Field Styles with the chosen Background color as you can see in below image.

Configuring Theme Settings Field Styles & Field Background Color
Configuring Theme Settings Field Styles & Field Background Color

Following the same pattern, you can try out the label styles, container styles, and so much more.

What’s more, you can also add the background image to your contact form. For that, all you’ve to do is go to the ‘Background Styles’ option and then click on the ‘Choose Image’ option.

Go to Background Styles & Choose Image
Go to Background Styles & Choose Image

And, then you can upload the image that you want as the background on your contact form. With that, you’ll see something as shown below.

Click on Save Draft Option Followed By Publish
Click on Save Draft Option Followed By Publish

Also, once you’re happy and all satisfied with the form, you can click on the ‘Save Draft’, followed by the ‘Publish’ button at the top.

For more detailed guidance, you can check out its documentation article on how to style your form.


Step 3: Display the Contact Page link on Your Site 

Now that you’ve published your “Contact Us” page, you might not see the page link on your homepage of the website. For that, you need to add the link to the “Contact Us” page in a visible location that you want such as a primary menu. 

For that, all you’ve to do is go to your dashboard and then navigate to the ‘Appearance > Menus’. Then, you’ll see the page as shown below.

Go To Menus Choose Your Contact Form & Click on Add to Menu
Go To Menus Choose Your Contact Form & Click on Add to Menu

Here, you need to now select the contact form for whatever purpose you’ve made for, as here we’ve created Online Registration Form and click on ‘Add to Menu’.

Once done, you can drag the form under the ‘Contact Us’ menu and click on the ‘Save Menu’ option.

Drag the Form Under Contact Us Menu & Click on Save Menu
Drag the Form Under Contact Us Menu & Click on Save Menu

Step 4: View Your Contact Page & Test it to See if It’s Working 

And that’s all there it to it! You can now go to your Contact Us page where you can see the form as shown below.

Glimpse of Contact Form Created Via WPForms
Glimpse of Contact Form Created Via WPForms

You can also test how your contact form works. For that, fill out the form and click on the ‘Register Now’ or in somecase ‘Submit’ button. It all depends upon how you’ve made the form.

Once you’ve filled it correctly, it shows you a “thank you” message or the content you’ve customized while creating your form.

Thank You Confirmation Page After Submitting Contact Form
Thank You Confirmation Page After Submitting Contact Form

Hence, you’re all done with adding your contact form and pages.


3 Best Contact Form Examples to Get Inspired From!

Now that you’ve learned how to create a contact form, it’s always helpful to see how successful websites are doing it. A well-structured contact form not only helps users reach you easily but also ensures that you collect the right information efficiently.

To give you some inspiration, we’ve selected 3 excellent contact form examples from popular websites. These forms stand out for their simplicity, effectiveness, and user-friendly design.

Let’s explore them and see what makes each of them a great choice!

1. SiteSaga

The first one is our very own SiteSaga contact form which is simple and easy to use. It visitors to get in touch effortlessly. It includes essential fields such as Name, Email, Subject, and Message to ensure users provide the necessary details for communication.

SiteSaga Contact Form Page Example
SiteSaga Contact Form Page Example

The form has a clear heading that encourages visitors to reach out. It also includes two optional checkboxes to enhance functionality.

The first checkbox requires users to confirm that their inquiry is not related to guest post requests. This helps to filter out unwanted submissions. The second checkbox allows users to subscribe to the SiteSaga newsletter if they wish to receive updates.

The “Submit” button is highlighted in bright orange. This makes it visually appealing and easy to locate. Last but not least, the overall design of the form is straightforward and efficient, to provide a smooth experience for users.


2. WPForms

Similarly, the contact form page of the WPForms plugin itself is also worth considering. It has fields for Name, Email, Website, Topic, and Message to help users provide the right information.

WPForms Contact Form Page Example
WPForms Contact Form Page Example

There is a “Confirm Email” field to make sure the email address is correct. The “Topic” dropdown lets users pick what their message is about, so it reaches the right team.

The bright orange “Submit” button makes it easy to send the form. There are also options at the top to submit a support ticket or complete a form for other help.

All in all, the WPForms contact form is clear, helpful, and makes it simple for users to get in touch.


3. Kinsta

The Kinsta contact form is detailed and helps users provide important information easily. It includes fields for First and Last Name, Email, and Phone Number, ensuring clear communication.

Kinsta Contact Us Page Example
Kinsta Contact Us Page Example

Users can also select options to specify how many WordPress websites they have, their estimated monthly visits, and the amount of disk space they are using. This helps Kinsta understand the user’s needs better.

The form also asks users what type of website they run, such as eCommerce, Membership, or Multisite, with checkboxes to choose from. There is a Message box for users to explain their request in more detail.

The Submit button is placed at the bottom for easy access. On the right side, users can find quick contact options via email or social media, making it easy to get help in different ways.

To sum up, Kinsta’s contact form is well-structured and helps users share their needs clearly for better support.


Frequently Asked Questions on How to Add a Contact Form & Page on WordPress

Q.1 How do I add a contact form to my WordPress website?

You can install a contact form plugin like WPForms. Then, create a form, and add it to your page using a shortcode or block.

Q.2 Which is the best contact form plugin for WordPress?

Several contact form plugins are available on the market. The popular options include WPForms, Contact Form 7, Fluent Forms, and more.

Q.3 Can I add a contact form without a plugin?

Yes, you can embed Google Forms or use HTML code, but plugins offer more features.

Q.4 How do I protect my contact form from spam?

You can use CAPTCHA, reCAPTCHA, or anti-spam plugins to block unwanted messages.


Conclusion

That’s all folks! We’ve come to the end of our article. 

We hope that this tutorial guide helped you learn how to add a contact form in WordPress.

You can now easily create a contact form and add it to your page by following this step-by-step guide. If you haven’t created one, then do follow our easy guide to create yours. 

If you have any more queries about how to add a contact form, then feel free to ask us. We’ll get back to you as soon as possible. Also, share this article with your friends and colleagues. 

You may also like our article on how to start a blog and how to create an about me page in WordPress.

Don’t forget to follow us on Facebook and X( Formerly Twitter) for more helpful articles.

Some of the links on this article/page are affiliate links. If you click on such an affiliate link and purchase the product, we’ll earn a specific percent commission from the seller. But it won’t at all affect the price you’ll pay.
Written By Alisha Bajracharya
Hello everyone! My name is Alisha Bajracharya and I'm a full-time content writer.

Leave a Reply

Your email address will not be published. Required fields are marked *

SIGN UP TO GET FRESH CONTENT

Subscribe to our blog and get exclusive content every week! We don't like spam, so we won't spam you with junk email.

Please enable JavaScript in your browser to complete this form.