Form Themes and Branding

The Form Builder includes a comprehensive theming system that lets you customize the visual appearance of your public forms. Match your school's branding with custom colors, logos, header images, fonts, and backgrounds.

Accessing Theme Settings

1. Open a form in the Form Builder.
2. Click the Settings tab.
3. Scroll down to the Theme & Appearance section.

Color Customization

The theme system provides several color fields to customize:

• Primary color -- used for buttons, progress bars, and interactive elements.
• Background color -- the overall form background.
• Header background -- the color behind the form header area.
• Header overlay color -- an overlay color on top of the header image for better text readability.
• Header overlay opacity -- control the transparency of the overlay (0-100%).

Each color field uses a color picker that supports hex values, so you can enter your exact brand colors.

Header Configuration

The header area appears at the top of your public form and can be extensively customized:

Header Image

1. Choose from preset header images by clicking a thumbnail in the gallery.
2. Or upload a custom image using the upload button.
3. To remove the current header image, click Remove.

Header Dimensions

• Minimum height -- set the minimum header height in pixels (0-600).
• Maximum height -- set the maximum header height in pixels (0-600).
• Padding -- set custom padding values for top, right, bottom, and left sides.

Form Name Display

• Show form name -- toggle whether the form name appears in the header.
• Name font size -- adjust the size of the form name text.
• Name color -- customize the form name text color.

Form Description Display

• Show description -- toggle whether the form description appears in the header.
• Description font size -- adjust the size of the description text.
• Description color -- customize the description text color.

Font Selection

Choose fonts for different areas of the form:

• Sidebar font -- the font used in the form's navigation sidebar (for multi-step forms).
• Panel font -- the font used in the main form content area.

Background Image

You can add a background image to the entire form:

1. Toggle Background Image on.
2. Choose from preset background images in the gallery.
3. Or upload a custom background image.

TIP

When using a background image, consider adding a semi-transparent overlay to ensure form fields remain readable. Use light backgrounds with darker text, or dark backgrounds with lighter text.

School Logo

The form can display your school's logo:

1. In the Settings tab, look for the logo configuration.
2. Upload your school logo or reference the one configured in your school settings.
3. The logo appears in the form header area.

Live Preview

To see your theme changes in real time:

1. Make sure the form is saved and published.
2. Click the Live Preview button in the form builder header.
3. A new tab opens showing the form as applicants will see it, with all theme customizations applied.

WARNING

Theme changes are applied when you save the form. Make sure to save after making appearance changes to see them reflected in the live form.

Theme Best Practices

1. Consistency -- use your school's official brand colors and logo for a professional appearance.
2. Readability -- ensure sufficient contrast between text and background colors. White text on a light background or dark text on a dark background will be hard to read.
3. Header images -- use high-quality images that represent your school. Recommended resolution is at least 1200px wide.
4. Mobile-friendly -- preview your themed form on mobile devices. The form is responsive, but complex header images may look different on small screens.
5. File sizes -- keep uploaded images optimized for web. Large image files slow down form loading.

Form Color

In addition to the full theme customization, each form has a form color that appears as an identifying color in the form list and admin interface. This is separate from the theme colors visible to applicants.

1. In the Settings tab, find the Form Name section.
2. Click the color selector next to the form name input.
3. Choose a color for the form's internal identification.

Was this helpful?