This guide explains how to add custom CSS classes to a specific form field (such as a text field or checkbox) or its outer container. This operation is useful for applying custom graphic styles defined in your theme.
1. Adding Classes to a Form Field
These instructions apply to any field added through the "Fields" section of your form.
1.1 Accessing Advanced Settings
To see the fields where you can enter CSS classes, you first need to enable advanced settings for the selected field:
1. Go to the "Fields" section of your form and select the field you want to modify.
2. Scroll to the bottom of the field settings.
3. Find and check the box labeled Show advanced settings.
- Note: Once checked, new text fields will appear, including those for classes.
1.2 Entering CSS Classes
After enabling advanced settings, you will see two fields dedicated to entering classes:
1. To add classes to the input element (e.g., <input>, <select>, <textarea>):
- Locate the field labeled Input Classes.
- Enter the desired CSS classes, separated by spaces (e.g.,
my-red-class w-100).
2. To add classes to the field container (the element that wraps both input and label):
- Locate the field labeled Container Classes.
- Enter the desired CSS classes, separated by spaces.
2. Adding Classes to the Submit Button
The submit button is managed separately within the "Submit Button" section of the General tab.
1. Go to the General tab in your form configuration.
2. Scroll down to the Submit Button section.
3. To customize the button itself (the <button> or <input type="submit"> element):
- Locate the field labeled Input Classes.
- Enter the desired CSS classes.
4. To customize the button container (the <div> element wrapping it):
- Locate the field labeled Container Classes.
- Enter the desired CSS classes.
Once you have completed your changes, be sure to save the form. The new CSS classes will be applied when the form is displayed on your site.
