Contact and Registration Forms and Surveys

Styling and theming forms and surveys

Quick answer: Each form and survey has a Styles tab where you can adjust colors, fonts, spacing, and button design to match your school's brand. Surveys also have customizable footers and progress bars.

Where to find styling options

For forms

1. Open the form in Sites → Forms.
2. Click the Styles tab in the form builder.

For surveys

1. Open the survey in Sites → Surveys.
2. Use the right-side panel to access styling, footer, and progress bar settings.

What you can customize

Colors

• Background color
• Text color
• Button background and text color
• Border color

Match these to your school's brand colors — pull the hex codes from your style guide.

Typography

• Font family
• Font size for labels, inputs, and buttons
• Font weight (normal, bold)

Spacing and layout

• Padding around the form
• Spacing between fields
• Field width (full row, half row, third row)
• Full Width toggle for responsive layouts

Buttons

• Button text (e.g., "Submit", "Send", "Request Tour")
• Button color
• Button shape (rounded vs. square corners)
• Button size

Survey-specific styling

Footer

Surveys have a configurable footer at the bottom of every slide. In the right-side panel of the survey builder, you can:

• Enable or disable the footer
• Position it left, right, or both
• Attach it to the survey or detach it to sit at the bottom of the page
• Customize footer button colors, text, and font

Progress bar

The progress bar shows visitors how far they've come. Options:

• Show as page count (e.g., "Page 3 of 5")
• Show as percentage (e.g., "60% complete")
• Show as a progress strip across the top
• Choose colors to match your theme

Background images

You can set a background image on a survey to give it a richer, more branded feel. Useful for school admissions surveys or event signups where you want the survey to feel like an extension of your website's visual identity.

Next/Previous buttons

Customize:

• Button height and size
• Font, weight, and color
• Whether to show as text, arrows, or both

Pre-built themes

Both forms and surveys come with a library of pre-built themes you can apply with one click and then customize from there. Browse them in the Styles or theme panel. Themes are a fast way to get a polished look without picking every color and font from scratch.

Tips

• Match your website. Pull colors and fonts directly from your school's brand guide so the form looks like part of your site, not an embedded foreign element.
• Preview before publishing. Open the form preview after every styling change to make sure it looks right.
• Test on mobile. Most form submissions happen on phones. Open the preview on your phone (or use the browser's responsive design tools) and confirm the form looks good at narrow widths.
• Don't over-style. A clean, well-spaced form converts better than a heavily designed one. White space is your friend.

Related articles

• How to create a contact form
• How to create a survey
• Embedding forms on your website