This guide explains how to add custom CSS classes to both the field’s input element (e.g., the text box) and its outer container (the block that manages layout and width).
These settings are useful if you want to apply specific styles or behaviors via CSS or JavaScript.
Step-by-Step Procedure
1. Access Advanced Settings
Within the configuration of the specific field you are editing, scroll down to the options section. You will find a checkbox labeled:
Show advanced settings
Select this box to reveal additional fields.
2. Add Classes to the Field Input
After enabling advanced settings, locate the field labeled:
Input Classes
Enter here the CSS classes you want to apply directly to the input element (for example, the <input>, <select>, or <textarea> element). If you need to enter multiple classes, separate them with a space.
3. Add Classes to the Field Container
Locate the field labeled:
Container Classes
Enter here the CSS classes you want to apply to the outer container (the div that wraps both the label and the field input). This option is useful for modifying the layout or visibility of the entire block.
4. Save Changes
Once you have entered the desired classes, proceed to save the entire form to make your changes effective.
