Drag and Drop Components

This guide will walk you through the basic steps on how to use the Drag and Drop Components in the Form Builder.
The Drag and Drop components are fields that are used in the form - these components allow you to easily add, arrange, and configure form fields without writing code.

STEP-BY-STEP
  • 1
    When creating or editing a form, the user will be redirected to the Form Builder
    Form Builder
  • 2
    There are two (2) sections - the Build Your Form and the Drag and Drop Components, in this guide, you will learn the basics and necessary steps in using the Drag and Drop Components.
    Drag and Drop
  • 3
    As shown below - there are tabs which is called Form Tabs, and each tabs consist of Form fields that are used when creating a form.
    • Form Tabs - are located at the top of the Drag & Drop interface. They group related fields into categories, making it easier to find and add the correct information to your form.
    • Form Fields - appear below the tabs and represent the individual inputs that can be added to your form.
    Form Tabs and Form Fields
  • 4
    Upon clicking the Web Forms, you will be redirected to the Forms Management page.
    Form management
  • 5
    In the upper-right section, you can see the Create New Form. Click the button.
    Create new Form button
  • 6
    By clicking the button, you will be redirected to the Form Builder page.
    Form Buider
    On the left side, you can see the Drag and Drop Components, as the name suggests, these components can be dragged across the right section to build your form (Build Your Form). 
    drag and drop components
    On the right side, you can see the Build Your Form section, this section contains default fields upon creation. 
    Default fields:
    • First Name
    • Last Name
    • Email Address
    • Comments
    • Preferred Phone number
    • Recaptcha
    • Submit button
    Build Your Form
  • 7
    Now, to add new fields or components, simply select by clicking and holding a component in the Drag and Drop Component section and dragging the component across the Build Your Form section
    drag across
  • 8
    Once done dragging the field, click on the field. This will open a popover that shows the field's Properties. You can edit the properties of that field, such as:
    • Label Text
    • Placeholder
    • Help Text
    • Class
    • Required
    • IsEmail
    • Input Height
    • Input Size
    • Important: Name/ID - this property must be unique.
    popover
  • 9
    Once you're satisfied with the form you've created, you can Save and Continue, Preview or Finish Build Form and Start Configuration. The buttons are located in the lower-right section 
    • Cancel - cancel changes, user will be redirected to the Forms Management page.
    • Save and Continue - saves the changes made, user will stay in the Form Builder page.
    • Preview - redirects to the Form Preview page.
    • Finish Build Form and Start Configuration - User will be redirected to the form configuration page. Learn how to configure your form here →
    CTA
f