How To Use Custom CSS With Growform

Growform provides powerful customisation options in theme settings. However, sometimes, you need more customisation.

If you find yourself needing to customise items that are unreachable with the usual settings, you can use custom CSS.

Beware, we're heading into developer territory - be sure to test your form thoroughly before going live.

Adding your own classes

Most fields allow you to add a custom class for styling. Click the field you'd like to style in the builder, and find "Custom CSS classes":

In this case, we've chosen to add a custom class of "redTitle" to our decorative header:

With that saved, you are then ready to add custom CSS in CSS settings...

Finding CSS settings

To find the custom CSS settings, navigate to your form in the Growform builder.

Then, hit "Edit form settings" and find "Custom CSS (experimental)" in advanced settings:

In this box, you can enter regular CSS - for example:

.redTitle {
color: red;
}

As well as targeting your own custom classes, you can also target other standard page elements like <p> and so on.

List of targetable tags and examples

As well as adding your own custom CSS tags or targeting other elements that can (like "body", "a", "p" and so on), the following sample CSS sheet includes some additional targetable tags, with example customisations.

You can also use media queries for additional control.

.parentContainer { background-color: pink; }  .formBackground { background-color: blue; }  .continueButton { background-color: green; }  .progressBar { margin-top: 50px; }  .button { background-color: purple; }  .button > span { font-size: 15px; }  .firstButtonInRow { background-color: orange; }  .backButton { color: black; }