If you haven’t found a form builder for your WordPress site that suits your needs, you might want to check out WS Form PRO.
From being in the WordPress space quite some time now, I have discovered that there is always room for a new plugin, even if it seems that a niche is already well-filled. That is certainly the case with form builders. Of the many that have come along, I have found each has its own unique strengths. The interface of WS Form PRO and the features it comes with will catch some users’ attention.
Building Forms on Your WordPress Site with WS Form PRO
I will show you this plugin’s basic features as well as some of the advanced add-ons that might be useful, depending on your needs.
The video below shows you some of the features in action and I’ll follow up with more details on the settings and form building via text and screenshots.
I am not going to go through each of these, but I’ll touch on a few of them.
With the Appearance Settings, you will find options specifically based on the framework, the preview and the public appearance.
In the framework options, this plugin outputs HTML5 code. If you are using Bootstrap or Foundation frameworks, it outputs code in that native format so the forms are formatted without any additional CSS. When you install it, it’ll check your theme to see if the framework is present and automatically configure itself with that framework.
If you are a developer, there are some great debugging features that I will show you in a bit, but here are the advanced settings you may also be interested in:
If you want to collect money using your forms, they have some basic eCommerce settings:
You can also add the payment gateways PayPal, Stripe and Authorize. All payment methods on WS Form PRO use the latest client side payment components, which means that credit card details do not pass through your website. This, of course, is good for your customers because it makes your site more secure and it also introduces PCI compliance requirements for WordPress site owners.
For your emails, there are a few global settings as well as the capability to add your logo.
Creating a Form
Now I’ll walk you through some of the highlights of setting up a form. This plugin has a ton of features and I cannot touch on all of them here. But this will give you a good sense of what this form builder does.
Adding a New Form (Templates)
You can start with a blank slate or choose from any of the templates, which can save you time if you just need a simple, uncomplicated form, There are more templates that come with the add-ons.
There are also a few templates created for the eCommerce side of things:
If we load the contact form template as is, you see the options you have for building out or changing your form. On the side, there are several choices of fields that you can add. There are some very specific ones that I haven’t seen in other form builders. I cannot go through them all, but the it’s pretty clear what they do.
There are some excellent optional fields for building forms to collect payments. As an example, here is a form using some of those fields:
And a preview of what it would look like:
Moving and Resizing the Fields and Sections – Drag and Drop
As you can see, as far as moving fields and sections or adding them, the form is completely drag-and-drop. Another option is the resizing of fields and sections by dragging the width and adding them side by side if that is your layout preference.
Also, fields and sections can be moved from one to another:
You can easily clone any form if you need a base to start with, or you can clone both fields and sections to help you save time without dealing with repetitive work.
Editing the Form at Breakpoints
You can edit the form at any breakpoint and you can use the slider at the bottom to see how it will look on different devices. For example, I have loaded the Gift Order Card Template and you can see the different views and breakpoints per device.
Desktop Extra Large 1200 Pixel
Breakpoint Large 992 and Medium 668 Pixel
Breakpoint for Tablets and Smartphones
And if you open the settings for any field, you will be given parameters to set your breakpoints.
Undo Your Changes
As you build your form, there may come a time when you want to undo some changes you have made. Not only can you do this, but you can scroll down your changes and see what your form looked like at any specific point.
Creating Tabbed Forms
You can easily create a form with tabs. There are instances where this will make for a better user experience, but you will want to choose wisely. For an example, I created a form that has two tabs, one for the contact info and the other for order details. It’s simple. Just add a tab and create the new form there. They can be easily dragged back and forth, into whatever order you want. Fields and sections can also be moved between tabs easily.
No form builder would be worth its salt without conditional logic. As part of the base plugin, they have quite the library of conditional logic options.
One of the things I love about using conditional logic with forms is the ability to create long forms, but only showing the fields that are necessary when users fill out the form based on their choices. WS Forms PRO does that, as well as changing validation messages and using actions (which I will touch on momentarily). One example: the user can save a form if the Next tab button is clicked to save it in progress.
For example, on the eCommerce form I just shared with you, here is what the conditional logic options are and this is what happens.
If whatever you choose in the IF section is true, it will run whatever is in the THEN statement.
If whatever you choose in the IF section is false, it will run whatever is in the ELSE statement.
Since there are so many options depending on what conditions are created, the statements will vary. (I show you more of what they look like in the video). For this example, I created a question with a simple yes or no answer. And depending on what answer they choose, I give additional information.
So if they choose Do you Live in Seattle?, then the field asking What neighborhood? will appear. Also, you will see that it automatically set the “else” as hidden:
You can see how this works on the preview:
Since you can add various conditions for different field, you can make this as detailed as you need. If you would like to see their video on conditional logic, go here.
The following actions are available whenever a form is saved or submitted:
- Send emails
- Show messages (i.e., a thank-you message)
- Fire a WordPress hook (actions or filters)
- Initiate GDPR functionality, such as a data export or erasure request
- Push form data to an email marketing platform, such as MailChimp or Constant Contact
Adding the Form Block
To insert any form into a page or post, simply find the WS Form Block:
Then choose which form you want to insert:
The tracking options help you understand your audience better. This includes being able to enable Google Analytics Tracking for each form:
Debugging Your Forms
For the developers reading this post, I believe this plugin is the first form builder that has a debugging console that you can use to rapidly populate and test your forms. You can see a video of this here, but if you have it set to show, it will appear right below your forms while in the preview mode.
The WS Form PRO 1-site license comes with a huge amount of features. But there are additional add-ons for your own specific needs I have included a few in this post. You can purchase them as needed or acquire the agency license.
I have just touched the tip of the iceberg with this form builder plugin. There is a page with access to all forms and submissions. WS Form PRO does not just build dynamic forms, but it gives you great options for selling your products or services. Between the user interface and its other features, it’s worth checking out if you are in the market for a powerful form builder— either for your own site or to use with clients.