Skip to content

WS Form Pro: A Form Builder for Your WordPress Site

WS-Form-Pro-Pluing-on-computer-screen

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.

And watch for the 20% off deal at the end of the post.

Settings

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.

settings appearance

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:

settings advanced

If you want to collect money using your forms, they have some basic eCommerce settings:

settings ecommerce

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.

settings payment gateways

For your emails, there are a few global settings as well as the capability to add your logo.

settings email

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.

popular templates

There are also a few templates created for the eCommerce side of things:

ecommerce templates

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.

edit form

There are some excellent optional fields for building forms to collect payments. As an example, here is a form using some of those fields:

example ecommerce form

And a preview of what it would look like:

preview ecommerce form

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:

resizing fields

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 extra large

Breakpoint Large 992 and Medium 668 Pixel

breakpoint large

Breakpoint for Tablets and Smartphones

breakpoint smartphones and tablets

And if you open the settings for any field, you will be given parameters to set your breakpoints.

breakpoint parameters

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.

undo changes

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.

tabbed forms

Conditional Logic

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.

question with options

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:

conditional logic for first question

You can see how this works on the preview:

condtional logic in action

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.

Actions

The following actions are available whenever a form is saved or submitted:

  • Send emails
  • Show messages (i.e., a thank-you message)
  • Run JavaScript
  • Fire a WordPress hook (actions or filters)
  • Initiate GDPR functionality, such as a data export or erasure request
  • Redirect
  • 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:

WS form block

Then choose which form you want to insert:

choose form to insert

Form Tracking

The tracking options help you understand your audience better. This includes being able to enable Google Analytics Tracking for each form:

tracking options

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.

debugging console

Additional Add-Ons

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.

add ons

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.

If you want to test it out for yourself, they will set up a demo that you can play around with for 7 days. Check out what WS Form PRO has to offer.

Leave a Comment