How to Create a Contact Form in WordPress – WS Form

How to 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 Gutenberg 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!