How do I add a form builder block to a page?
To add a form block:
- Select Content from the project navigation bar.
- Select and open a page from the list.
- Click the Form block from the side toolbar to add a new form block at the end of the page. You can also drag the block to an alternate position of your choice within other existing blocks if they exist.
- Start designing the form by clicking on the Add Form Component button and selecting the first component from the dropdown list.
- Text Input – in this field you will be able to put one line of text, for example, name, surname, or company name
- Text Area – adds a simple text field in which you can put, for example, comments to the shop order
- File/Image Upload – this component is for placing a file upload field, for example, a profile picture in the sign up form
- Dropdown – this component allows you to add multiple positions to a dropdown menu, for example, a list of states/cities in the purchase form
- Radio Button – This component allows you to add predefined sets of mutually exclusive options, for example, shipping method
- Checkbox – here you can create a list of voluntary (e.g newsletter) or compulsory (e.g Terms & conditions) options
- Click on a selected component to add it to the form then enter its field label.
- The dropdown, radio button, and checkbox components have additional options. Enter its labels and click on Add Option below.
Additional options:
- To preview the form, click Share Page above the block and then Open in new window.
- To collapse or expand all components of the form block, hold the shift key and single click one of the arrows next to the components name.
- Click on Add Label on top of the form block to add its label, for example, The Purchase Form.
- To swap the components, either click on the up or down arrow next to each component, or drag and drop it to the right position.
- Additionally, you can leave a guideline at the bottom of the content block.
- Click on the gear icon in the upper right to edit a block label and add an HTML wrapper.
