How do I add a form builder block to a page?

To add a form block:

  1. Select Content from the project navigation bar.

    01._open_content.png

  2. Select and open a page from the list.

    02._open_a_page.png

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

    03._form_block.png

  4. Start designing the form by clicking on the Add Form Component button and selecting the first component from the dropdown list.

    04_form_component.png

    • 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
  5. Click on a selected component to add it to the form then enter its field label.

    05._label.png

  6. The dropdown, radio button, and checkbox components have additional options. Enter its labels and click on Add Option below.

    06._add_options.png

Additional options:

  • To preview the form, click Share Page above the block and then Open in new window.

    share_page.png

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

    expand_compinents.png

  • Click on Add Label on top of the form block to add its label, for example, The Purchase Form.

    label.png

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

    rearrange.png

  • Additionally, you can leave a guideline at the bottom of the content block.

    guidelines.png

  • Click on the gear icon in the upper right to edit a block label and add an HTML wrapper.

    settings.png
Have more questions? Submit a request