Help Center

Adding Custom CSS to Forms, Surveys, and Quizzes

You can customize the appearance of your forms, surveys, and quizzes by adding your own CSS code. This allows you to modify styles such as colors, fonts, borders, and spacing to match your brand or design preferences.

Where to Add Custom CSS

There are several ways to apply custom CSS, depending on how and where your form is used.

Option 1: Inside the Form, Survey, or Quiz (Recommended)

This method applies styles directly to the form elements and is the most effective for detailed customization.

Navigate to Sites, then open the Form Builder, Survey Builder, or Quiz Builder.
Select your form to edit it.
Click the Styles tab, go to the Advanced section, and locate the Custom CSS area.
Paste your CSS code into the provided box.
Click Save, then Publish to apply your changes.

For basic adjustments like top spacing, first try using the built-in layout controls in the Styles tab before resorting to custom CSS.

Option 2: On a Funnel or Website Page

If your form is embedded in a funnel or website page, you can style the container around it.

Open the Funnel or Website Builder.
Go to Settings and find the Custom CSS section.
Add CSS here to modify the container’s margins, padding, or background color.

Note: This method cannot style individual form fields or buttons because the form is loaded inside an iframe.

Option 3: On External Sites

When embedding your form on external platforms like WordPress, you can only style the iframe container, not the internal form elements.

Basic CSS Examples

Here are some common CSS snippets you can use to style various parts of your form.

Input Fields

To style text inputs, text areas, and dropdowns:

Set a border, border radius, padding, and font size for a clean look.
Add focus states to improve user experience.

Submit Button

Customize the appearance of your submit button:

Define background color, text color, padding, and border radius.
Include a hover effect for interactivity.

Labels and Error Messages

Make labels bold and error messages stand out:

Use a darker color for labels and a contrasting color for errors.
Adjust font size for better readability.

Survey or Quiz Progress Bar

Style the progress bar to match your theme:

Change the fill color and add a smooth transition.

Mobile-Friendly Styling

Ensure your form looks good on mobile devices:

Use media queries to adjust padding and button width on smaller screens.

Customize Previous, Next, and Submit buttons in surveys:

Apply consistent background and text colors to all navigation buttons.
Replace the example color with your brand’s primary color.

Troubleshooting

If your CSS isn’t working:

Confirm you added it in the Custom CSS area inside the form, survey, or quiz.
Click Publish and refresh your browser or try an incognito window.
Remember that page-level CSS won’t affect forms inside iframes.

Quick Tips

Always Save and Publish after making changes.
Use your browser’s Inspect tool to find class names for styling.
Avoid overusing !important in your CSS.
Test your styles on both desktop and mobile devices.

Example Template

Copy and paste this code into your form’s Custom CSS box to get started:

Styles input fields, text areas, and dropdowns with full width, a subtle border, and rounded corners.
Makes labels bold and dark.
Customizes the submit button with a brand color and hover effect.

Once applied, your form, survey, or quiz will reflect your custom styles, including branded buttons and a cohesive look.

How to Apply Custom CSS to Forms, Surveys, and Quizzes