Release date: January 2, 2025.
Version 1.10.x of WS Form introduces a new Styler system that provides greater control for WordPress form design.
The new system is designed to be backward compatible with earlier versions of WS Form with minimal changes to the underlying HTML used to render forms. However, there are a few improvements that you should consider when upgrading to 1.10.x.
First Things, First!
Whenever you upgrade a plugin, theme or core in WordPress:
- Create a full backup of your website, including the database and files. Ensure the backup is stored in a safe location in case you need to restore your site.
- Review any changelogs (The 1.10.0 changelog is shown below).
- Test on a staging / development server first.
- Clear any caching after installing.
Improved Accessibility
Version 1.10.x introduces some new accessibility features that may have a subtle effect on your forms.
- Improved color contrasts to ensure WCAG AAA compliance by default.
- Checkbox field labels are now shown by default.
- Text Area fields no longer have character / word count enabled by default. See Word and Character Counts in Help Text if you want to add this.
- URL fields now have an https:// placeholder added by default.
- An improved color picker by Coloris.
New CSS
1.10.x includes a rewrite of the CSS used in WS Form to support CSS variables. You can check the CSS Variables Reference to see all of the available CSS variables.
CSS is now dynamically loaded by field type to reduce redundancy.
Custom CSS Considerations
If you have implemented any custom CSS yourself this should still work provided your selectors are specific enough to WS Form elements.
We recommend prefixing all CSS selectors with:
.wsf-form
This is per our original Styling Forms with CSS documentation.
For example:
.wsf-form .wsf-field-wrapper .wsf-label
Whilst not necessary, we would recommend using the new Styler to implement your customizations. You can, of course, implement any further customizations you need using custom CSS. Consider using the WS Form CSS variables to customize form elements.
New HTML
Revised HTML has been implemented to improve the presentation / customization of some field types. These should not present any styling issues but have been included here for transparency.
Date / Time Fields
All icons in the date / time picker have now been replaced with pure CSS icons. This allows for easier resizing and coloring.
Password Fields
Password fields now have the following markup added as a sibling to the password input element if the password strength meter is enabled:
<ul><li /><li /><li /></ul>
This replaces an SVG that was used for the strength meter and improves the ability for you to recolor the meter if required by using pure CSS icons.
Select Fields
The dropdown arrow on Select fields has been converted from an SVG file to a pure CSS icon. This allows for easier resizing and coloring.
ACSS
If you are an ACSS user, note that they will soon be releasing refactored form support that will take advantage of the new WS Form variables.
Disabling the Styler
If for any reason you need to disable the Styler and instead want to use revert back to the legacy Customize method instead, you can do so with the following PHP code.
add_filter('wsf_styler_enabled', function() { return false; });
You should add this to your themes function.php file (child theme preferred) or as a code snippet.
After making this change, go to WS Form > Settings and click Save to rewrite the legacy CSS files.
Please note that the Customizer is now deprecated in WordPress.
Changelog
= 1.10.0 - 01/02/2025 = * Important installation notes: https://wsform.com/knowledgebase/upgrade-notes-for-1-10-x/ * Added: New form styles (See: https://wsform.com/knowledgebase/styles/) * Added: New form styler (See: https://wsform.com/knowledgebase/styler/) * Added: Accessibility improvement: autocomplete attributes now default for password, URL, email and phone fields * Added: Accessibility improvement: autocomplete attributes completed in form and section templates * Added: Accessibility improvement: Checkbox field now defaults to label on * Added: Accessibility improvement: Removed character / word count help text from textarea by default * Added: Accessibility improvement: URL field now contains https:// placeholder * Added: Accessibility improvement: Color contrast improvements throughout * Added: Accessibility improvement: Coloris color picker * Added: Accessibility improvement: ARIA label on section fieldsets * Added: Accessibility improvement: Dark / light color themes * Added: Auto grow setting for Text Area field * Added: Checkbox and radio styling setting (button, switch, swatch and image) * Added: Email allow / deny feature now processed client-side * Added: Improved Dutch translations * Added: Increased generated password size to 24 characters * Added: Form saved on field clone * Added: Support for j.n.Y date format * Added: Submission export performance improvements * Added: Descriptive form limit error message on form submit * Added: Select2 upgraded to version 4.0.13 * Added: WordPress 6.7 compatibility testing * Added: Author ID added as column in Posts data source * Added: Points allocation form template * Added: Repeater level custom attachment title, excerpt, content and alt text * Added: Updated logo in conversation template * Added: Postmark API error handling in Send Email action * Added: #query_var default value parameter * Added: Limit submissions per logged in user * Added: Invalid captcha responses no longer throw a PHP exception * Added: Phone field ITI validation triggered on paste event * Added: Additional checks when determining capabilities for conditional logic * Bug Fix: Loader functionality on form reload * Bug Fix: Translation issue related to widgets_init / load_plugin_textdomain * Bug Fix: Escaping when using #text * Bug Fix: Price radio invalid feedback text location * Bug Fix: Order by in terms data source for term order * Bug Fix: Form calc clean method for hidden fields