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 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.
2. Basic CSS Examples
A. Input Fields
input, textarea, select { border: 1px solid #ccc; border-radius: 8px; padding: 10px; font-size: 16px; } input:focus, textarea:focus { border-color: #7C3AED; box-shadow: 0 0 4px rgba(124, 58, 237, 0.3); }B. Submit Button
button[type="submit"] { background-color: #7C3AED; color: white; padding: 12px 20px; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; } button[type="submit"]:hover { background-color: #6931d4; }C. Labels and Errors
label { font-weight: 600; color: #111827; } .hl-error, .error-message { color: #DC2626; font-size: 14px; }D. Survey/Quiz Progress Bar
.hl-progress .fill { background-color: #7C3AED; transition: width 0.3s ease; }E. Mobile-Friendly Styling
@media (max-width: 480px) { form { padding: 0 10px; } button[type="submit"] { width: 100%; } }3. Styling Survey Navigation Buttons
You can also style the Previous, Next, and Submit buttons in surveys using these CSS snippets.
.ghl-footer-preview .ghl-submit-btn { background-color: #28A745 !important; color: #FFFFFF !important; } .ghl-footer-preview .ghl-footer-next { background-color: #28A745 !important; color: #FFFFFF !important; } .ghl-footer-preview .ghl-footer-back { background-color: #28A745 !important; color: #FFFFFF !important; }? You can change #28A745 to your brand color to match your theme.
4. Troubleshooting
CSS not working?
Make sure it’s added in the Custom CSS area inside the Form/Survey/Quiz.
Click Publish, then refresh your browser or open in Incognito.
If embedded, remember: page CSS won’t affect the inside of the form (because of the iframe).
5. Quick Tips
Always Save and Publish after edits.
Use Inspect (right-click → Inspect) to find element class names.
Avoid overusing
!important.Check how it looks on desktop and mobile.
6. Example Template (Copy & Paste)
Paste this into your Form’s Custom CSS box:
input, textarea, select { width: 100%; border: 1px solid #D0D5DD; border-radius: 8px; padding: 10px; } label { font-weight: 600; color: #111827; } button[type="submit"] { background: #7C3AED; color: #fff; padding: 12px 18px; border: none; border-radius: 8px; cursor: pointer; } button[type="submit"]:hover { background: #6931d4; }You’re done! Your form, survey, or quiz will now have your custom styles applied, including buttons styled to match your brand.