USP Pro version 2.3 brings fresh default styles to all form errors. So when a visitor submits your form and an error is returned (like when a required field is forgotten), USP 2.3 and better automatically will highlight any missing fields with a thin red border and light red background color. This works great for most cases, but further configuration may be desired. This tutorial explains several ways to get ’er done.
Styling required fields
By default, all USP fields include numerous classes for styling with CSS. For example, if you peak under the hood and look at the source code of the USP Content Field, you’ll discover a <label> that’s furnished with field-specific class names:
<label for="usp-content" class="usp-label usp-label-content">Content</label>So you can style the content field as desired using CSS, for example:
.usp-label-content { color: red; font-weight: bold; }To style all labels, target the more general class name:
.usp-label { color: red; font-weight: bold; }Any of this CSS code could be included via the plugin’s CSS/JS settings, or via your theme’s style.css file. Alternately, you can add the CSS directly to your form, like so:
<style>.usp-label { color: red; font-weight: bold; }</style>Notice the only difference here: we wrapped the line of CSS with <style> tags. Although this isn’t optimal performance-wise, it certainly makes things easier.
Note: Each USP field shortcode also accepts a class attribute that enables you to add custom classes to the field input. So if the existing class assortment doesn’t suit your needs, you can always roll your own. For example:
[usp_content class="my-custom-class"]This will add a class named my-custom-class to the USP content field. So the possibilities are just endless.
Marking fields as required
A great way to let users know that a particular form field is required is to mark it as such. You can add an asterisk *, “required” text, or whatever works best for your particular form. You can do this by customizing the field’s label attribute, for example:
[usp_content label="Content (This field is required)"]You can also use the placeholder attribute to customize the text that is displayed inside of the input field, for example:
[usp_content label="Content (This field is required)" placeholder="Content Required!"]Customizing errors with Parsley 2
Parsley 2 is a great script for checking errors client-side, so before the form is submitted. USP Pro provides built-in support for Parsley 2. Check out the Parsley site to learn more about all of the awesome ways you can improve the client-side validation of your USP Forms.