# 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. - Source: https://docs.ghlcustomercare.com/docs/sites/forms/understanding-the-primary-color-in-forms-surveys-and-quizzes - Section: Sites / Forms - Reading time: 3 min - Images: 7, each explained below --- 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?](#what-are-enhanced-form-interactions-with-primary-color-effects) - [Key Benefits of Primary Color Effects](#key-benefits-of-primary-color-effects) - [Primary Color Accents in Elements](#primary-color-accents-in-elements) - [How to Change Your Primary Color](#how-to-change-your-primary-color) - [Frequently Asked Questions](#frequently-asked-questions) - [Related Articles](#related-articles) --- # **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…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155055656386/original/Zuxro7HHfSN0sRM3Wf40BSI36wVgT0LaDA.png) **Step 1 of 5: Form Fields: The border highlights with your primary color when…** 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. - What this covers: Form Fields: The border highlights with your primary color when hovered or clicked. - Fields: Hovering over a field, Clicking or typing in a field, Selecting a checkbox or radio button, Choosing a date or option - Controls: Primary Color - Next: Dropdowns: Options and borders reflect the primary color when opened or selected. Full 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…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155055656399/original/hMoTnGprqkBa_fHU_Wgg3MKoO4LDhpZ1kQ.png) **Step 2 of 5: Dropdowns: Options and borders reflect the primary color when opened…** 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. - What this covers: Dropdowns: Options and borders reflect the primary color when opened or selected. - Fields: Hovering over a field, Clicking or typing in a field, Selecting a checkbox or radio button, Choosing a date or option - Controls: Primary Color - Next: Checkboxes & Radio Buttons: Selected options fill with your primary color. Full 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…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155055656405/original/XbXgZYUjZwZU2SIys2IUzZpUujpPQpL6zA.png) **Step 3 of 5: Checkboxes & Radio Buttons: Selected options fill with your primary…** 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. - What to fill in: Checkboxes & Radio Buttons: Selected options fill with your primary color. - Fields: Hovering over a field, Clicking or typing in a field, Selecting a checkbox or radio button, Choosing a date or option - Controls: Primary Color - Next: Date Picker: The active or selected date is highlighted in your primary color. Full 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…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155055656412/original/FxgU2IPdWcoMEhW3iX-2s7QaxJC3irl07w.png) **Step 4 of 5: Date Picker: The active or selected date is highlighted in your…** 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. - What this covers: Date Picker: The active or selected date is highlighted in your primary color. - Fields: Hovering over a field, Clicking or typing in a field, Selecting a checkbox or radio button, Choosing a date or option - Controls: Primary Color - Next: File Uploads & Signature Fields: Borders and sketch colors use your primary color. Full 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](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155055656658/original/vroEbb8ZUVqw7eFjEOQjtra2zD8f2Nr7cA.png) **Step 1 of 3: From within the builder, go to Style and Options → Styles** 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. - What this covers: From within the builder, go to Style and Options → Styles - Fields: From within the builder, go to Style and Options → Styles - Controls: Style and Options, → Styles, Primary Color, Colors and Background, “Map Primary color to Button color”, Save - Next: Scroll down to the Primary Color field which is under Colors and Background. Full 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…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155055656689/original/7Mrihg8fVlZathpY1OEvgWptjbJ9uFpv0A.png) **Step 2 of 3: Scroll down to the Primary Color field which is under Colors and…** 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. - What this covers: Scroll down to the Primary Color field which is under Colors and Background. - Fields: From within the builder, go to Style and Options → Styles - Controls: Primary Color, Colors and Background, Style and Options, → Styles, “Map Primary color to Button color”, Save - Next: 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. Full 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…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155055656749/original/QO6kwktyQzSUD6tE2f8gJiDl68etqLpyLg.png) **Step 3 of 3: Select a color or enter a custom hex code. Toggle the “Map Primary…** 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. - What to fill in: 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. - Fields: From within the builder, go to Style and Options → Styles - Controls: “Map Primary color to Button color”, Save, Style and Options, → Styles, Primary Color, Colors and Background Full 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. --- ## **Related Articles** - [Right Sidebar — Form & Survey Builder](https://docs.ghlcustomercare.com/docs/sites/forms/right-sidebar-in-form-and-survey-builder) - [Themes in Forms/Surveys](https://docs.ghlcustomercare.com/docs/sites/forms/themes-in-forms-surveys) - [How to Create a Contact Form in GHL Customer Care](https://docs.ghlcustomercare.com/docs/sites/forms/how-to-create-a-contact-form-in-ghl-customer-care) - [Quiz Builder Guide](https://docs.ghlcustomercare.com/docs/sites/quizzes/quiz-builder-guide) - [Customizing Forms Inside Funnels Using the Form Builder](https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/customizing-forms-inside-funnels-using-the-form-builder) --- Documentation for GHL Customer Care. Support: support@ghlcustomercare.com