Documentation > Creating Forms

Creating a multi-step Survey/Poll Form

308

Brave comes with an advanced Form Building feature that can be created within a few seconds and the form data can be sent to your emails or 1500+ apps with Zapier integration. You can also track form submissions with Google Analytics and send automated reply to visitor’s email when a visitor submits the form.

Brave’s Form Builder lets you create advanced multi step survey forms with just few simple clicks. Let’s see how you can create a Multi-step Form.

 

Step 1: Inserting the Form in your Popup

From the Popup Edit Screen, Insert a Form to your Popup by dragging the Form Icon from left panel and dropping it into your Popup.

 

Step 2: Add Fields to your Form

After Inserting the Form, click it to open the Form Settings panel on Right. You can then edit the existing fields by clicking the Fields or add new ones by clicking the “+ Add Field” button. Let’s remove the Existing fields by expanding by clicking them and then clicking the trash icon.

Since our goal is to create a Survey form we will add multiple fields in the form in different steps.

To add new fields, Click the “+ Add Field” button and then selecting the field types that you would like to insert in to your Form. There are 10 types of fields in Brave Form.

  1. Input: lets you add text input fields. This field can be used to collect name, emails, websites etc.
  2. Textbox: Lets you add textarea field that can be used to collect long text messages.
  3. Dropdown: Lets you add Dropdown fields to your Form.
  4. Checkbox: Lets you add Checkbox fields to your Form.
  5. Radio: Lets you add Radio fields to your Form.
  6. Image Select: Lets you add select fields with Images.
  7. Date: This field lets your visitors select dates.
  8. Rating: You can display rating fields to your form with this field.
  9. Custom Label: You can display Custom Text labels inside your form between fields.
  10. Step Divider: When you add this field between fields, the Form gets divided in multiple steps.

 

Field Name: All Fields have a “Field Name” option which is required. You need to insert a short name of the field based on their objectives. For example, if you have added a Text Input field to collect a visitor’s First Name, you can insert “first_name” in the “Field Name” field. This field name won’t be visible to your visitors. It will be only used in the emails that you will receive once the form is submitted by a visitor.

You can also access the values of the forms in your auto reply messages by using them with brackets. eg: [first_name]. When you do that, it will be replaced with the value received from the Form.

Making Your Form a Multi-step Form

Making multi-step forms in Brave is Very easy. Just insert the “Step Divider” field where you want the division to start. For example if you have 4 fields in your form and you want to display 2 fields in each step, you can just insert a step divider under the 2nd field.

When you add a divider between the fields, a button with label “Next” will appear under the 2nd field and the 3rd and 4th field will be hidden. They can be only accessed when they “Next” button is clicked by the visitor. If you have made the 1st and 2nd fields required, the visitor has to first fill them up to go to the next step.

You can customize how the Divider Button by expanding each Step Divider field and customizing the Options below:

  1. Step Button Label: The default Button text is “Next”, you can change it to “Continue” or anything you like.
  2. Display Arrow: By default an arrow is shown beside the button text. You can enable/disable it with this option.
  3. Auto Resize Popup Height On Click: This option enables you to resize the Popup height when the Next Step button is clicked. This is useful when the next step has lots of fields and does not fit inside the popup’s initial Height.

For example, if you have created a simple survey popup with a small popup height and only 1 field on first step and 5 other fields on 2nd step, and the visitor goes to next step, the form fields will be cut off because the popup has a small height. Enabling this option will let you increase the popup height to fit all the fields on the 2nd step.

The Style of the Step Buttons is same as the Form Button. You can customize how they look by clicking the “Style” tab from top and then clicking the “Button” tab.

 

Step 3: Customizing the Style of the Form

With Brave you design the form any way you like changing vast amount of design options that can be accessed from the “Style” tab from top.

You can Change the Form’s font, font size, field color, border and lots of other appearance options.

 

 

Step 4: Determine what happens when a Form is submitted by the Visitor

Brave gives you the ability to perform multiple actions when a form is submitted. You can set what happens when a Form is submitted, by clicking the “Action” tab from the top.

A Brave form can perform multiple actions at once when they are submitted by the visitors. They can

  1. Send you an email.
  2. Add the visitor to one of your Newsletter
  3. Send automated email reply to visitor
  4. Send data to 1500+ apps with Zapier or Integromat
  5. Track the Form Submission by sending a custom event to Google Analytics.

To receive the submissions of the form, you will need to enable the Receive an email option. You can send the form data to multiple recipients by entering multiple email addresses with comma. You can also change the Subject line of the received message. You can also customize the email body by enabling the “Custom Email Template” option.

 

Showing Success Message

Finally we need to determine what the visitor will see after the Form is submitted. With Brave you can

  1. Display a Custom Message like “Thank You For your Submission”.
  2. Or, Redirect them to another Page of your Website.
  3. Or, Take them to another step of the Popup.

To set any of the above options, you need to click the “Submission Success Action” tab and then select “Show Custom Content” option. You can customize what message the visitor will see when the Form is submitted by editing the Custom Content textbox. Now once the form is submitted, the form will be replaced with your custom message.