How to Add Custom CSS to Forms, Surveys, and Quizzes!
Learn how to add and customize CSS in GHL Customer Care forms, surveys, and quizzes. Step-by-step guide with easy examples for buttons, inputs, and layouts.
Assistants need to reach this page over the internet. While it is only running on your machine, these two buttons will not be able to load it.
Each image has a one line explanation. Switch to full detail for the step it belongs to, the fields and buttons involved, examples and the whole procedure.
You can easily change how your forms, surveys, and quizzes look using Custom CSS. Follow these simple steps.
1. Where to Add Custom CSS
Option 1: Inside the Form, Survey, or Quiz (recommended)
Go to Sites → Form Builder (or Survey Builder / Quiz Builder).
Open your form.
Click on the Styles tab → Advanced Section →Custom CSS section.
Paste your CSS code.
Click Save, then Publish.
This method updates how the form looks inside the form or survey itself.
Tip: For basic top spacing above your form, survey, or quiz, use the built-in top-margin controls in the Styles → Layout section of the builder before adding Custom CSS. Reserve CSS for advanced visual tweaks that aren’t available in the Layout panel.Option 1: Inside the Form, Survey, or Quiz (recommended) (image 1 of 1)What this shows This method updates how the form looks inside the form or survey itself.What this showsIllustrates the "Option 1: Inside the Form, Survey, or Quiz (recommended)" section of "How to Add Custom CSS to Forms, Surveys, and Quizzes!".This animation appears in the "Option 1: Inside the Form, Survey, or Quiz (recommended)" section of "How to Add Custom CSS to Forms, Surveys, and Quizzes!". The text alongside this image reads: This method updates how the form looks inside the form or survey itself. Immediately after, the guide continues: If your form is embedded on a page.Image 1 of 1What this coversThis method updates how the form looks inside the form or survey itself.
Buttons and menus referencedSites → Form BuilderSurvey Builder / Quiz BuilderStyles→ Advanced Section →Custom CSSSavePublishinsideStyles → Layout
Next stepIf your form is embedded on a page:All 5 steps in this procedure
Go to Sites → Form Builder (or Survey Builder / Quiz Builder).
Open your form.
Click on the Styles tab → Advanced Section → Custom CSS section.
Paste your CSS code.
Click Save, then Publish.
Option 2: On the Funnel or Website Page
If your form is embedded on a page:
Open your Funnel or Website in the Builder.
Go to Settings → Custom CSS.
Add CSS here to style the container around the form (like margins, padding, or background color).
⚠ You cannot style fields or buttons here because the form is loaded inside an iframe.
Option 3: On External Sites (like WordPress)
You can still style the iframe container, but not the form fields inside.
