Bundled CSS Classes
Article Last Updated: March 4, 2021
In Easy Forms for Mailchimp by YIKES we’ve included some bundled CSS classes to alter the layout of the form and form fields. Using these class names, you can create alternative layouts for your opt in forms without needing to write any code.
The bundled classes are pre-defined class names you can add to the Additional Classes option for a given field on the edit form page which allows you to take advantage of special styles.
How To Use Bundled Classes
To add one of the bundled classes to a Mailchimp form field, head to the Edit Form page. Click on one of the form fields to reveal additional form field settings. One of the form field options is Additional Classes. You can add any of the bundled CSS classes to the form field in the field.
After you add one of the bundled CSS classes to a form field, you’ll need to click the Update button to ensure the data is assigned to the form field.
Available Bundled CSS Classes
Below is a full list of available bundled CSS classes that we have packaged with the plugin.
Halves (2 Columns)
Setting up a 2 column opt in form is easy using the following bundled CSS classes. To align two fields side by side (2 equal columns) you can use these bundled CSS classes. The two fields have to be adjacent to each other in the form. The field-left-half class has to be added to the first field and the field-right-half class to the second field (and so on).
field-left-half
This class places the opt in form field in the left column (left half) of a 2 column layout.
field-right-half
This class places the opt in form field in the right column (right half) of a 2 column layout.
Example:
Before CSS Classes Applied
With ‘field-left-half’/’field-right-half’ Classes Applied
Thirds (3 Columns)
Setting up a 3 column opt in form is easy using the following bundled CSS classes. To align three fields on the same line (3 equal columns) you can use these bundled CSS classes. The three fields have to be adjacent to each other in the Form Builder. The field-third class has to be added to the all form fields you want to reside on the same line.
field-third
This class will set the form field to 1/3 the width of the parent container, and float it left.
Example:
Before CSS Classes Applied
With ‘field-third’ Class Applied
List Classes
Inline
You can easily set up an inline list, so that each of the elements is floated left using the following CSS class.
option-inline
This class will split any list of options (radio buttons, checkboxes) into a a dynamic list
Example:
Before CSS Classes Applied
With ‘option-inline’ Class Applied
Halves (2 Column List)
You can easily set up a 2 column list using the following CSS bundled class.
option-2-col
This class will split any list of options (radio buttons, checkboxes) into a 2 column, evenly split, list.
Example:
Before CSS Classes Applied
With ‘option-2-col’ Class Applied
Thirds (3 Column List)
You can easily set up a 3 column list using the following CSS bundled class.
option-3-col
This class will split any list of options (radio buttons, checkboxes) into a 3 column, evenly split, list.
Example:
Before CSS Classes Applied
With ‘option-3-col’ Class Applied
Quarters (4 Column List)
You can easily set up a 4 column list using the following CSS bundled class.
option-4-col
This class will split any list of options (radio buttons, checkboxes) into a 4 column, evenly split, list.
Example:
Before CSS Classes Applied
With ‘option-4-col’ Class Applied
Additional Classes
Along with the default bundled CSS classes listed above, we have provided an additional set of classes to adjust the height of option lists. You can adjust the height of each radio/checkbox option in a given list by assigning the following classes:
- option-height-25 – Set the height of a list option to 25px.
- option-height-50 – Set the height of a list option to 50px.
- option-height-75 – Set the height of a list option to 75px.
- option-height-100 – Set the height of a list option to 100px.
- option-height-125 – Set the height of a list option to 125px.
- option-height-150 – Set the height of a list option to 150px.
Note: The above classes can be combined with the option-inline & option-2/3/4-col bundled classes to set the height for each individual selectable option.
Example:
Before CSS Classes Applied
With ‘option-height-50’ Class Applied
