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 the changelog.
- 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.