Skip to content
Sites

Understanding the Primary Color in Forms, Surveys and Quizzes

Learn how Primary Color powers hover, focus, dropdowns, date pickers, and selections across forms, surveys, and quizzes with optional button mapping.

3 min read599 words7 explained images
View as markdownOpen in ClaudeOpen in ChatGPT
Each image has a one line explanation. Switch to full detail for the step it belongs to, the fields and buttons involved, examples and the whole procedure.
On this page
  1. Key Benefits of Primary Color Effects
  2. Primary Color Accents in Elements
  3. How to Change Your Primary Color
  4. Frequently Asked Questions
  5. Related Articles

Bring your forms, surveys, and quizzes to life! GHL Customer Care’s primary-color interactions let every hover, click, and selection pulse with your brand color.

TABLE OF CONTENTS

What are Enhanced Form Interactions with Primary Color Effects?

The Primary Color setting controls how your form elements look when users interact with them. It automatically applies your chosen brand color to input fields, dropdowns, checkboxes, and other elements — keeping everything visually consistent with your branding.

The Primary Color feature keeps your forms looking professional, cohesive, and on-brand — without needing any design experience. It also improves accessibility by making active and selected elements easier to see.

Key Benefits of Primary Color Effects

  • Brand Consistency: Creates a cohesive look and feel across Forms, Surveys, and Quizzes.

  • Usability & Clarity: Highlights hover and active states so users always know where they are typing or what they selected.

  • Trust & Professionalism: Polished, responsive states can improve perceived quality and completion rates.

  • Fewer Styling Steps: Set it once and the color applies to multiple interactive elements automatically.

  • Flexibility: Optionally map the Primary Color to button color for complete visual harmony.

Primary Color Accents in Elements

When you set a Primary Color, it updates the appearance of several form interactions. These visual effects help users see where they’re clicking or typing while keeping your forms aligned with your brand colors. The primary color appears only when users interact with a form, such as:

  • Hovering over a field

  • Clicking or typing in a field

  • Selecting a checkbox or radio button

  • Choosing a date or option

If no primary color is defined, the form uses the default neutral styling. Below is how the primary color is shown in each type of element.

  • Form Fields: The border highlights with your primary color when hovered or clicked.

    Step 1 of 5: Form Fields: The border highlights with your primary color when… What this shows Step 1 of 5: Form Fields: The border highlights with your primary color when hovered or clicked. What this shows Shows what this covers for step 1 of 5 in the "Primary Color Accents in Elements" section of "Understanding the Primary Color in Forms, Surveys and Quizzes". This screenshot accompanies step 1 of 5 in the "Primary Color Accents in Elements" section of "Understanding the Primary Color in Forms, Surveys and Quizzes". At this point in the walkthrough you form Fields: The border highlights with your primary color when hovered or clicked. This part of the guide covers 4 fields, listed below. The next step is to dropdowns: Options and borders reflect the primary color when opened or selected. Step 1 of 5Image 1 of 7 What this coversForm Fields: The border highlights with your primary color when hovered or clicked.
    Fields in this part of the guide Hovering over a fieldClicking or typing in a fieldSelecting a checkbox or radio buttonChoosing a date or option
    Buttons and menus referenced Primary Color
    Next stepDropdowns: Options and borders reflect the primary color when opened or selected.
    All 5 steps in this procedure
    1. Form Fields: The border highlights with your primary color when hovered or clicked. this image
    2. Dropdowns: Options and borders reflect the primary color when opened or selected.
    3. Checkboxes & Radio Buttons: Selected options fill with your primary color.
    4. Date Picker: The active or selected date is highlighted in your primary color.
    5. File Uploads & Signature Fields: Borders and sketch colors use your primary color.

  • Dropdowns: Options and borders reflect the primary color when opened or selected.

    Step 2 of 5: Dropdowns: Options and borders reflect the primary color when opened… What this shows Step 2 of 5: Dropdowns: Options and borders reflect the primary color when opened or selected. What this shows Shows what this covers for step 2 of 5 in the "Primary Color Accents in Elements" section of "Understanding the Primary Color in Forms, Surveys and Quizzes". This screenshot accompanies step 2 of 5 in the "Primary Color Accents in Elements" section of "Understanding the Primary Color in Forms, Surveys and Quizzes". At this point in the walkthrough you dropdowns: Options and borders reflect the primary color when opened or selected. This part of the guide covers 4 fields, listed below. The next step is to checkboxes & Radio Buttons: Selected options fill with your primary color. Step 2 of 5Image 2 of 7 What this coversDropdowns: Options and borders reflect the primary color when opened or selected.
    Fields in this part of the guide Hovering over a fieldClicking or typing in a fieldSelecting a checkbox or radio buttonChoosing a date or option
    Buttons and menus referenced Primary Color
    Next stepCheckboxes & Radio Buttons: Selected options fill with your primary color.
    All 5 steps in this procedure
    1. Form Fields: The border highlights with your primary color when hovered or clicked.
    2. Dropdowns: Options and borders reflect the primary color when opened or selected. this image
    3. Checkboxes & Radio Buttons: Selected options fill with your primary color.
    4. Date Picker: The active or selected date is highlighted in your primary color.
    5. File Uploads & Signature Fields: Borders and sketch colors use your primary color.

  • Checkboxes & Radio Buttons: Selected options fill with your primary color.

    Step 3 of 5: Checkboxes & Radio Buttons: Selected options fill with your primary… What this shows Step 3 of 5: Checkboxes & Radio Buttons: Selected options fill with your primary color. What this shows Shows what to fill in for step 3 of 5 in the "Primary Color Accents in Elements" section of "Understanding the Primary Color in Forms, Surveys and Quizzes". This screenshot accompanies step 3 of 5 in the "Primary Color Accents in Elements" section of "Understanding the Primary Color in Forms, Surveys and Quizzes". At this point in the walkthrough you checkboxes & Radio Buttons: Selected options fill with your primary color. This part of the guide covers 4 fields, listed below. The next step is to date Picker: The active or selected date is highlighted in your primary color. Step 3 of 5Image 3 of 7 What to fill inCheckboxes & Radio Buttons: Selected options fill with your primary color.
    Fields in this part of the guide Hovering over a fieldClicking or typing in a fieldSelecting a checkbox or radio buttonChoosing a date or option
    Buttons and menus referenced Primary Color
    Next stepDate Picker: The active or selected date is highlighted in your primary color.
    All 5 steps in this procedure
    1. Form Fields: The border highlights with your primary color when hovered or clicked.
    2. Dropdowns: Options and borders reflect the primary color when opened or selected.
    3. Checkboxes & Radio Buttons: Selected options fill with your primary color. this image
    4. Date Picker: The active or selected date is highlighted in your primary color.
    5. File Uploads & Signature Fields: Borders and sketch colors use your primary color.

  • Date Picker: The active or selected date is highlighted in your primary color.

    Step 4 of 5: Date Picker: The active or selected date is highlighted in your… What this shows Step 4 of 5: Date Picker: The active or selected date is highlighted in your primary color. What this shows Shows what this covers for step 4 of 5 in the "Primary Color Accents in Elements" section of "Understanding the Primary Color in Forms, Surveys and Quizzes". This screenshot accompanies step 4 of 5 in the "Primary Color Accents in Elements" section of "Understanding the Primary Color in Forms, Surveys and Quizzes". At this point in the walkthrough you date Picker: The active or selected date is highlighted in your primary color. This part of the guide covers 4 fields, listed below. The next step is to file Uploads & Signature Fields: Borders and sketch colors use your primary color. Step 4 of 5Image 4 of 7 What this coversDate Picker: The active or selected date is highlighted in your primary color.
    Fields in this part of the guide Hovering over a fieldClicking or typing in a fieldSelecting a checkbox or radio buttonChoosing a date or option
    Buttons and menus referenced Primary Color
    Next stepFile Uploads & Signature Fields: Borders and sketch colors use your primary color.
    All 5 steps in this procedure
    1. Form Fields: The border highlights with your primary color when hovered or clicked.
    2. Dropdowns: Options and borders reflect the primary color when opened or selected.
    3. Checkboxes & Radio Buttons: Selected options fill with your primary color.
    4. Date Picker: The active or selected date is highlighted in your primary color. this image
    5. File Uploads & Signature Fields: Borders and sketch colors use your primary color.

  • File Uploads & Signature Fields: Borders and sketch colors use your primary color.

How to Change Your Primary Color

  1. From within the builder, go to Style and Options → Styles

    Step 1 of 3: From within the builder, go to Style and Options → Styles What this shows Step 1 of 3: From within the builder, go to Style and Options → Styles What this shows Shows what this covers for step 1 of 3 in the "How to Change Your Primary Color" section of "Understanding the Primary Color in Forms, Surveys and Quizzes". This screenshot accompanies step 1 of 3 in the "How to Change Your Primary Color" section of "Understanding the Primary Color in Forms, Surveys and Quizzes". At this point in the walkthrough you from within the builder, go to Style and Options → Styles. This part of the guide covers 1 field, listed below. The next step is to scroll down to the Primary Color field which is under Colors and Background. Step 1 of 3Image 5 of 7 What this coversFrom within the builder, go to Style and Options → Styles
    Fields in this part of the guide From within the builder, go to Style and Options → Styles
    Buttons and menus referenced Style and Options→ StylesPrimary ColorColors and Background“Map Primary color to Button color”Save
    Next stepScroll down to the Primary Color field which is under Colors and Background.
    All 3 steps in this procedure
    1. From within the builder, go to Style and Options → Styles this image
    2. Scroll down to the Primary Color field which is under Colors and Background.
    3. Select a color or enter a custom hex code. Toggle the “Map Primary color to Button color” if you want buttons to follow suit. Click Save to apply the changes. Your forms will automatically update to use the new color for all interactive elements.

  2. Scroll down to the Primary Color field which is under Colors and Background.

    Step 2 of 3: Scroll down to the Primary Color field which is under Colors and… What this shows Step 2 of 3: Scroll down to the Primary Color field which is under Colors and Background. What this shows Shows what this covers for step 2 of 3 in the "How to Change Your Primary Color" section of "Understanding the Primary Color in Forms, Surveys and Quizzes". This screenshot accompanies step 2 of 3 in the "How to Change Your Primary Color" section of "Understanding the Primary Color in Forms, Surveys and Quizzes". At this point in the walkthrough you scroll down to the Primary Color field which is under Colors and Background. This part of the guide covers 1 field, listed below. The next step is to select a color or enter a custom hex code. Toggle the “Map Primary color to Button color” if you want buttons to follow suit. Click Save to apply the changes. Your forms will automatically update to use the new color for all interactive elements. Step 2 of 3Image 6 of 7 What this coversScroll down to the Primary Color field which is under Colors and Background.
    Fields in this part of the guide From within the builder, go to Style and Options → Styles
    Buttons and menus referenced Primary ColorColors and BackgroundStyle and Options→ Styles“Map Primary color to Button color”Save
    Next stepSelect a color or enter a custom hex code. Toggle the “Map Primary color to Button color” if you want buttons to follow suit. Click Save to apply the changes. Your forms will automatically update to use the new color for all interactive elements.
    All 3 steps in this procedure
    1. From within the builder, go to Style and Options → Styles
    2. Scroll down to the Primary Color field which is under Colors and Background. this image
    3. Select a color or enter a custom hex code. Toggle the “Map Primary color to Button color” if you want buttons to follow suit. Click Save to apply the changes. Your forms will automatically update to use the new color for all interactive elements.

  3. Select a color or enter a custom hex code. Toggle the “Map Primary color to Button color” if you want buttons to follow suit. Click Save to apply the changes. Your forms will automatically update to use the new color for all interactive elements.

    Step 3 of 3: Select a color or enter a custom hex code. Toggle the “Map Primary… What this shows Step 3 of 3: Select a color or enter a custom hex code. What this shows Shows what to fill in for step 3 of 3 in the "How to Change Your Primary Color" section of "Understanding the Primary Color in Forms, Surveys and Quizzes". This screenshot accompanies step 3 of 3 in the "How to Change Your Primary Color" section of "Understanding the Primary Color in Forms, Surveys and Quizzes". At this point in the walkthrough you select a color or enter a custom hex code. Toggle the “Map Primary color to Button color” if you want buttons to follow suit. Click Save to apply the changes. Your forms will automatically update to use the new color for all interactive elements. This part of the guide covers 1 field, listed below. Step 3 of 3Image 7 of 7 What to fill inSelect a color or enter a custom hex code. Toggle the “Map Primary color to Button color” if you want buttons to follow suit. Click Save to apply the changes. Your forms will automatically update to use the new color for all interactive elements.
    Fields in this part of the guide From within the builder, go to Style and Options → Styles
    Buttons and menus referenced “Map Primary color to Button color”SaveStyle and Options→ StylesPrimary ColorColors and Background
    All 3 steps in this procedure
    1. From within the builder, go to Style and Options → Styles
    2. Scroll down to the Primary Color field which is under Colors and Background.
    3. Select a color or enter a custom hex code. Toggle the “Map Primary color to Button color” if you want buttons to follow suit. Click Save to apply the changes. Your forms will automatically update to use the new color for all interactive elements. this image

Frequently Asked Questions

Q: Will this affect all forms?
Yes. All forms using the default styling will update automatically when you change your primary color.

Q: Can I set a different color just for one form?
Not right now. The primary color applies across all forms under your account.

Q: Can I turn off the hover or focus effects?
No. These effects are built in to improve clarity and usability for your form visitors.

Q: Will mobile devices show the same effects?
Yes, the highlights carry over to mobile devices.

Q: Can I keep a different button color than my Primary Color?
Yes. Leave the mapping toggle off and style buttons via your theme or custom styles.

Was this guide helpful?

Related guides

Exporting Form answers to Google Sheets1 min readSticky Contact in Forms, Surveys, and Calendars3 min read · 12 imagesGain Consent With Custom Checkboxes In Forms (GDPR Compliance)2 min read · 6 imagesConditional Logic V2 in Forms and Surveys!5 min read · 6 images