Forms
Last updated
Last updated
When creating a new page in the builder, forms can be effortlessly integrated by dragging and dropping the Form content block onto the stage. Upon doing so, you'll encounter several formatting options in the sidebar, such as:
Width
Alignment
Font Family
Font Weight
Font Size
Further down in the sidebar, you'll see sections for tweaking specific elements within your form. These include:
Manage fields
Label options
Field options
Button options
Each section houses unique options tailored to the Form content block.
Here, you can add, edit, or rearrange up to ten types of form fields, such as:
Multiple Choice
Date
Email (mandatory)
Number
Single Choice
Dropdown
Phone
Text
Long Text
URL
You'll also find a dedicated field for customizing your form's submit button. This button is required and its text can be modified.
Fields can be set as either required or read-only, and the "Edit field modal" lets you change the type of form field you've chosen.
Labels are the text associated with each field in your form. The Label Options section allows you to:
Format the text
Set label position to 'Top' or 'Side'
Modify label width (only available when 'Side' is chosen for label position)
This section lets you personalize the appearance of form fields by allowing you to:
Set background color
Customize border
Set a distinct border color for selected form fields
Change the text input color
This field lets you style your form's submit button, offering the same formatting options available in a regular button content block.
This section outlines and describes the accessibility keys currently available for navigating the Form content block. In this section, you'll learn about which keys to use to set your focus, customize properties, exit your design, and save your changes.
We are still working on developing our application's accessibility, and you may notice that some actions aren't available yet. Additional accessibility features are coming soon.
Take the following steps to set your focus:
Select the Form Block: Use ArrowUp or ArrowDown to navigate through the builder and locate the Form content block. It will be highlighted with a high-contrast border to show it's selected.
Activate the Form Block: Press Enter to activate the form for editing. This step allows you to interact with the form's properties and settings but does not place it onto the stage.
Take the following steps to customize your properties:
Navigate to Form Settings: With the form block activated, use Tab to move through the sidebar settings where you can adjust form width, alignment, font settings, and more. Use Shift-Tab to navigate these settings in reverse.
Manage Form Fields: The sidebar offers options to manage fields where you can add or edit various field types like email, number, dropdown, and text. Each field can be set as required or read-only, providing flexibility in how information is collected. Note that rearranging fields is not supported in accessibility mode.
Customize Field Appearance: Customize each form field's appearance by adjusting label positions, setting label widths, and formatting text. You can modify the form's submit button, including its text and style, to match your design's aesthetics.
Use the following key to exit and save your changes:
Press Esc to exit the form settings and apply your changes. This ensures that all modifications are integrated properly into your project.
