Logo
Logo

Adding & Configuring Form Fields

Introduction

Welcome to this tutorial on configuring form fields in a custom form using the form builder element in Breakdance.

Tutorial Segment

Creating a Basic Contact Form

  1. Clear out all existing fields in the form builder.
  2. Click on the “Add Field” button.
  3. Select “Text Field” for the first field.
  4. Set the label to “Name” (default).
  5. Add another field and choose “Email” as the field type.
  6. Set the label to “Your Email Address.”
  7. Add a third field named “Message.”
  8. Choose “Text Area” for this field.
  9. Set the label to “Message.”
  10. Go to the “Advanced” tab to make the “Message” field required.
  11. Enable the “Required” option for the “Message” field.
  12. Make the “Email” field required as well.

Field Types

Various properties will be available for all field types. The Form Builder documentation provides more information about those properties.

  • Text: The Text field allows users to input text within the form. This field is preferred when only one line of text is needed.
  • Email: Adds an email field to the form.
  • Textarea: The Textarea field allows you to add a text area to the form. This is useful when user input may grow beyond two or more rows of text.
  • URL: Allows users to input a URL into the form.
  • Phone Number: Provides an area on the form for users to add a phone number.
  • Radio: Create a radio options list on the form.
  • Checklist: Create a checklist of options available for users to select.
  • Select: Allows users to select one or more options in a dropdown field.
  • Number: This option allows users to enter a number and increase or decrease it using up/down arrows or up/down keyboard controls.
  • Date: Allow users to select a date.
  • Time: Adds a form field that allows users to select a time.
  • File Upload: The File Upload field allows users to upload one or more files to the form. Please note that to store the files to your server, the Store Submissions action must be enabled. 
  • Password: Creates a password-type field for user input.
  • Hidden: Adds a hidden field, which is helpful for populating information that is not visible to users.
  • HTML: Adds an HTML field that you can use to add instructions or other non-editable information for users to understand the form.
  • Step: Allows you to create or extend the steps available when filling out the form.