Style a Form in Geta.ai

What is Form Styling?

Form styling allows you to customise 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. Customise Form Styles

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

• Form Width: Set in percentage (%) or pixels (px).
• Background Colour: Choose a hex colour 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 Colour: Select a border colour.
• Padding: Adjust spacing inside the form (e.g., 10px).
• Margin: Adjust spacing outside the form (e.g., 0px).

B. Customise 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 Colour: Change the border colour (#D3D3D3 by default).
• Text Colour: Set the font colour (#4d5556 for grey text).
• Placeholder Colour: Define placeholder text colour (#4d5556).
• Gap Between Fields: Adjust spacing (16px).
• Font/Text Size: Customise text size (16px).
• Padding & Margin: Adjust padding (8px) and margins (0px).
• Label Text Settings:
  • Uppercase: Enable/disable uppercase text.
  • Label Colour: Set label colour (#1B2863 by default).
  • Label Bottom Margin: Adjust label spacing (6px).

C. Customise Buttons and Declaration Text

Modify button styles and declaration text.

• Button Colour & Font Size: Customise button appearance.
• Declaration Text Colour: Adjust colour (#000000 by default).
• Font Size: Modify text size (14px).

D. Apply Custom CSS (Advanced Users)

For deeper customisation, 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. 🚀