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.
Next we enter our username and password and then click Log In.
Once the WordPress Dashboard is shown, click on Plugins and then click Add New.
Next, let’s search for WS Form.
Click Install Now to install the plugin and then click Activate.
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.
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 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.
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.
To preview the form, let’s click on the Preview button at the top of the layout editor.
WS Form shows us the form in your website theme so that you can test it. Let’s complete the form and submit it.
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.
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.
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.
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.
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.
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.
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.
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!