Bring your forms, surveys, and quizzes to life! HighLevel’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.
Dropdowns: Options and borders reflect the primary color when opened or selected.
Checkboxes & Radio Buttons: Selected options fill with your primary color.
Date Picker: The active or selected date is highlighted in your primary color.
File Uploads & Signature Fields: Borders and sketch colors use your primary color.
How to Change Your Primary Color
From within the builder, go to Style and Options → Styles
Scroll down to the Primary Color field which is under Colors and Background.
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.
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
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article