Page Builder Summit Limited Time Offer - 20% OFF! Use coupon PBS20 - View Details

Create a Contact Form in WordPress

In this tutorial, we’ll show you how to create a contact us form in WordPress using  WS Form. You’ll learn how to create, preview and publish your form.

To get started, we’re going to install a form builder plugin for WordPress. I’m going to be using WS Form in this tutorial.

To install the plugin, we need to login to the WordPress admin. To do this, we go to our website address with wp-admin added to the end.

WS Form - How to Create a Contact Form in WordPress - URL

Next we enter our username and password and then click Log In.

WS Form - How to Create a Contact Form in WordPress - Login

Once the WordPress Dashboard is shown, click on Plugins and then click Add New.

WS Form - How to Create a Contact Form in WordPress - Plugin Add New

Next, let’s search for WS Form.

WS Form - How to Create a Contact Form in WordPress - Plugin Search

Click Install Now to install the plugin and then click Activate.

WS Form - How to Create a Contact Form in WordPress - Plugin Install

You’ll now see WS Form in the WordPress admin menu. To create our first form, lets click on Add New. You can either do this from the WordPress Administration menu, or you can use the toolbar menu at the top of the page.

WS Form - How to Create a Contact Form in WordPress - Form Add New

The first time we use WS Form, it’s going to ask you a few questions to personalize your experience. In this tutorial, we’ll choose the Keep It Simple option.

WS Form - How to Create a Contact Form in WordPress - Welcome

WS Form shows a brief introductory video that explains how to build your first form. It’s a helpful video that shows you how to use the layout editor and preview forms.

Next, we click Get Started.

WS Form comes with various templates to help get you started.

You can also install add-ons for third party integrations such as MailChimp, Salesforce and Slack. When you do that, additional templates are made available.

For this tutorial, we’re going to use the Contact Us template. Let’s click that template to build our form.

WS Form - How to Create a Contact Form in WordPress - Form Add New Template

So, as you can see, WS Form has built a form for us in the layout editor. It has added the normal fields you would expect to see on a contact form plus a GDPR compliance checkbox for requesting consent.

WS Form - How to Create a Contact Form in WordPress - Layout Editor

To preview the form, let’s click on the Preview button at the top of the layout editor.

WS Form - How to Create a Contact Form in WordPress - Preview

WS Form shows us the form in your website theme so that you can test it. Let’s complete the form and submit it.

WS Form - How to Create a Contact Form in WordPress - Complete Form and Submit

If we go back to the layout editor tab, we can click Submissions to view the form we just submitted. The nice thing about the free version of WS Form is that the ability to see your form submissions within WordPress is included.

WS Form - How to Create a Contact Form in WordPress - Submissions

Now, you might want to change the email address that your form submissions are sent to. To do this, we’ll click on the Edit button at the top of the page to get back to the layout editor.

Then we’ll click the Actions icon . It’s the icon with a lightning bolt on it.

WS Form - How to Create a Contact Form in WordPress - Action

So, what are actions? Well, actions run whenever a form is submitted and you can add as many of them as you like. For example, you could can show a thank you message or redirect to different web page. As you can see, WS Form has already added a Send Email action, so let’s edit that.

Click the settings icon . Then, under the To section we can change the address that the email notification is sent to.

Then click the Save & Close button.

Let’s also add another field to the form to request a company name. To do this you simply drag and drop a text field from the Toolbox to the form.

WS Form - How to Create a Contact Form in WordPress - Add Field

Once you have added it you can immediately rename the field then type Return to save it.

Because we made a change to the form, our preview tab has been automatically updated and we can immediately test the form again.

Now that we’ve created a form, we need to add it to a page on our website.

Before adding the form, we need to click the Publish button in the layout editor. This makes any changes we have made to the form public.

WS Form - How to Create a Contact Form in WordPress - Publish

Now that the form is ready, let’s create a new Contact Us page for our form. To do this, click on Add New under Pages in the WordPress menu.

WS Form - How to Create a Contact Form in WordPress - Page Add New

Give the page a title, and then click on the Add icon to add a block to our page. Search for WS Form and click on the icon to add the block.

WS Form - How to Create a Contact Form in WordPress - Guttenberg

Now we need to choose the form we just created from the side menu. You’ll notice that a preview of the form is shown in the WordPress editor.

WS Form - How to Create a Contact Form in WordPress - Guttenberg Preview

The last step is to click Publish on the page itself and then we can click View Page to view our new web page.

In addition to adding forms using a block, you can also use a WordPress shortcode, Widget or you can use the WS Form module in visual editors such as Beaver Builder, Divi and Elementor.

And that’s how easy it is to create a contact form in WordPress using WS Form!