This feature is only available on our Business Plan and higher. Please note, this is a developer only feature and we will not write your CSS for you.

Custom CSS is a developer only feature that allows you to overwrite our default styles with your own CSS. You can implement your own CSS styles for each of the three templates that we offer (full page, widget, and lightbox).

We've compiled a list below of the most common CSS classes, and what they apply to. We've also made note of certain elements you may wish to change that do not require custom CSS to be used.

The following items can be modified under our images, styling, campaign details, and layout sections and do not require you to write CSS to change them:

You can use Google Fonts to use any custom font.

To change the font on your entire form, you can use the following:

/* Change Font */
​@import url('link to font');
​* {font-family:'name-of-font',Helvetica,Arial,sans-serif!important;}

Within the above snippet, you need to include a URL to the font, and you also need to include the name of the font. The URL of the font must be HTTPS. A finished and working version would look like this:

/* Change Font */
​@import url('https://fonts.googleapis.com/css?family=Kumar+One');
​* {font-family:'Kumar One',Helvetica,Arial,sans-serif!important;}

To hide fields on your entry form, you can apply the below CSS. The best use case for this is if you are pre-filling fields and do not need to show them on the form.

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

For hiding custom form fields, you need to use: nth-last-of-type. For 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}

If you want to remove the box at the top of the post-entry page that shows the number of entries, use:

ul.entry-details:not(.leaderboard) {display:none;}

If you want to hide product images on the post-entry page:

.post .images {display:none;}

If you want to show the logo image 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; }

If you have any further questions, please start a Chat. Just "Click" on the chat icon in the lower right corner to talk with our support team.