UPTO 20% OFF
Claim Now
Close discount banner
Sign In Get FormGent
View Categories

Single Form Style

The Style panel in Formgent gives you full visual control to match your form’s look and feel with your website.

You’ll find the Style tab next to General in the right sidebar while editing any form.

image 35

Form Style #

This section lets you design the overall appearance of the form container.

Available Options: #

  1. Background Color – Choose a custom background color for the form.
  2. Background Image – Upload or insert a background image.
  3. Padding – Add internal spacing inside the form container.
  4. Margin – Add space around the outside of the form.

Use these settings to make your form stand out, blend in, or align with your site’s branding.

image 36

Form Border / Radius #

You can customize the form’s outer border using the Border section under the Style settings.

Step 1: Add Border or Radius

  • Click the “+” icon to add a new style rule.
  • Choose Border, Radius, or both.
  • Set the border width (e.g., 1px, 2px, etc.). This controls how thick the border will appear.
image 37
image 38

Step 2: Choose Color and Style

  1. Choose a border style (e.g., solid, dashed, dotted) from the dropdown.
  2. Click the color picker icon to select your desired border color.
image 39

Field Style #

Customize how your form fields look and behave visually.

Spacing and Colors #

  1. Vertical Spacing – Adjust the space between each form field vertically.
  2. Horizontal Spacing – Control spacing for multi-column fields or grouped elements.
  3. Label Color – Change the color of field labels.
  4. Description Color – Style the helper or sub-label text.
  5. Placeholder Color – Set a color for placeholder text inside input fields.
image 40

Field Border / Radius #

You can customize the fields’ outer border using the Border section under the Style settings.

  • Border Settings – Customize border thickness and color.
  • Border Radius – Control the roundness of input field corners.

Step 1: Add Border or Radius #

  • Click the “+” icon to add a new style rule.
  • Choose Border, Radius, or both.
  • Set the border width (e.g., 1px, 2px, etc.). This controls how thick the border will appear.
image 37
image 38

Step 2: Choose Color and Style #

  1. Choose a border style (e.g., solid, dashed, dotted) from the dropdown.
  2. Click the color picker icon to select your desired border color.
image 39