Apply custom CSS to style forms, surveys, and quizzes in Aesthetix CRM beyond the built-in design options, with ready-to-use snippets.
Custom CSS lets you fine-tune how your forms, surveys, and quizzes look so they match your practice branding. This guide covers where to add your CSS, ready-to-use styling examples, and how to troubleshoot when your styles do not appear.
Note: This is an advanced, optional technique. Most styling can be handled with the built-in design controls in the builder. Reach for custom CSS only when you need visual tweaks that are not available in the standard panels, and you are comfortable working with CSS.
There are three places you can add custom CSS, depending on how and where your form is used.
This method styles the form, survey, or quiz itself, including its fields and buttons.
Go to Web Tools → Form Builder (or Survey Builder / Quiz Builder).
Open your form.
Click the Styles tab, then open the Advanced section and find the Custom CSS area.
Paste your CSS code.
Click Save, then Publish.
Note: 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 are not available in the Layout panel.
If your form is embedded on a page, you can style the container around it:
Open your Landing Page or Website in the builder.
Go to Settings → Custom CSS.
Add CSS here to style the container around the form, such as margins, padding, or background color.
Note: You cannot style the fields or buttons from here, because the form is loaded inside an iframe. To style the fields and buttons, use Option 1.
When your form is embedded on an external site, you can still style the iframe container, but not the form fields inside it. To style the fields and buttons, use Option 1.
Use these snippets as a starting point and adjust the colors and values to match your practice branding.
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); }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; }label { font-weight: 600; color: #111827; }
.hl-error, .error-message { color: #DC2626; font-size: 14px; }.hl-progress .fill { background-color: #7C3AED; transition: width 0.3s ease; }@media (max-width: 480px) { form { padding: 0 10px; } button[type="submit"] { width: 100%; } }You can also style the Previous, Next, and Submit buttons in surveys using these snippets. Change #28A745 to your brand color to match your theme.
.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; }Paste this into your form's Custom CSS box for a clean, branded starting point:
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; }If your CSS is not working:
Make sure it is added in the Custom CSS area inside the form, survey, or quiz (Option 1).
Click Publish, then refresh your browser or open the page in an Incognito window.
If your form is embedded, remember that page CSS will not affect the inside of the form because of the iframe.
Always Save and Publish after edits.
Use your browser's inspect tool (right-click, then Inspect) to find element class names.
Avoid overusing !important.
Check how your form looks on both desktop and mobile.
Where should I add custom CSS to style form fields and buttons? Add it inside the form, survey, or quiz itself under Styles → Advanced → Custom CSS. This is the only place that can style the fields and buttons directly.
Why can't I style the form fields from my page settings? When a form is embedded on a page, it loads inside an iframe. Page-level CSS can only reach the container around the form, not the fields and buttons inside it. Style those from inside the form instead.
Can I style a form embedded on an external site like WordPress? You can style the iframe container (margins, padding, background), but not the fields inside it. To style the fields and buttons, add your CSS inside the form builder.
My CSS changes are not showing up. What should I check? Confirm the CSS is in the correct Custom CSS area, click Publish, then refresh your browser or open the page in an Incognito window. Remember that page CSS will not reach the inside of an embedded form.
How do I match the styling to my practice branding?
Replace the color values in the snippets (such as #7C3AED or #28A745) with your own brand colors. You can apply them to inputs, buttons, labels, and progress bars.
How do I add spacing above my form? Use the built-in top-margin controls under Styles → Layout in the builder first. Reserve custom CSS for advanced visual tweaks that are not available in the Layout panel.
How do I find the class name of an element I want to style? Right-click the element in your browser and choose Inspect. This opens the developer tools and shows the element's class names, which you can target in your CSS.
Should I use !important in my CSS?
Use it sparingly. Overusing !important makes your styles harder to maintain and override later. Try more specific selectors first, and reserve !important for cases where it is truly needed.