Forms

Setting Up Your Form

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

Customizing Form Elements

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.

Manage Fields

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.

Label Options

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)

Field Options

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

Button Options

This field lets you style your form's submit button, offering the same formatting options available in a regular button content block.

Accessibility Keys for Form Content Blocks

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.

Setting Your Focus

Take the following steps to set your focus:

  1. 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.

  2. 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.

Customizing Properties

Take the following steps to customize your properties:

  1. 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.

  2. 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.

  3. 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.

Exiting and Saving Changes

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.

Last updated