Custom CSS for the New Form Builder

With the launch of the  new form builder, (built from the ground up!), there are also new CSS classes. Below are the common classes you may encounter for their respective elements, in the event you want to make changes. 

You can find examples at the end of this article!

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:

Header

.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 }<br>

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.

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 form border

{border: 2px solid  #0984e3;}

Still need help? Contact Us Contact Us