How To Provide Next Generation Form Development with WS Form

Note: We occasionally review interesting WordPress plugins, which focus on the features that many people will be most interested in. This one is a little different. This article is primarily aimed at web designers and developers or users with intermediate or advanced WordPress experience. While this how-to might be aimed at a slightly different audience, we think that we should occasionally show how versatile and forward-moving WordPress really is. If you would like to dig a little deeper into the actual code side of form development, you might be interested in our developer article, Preventing Form Spam.

Website forms are often underappreciated and neglected but are an integral part of a website, providing an essential gateway between site visitors and the website owner.

Traditionally, creating forms has been a difficult and code-intensive process, often requiring custom CSS, JavaScript, extensive server-side development, and a dizzying array of additional plugins for the simplest functionality.

In this article, we’ll investigate how WS Form, a WordPress form plugin, helps reduce development bottlenecks in a next-generation, no-code environment and tackles a number of form plugin shortcomings, including:

  • Responsive forms
  • Rapid form testing
  • Form-centric conditional logic
  • Bi-directional integration
  • Reduced active plugins
  • Respecting accessibility

Responsive Forms

The word ‘Responsive’, in the context of web development, means that the web page dynamically adjusts its layout to suit the screen size of the device it is being displayed on. Responsive design is vital for online forms, as incorrect scaling on the front end can make it difficult to interact with certain form elements. This is particularly important for ensuring your forms are accessible.

Many form plugins now offer multi-column editing, but your chosen layout will apply no matter which device a form is viewed on. In some cases, a form will collapse to a single column format at a pre-determined screen size, but this offers little in terms of layout control.

WS Form introduces a fully responsive layout editor that allows you to design separate multi-column form layouts for different breakpoints. In a responsive form, a breakpoint is a screen width at which the form will adapt in a certain way in order to provide the best possible user experience. These breakpoints are the width of a screen you would find on different devices such as a phone, tablet, laptop, or desktop computer.

The default breakpoints in WS Form are:

  • Extra small – Up to 575 pixels in width (mobile device)
  • Small – Up to 767 pixels (tablet)
  • Medium – Up to 991 pixels (laptop)
  • Large – Up 1199 pixels (desktop)
  • Extra large –  1200 pixels or more
The WS Form breakpoint selector

The breakpoint selector allows you to finely tune how your form will look on each screen size. By dragging the breakpoint selector, you can instantly edit and preview how the form will look at each breakpoint.

Previewing form layouts for each breakpoint

WS Form goes further. Some field types include multi-column horizontal layout options within themselves, such as checkbox and radio fields which can also be fully configured by breakpoint. As an example, on a desktop screen, you could show a series of checkboxes across multiple columns, but on mobile, that could collapse to a single column layout.

Furthermore, if your website uses Bootstrap or Foundation, WS Form will automatically adapt to those frameworks’ breakpoint sizes as well as outputting HTML native to those frameworks.

WS Form offers the first truly responsive editor that allows you to design form layouts for multiple devices.

Learn more: Responsive Forms

Rapid Form Testing

Form testing typically involves the following steps:

  1. Fill the form fields with valid values.
  2. Submit the form.
  3. Check the results.
  4. Repeat.

For even the simplest of forms, this process can be very time-consuming (and tedious!).

WS Form PRO includes a debug console that allows rapid form testing in a single click.

When viewing a form, the debug console is displayed at the bottom of the web browser, much like the browser inspector.

The WS Form debug console

The console shows tabs for each form instance on the current web page. By clicking each tab, you can independently debug each form shown on a web page.

In addition to diagnostic information, the debug console also provides the ability to rapidly test forms.

To test a form, you simply click the ‘Populate & Submit’ icon. WS Form will then populate the form fields with values appropriate for each field. For example, text fields will contain randomly generated copy, whereas phone fields will contain phone numbers. The console also goes so far as to complete more complex fields such as signature or color fields. Once the values are populated, a form submit is initiated.

Populating and submitting forms in a single click using the WS Form debug console

The entire process takes less than a second. On a complex form, the time savings can be significant and rapidly reduces the time taken to develop and debug a form.

The debug console also includes features such as:

  • Form reset options to allow for continuous form testing.
  • A log showing key events such as API requests, conditional logic processing and JavaScript events.
  • An error log showing any issues that may have occurred during the rendering and submission of a form.

WS Form makes testing forms a breeze and dramatically reduces the time it takes to develop complex forms.

Learn More: The Debug Console

Form-centric Conditional Logic

You are probably familiar with conditional logic. It typically allows you to hide or show a field based upon the value of another field. While this is a nice feature to have, more complex interactivity often requires custom JavaScript to implement.

WS Form includes conditional logic currently unrivaled in the form plugin space. The conditional logic is form-centric, which means you can build conditions for IF, THEN, and ELSE statements that include multiple form, tab, section, and field-level elements. The conditions are not limited to just fields. Conditional logic can also be used to enable or disable form actions such as ‘Send Email’ or ‘Run WordPress Hook’.

Let’s take a look at a conditional logic example that is far simplified using WS Form.

Assume you have two checkboxes on a form. If both checkboxes are checked, we want to ask two additional groups of questions. The form might look like this:

An example product insurance form

The two checkboxes are contained within the first section of the form. The WS Form checkbox field allows you to show any number of checkboxes on the page. Each checkbox is represented by a row in a data grid.

The WS Form checkbox field data grid

Next we’ll create the conditional logic.

Example form-centric conditional logic

In this example, the IF statement checks to see if the first and second checkboxes are checked. WS Form supports nested IF logic in addition to basic AND/OR functions.

If the statement is true, WS Form will run the procedures in the ‘THEN’ section of the statement; in this example, we make the two sections visible. If the statement is false, the procedures in the ‘ELSE’ section run; in this example, hiding the two sections.

As you can see, using form-centric conditional logic, we can create conditions that cover a multitude of different form elements in a single statement.

WS Form conditional logic is not only limited to hiding and showing sections or fields. Forms, tabs, sections, and each individual field type has context-related IF, THEN, and ELSE options.

An example of the conditional logic options for just the text field are shown below.

Conditional logic IF, THEN, and ELSE options for a WS Form text field

When applying values to a field, you can also use WS Form variables which enable you to build truly dynamic forms. For example, you could reflect the value of a range slider in an HTML field. An example of that logic is shown below:

In this example, when a change or input event occurs on the range slider field, the HTML field is populated with the following HTML:

<p>
The range slider value is <strong>#field(30)</strong>.
</p>

The #field(30) takes the value of field with ID 30 and injects it between the strong tags.

Dynamic conditional logic

WS Form conditional logic allows you to add powerful, dynamic interactivity to forms.

Learn more: Conditional Logic

Bi-directional Integration

Integrations with third parties are vital for form plugins to enable functionality such as pushing a new contact to a list in an email marketing platform or triggering an automation in a CRM platform. Many form plugins provide a simple push of data to integrations, but most do not provide bi-direction capabilities.

An example of a bi-directional form would be an edit profile form for a MailChimp contact. The form would show the existing data stored in MailChimp for a contact, and allow that data to be edited.

WS Form also uses its bi-directional capabilities to create fully configured forms in a single click for over 65 different integrations.

In the case of MailChimp, this means that a MailChimp template tab is added to the ‘Add New’ admin page. When a template is clicked, WS Form automatically creates a form that includes:

  • Core fields (e.g. name, email)
  • Custom fields
  • Tagging fields
  • GDPR compliance fields
  • All fields mapped for both form submission and population

This functionality extends to post and user management functionality. 

Furthermore, WS Form integrates bi-directionally with custom field plugins including:

WS Form automatically creates complex forms for post types and user-related forms that include all available core fields for custom field plugins, including repeaters.

Learn more: Add-Ons

Reducing Active Plugins

Let’s consider a multi-step form containing a multi-column layout, conditional logic, and integration with MailChimp. The following plugins might be required with a conventional form plugin:

  • Base plugin
  • Multi-step add-on plugin
  • Conditional logic add-on plugin
  • MailChimp add-on plugin

Every time your website loads, WordPress executes your activated plugins, which typically results in file access, database access, and memory usage. The more activated plugins you have, the more resources are consumed.

Having to load four or more plugins to achieve the functionality required by a single form is undesirable.

WS Form includes a wealth of functionality in a single plugin and loads functionality as is required by the forms being rendered. For example, if your form includes a signature field, the associated signature libraries will load. If a signature field is not included on your form, the libraries will not be loaded.

WS Form also does not require you to install and activate both the LITE and PRO versions of the plugin in order to function. The vast majority of forms can be built by installing a single plugin.

Respecting Accessibility

One of the most important things you can do for your website is to ensure that it is accessible. Non-compliance can be frustrating for your visitors.

WS Form does a lot of work behind the scenes to make sure your forms are Web Content Accessibility Guideline (WCAG) compliant out of the box. For example, field labels, descriptions, and required fields are WCAG compliant.

ARIA are tags that you can add to your HTML to tell screen readers where things are and what it’s looking at. ARIA is built into WS Form. Field labels, descriptions, and required fields are tagged with ARIA fields.

WS Form handles the ARIA tagging behind the scenes, so you don’t have to worry about handling the tags yourself. However, WS Form does include settings so you can create custom ARIA labels should you wish to.

Learn more: Accessibility

Conclusion

WS Form provides developers with a complete solution for developing complex and otherwise labor-intensive forms.

In addition to the functionality outlined in this article, WS Form also includes:

To learn more about WS Form, visit https://wsform.com

You’re In Good Company

Brand new bloggers, small businesses, and major brands like TIME, TED, and Spotify all call WordPress.com home.

ABOUT THE AUTHOR

The WordPress.com Team

At WordPress.com, our mission is to democratize publishing one website at a time. Create a free website or build a blog with ease on WordPress.com. Dozens of free, customizable, mobile-ready designs and themes.

More by The WordPress.com Team

%d bloggers like this: