Availability: Custom CSS is available on the Business Plan and higher.
⚠️ Important: Custom CSS is a developer-only feature. Our support team cannot write or troubleshoot custom CSS for you.
Overview
Custom CSS allows developers to override our default styling and apply their own styles to forms.
You can add custom CSS to any of the three available templates:
Full Page
Widget
Lightbox
This gives you greater control over how your campaign appears and allows you to customize the layout and visual styling beyond the built-in design options.
Features That Don’t Require Custom CSS
Many styling options can be changed directly in the campaign editor, so you may not need custom CSS at all.
You can modify the following within the editor:
Images
Location: Edit → Images
Fonts
Location: Edit → Design → Styles
You can change:
Paragraph fonts
Header fonts
(Custom fonts require CSS — see below.)
Styling
Location: Edit → Design → Styles
You can customize:
Icon colors
Backgrounds
Form fields
Buttons
Borders
Layout
Location: Edit → Design → Layout
You can adjust:
Form widths
Using Custom Fonts
If you want to use fonts that are not included in the editor, you can import them using Google Fonts.
Example: Apply a Custom Font to the Entire Form
/* Change Font */
@import url('link to font');
* {
font-family:'name-of-font', Helvetica, Arial, sans-serif !important;
}
You must replace:
link to fontwith the HTTPS URL of the Google Fontname-of-fontwith the font name
Example (Completed)
/* Change Font */
@import url('https://fonts.googleapis.com/css?family=Kumar+One');
* {
font-family:'Kumar One', Helvetica, Arial, sans-serif !important;
}
Hiding Form Fields
You can hide form fields using CSS. This is most commonly used when fields are pre-filled and should not appear on the form.
Example: Hide Standard Fields
.form div.form_item_wrapper.name {display:none;}
.form div.form_item_wrapper.email {display:none;}
.form div.form_item_wrapper.address {display:none;}
.form div.form_item_wrapper.address2 {display:none;}
.form div.form_item_wrapper.city {display:none;}
.form div.form_item_wrapper.state {display:none;}
.form div.form_item_wrapper.zip {display:none;}
.form div.form_item_wrapper.country {display:none;}
.form div.form_item_wrapper.phone {display:none;}
.form div.form_item_wrapper.birthday {display:none;}Hiding Custom Fields
Custom fields require a slightly different approach using nth-last-of-type.
Example
.form div.form_item_wrapper:nth-last-of-type(2) {display:none;}
.form div.form_item_wrapper:nth-last-of-type(3) {display:none;}Adjust the number to target the specific field you want to hide.
Post-Entry Page Customization
You can also customize elements that appear after a user submits the form.
Hide the Entry Count Box
ul.entry-details:not(.leaderboard) {display:none;}Hide Product Images
.post .images {display:none;}Show a Logo on the Post-Entry Page
body.post .post-entry {
background: transparent url(image_url_goes_here) top center no-repeat;
float: inherit;
padding: 61% 0 0 0;
background-size: contain;
}Replace image_url_goes_here with the URL of your logo.
Need Help?
If you have questions, our support team is happy to help.
Click the chat icon in the lower-right corner of the page to start a conversation with us.