Understanding the Primary Color in Forms, Surveys and Quizzes
Bring your forms, surveys, and quizzes to life! 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.
Was this article helpful?
Related articles
- How to Add Custom CSS to Forms, Surveys, and Quizzes!You can easily change how your forms, surveys, and quizzes look using Custom CSS. Follow these simple steps. 1. Where to Add Custom CSS Option 1: Inside the Form, Survey, or Quiz (recommended) - Go to Sites → Form Builder (or Survey Builder / Quiz Builder). - Open your form. - Click on the Styles Forms
- How to make my form submissions secure from spammers?TABLE OF CONTENTS - How to secure your forms?- 1. Use CAPTCHA to Prevent Spam - 2. Validate Email and Phone Numbers - 3. Restrict SMS Permissions Based on Geography - Key Takeaways How to secure your forms? Our forms product includes built-in protections against fake submissions, leveraging multipForms
- Building FormsForms capture information from visitors — class registrations, inquiries, or waiver acknowledgments — and create or update a contact in your CRM automatically. Create a form - Go to Sites → Forms and click + Build Form (or Add Form). - Drag fields onto the form: standard fields (name, email, phone) Forms
- How to Add Gradient Backgrounds to Buttons in Forms, Surveys, and QuizzesGradient button backgrounds let you create modern, branded calls-to-action in Forms, Surveys, and Quizzes. Instead of relying only on a single solid color, you can apply gradient styles directly from the button settings. This gives you more design flexibility without needing custom CSS for standard Forms