3. Form and Survey Builder

You are here:
< All Topics

Form Builder

  1. Introduction
  2. User Interface
  3. Basic Form Settings
  4. Field Settings
  5. Field Types
  6. Field Validation

Introduction

The Form Builder is where all of your forms and surveys are made and updated. The form builder provides the tools for you to add and remove fields and other elements.

User Interface

A1Surveys - Form Builder - User Interface

The Form Builder interface is divided into three areas: On the left the form fields, on the right the designer and in the center the form preview.

The left panel has three tabs:

  • Fields: Sisplays all fields and elements that can be added to the form. Simply drag and drop them to the right area.
  • Settings: Here you can set the form name, the form layout (labels position) and disable fields.

The center area is the Form Preview from where you can manipulate each of the components.

The right panel is the Theme Designer from where you can customize the look and feel of your surveys and forms:

  • Backgrounds: Change the background of the form elements.
  • Typography: Choose the style, font, size, and color of all the text on your form.
  • Borders: Set the style, thickness and color of the borders on your form.
  • Shadows: Add or remove a shadows around your form.
  • Buttons: Change the text of the Submit button.

– Add a field

There are two ways to add a field:

  1. Clicking a widget on the left panel. That’s all! The form component will appear in your form, below all other components.
  2. Or, if you want to add a field in a specific placement.
    • Click a widget on the left panel and Drag it to the area you would like it and drop it right there.

– Edit a field

  1. Click on the field to edit it, then you will be able to edit all of the field information
  2. Edit the information according to your requirements.
  3. Click Save.

– Reorder the fields

To reorder a field (component):

  1. Click on a component and drag it into position

– Copy a field

To copy a field (component):

  1. Click on a component and hold.
  2. Click the ‘Copy’ button in the Popover window

You’ll notice that the copied field will appear below the original field.

– Delete a field

To delete a field (component):

  1. Click on a component and hold.
  2. Drag it out of the active zone.
  3. Release.

Form and Survey settings

By clicking on the Settings tab, you will access a subset of the form configuration.

  1. Change the form name: The form name is shown in the administration pages and is also display as the public page title at A1Surveys.
  2. Change the form layout: The form layout is based on Bootstrap CSS and is used to locate the labels position on the form.
    • The Vertical layout displays the field labels above,
    • The Horizontal layout displays the labels on the field left side, and
    • The Inline layout hides the labels and displays the fields next to each other. For example, you can use it on a mail registration form, to place an Email field and a button by the side.
A1Surveys - Form Builder - Basic Form Settings

Other advanced Setup options can be accessed from the Form Manager.

Field Settings

Each form field has many Setup options, for example, the label, the default value, the CSS class, etc. To set up a field.

Setup Options

All of the Options are shown in alphabetical order.

– Accept:

This option is in the File Upload field. With it you can limit the type of files the field can accept. You should consider the following

  • You must add the file extensions starting from the dot and separated by commas.
  • By default, all files will be validated and will only be accepted image files with extension ‘.gif, .jpg, .png’.
  • For example, to accept text files, you can change this option to: ‘.doc, .docx, .txt’.
  • If you want to accept all types of files, you must leave this blank.
  • This option enables the ‘accept’ attribute from the HTML5 standard, so the field validation is performed both on the client side (browser) and server side.
A1Surveys - Form Builder - File Upload - Accept

– Alias:

This advanced option enables you to send WebHook notifications using the Field Alias instead of the Field Name. For example, we’ll be able to re-send POST data by using “name” or “age” instead of “text_0” or “number_0”.

– Checkboxes:

The Checkboxes option is only available in Checkbox fields, and it’s used to add checkboxes to the component.

For example, enter the Bulk editor and add the following “Checkboxes” and click “Save”:

First Choice|1
Second Choice|2|selected
Third Choice|3
Fourth Choice|4|selected
Fifth Choice|5
A1Surveys - Form - Builder - Checkboxes
Display Checkboxes in multiple columns

To display the options of a Checkbox component in multiple columns you need to add the Container CSS Class: columns-2 or columns-3 or columns-4 to define if you want to show the options in 2, 3 or 4 columns, respectively.

A1Surveys - Form - Builder - Checkbox - Multiple Columns
Custom Checkbox

To customize Checkbox component colors, you need to add the Container CSS Class: custom-control

A1Surveys - Form - Builder - Checkbox - Custom Control

– Check DNS:

This option tells the application that in the process of Email Field validation verify that the email domain really exists and has ‘A’ and ‘MX’ records.

Caution! This is an advanced option and should be used with caution. Verification may fail due to a problem with the DNS servers even when is a valid email. By default, it is disabled.

– CSS Class:

Let you add one or more CSS classes to the Form Field.

– Container CSS Class:

Let you add one or more CSS classes to the container of the whole component.

You can create multi-column forms by defining the class col-xs-* (the asterisk represents the number of columns, between 1 and 12).

For example:

If you want to place two fields in two columns you must do the following:

  1. Add the container CSS class to the first field: `col-xs-6
  2. Add the container CSS class to the second field: `col-xs-6

Important! You can go to the Bootstrap CSS documentation for more information.

Note:

  • By default, all fields except Button, come with the class: form-group. This class cannot be edited.
  • By default, the field Button comes with the class: form-action. This class cannot be edited.

– Default Value:

You can add a default value to a field. This value appears by default, but the user can modify. If the user submits the form without having modified the default value, this value will be collected to process the submission.

– Disabled:

You can disable a field if you want it to be displayed to the user, but not be edited. (Note that you can also disable a hidden field). Unlike the Read Only option, a disabled field is not sent to the server.
Information stored in a disabled field is not received as a response and will not appear in your Submissions.

– Field Size:

A Text Area field allows its size configuration. The size must be an integer and indicates the number of rows displayed or, in other words, the field height. By default is 3.

– Help Text:

The text you type here will appear below the field and is often used to give the users instructions on what to put in it.

– Help Text Placement:

This Drop Down menu allows you to move the Help Text above or below the form field.

– Inline:

The Inline option is in the Checkbox fields and Radio Buttons and is used to change the vertical position of the checkboxes or radio buttons for a horizontal position.

– Input Type:

Many fields allow you to change the Input Type to specify the type of data you will receive. For example, a Text Field can have an Input Type “URL”, to ensure that the text you type here is an absolute URL that starts with the letters ‘http’.

A1Surveys - Form Builder - Input Type

– Integer Only:

You can activate this option if you want the value of this field to be only an integer. If the user enters a floating point number, the Form would not be processed and instead a validation error appears.

– Integer Pattern:

Is an advanced option of the Number Field that allows you to customize the regular expression that accepts only integer numbers (0-9) and will be used in the Form Validation process. The regular expression used by default is ‘/^\s[+-]?\d+\s$/’;

– Label

It is the most common way to inform the user the value he must enter in the field. Generally it is shown at the top of the field, but you can modify this position by changing the form layout.

– Label CSS Class:

Let you add one or more CSS classes to the label. Keep in mind that if you want to hide a label, you can add the Bootstrap 3 css class ‘sr-only’.

Note: By default all fields come with the CSS class: control-label. It is recommended not to remove it.

– Min date:

You can define a date as the minimum date to be taken into account in the validating field process. If the user enters a earlier date, the form will not be sent and instead, a validation error will appear. If this option is not defined, this limitation will not exist.

Important! The date must keep the following format: yyyy-mm-dd (HTML5 standard format)

– Max date:

You can define a date as the maximum date to be taken into account in the validating field process. If the user enters an later date, the form will not be sent and instead, a validation error will appear. If this option is not defined, this limitation will not exist.

Important! The date must keep the following format: yyyy-mm-dd (HTML5 standard format)

– Min number:

You can define an integer or floating-point number as the minimum number to be taken into account in the validating field process. If the user enters a lower number, the form will not be sent and instead, a validation error will appear. If this option is not defined, this limitation will not exist.

– Max number:

You can define an integer or floating-point number as the maximum number to be taken into account in the validating field process. If the user enters a larger number, the form will not be sent and instead, a validation error will appear. If this option is not defined, this limitation will not exist.

– Min Size:

You can define an integer number as the minimum size to be taken into account in the process of validating the field. If the user uploads a file with a smaller size than the one you have defined, the form will not be sent and, instead, a validation error appears. If this option is not defined, this limitation will not exist.

The integer number represents the number of bytes allowed. For example, Min Size: 10311680 (resulting from the multiplication of 1024 x 1024 x 5), the minimum file size should be 5MB.

– Max Size:

You can define an integer number as the maximum size that will be taken into account in the process of validating the field. If the user uploads a file with a size larger than the one you defined, the form will not be sent and instead, a validation error appears. If this option is not defined, this limitation will not exist.

The integer number represents the number of bytes allowed. For example, Max Size: 10311680 (resulting from the multiplication of 1024 x 1024 x 5), the maximum file size should be 5MB.

– Min length:

You can define an integer number as the minimum length of the input string. If not set, it means no minimum length limit.

– Max length:

You can define an integer number as the maximum length of the input string. If not set, it means no maximum length limit.

– Min files:

You can define an integer number as the minimum number of files that the end user must upload to pass the validation.

– Max files:

You can define an integer number as the maximum number of files that the end user must upload to pass the validation. Use this feature to allow multiple uploads with the same File field.

– Max length:

You can define an integer number as the maximum number of files that the end user must upload to pass the validation.

– Multiple:

This option indicates that the user can enter multiple values. You can find this option in the Email and Select List fields:

  • If Multiple option has been enabled on an Email field, you can add several valid email addresses separated by commas. For example: ‘name@example.com,name2@example.com’.
  • If Multiple option has been enabled on a Select List field, you can select several options. The collected information will have a comma-separated format. For example: ‘Option One, Option Two’.
A1Surveys - Form Builder - Select List Multiple

– Number Pattern:

Is an advanced option of the Number Field that allows you to customize the regular expression (regex) that accepts any number and will be used in the Form Validation process. The regular expression used by default match with a floating point number and optionally an exponent part (eg -1.23e-10): ‘/^\s[-+]?[0-9].?[0-9]+([eE][-+]?[0-9]+)?\s*$/’. Regex101.com can be used for testing your regular expressions

– Options:

The Options option is only in the Select List fields and are used to add selection options to the component.

For example, if you enter in the Options field of the pop-up Form:

One|1
Two|2|select
Three|3
Four|4
Five|5

The Form Preview will show a box with the text “Two”. And if the user submits the form without making any changes, he will be sending the value: 2.

A1Surveys - Form Builder - Select List Options

– Pattern

It is an advanced option and allows you validate the users input with a regular expression (regex) on the field to be used in the Form Validation process. If the value sent by the user does not match this pattern, the form will not be processed and instead a validation error appears.

– Placeholder

It is the alternative way of describing the value that the user must enter in the field. By default, the placeholder appears in the field until the user start to enter data.

A1Surveys - Form Builder - Placeholder

– Radios:

The Radios option is available in Radio Button components, and it’s used to add radio buttons to the form.

For example, if you click Bulk Editor and enter the following radios:

One|1
Two|2|selected
Three|3
Four|4
Five|5

The Form Preview will show five radio buttons with the words: One, Two, Three, Four and Five. The option Two will be selected. Then, if the user submits the form without making any changes, he will be sending the value: 2

A1Surveys - Form Builder - Radios
Display Radio Buttons in multiple columns

To display the options of a Radio Button field in multiple columns you need to add the Container CSS Class: columns-2 or columns-3 or columns-4 to define if you want to show the options in 2, 3 or 4 columns, respectively.

A1Surveys - Form - Builder - Radios - Multiple Columns
Custom Radio Button

To customize a Radio Button field, you need to add the Container CSS Class: custom-control

A1Surveys - Form - Builder - Radios - Custom Control

– Read Only:

When you enable this option, the field will be displayed to the user but he cannot edit. The information in a Read Only field is received and validated by the server when the Form is submitted. It will also be collected by the Submission Manager.

– Required

This property allows you to ensure that the user complete a specific field before sending the form. If the user submits the form with an empty required field, the form is not processed and instead an error message is displayed. By default, the required fields labels have a red asterisk on the right.

A1Surveys - Form Builder - Required

– Step number:

With this option, you can set the HTML5 ‘step’ attribute of the Number and Date fields. The ‘step’ attribute specifies the valid number to be use as an interval when changing the values of this field using the browser controllers.

Important! If the Number field has the ‘Integer Only’ option enabled you must to set your ‘Step number’ to 1 otherwise participants won’t be able to submit the survey/form.

– Unique:

This option allows you to check that the information entered into this field is unique and has not been submitted previously. Useful for mailing lists and registration forms, where preventing the users from entering the same information more than once is often needed.

A1Surveys - Form Builder - Unique

Field Types

– Heading

Headings are used to mark Form sections, also as to give it a title. For example, when you enter the Form Builder to create one, you will see a heading (h3) with the text “Untitled Form”. To modify this text, just click on it. Immediately a form will appear with all the options to customize it.

– Paragraph

Paragraphs are components used for fleshing out a form. For example, you can use them to invite your users to fill out the form or to give directions. When you enter to the Forms Builder to create one, you will see a paragraph with the text “This is my form. Please fill it out. Thanks!” To modify this text, simply click on it. Immediately a form will appear with all the options to customize it.

– Text Field

The text field ebables you to write a single line of text. Web browsers consider text field’s as a standard field from others more specialized fields such as URL or color. The text field can have five different input styles, each of which is used to validate data differently.

  • Text: (default) Simple text input which does not offer any validation and will accept any text.
  • Url: Use this type if you wish to collect URLs that starts with ‘http’.
  • Color: This type displays a color palette when you click on it. The color is stored as a hexadecimal value of a color, starting with a ‘#’ sign. For example, ‘#FFFFFF’.
  • Tel: Use this type if the data to collect is a phone number.
  • Password: Note that A1Surveys is not meant to store passwords, mainly because the passwords can be seen by the survey creator.

– Number Field

This component can collect two typess of numbers:

  • Number: This is used to collect whole numbers. For example, you may ask: “How old are you?” If the user enters ‘Five years’, they are notified that they must write only numbers: 5, in this case.
  • Range: A slider is shown, so that the user can enter their data. For example with a scale from 1 to 10, you can ask “How are your math skills?” Depending on how you drag the slider, the value will be higher or lower.

Unlike Text components, Number components offer many different validation options. For example, Integer Only indicate that the field must collect only numerical integers data: Decimals are not accepted! You can also set the minimum and maximum number to be entered and more. All these options follow the HTML5 standard and are also validated on the server.

– Date Field

Date fields display a calendar when the field is clicked on. This component has 5 different styles of input:

  • Date: The input type to use if you want to collect dates. You must have the format: yyyy-mm-dd.
  • DateTime-Local: The input type to use if you want to collect dates and times. The collected data will have the standard ISO format: yyyy-mm-ddThh:mm:ss.
  • Time: The input type to use if you want to collect times in the format: hh:mm:ss.
  • Month: This type of entry is supported by modern browsers and should be used if you want the user to select the month or month and year. The input format is yyyy-mm.
  • Week: This type of entry is supported by modern browsers and should be used if you want the user to select the week of the year in numerical format.

– Email Field

An email field is used to collect valid emails. By default it validates that the text contains a ‘@’ and ‘.’ plus two or more characters. In addition, you must use this field to send notifications that have your users mails as senders (Reply-To).

An advanced option of this field is the ability to verify that the domain really exists. Care should be taken that this validation can fail due to internet connectivity problems.

– Text Area

A text area is a component that allows you to collect multiple lines of text, with multiples paragraphs. It is a suitable field if you want users to write a block of text. Also, you can change some settings. For example, you can change the height of the text area, to display more space to your users. To do this, click on the text area and change the size of the field that by default is 3.

– Checkbox

The Checkbox component adds checkboxes to the form. This component provides an option list with a checkbox next, so your users can check all, some or none. You can use it if you want to be able to submit several options.

To add, edit and delete checkboxes, you must click on the component. Then a form appears with the “Checkboxes” field. Note that each line of this field represents a different choice. Each choice can be composed of three parts: Label, Value and Image. Additionally, you can check them.

A1Surveys - Form Builder - Checkbox Component

There is also a Bulk Editor tool which inserts choices separated by a vertical bar character (|). The format should be as follows: Label|Value|selected. The second and third part of this format is optional.

For example, click Bulk Editor and add the following “Checkboxes”:

One|1
Two|2|selected
Three|3
Four|4|selected
Five|5

The Form Preview will show 5 checkboxes with the words One, Two, Three, Four and Five. The “Two” and “Four” option will be selected. And, if the user submits the form without making any changes, it will be sending the values: 2,4.

A1Surveys - Form Builder - Checkbox Component with Bulk Editor

It is possible to attach pictures to the checkboxes to give a more dynamic touch to your forms.

To insert a picture on a checkbox label you must add the image url as the third setting parameter of the checkbox. For example, if we set up our component as:

One
Two|2
Three|3|selected
Four|4|http://example.com/image-4.jpg
Five|5|http://example.com/image-5.jpg|selected

We’ll be creating five checkboxes:

  • One: Creates a checkbox with the value: ‘One’ and the label: ‘One’
  • Two|2: Creates a checkbox with the value: ‘2’ and the label: ‘Two’
  • Three|3|selected: Creates a checkbox with the value: ‘3’, the label: ‘Three’ and will be checked by default.
  • Four|4|http://example.com/image-4.jpg: Creates a checkbox with the value: ‘4’, the label: ‘Four’ and the image will appear next to the checkbox.
  • Five|5|http://example.com/image-5.jpg|selected: Creates a checkbox with the value: ‘5’, the label: ‘Five’ and the image will appear next to the checkbox and will be checked by default.

To add icons instead of images, you should only replace the images URLs by the icons’ CSS classes. For example: glyphicon glyphicon-user, will display the user icon.

Note: To add an image or icon to the checkbox setup, you must have the first two parameters, even if they are the same.

Note: Remember that you can display your checkboxes horizontally by activating the ‘inline’ attribute.

– Radio Buttons

Radio Buttons enable you add a group of radio buttons to the survey / form. This gives the user a list of choices, but they can only select one of them.

To add, edit and delete, you first click on the component. Next the form appears with the “Radio” field. Note that each line of this field represents a different option. Each line can be composed of three parts, separated by a vertical bar or pipe line. The format should be as follows: Label|Value|select. The second and third part of this format is optional.

For example, if you enter in the field “Radio” of the pop-up Form:

One|1
Two|2|selected
Three|3
Four|4
Five|5

The Form Preview will show 5 check boxes with the words One, Two, Three, Four and Five. The “Two” option will be selected. And if the user submits the form without making any changes, the value of 2 will be submitted.

To insert a picture on a radio button label you must add the image url as the third setting parameter of the radio button. For example, if we set up our component as:

One
Two|2
Three|3|selected
Four|4|http://example.com/image-4.jpg
Five|5|http://example.com/image-5.jpg|selected

To create 5 radio buttons:

  • One: Creates a radio button with the value: ‘One’ and the label: ‘One’
  • Two|2: Creates a radio button with the value: ‘2’ and the label: ‘Two’
  • Three|3|selected: Creates a radio button with the value: ‘3’, the label: ‘Three’ and will be selected by default.
  • Four|4|http://example.com/image-4.jpg: Creates a radio button with the value: ‘4’, the label: ‘Four’ and the image will appear next to the radio button.
  • Five|5|http://example.com/image-5.jpg|selected: Creates a radio button with the value: ‘5’, the label: ‘Five’ and the image will appear next to the radio button and will be selected by default.

You can use CSS to add icons instead of images by replacing the images URLs by the icons’ CSS classes. For example: glyphicon glyphicon-user, will display the user icon.

Important: To add an image or icon to the radio button setup, you must enter the first two parameters.

– Select List

A Select List is a drop-down menu that allows the user to select one or several options, depending on the configuration you choose. We recommend using select menus when you have lots of options such as: Select your country of origin?

To add, edit and delete options, you must click on the component. Then a form appears with the “Options” field.
Note that each line of this field represents a different option.
And each line can be composed of three parts, separated by a vertical bar or pipe line.
The format should be as follows: Label|Value|selected. The second and third part of this format is optional.

For example, if you enter in the field “Options” of the pop-up Form:

One|1
Two|2|selected
Three|3
Four|4
Five|5

The Form Preview will show a box with the text “Two”. And if the user submits the form without making any changes, it will be sending the value: 2.

– Hidden Field

Hidden fields are not displayed, however they are useful for calculations or to send default values.

Note: You can create conditional rules using this field.

– File Upload

The File Upload field is a component that enables users to attach files in the form submission. Once sent, the files will appear in the survey / form results area. There are two things that must be taken into account:

  • Allowed file types: You can limit the types of files that can be uploaded in each file field. By default, allowed file types for picture are: ‘.gif, .jpg, .png’. To modify the allowed file type, you must click on the component and on the ‘Accept’ form field that appears, change file extensions allowed, eg, ‘.doc, .pdf, .txt’ to accept text files.
  • Size limitations: You can limit the file size as define a minimum or maximum size for each field. To modify the allowed file size, click the component and then expand the pop-up form by clicking on the ‘More’ link. Then locate the Minimum and Maximum Size fields and enter the digit that represents the number of bytes allowed. For example, Max Size: 10311680 (resulting from the multiplication of 1024 x 1024 x 5 = 5MB).

– Snippet

The HTML Snippet field is an advanced component that enables you to add HTML code to your forms. It will display a Wysiwyg editor for you to enter HTML code.

Be sure to enter valid HTML code, otherwise, the form / survey won’t save and, an error message will be shown indicating the line of code where the error was made.

A1Surveys - Form Builder - Snippet

To add an HTML table, enter a link or display an image, first, you will need to click the Fullscreen button.
This will opens the editor. You can click the Code button to display the content as HTML code.

A1Surveys - Form Builder - Snippet - Table

Note: Although you can add CSS and JavaScript code in a form.
It is not recommended to do so, in these cases you can create a CSS Theme and/or Load external javascript file.
Remember that the form you created is also displayed in the Submission Manager and its code could be incompatible.

– reCaptcha

The reCaptcha field is an advanced component that allows you to verify that users are not bots and/or spammers.
You can modify the reCAPTCHA configuration, like changing the theme color, type of captcha and size.

A1Surveys - Form Builder - Recaptcha

– Page Break / New page

The Page break / new page field enables you to create multi-step or multi-page forms.
A header will be displayed above the form to let users know in which step they are and how many steps are left until the end.
There are two details that must take into account:

  1. The Page Break component adds two buttons to allow Form Navigation. You can customize the text on the button ‘Next’ or ‘Previous’ by clicking on the component.
  2. Form Steps: Shown above form and may be modified as follows.
    • Click Form Steps to check its settings. You can change the titles of each step in the field Form Steps. Each line matches a title.
    • You can change the step numbers by glyphicons icons. To use Glyphicons in stages, you should add to each line of the Steps fields, a vertical bar or pipe line followed by ‘icon-[name of icon]’.
      For example, if I want to replace the number 1, I write it in the first line of Steps: ‘Untitled Step|icon-user’
A1Surveys - Form Builder - Form Steps

– Spacer

The Spacer component allows you to add precise vertical spacing between fields on your forms. Just drag and drop a Spacer between your fields and set the number of pixels between they.

Options:

  • Height: Is the space defined by the number of pixels.
A1Surveys - Form Builder - Spacer

– Signature

The Signature component allow your end users to sign your form – either with their mouse or finger on a mobile device.
You can securely capture signatures for contracts, legal documents, and other forms in which you need an autograph.

  1. The Signature component adds two buttons to allow Canvas Interactions. You can customize the text on the buttons.
  2. Field Settings: The Signature field has the following settings:
    • Clear: Enable / Disable the “Clear” button. When an end user clicks the “Clear” button, the signature will be removed.
    • Undo: Enable / Disable the “Undo” button. When an end user clicks the “Undo” button, the last stroke of his signature will be removed.
    • You can also configure the width and height of the signature area.
A1Surveys - Form Builder - Signature

– Matrix Field

The Matrix field is an advanced component, allows you to group multiple form controls with the same input type within a table.

All the form controls are fully customizable and according to its type, the correct input validation will be applied.

A1Surveys - Form Builder - Matrix Field

A Matrix field can have any number of questions (rows) and answers (columns), then you can set different values to each answer.

A special input type for the Matrix is Select List, because you need to add different values (options), to do this just check “Values” and in each “Value” field enter slash separated values (“/”). If you want to enable a default empty option, you need to use the Placeholder setting.

A1Surveys - Form Builder - Matrix Field with Select List

You are able to make open questions too, with the Text Input variation, each row contains a set of text entry boxes. This variation looks and acts similar to the Text Field. The same applies for other input fields based on text, like a text area or number fields.

A1Surveys - Form Builder - Matrix Field with Text Inputs

A special feature in the Matrix field is the ability to hide the questions. Just check the “Inline” option and questions will disappear. You can use this feature if you only want to do a single question in a tabular format.

A1Surveys - Form Builder - Matrix Field In Line

Note: When a table is very big, we will need to add the “table-responsive” class within the “Container CSS Class” setting.

– Button

The button field is a component that allows you to send the forms.
You can add one or more buttons to your form. There are 3 types of button:

  • Submit: (default) To submit the form.
  • Reset: To reset the form to the default values.
  • Image: Displays an image on the submit button.
  • Button: This type doesn’t send the form, but it can be used to interact with the fields via javascript.

You can add an icon to the buttons type ‘Submit’, ‘Reset’ and ‘Button’, writing in the attribute ‘Button Text’ the icon label. For example:

<span class="glyphicon glyphicon-shopping-cart"></span> Buy Now!

A1Surveys - Form Builder - Button

Note: The CSS class: ‘btn btn-primary’ add the default design to the button. Go to Bootstrap CSS for more information.

Field Validation

It’s important to remember that field validation runs when users submit a form.

Field validation verifies that the data submitted by participant meets the requirements.
For example, the Date Field requires that the value sent in the following format yyyy-mm-dd.

A1Surveys - Form Builder - Field Validation

In addition to validation by type, fields may have other requirements, such as ‘Required’ and ‘Unique’.

A1Surveys - Form Builder - Field Validation

Many of these requirements are validated at the client and are also validated by A1Surveys.

Previous 2. Form and Survey Manager
Next 4. Theme Designer
Table of Contents