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:
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:
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.
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
Form testing typically involves the following steps:
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 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.
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:
WS Form makes testing forms a breeze and dramatically reduces the time it takes to develop complex forms.
Learn More: The Debug Console
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:
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.
Next we’ll create the 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.
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:
The #field(30) takes the value of field with ID 30 and injects it between the strong tags.
WS Form conditional logic allows you to add powerful, dynamic interactivity to forms.
Learn more: Conditional Logic
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:
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
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:
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.
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
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
Brand new bloggers, small businesses, and major brands like TIME, TED, and Spotify all call WordPress.com home.
We're a team of happiness engineers, developers, editors, and WordPress experts. Our team personally curates and serves up the best resources to help you no matter where you are in your blogging or website-building journey. 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
Whether you need a landing page or a full ecommerce site, an online learning academy or an interactive informational site for your business, we can build it for you.
Invent the world’s greatest cat food, save a rainforest, start a needlepoint club. Whatever it is, it’s going to need a website—that’s where we come in.
Digital Marketing & Design by Yellow Falcon