The Input Field Styling section allows you to fully customize the appearance of your input fields, making them visually consistent with your form’s design and brand identity. These settings apply to text fields, email fields, and other standard input types.
Available Options and Their Functions
Input background color
Defines the default background color of the input field.
You can match it with your form’s color palette for a cohesive look.
Input background color on focus
Sets the background color that appears when the user clicks or focuses on the field.
Helpful for improving accessibility and indicating active fields.
Input border radius
Controls how rounded the corners of the input field appear.
A higher value (e.g., 10–20px) creates a softer, more modern look.
Input border color
Defines the default color of the field border.
Use neutral colors for minimalistic designs or accent colors to draw attention.
Input border color on focus
Determines the border color when the field is active (focused).
This visual cue helps users easily see where they are typing.
Input field font
Allows you to select a font from available Google Fonts or system fonts.
Ensures consistency with other form elements.
Input font size
Sets the size of the text inside the input field.
Example: 12px for compact forms, or larger for readability.
Input font color
Defines the color of the user-entered text.
Input placeholder color
Sets the color of the placeholder text (the text shown before typing begins).
Usually lighter than the main text color for distinction.
Label Styling
Label font size
Adjusts the size of the field label text (the text above or beside the input).
Label font color
Sets the label text color. You can use subtle tones for simplicity or brand colors for emphasis.
Label fonts type
Choose between Google Fonts or system fonts to ensure consistency with the input field typography.
Tip
Consistent font and color usage across input fields and labels improves the form’s readability and user experience. Small design details like focus colors and rounded corners can significantly enhance usability and modernize your form’s look.