Custom CSS For The Form Builder

Create advanced styling and designs to your forms with CSS.

October 17, 2024

Copy for LLM

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

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

Make the Clare 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;}

How to Add Custom Fields to Forms & Landing Pages

Did this answer your question?

Disappointed ReactionNeutral ReactionSmiley Reaction