Here are step-by-step instructions for utilizing a form within the Web Builder, along with explanations for various form-related options:
Step 1: Add the Form
- Start by dragging and dropping the Form element anywhere within your builder interface.
Step 2: Edit the Form
- Click on the form to begin editing its properties and appearance.
Font Customization:
- Within the Options Field, click the "A" icon to access font settings. Here, you can select your preferred font style.
Form Styling:
- Utilize the "3 Horizontal Lines" icon to access a range of form styling options. This includes adjustments to the form's layout, such as flex-direction, justify-content, align-items, and more. You'll also find the "Button New Line" option for fine-tuning button placement.
Color Customization:
- In this section, you can choose various color settings, including backdrop, text, border, and shadow colors to match your design preferences. Additionally, you can make the form background transparent by selecting the number "1" icon.
Element Sizing, Spacing, and Padding:
- Access the gear icon within this field to configure the size, gap, and padding of your form elements:
- Size: Adjust the dimensions (width and height) of individual elements on your webpage.
- Gap: Define the spacing between rows and columns in grid or flex layouts.
- Padding: Set the space between an element's content and its border.
Filtering Options:
- The "Funnel Icon" enables you to create interactive elements that allow users to sort, refine, or manipulate displayed content based on specific criteria.
Animations:
- Choose from various animations to apply to your form within the web builder to enhance user engagement.
Transformations:
- The transformations property can be used in conjunction with transitions to create visually appealing interactions.
Edit Form:
- Access the form builder by clicking the "Pencil Icon" to make detailed edits to your form's structure and content.
Select Parent Element:
- The "Arrow Up" button lets you select the parent element, targeting the container or enclosing element that holds a particular HTML element within the web page's document structure.
Move, Clone, and Delete:
- You can manipulate form elements further with these options:
- Move: Use the icon resembling a cross with arrowheads to reposition elements.
- Clone: Duplicate or copy your text element easily.
- Trash Bin Icon: Delete a specific element when no longer needed.
These comprehensive instructions and explanations should assist you in effectively using and customizing forms within the Web Builder for your project.