Jules, a web designer who uses Ninja Forms for all of her projects, wants to use the Repeatable Fieldset on the WordPress form he’s building. But she has a little problem. The default field styles are still basic, even with opinionated styles turned on.
She needs to add styles from a branding guide without loading another stylesheet just for a few repeater fields. So what should Jules do?
Lucky for Jules, Ninja Forms has the perfect solution. It’s called the Layout and Styles add-on. With it, you can turn any default repeater field into one that’s eye-catching in just a few shakes of a lamb’s tail.
In this article, we will show you how to use Layout and Styles so you can turn that boring old repeater into something spectacular.
How to style repeater fields with Layout and Styles
First, install the Layout and Styles add-on. To apply styles to all repeating fielding fields that exist now and in the future, head over to Style Settings in Ninja Forms > Styling. From there, navigate to Field Type Styles. Choose Repeatable Fieldset from the Select a Field Type dropdown.
Doing so will reveal three components of every field: the wrap, the label, and the element. Each component comes with the following style options:
- Background Color
- Border Width
- Border Style
- Text Color
- Height
- Width
- Font Size
- Margin
- Padding
To remove existing styles, click the Clear All Styles button to the right of the Styling Menu.
How to style your repeater field description
You can think of the “wrap” as the space surrounding the field’s outside. Use the wrap to style the DESCRIPTION section of your repeating field. You can do this by changing the Background Color and Text Color.
How to style your repeater field’s label ( name of the field )
The label is used to identify and receive field input. To enhance the label’s look, consider adding changes to the Background Color, Text Color, and Font Size.
How to style your repeater field’s input, aka the “field element.”
Think of the element as what is inside the field (except for the placeholder ). This includes things like the background, border, and input text. To style the Element field component, use the following properties:
- Background Color
- Border Width
- Border Style
- Text Color
- Height
- Width
- Font Size
- Margin
- Padding
Think of the element as what is inside the field (except for the placeholder ), “where a user types the information into the form field,” so the language is simple.
Revel in the joy of styled repeater fields with the Layout and Styles add-on from Ninja Forms!
Now that Jules knows how to style repeater fields without batting an eye. It’s your turn!
With our Layout and Styles add-on, you can turn that repeater field into a form field you’re proud of. So give Google a rest and get your hands on one of our most popular add-ons. Besides creating styles, you can build multi-column layouts with our drag-and-drop tool too.
Layout and Styles comes with three different licensing options; single-site for $49.00, five-site for $72.00, and 20-site for $99.00. With our 14-day money-back guarantee, what do you have to lose?
