How to Customize Input Field & Label Styling in Hulk Form Builder

Modified on Sat, 25 Jul at 1:41 AM

The Input Field & Label Styling settings allow you to fully customize the visual appearance of your form elements, including standard text inputs, email fields, text areas, and field labels. Matching these elements with your storefront design ensures a cohesive brand experience and improves usability.

1. Input Field Styling Options

Customize the container, borders, colors, and typography for your form input fields:

Background & Border Customization

Input background color: Sets the default fill color of the input field.
Input background color on focus: Changes the fill color when a customer clicks or taps into the field, providing active visual feedback.
Input border color: Controls the default outline color of the field. Neutral tones work best for minimalist layouts.
Input border color on focus: Highlights the border outline color when the field is active, improving form accessibility and focus indication.
Input border radius: Adjusts corner roundness (e.g., 0px for sharp boxy corners, or 10px–20px for modern rounded fields).

Typography & Placeholder Settings

Input field font: Select from standard System Fonts or Google Fonts to match your theme's typography.
Input font size: Sets the text size inside the field (e.g., 14px for compact forms, or larger for enhanced mobile readability).
Input font color: Controls the color of user-entered text.
Input placeholder color: Sets the color of hint text displayed before a user starts typing (typically set to a lighter tone than active text).

2. Label Styling Options

Customize the field titles (labels) positioned above or beside your input boxes:

Label font size: Controls the size of the field title text to establish clear hierarchy above input fields.
Label font color: Sets the color of the label text. Use high-contrast colors to ensure legibility.
Label fonts type: Choose between Google Fonts or System Fonts to ensure typographic consistency between labels and inputs.

3. Best Practices for Form Design & UX

Focus States for Accessibility: Utilizing contrasting focus colors (for background and borders) helps users clearly identify which field they are actively filling out.
Visual Hierarchy: Ensure your Label font size is slightly larger or bolder than the Input font size so users can scan the form effortlessly.
Placeholder Contrast: Ensure placeholder text is distinct from user-entered text so users can easily tell when a field contains pre-filled data versus a tip.