Open the theme
Click “Theme” on the right-hand side of the editor.
Feature
Custom form design
A theme sets the colors, fonts, spacing and button styles of your form, and custom CSS covers whatever the theme does not reach. The form looks like part of your landing page, not a third-party widget.
What is custom form design?
Custom form design means controlling how a form looks, so that it matches the page and the brand around it. In Growform the design is held in a theme, which you open with the “Theme” button in the editor. The theme applies to the whole form, so a color or a font is changed once.
What can form themes change?
Form themes in Growform control color, type, spacing and the movement between steps.
- Colors are set for the primary color, the body text, errors and the progress bar, and for the labels, text, borders and backgrounds of inputs.
- Each button style has its own styling group, as do link buttons, the continue button, the back button, and radio buttons and checkboxes.
- Layout settings cover the form width, the top, footer and side padding, “Show shadows” and a canvas background of a color or a tinted image.
- Fonts come from Google Fonts, with a default font and separate choices for individual elements.
- Step transitions can be switched off or set to a fast fade, a slow fade, swipe, smoke or rotate.
The progress bar has further settings of its own for its type and position.
How do you make a custom CSS form?
You make a custom CSS form by giving fields your own class names and writing rules for those classes in the form's settings. Growform is a form builder with custom CSS on every plan. Each field has a “Custom CSS classes” option, and the form settings hold a box for the CSS itself. The form background, the continue button, the back button and the progress bar have class names that you can target, and media queries are supported.
Can you remove the Growform branding?
Yes. The “Powered by Growform” banner is shown during the free trial only, and every paid plan removes it.
How to style a form in Growform
Choose the canvas setup
Pick “As a standalone page” for a form you share by link. Pick “Embedded on my website” for a form that sits inside your own page.
Set colors and fonts
Enter your “Primary color”, which colors the progress bar and the buttons. Then set the “Form width” and choose your fonts.
Add CSS where needed
Give a field a class under “Custom CSS classes”, then write the rule for that class in the custom CSS box in the form settings.
What a matching design does for your landing page
- The form reads as part of your page.
With the embedded canvas setup, no background and shadows switched off, the form sits flush with the landing page around it.
- Your brand carries from the ad to the last step.
The primary color and the fonts are set once in the theme and apply to every step of the form.
- Agencies can restyle one form for many clients.
You duplicate a proven form and change its theme, and the same questions appear under a different brand.
- Design changes do not need a developer.
The theme handles most styling through settings, which leaves CSS for the exceptions.
Which plans include themes and custom CSS?
Neither the theme editor nor custom CSS is restricted by plan.
- Basic
- Yes
- Professional
- Yes
- Scale
- Yes
- Custom
- Yes
Frequently asked questions
Do I need to know CSS to restyle a form?
No. Colors, fonts, widths and padding are all settings in the theme. CSS is there for finer changes beyond the theme.
Which parts of the form follow the primary color?
The primary color sets the progress bar and the buttons. Each of them can be given a color of its own where you want an exception.
Can I style one field differently from the rest?
Yes. Add a class to that field under “Custom CSS classes” and target the class in your CSS.
Can the form show my logo?
Yes. The standalone page setup adds a header with your logo, a footer and an optional side panel for extra information.
Start your free trial
Create beautiful multi-step forms that convert, with a 14-day free trial. No credit card required.