Customize Looks With Custom CSS

If the built-in style controls are not enough, custom CSS lets you fine-tune details on forms, surveys and quizzes.

Where to add it

1. Open the form, survey or quiz in the builder.
2. Go to Styles > Advanced > Custom CSS.
3. Paste your CSS.
4. Click Save, then publish and preview.

Rules added here change the form itself. If the form is embedded on a Sites page, a page-level CSS box only styles the container around it, not the fields or buttons inside, because the form loads in its own frame. The same limit applies to external websites.

Example snippets

Soften input borders:

input, textarea, select { border: 1px solid #ccc; border-radius: 8px; padding: 10px; }

Restyle the submit button:

button[type="submit"] { background: #7C3AED; color: #fff; border-radius: 8px; }

Full-width button on phones:

@media (max-width: 480px) { button[type="submit"] { width: 100%; } }

Use built-in controls first

Spacing above the form, colors, fonts and button looks are available under Styles > Layout and Button Styling. Reserve CSS for finishing touches that those panels cannot do.

Good to know: Test your CSS in Preview on both desktop and phone, and keep a copy of your snippets so you can paste them into other forms later.