Style a Form in Geta.ai

What is Form Styling?

Form styling allows you to customize the appearance of your form, including its background, borders, fonts, and buttons. This helps align the form with your brand and improve user experience.

Steps to Style a Form in Geta.ai

1. Access the Form Builder

• Log in to Geta.ai.
• Navigate to the Forms module.
• Click Create Form to design a new form or Edit an existing one.

2. Open the Style and Preview Section

• Click on Style & Preview in the form settings.
• Here, you will find multiple styling options.

A. Customize Form Styles

Modify the overall look of your form, including background, borders, and spacing.

• Form Width: Set in percentage (%) or pixels (px).
• Background Color: Choose a hex color code (e.g., #FFFFFF for white).
• Background Image: Upload a background image if required.
• Background Position: Align the image (center, left, right).
• Background Repeat: Choose no-repeat if you don’t want the image to repeat.
• Background Fitting: Select fill to cover the entire form area.
• Border Type: Options include none, solid, dotted, etc.
• Border Width: Define border thickness (e.g., 2px).
• Border Color: Select a border color.
• Padding: Adjust spacing inside the form (e.g., 10px).
• Margin: Adjust spacing outside the form (e.g., 0px).

B. Customize Form Fields

Modify how input fields and labels appear in the form.

• Width & Height: Define dimensions (e.g., 100% width, 35px height).
• Label Visibility: Choose Yes or No to show/hide labels.
• Border Radius: Adjust the roundness of input fields (e.g., 4px).
• Border Color: Change the border color (#D3D3D3 by default).
• Text Color: Set the font color (#4d5556 for gray text).
• Placeholder Color: Define placeholder text color (#4d5556).
• Gap Between Fields: Adjust spacing (16px).
• Font/Text Size: Customize text size (16px).
• Padding & Margin: Adjust padding (8px) and margins (0px).
• Label Text Settings:
  • Uppercase: Enable/disable uppercase text.
  • Label Color: Set label color (#1B2863 by default).
  • Label Bottom Margin: Adjust label spacing (6px).

C. Customize Buttons and Declaration Text

Modify button styles and declaration text.

• Button Color & Font Size: Customize button appearance.
• Declaration Text Color: Adjust color (#000000 by default).
• Font Size: Modify text size (14px).

D. Apply Custom CSS (Advanced Users)

For deeper customization, add custom CSS code.

• Click on Custom CSS.
• Insert CSS code to modify fonts, spacing, animations, or other design elements.

Example:

.form-container {
    background-color: #f4f4f4;
    border-radius: 8px;
}
.input-field {
    border: 2px solid #1B2863;
}

Next Steps

✅ Preview the Form – Use the preview option to check your design.
✅ Save & Publish – Once satisfied, save and publish your form.
✅ Test on Different Devices – Ensure your form looks great on desktop and mobile.

With these settings, you can create visually appealing, user-friendly forms in Geta.ai. 🚀