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!