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.
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:
![](https://www.growform.co/wp-content/uploads/2020/12/image-1024x608.png)
In this box, you can enter regular CSS – for example, the following would be perfectly valid (although may be overwitten by other styles in your form):
a {
color: blue
}
List of targetable tags and examples
As well as regular CSS tags that can be affected (like “body”, “a”, “p” and so on), the following sample CSS sheet includes all 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;
}
Need more? We’re actively working on our custom styles offering, including making more parts of Growform customisable.
Please get in touch with us to provide feedback and help us shape the roadmap.
Recent Posts
- We Reviewed the Best Kissflow Alternatives for Workflow Automation & Lead Generation
- We Reviewed the Best Lead Validation Software Solutions for 2024
- We List the Best Local Lead Generation Strategies for Boosting Conversions
- How to Create a Multi-Step Form in 5 Minutes (No Coding Required)
- How We Build High-Converting Lead Capture Pages