5. Forms

Forms allow you to create and manage forms on your landing page. Forms can be used to collect important information from users, such as contact details, newsletter sign-ups, or feedback from customers.

13.1. Add Forms to the Landing Page

• In the sidebar, click on Widgets, then select Forms.

• Click and drag the Forms widget into your landing page.

13.2. Forms Editor

13.2.1. Content Editor

• Click on the Form widget and select Content from the quick setup bar to open the Form content editor.

• Basic Information: Edit the information fields to collect data.

• Add field: Add fields to the Form.

• Form Title: The name of the Form.

• Submit Title: The name of the submit button.

13.2.2. Design Editor

• Click on the Forms widget and select Design from the quick setup bar to open the Form design editor.

• Align: Helps you align the Form within the container. For more information, see Align.

• Sizes: In the design editor, helps you adjust the size and position of elements on the landing page. For more information, see Sizes.

• Display on: Allows you to control the display of the Form on different devices, including Desktop and Mobile.

• Styles: Allows you to change the background color and shadow effects of the selected Form. For more information, see Styles.

• Border: Allows you to add and customize the border around the Form, and you can also adjust the border radius. For more information, see Border.

• General Form: Aligns the form, sets the background color, and determines how the text of the Form is displayed on the landing page.

+ Space between label & fields: Adjusts the space between the labels and the input fields.

+ Spacing: Adjusts the overall space between elements in the form.

+ Vertical space: Adjusts the vertical space between fields or lines in the form.

+ Horizontal space: Adjusts the horizontal space between elements in the form.

+ Form alignment: Aligns the entire form on the page.

+ Fields styles: Customizes the background and border of the input fields.

Background: Set the background color for the input fields.

Border: Customize the border of the input fields.

+ Fields text: Adjust the text settings within the input fields.

Label: Customize the label text of the form.

Input: Customize the input text in the fields.

Placeholder: Customize the placeholder text in the input fields.

+ Fields input:

MARGIN: Adjusts the outer spacing of the input fields relative to other elements in the form.

PADDING: Adjusts the inner spacing of the input fields, which is the distance from the edge of the field to the text content inside.

• Title Form: Customize the display of the text in the form on the landing page.

+ Spacing:

MARGIN: Adjusts the outer spacing of the title relative to surrounding elements.

PADDING: Adjusts the inner spacing of the title, which is the distance from the edge of the title container to the text content inside.

+ Adjust text settings: Font family, Text alignment, Font style, Text decoration, etc.

• Button Submit: Customize the appearance of the submit button.

+ Spacing:

MARGIN: Adjusts the outer spacing of the submit button relative to surrounding elements.

PADDING: Adjusts the inner spacing of the submit button, which is the distance from the edge of the button to the text content inside.

+ Space between fields & button: Adjust the spacing between the data fields and the submit button in the form.

+ Button Alignment: Align the submit button within its container.

Width: Adjust the width of the submit button.

Height: Adjust the height of the submit button.

Adjust the button and text settings: Fill, Font family, Text align, etc.