Growform Multi Step Form Builder
  • Templates
  • Integrations
  • Testimonials
  • Pricing
  • Contact us
  • Log in
  • Free trial

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:

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.

Form URL
Form template image
Form template title
Form template blurb
form embed 2
Fake LP from bg colour picker
Fake LP logo
Fake LP header
Fake LP subcopy
Fake LP background image
Fake LP secondary text colour picker
test field
Case study description

Post a Comments

Recent Posts

  • How To Create A Multi-Step Asana Request Form (No Code)
  • How To Create Hubspot Multi-Step Forms (Without Code)
  • Embeddable Forms For Your Website
  • Logic Jump: How To Craft Powerful Forms With Jumping Logic
  • Mastering Conditional Logic Forms: How-To Guide + Examples

Categories

  • Convertri
  • CRO
  • Form design
  • Google Tag Manager
  • Hubspot
  • Integration
  • Lead generation
  • Marketing
  • Multi step form design
  • Real estate
  • Tools
  • TrustedForm
  • Unbounce
  • Unbounce tutorials
  • Using growform

Try Growform Multi Step Form Builder »

Guides

  • Asana
  • Hubspot
  • Instapage
  • Leadpages
  • Unbounce
  • Webflow
  • WordPress

Features

  • All Features
  • Conditional logic forms
  • Conversational forms
  • Embeddable forms
  • Lead capture forms
  • Lead verification
  • Logic jump forms
  • TrustedForm forms
  • Wizard forms
  • Comparisons

More

  • Affiliate Partners
  • Terms of Service
  • Privacy & GDPR
  • Service status
  • Blog
  • Help docs
  • Climate pledge
© 2020 - 2021 Growform Ltd. All rights reserved. Growform is a company registered in England and Wales. Company No. 13097518. Registered office: Kemp House, 160 City Road, London, United Kingdom, EC1V 2NX , UK
  • English
  • Français
  • Español
  • Italiano
  • Deutsch