Skip to main content
All CollectionsGrowForms
Custom CSS For The Form Builder
Custom CSS For The Form Builder

Create advanced styling and designs to your forms with CSS.

Updated over a week ago

How to advance your form's styling and design.

Below are the common classes you may encounter for their respective elements, in the event you want to make changes while using the form builder.

First we'll cover how to properly target your form.

How to Target

If you'd like to make changes to the form itself, you don't need to declare a class because any code in the custom CSS box is already included inside of the form wrapper.

 { css goes here }

For other forms, you can target them with these selectors:

.formkit-header { css goes here }

Description

[data-contents="true"] span { css goes here }

Image

.formkit-image { css goes here }

Both First Name and Email Field

.formkit-input { css goes here }

First Name Field (assuming this is the first field)

.formkit-field:first-child { css goes here }

Email Field (assuming this is the last field)

.formkit-field:last-child { css goes here }

Checkboxes

.formkit-checkbox { css goes here }

Subscribe Button

.formkit-submit { css goes here }

or

[data-element="submit"] { css goes here }

Spam Disclosure Text

.formkit-guarantee { css goes here }

Built with Kit Badge

On paid plans, this can now be removed in the UI simply by clicking on it, then (on the right hand side) uncheck and save.

Custom CSS Examples

Below are a few examples of how custom CSS can help you! (Any styles and colors other than what the titles below describe were accomplished using the Form Builder.)

Align the subscribe button and form fields

Join the Newsletter - Google Chrome 2024-10-04 at 10.56.35 AM
.formkit-submit { width: 100% !important; }

Make the Clare form full width

Clare form - Google Chrome 2024-10-04 at 10.59.31 AM
.formkit-field { width: 100%; } 
.formkit-submit { width: 100%; }

Change the color of selected checkboxes

Pine form - Kit - Google Chrome 2024-10-04 at 11.06.43 AM
.formkit-checkbox:checked + label::before { 
background: #6c5ce7 !important;
border-color: #6c5ce7 !important;
border-radius: 3px;
}

Add a border

Get the Blueprints - Google Chrome 2024-10-04 at 11.15.00 AM
{border: 2px solid #0984e3;}

Did this answer your question?