All Collections
Grow
Forms
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 }

CK Powered By Text

This can now be removed in the UI if you simply click 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

.formkit-submit { width: 100% !important; }

Make the Clean form full width

.formkit-field { width: 100%; } 
.formkit-submit { width: 100%; }

Change the color of selected checkboxes

.formkit-checkbox:checked + label::before { 
background: #6c5ce7 !important;
border-color: #6c5ce7 !important;
border-radius: 3px;
}

Add a border

{border: 2px solid #0984e3;}

Did this answer your question?