New to FormSprout? No problem. Use our documentation to find articles, videos and more to get you started.

Introduction:

Form Manager is the application most important part. You can see here all the forms you have created in FormSprout, plus all the actions that can be performed with each. For example, you can access to the users submissions, create reports, view statistics and more.

Note: To access the Form Manager click the "Forms" menu in the navigation bar.

Create a form

Before you create your first form, please read the Form Builder documentation.

If you are on the Dashboard or in the Form Manager, follow these steps:

• Click "Create Form"

• Drag and drop all the fields that your form needs.

• Drag and drop one button or more, according to your needs.

• Click "Save Form". A modal window will appear with 3 options:

1. Continue editing the form.

2. Go to Advanced Form Settings

3. Go to Form Manager

Note: If you close the modal window without choosing one of these three options, when you "Save" again, you create another form and not edit the already created. This option can be useful if you want to create several similar forms quickly.

View Form Record

To view the Form Record, click on the form name in the Form Manager. You can view from here its configuration and access all your options.

Update a Form:

If you have questions about updating your first form, please read the Form Builder documentation.

Updating a form can be done in two ways:

• From the Form Manager

1. Locate the form to update

2. Click on the "Actions" button and select "Update"

• From the Form Record

1. To access the Form Record click the name of the form

2. Then click the "Update" button (the pencil icon)

• Drag and drop one button or more, according to your needs.

• Click "Save Form".

Note: While you can update a form at any time, the information gathered by them (submissions and reports) may be affected or lose coherence.

Save Form as Template:

To save your Form as a Template, follow these steps:

1. Go to the Form Builder

2. Click the Up Arrow (At the right side of the "Save" button)

3. Click "Save Form As Template"

4. Then you will be redirected to the Template Manager.

Advanced Form Settings:

To access the Form Settings, you must be in the Form Manager. Then perform the following steps:

1. Click on the name of the form you want to set

2. Click on "Settings" (the gear icon)

In Settings, you will see 4 tabs. Each of these tabs contains the setting of a form aspect:

Form Settings:

It is the first tab of the Form Settings and is displayed by default. From here you can set up:

• Form Name: Displayed on the application administration pages and as the title of the form public page.

• Status: Indicates if the form is being shown. If set to Off, the form is no longer displayed to the user and instead appears a message indicating that the form is disabled and does not accept more submissions.

• Created by: Field available only for administrator users. Used to assign a form to a different advanced user.

• Language: This language will be used to display form messages. For example, validation errors. Note that you can add another language to the application.

• Text Direction: Allows you to set the direction in which the values appear in the form. By default, the text direction is Left to Right (LTR). But, you can change the text direction from Right to Left (RTL) from the dropdown.

• Shared With: This feature allows you to share the form with other users. You have three options:

• None: The form will only be visible by its creator (without considering the administrator who can see all the forms).

• Everyone: The form will be visible by all users of the application. Only managers can share forms with everyone.

• Specific users: Allows you to select the users who will be able to see the form. Related permissions: Includes the word "Shared" in his name. For example, viewSharedForms, editSharedForms, deleteSharedForms.

• Important! Keep in mind that although a user can share a form with another user, this user must have the permissions to view, edit, delete, etc. required for each action. For example, if you share the form with two users with different roles: Manager and Editor. The Manager user could only have access to view the reports and statistics of shared forms, while the Editor user could only have access to the Form Builder and Form Settings of shared forms.

• Private: Only logged-in users with the right permissions can access the Form page or Form Widget. If this option is enable, anonymous users will be redirected to the login page and users without permissions will be redirected to the Form Management page.

• Message: Sets the message to be displayed to the user when the form has been disabled (Off).

• Generate Submission Number: This option allows you to set a custom sequential submission numbering for your form. The submission number will be increased by 1 always. Except, if you set a bigger number in form settings (In this case, we are going to use this number). So, only when the number is bigger than the submission number of the previous entry we are going to use it to prevent duplicates. Take into consideration that the Submission Number helps you to identify a Submission in your Form, but a Submission ID helps you to find a Submission in the entire application. Two different forms can have the same Submission Number, but never the same Submission ID.

• Number Width: Set the minimum width of number without a prefix (zeros will be added to the left side). This will change the minimum width of the submission number for new submissions. E.g. set to 5 to have submission number displayed as 00001 instead of 1. Leave empty to disable.

• Number Prefix: Prefix before submission number (optional). This will change the prefixes for new numbers.

• Number Suffix: Suffix after submission number (optional). This will change the suffixes for new numbers.

• Save DB: Indicates if form submissions must be stored in the database or not. In any case, this does not affect each emailing entry.

• Owner Scope: When this option is active, only the Form Managers can manage all the Submissions. The rest of the users who have access to the Submission Manager, will only be able to manage their own submissions.

• Protected Files: When this option is active, only Logged-In users with Form access can access or download the files.

• Time Zone For Submissions: When this option is enabled, the submission date will use this timezone, instead the user account timezone.

• Date Format: When this option is enabled, the submission date will use this date format, instead the application date format.

• Editable: When this option is active, form submissions can be edited by anonymous users by using the Form Widget. So, you will be able to allow your users edit form entries from your own website.

• During: It must be a number, for example: 1. This number defines the amount of time a user can edit a submission.

• Unit of Time: It can be Hours, Days, Weeks, Months or Years. This allows you to define exactly the time you can allow the edition. Eg. 1 hour or 1 day.

• If the Submission meets: Only Form Submissions that pass this condition can be edited. This allows us to enable/disable the edition depending on the value of form fields.

• Limit total number of submission: Specify the maximum number of submissions that the form will accept in a period.

• Total Number: Total number of submissions to be accepted.

• Per Time Period: Period in which the number of submission will be counted.

• Limit submissions per User: Sets the maximum number of submissions that the Form can receive from the same user in a period.

• Limit By: There are four options: IP Address, Browser Fingerprint, IP Address or Browser Fingerprint and IP Address and Browser Fingerprint. Use Browser Fingerprint when you disable IP Tracking or when you are running FormSprout in an intranet and want to limit the entries.

• Max Number: Maximum number of submissions allowed.

• Per Time Period: Period in which the number of submissions will be counted.

• Schedule Form Activity: Set the start an end date in which the Form must be enabled (ON) Before and after it, the form will be automatically disabled.

• Start Date: Select the date on which the form will be activated.

• End Date: Select the date on which the form will be deactivated.

• Use password: Enable or disable the form protection by using password. If the option has been enabled, you should fill the Password field. Otherwise, the form will not be saved and instead, a validation error will be displayed. By default, this setting is OFF.

• Spam filter: Indicates if the form should use the honeypot technique to filter submissions made by real users from the ones made by bots (spam).

• Authorized URLs: To prevent a third party from embedding your Form on their own website, your form can be restricted to a list of URLs that you authorize.

• No validate: This option allows you to disable the Client-Side validation (by the browser). Take into account that the Server-Side validation won't be disabled. It's recommended to have this option in Off.

• IP Tracking: When this option has been enabled, IP addresses won't be collected by the application. You can enable the Browser Geo-location to collect the Sender information with consent.

• Analytics: Enable/disable monitoring the form by the application. When, IP Tracking has been disabled, Form Stats will be collected with IP anonymization.

• Autocomplete: Enables the browser's autocomplete to forms that have been previously filled. By default, this setting is ON.

• Save & Resume later: When this option has been enabled, the browser automatically will store the information entered by a user on each field to be resumed later, even if the user close the browser.

Note: There are conditionally required fields. For example, if you activate the Schedule Form Activity option, you must enter a Start and End Date. If you leave these fields in blank, you cannot save the Form Settings and instead, an error message appears.

Confirmation Settings:

This tab allows you to configure four key aspects of the submission confirmation:

• Inform to the user immediately: Whether using a text message (alone or above the form) or redirect the user to another web page. In the first case, you must type the message to display and in the second, the full URL of the web.

• If you'd like to make the message more personal, you can insert field variables (placeholders) into a confirmation message or confirmation URL, in similar way as a confirmation message by email. Once the form has been submitted, the placeholder will be replaced with the information placed in that field. For more details, go to the 'Customizing the message' documentation.

• To Redirect the browser to another page, you can set up 3 additional parameters

• Show Message and Redirect After: Here you can enter a number of seconds to start the redirection.

• Append Submission Data to URL: This is useful for small forms when you want to append all the collected data to the URL. Eg. https://www.example.com/thanks.html?text_0=John&email_0=john@doe.com

• Replace Field Name with Field Alias when it's available: If this option has been enabled, the collected data will be appended using the Field Alias. Eg. https://www.example.com/thanks.html?name=John&email=john@doe.com

• Conditional Logic With this tool you can customize the way that you handle and process your submissions, giving you more control once a user has submitted your form. A common example of this would be if you wanted to provide your end users the option to download a file. In this scenario you can redirect to the file to start the download process. But, if the user don't want to get the file, we will show the Thank You message.

• Send confirmation email to the user: If you select this option, each time a user submit a form will receive an email that will thank him.

• Double Opt-In You can enable the double opt-in feature to confirm your form submission. Then you can use the placeholder: {{optin_link}} to present the link to the Opt-In Confirmation Page. When the end-user clicks this link can be redirected to another web page or see a custom Thank You message.

Note: When the end-user confirms their Opt-In, the following event will be triggered: Email has been verified by double opt-in. This event can be used in different parts of the system, for instance to send email notifications.

Notification Settings:

In this tab you can configure how Form Submissions will be sent to your email (All data, only a link to the data or a custom message). Additionally, you can set the email subject, email addresses and more.

Four things to keep in mind:

1. If the form has fields of "Email" type, you can select them as Send To and/or Reply To email address.

2. If the form has fields of "File" type, you can attach uploaded files to emails.

3. If you choose only Plain Text, a default message with all the submitted data will be sent in plain text.

4. You can choose the event when the email notification will be sent:

• When the form is submitted

• When the email is verified by double opt-in

Note: You can insert placeholders (field variables) into a notification email. For more details, go to the 'Confirmation Settings' documentation.

UI Settings:

UI = User Interface.

From here you can modify the form appearance: The design by using themes, and the functionality by using an external JavaScript file.

1. Select a theme: You can select the theme that best fits your form or one you have created yourself. When you select a theme from the list, the form will be automatically displayed with the design chosen theme. You can change the themes over and over again to see differences.

2. Load Javascript File: Enter the full URL of the JavaScript file that will be loaded with your form. By default, the jQuery library is available for you to make use of it when interacting with the form.

Note: To save all the changes you make on any tab, click the "Save" button.

Reset Stats:

You can reset the form stats from the Form Manager, by clicking the "Actions" button and “Reset Stats“. Then it will show a popup asking you to confirm your decision to delete the stats.

Delete a form:

You can delete a form from the Form Manager, by clicking the "Actions" button and "Delete". Then it will show a popup asking you to confirm your decision to delete the form.

Important!

When you delete a Form, all content related to it will be deleted too, including: Submissions, reports and graphs, statistics, configurations and more: This action cannot be undone.

Add conditional logic to a form:

FormSprout features a powerful and intuitive tool to add conditional logic to a form.

The rules are based on the information that the form fields have at any given time and allow you to disable or enable and show or hide fields and other elements in the DOM. In addition, you can also do math and skip pages with this powerful tool.

You can access the Rule Builder from the Form Manager:

1. In the navigation bar, click "Forms"

2. Click on the form name

3. Click on the button "Conditional Rules" (Flow Graph icon)

Note: If you have questions about your first conditional rule, please read the Rule Builder documentation.

Publish and Share a Form:

You can access to publish and share a form using the Form Manager:

1. In the navigation bar, click "Forms"

2. Click on the form name you want to share

3. Click on the "Publish and Share" button (the green arrow icon)

This allows you to get the code to be placed on the website which will display the form (inline or in a modal pop-up). You can also copy the form permanent link and share it via email or social networks. And now, with the 1.1 version you can also share links with friendly URLs to your forms, immediately!

Note: Keep in mind that if you are going to share your form with a friendly URL, you must also update your theme background-image (if using one).

In addition, the forms can be published in two formats: With or Without design (no theme) and can be shared in different ways, depending on the configuration you assigned. For example, you can share the Form in complete page and without the application logo.

PopUp Designer: Place the form inside a popup

You can place the form inside a popup and design the look and feel of this popup without writing a single line of code.

To use the PopUp Designer, follow the next steps:

1. In the navigation bar, click "Forms"

2. Click on the form name you want to share

3. Click on the "Publish and Share" button (the green arrow icon)

4. Click on the "Embed Pop-Up Form" menu.

In this page you can create popups that will get your visitors attention.

You can customize a lot of options like colors, borders, radius, backgrounds, button placements and many more.

To finish, click on the "Generate code" button to open a modal and copy the HTML code that you must insert in your web page.

Download QR Code:

QR Codes are an excellent way to connect people from print media or invite people in a mobile world to complete your form.

To download the QR code, follow the next steps:

1. In the navigation bar, click "Forms"

2. Click on the form name you want to share

3. Click on the "Publish and Share" button (the green arrow icon)

4. Click on the "Download QR Code" menu.

In this page you can see the QR Code to the friendly link of your Form. Also, you can click the "Download" button to share it with your users.

Form's Backend Endpoint / Download the HTML

FormSprout has the ability to generate endpoints, then you can use them to make fully customizable forms.

You can download the HTML code of your Form to integrate it directly on your webpage or mobile app, and use the form's backend endpoint to collect data.

Download the HTML

To download the HTML code, follow the next steps:

1. In the navigation bar, click "Forms"

2. Click on the form name you want to share

3. Click on the "Publish and Share" button (the green arrow icon)

4. Click on the "Download the HTML" menu.

In this page you can see the button to download the HTML code as a ZIp file. Also, you can copy the Form Endpoint directly.

Note: If you want to replace the "name" attribute of each field, you need to set it as a Field Alias in the Form Builder.

Form Endpoints:

To collect data with the Form Endpoint just copy the URL and change your landing page's form ACTION url or point a Webhook to this URL. Just take into account two things:

1. The field alias of each field should be equal to the field name of your form.

2. If your POST request has an associative array format, you can use a Dot Notation. For example, Elementor Forms sends webhooks as associative arrays with this format:

So, instead of using the alias: 'name', we need to use the dot notation. For this example, to capture "John" we need to use the following alias: fields.name.value.

Apply a theme to the form:

To apply the theme you have created to a form, go to the Form Manager. Then, perform the following steps:

1. Click the "Actions" button of the form in which you are going to apply the theme

2. Click "Settings"

3. Click the "UI Settings" tab

4. Select a theme from the menu

5. Click "Save"

Introduction:

Form Builder is an FormSprout key piece. It's where forms are created and updated. The form builder provides the necessary tools for add and remove fields as other HTML elements.

User Interface:

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

The left panel has three tabs:

• The tab Fields displays all fields and elements that can be added to the form. Simply drag and drop them to the right area.

• The tab Settings let set the form name, the form layout (labels position) and disabling all fields.

• The tab Code let see in real time the HTML code that is being generated with the Form Builder. From here you can recognize each element ID to manipulate the Form in a more advanced way. A "Copy" button allows you to copy the entire source code easily.

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 form:

• Backgrounds: Change the background of different elements on your form.

• Typography: Choose the font, style, size, and color of all the text elements on your form.

• Borders: Set the thickness, style, and color of the borders around certain elements on your form.

• Shadows: Add or remove a drop shadow around your form.

• Buttons: Change the text of the Submit button.

• And much more!

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 right area.

• At the time you enter the Form Builder's active area, a box will indicate where will be placed the Field.

• Once you placed it where you need, drop the button.

Edit a field:

To edit a field:

• Click on the field to edit, and a pop-over will appear with field information

• Edit the information according to your requirements.

• Click Save.

Note: Pressing ESC will close the popovers.

Reorder the fields:

• To reorder a field (component):

• Click on a component and hold

• Drag the component up or down according to your requirements.

• According to where you drag the component, an active zone where the component will be placed will appear.

• Once placed in the required place, release the component.

Drag fields to create columns:

To create columns with a field (component):

• Click a widget on the left panel and Drag it to the form builder canvas.

• Drag it to the left or right of an existing field.

• A border will indicate where will be placed the field.

• Once you placed it where you need, drop the widget.

Within the form builder, you can drag existing fields into the "column drop zone" - the builder will then automatically resize all fields within the drop zone to create columns of equal width.

You can create until four columns with this method. However, you can design forms with/until 12 columns that fit perfectly with the space available on your website by using the Container Css Class feature.

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.

You'll notice that the component has disappeared.

Basic Form Settings:

By clicking on the Form Builder's Settings tab, you will access a very basic version of the form configuration. From here you can:

• Change the form name: The form name is to recognize the Form in the administration pages and is also display as the Form public page title at FormSprout.

• Change the form layout: The form layout is based on Bootstrap CSS and is used to locate the labels position on the form.

1. The Vertical layout displays the field labels above,

2. The Horizontal layout displays the labels on the field left side, and

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

• Disable form elements: Let you disable all form fields. It is an advanced option that can be useful if you plan to interact with the form from an external javascript file.

These basic options are intimately related to the form builder. However, you have other Setup options much more advanced that 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, go to the preview and click on it.

Setup Options:

Next, all the Setup Options are shown in alphabetical order. Not all are in all fields, but if you have any problem, use this list as a reference.

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

- Alias:

The Alias option let you 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":

The form preview will show a Checkbox component with 5 checkboxes: First Choice, Second Choice, Third Choice, Fourth Choice and Fifth Choice. The "Second Choice" and "Fourth Choice" checkboxes will be checked. And finally, if the user submits the form without making any changes, he will be sending the values: 2,4.

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.

Custom Checkbox:

To customize Checkbox component colors, you need to add the Container CSS Class: 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

In this example, we are using the "no-padding" predefined CSS classes to remove the padding that Bootstrap CSS adds to the columns. You can add them or not according to your design. If not, you can add the container CSS class col-xs-12 to the rest of fields, to preserve the same padding on each field.

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.

- Custom Attributes:

You can add custom attributes to a field. These attributes have two parts: The attribute name, and the attribute value.

This feature allows you to create more accessible forms, specially because you can use it to add:

• Data attributes: Useful to integrate form fields with javascript libraries

• Aria attributes: Useful to describe form fields in a better way and offer more accessibility.

- 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. That is, the information stored in a disabled field is not received and therefore not appear on the Submissions Manager.

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

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

- Number Pattern:

Is an advanced option of the Number Field that allows you to customize the regular expression 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*$/'.

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:

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.

- Pattern

It is an advanced option and allows you to add a regular expression to 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.

- 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:

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

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.

Custom Radio Button:

To customize a Radio Button field, you need to add the Container CSS Class: 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.

- 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. Modern browsers recognize this attribute.

Important! If the Number field has the 'Integer Only' option enabled is recommended to set your 'Step number' to 1.

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

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

A text field is a component that allows you to write only one line of text. Web browsers consider the text field as the standard default field from others more specialized such as URL or color. The text field can have five different input types, each of which is used to validate data differently. The five types are:

• Text: This is the default type for this component. And it is one that is commonly used in forms, because it does not offer any validation and will accept all data sent by the user. If the browser does not recognize any other type, such field will be displayed instead.

• Url: This type was introduced by HTML5 and now modern browsers accept it. Use the URL type if you want to collect absolute URLs that starts with 'http'.

• Color: This type was introduced by HTML5 and modern browsers that accept it, displays an automatically color palette when you click on it. Use the Color type if you want the collected data to be the hexadecimal value of a color, starting with a '#' sign. For example, '#FFFFFF'.

• Tel: This type was introduced by HTML5 and now modern browsers accept it. Use this type if the data to collect is a phone number.

• Password: All browsers recognize this type of entry. Use this entry type if you want the user to enter data not shown on screen. Note that FormSprout is not meant to store passwords, mainly because the data is stored as plain text. If required, use this input type with caution.

- Number Field

A number field is a component used to collect numbers as content. Following the HTML5 standard, this component can be of 2 types:

• Number: This is the type that should be used when you want the user to type the number. 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: This type of entry is also used to collect numerical data, but unlike Number, modern browsers display a slider the user can use to enter his data. For example, you can ask "From 1 to 10, how good are you at math?" 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

A date field is a component used to collect valid dates. Date fields were introduced by HTML5 and modern browsers that recognize them display a calendar by clicking on the field. This component can have 5 different types 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.

Note: Indeed some modern browsers don't yet show the Datepicker when the field is a date. But, in the future all of them will do. For now, browsers that don't support it are Safari, Firefox and previous versions of IE. For these cases, we can use a jQuery UI Datepicker widget as fallback.

- 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 for the e-mail domain. 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 the mail DNS to confirm that the domain really exists and has an A and MX record. Care should be taken that this validation can fail due to problems with the DNS servers even when mail is valid. By default, this option is disabled.

- 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 draft a comprehensive 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 get several answers, for example: Which of the followings are fruits?

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.

Also, you can choose the Bulk Editor tool to insert choices 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, click Bulk Editor and add the following "Checkboxes":

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.

Also, you can add pictures or icons 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:

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. Keep in mind that by default, the application has the Glyphicons Pro set of icons; however, you can use other icons like Font Awesome or DevIcons. For this, you just have to add the fonts to the CSS theme of your form.

Important: 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 Button

Radio Button is a component that lets you add a group of radio buttons to the form. This component gives users a list of choices, but they must select only one of them. For example: What is your favorite color?

To add, edit and delete options, you must click on the component. Then a form appears with the "Radio" 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|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:

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, it will be sending the value: 2.

Also, since version 1.3 you can add pictures or icons to the radio buttons to give a more dynamic touch to your forms.

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:

We'll be creating five 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.

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. Keep in mind that by default, the application has the Glyphicons Pro set of icons; however, you can use other icons like Font Awesome or DevIcons. For this, you just have to add the fonts to the CSS theme of your form.

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

Note: Remember that you can display your radio button horizontally by activating the 'inline' attribute.

- 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. The main difference with the Radio Button component is that you can add a lot of options without changing its size. So its use is recommended when there are plenty of options for example: 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, add the following "Options":

The Form Preview will show a box with the text "Two" and if the user submits the form without making any changes, it will send the value of 2.

Select List with option groups

To create an option group <optgroup>, enclose the text with double square brackets, for example:</optgroup>

- Hidden Field

By adding a hidden field to the form, this will not be shown on the form. However, hidden fields are useful for mathematical calculations or send default values without changing the form interface.

Note: You can add a label to a hidden field to work in a more comfortable way in the Form administration, for example to 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 detailed submission information. There are two details that must take 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 use component that allows you to add HTML code to your forms. It will display a Wysiwyg editor able to recognize keyboard shortcuts to style your HTML code quickly.

Be careful of entering a valid HTML code, otherwise, the Form Builder won't save the form and, it will display an error message indicating the line of code where the error was made. For example, a common mistake is to add more of one HTML element with the same ID.

To add an HTML table, enter a link or display an image, first, you will need to click the Fullscreen button. This will open the Wysiwyg editor over the Form Builder, so you will get more space to enter all the needed content. Also, you can click the Code button to display the content as HTML code.

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 use Google technology 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. A detail to keep in mind is that you can only add a reCaptcha component per Form.

Important! Before adding the reCAPTCHA component to your Form, you must first add reCAPTCHA keys in the site configuration. Otherwise, reCAPTCHA will not operate. If you created the form before adding the keys, you must update the form.

- Page Break

The Page break field is an advanced component that allows you to create multi-step or multi-page forms. For each page break created you will add a new page. In addition, a header will be displayed above the form to let users know in which step they are and how many steps must follow to submit the form. There are two details that must take into account:

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

• Form Steps: Appear above the form. Settings:

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

2. You can specify to display only the titles or steps (numbers).

3. 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'. Go to Glyphicons to view the name of the icons you can use.

4. You can change the design of the steps for a progress bar indicating the percentage that has been achieved.

5. Finally, you can hide the Form Steps by checking the 'No Form Steps' option.

Note: You can go to a specific page by appending the page number to the URL, for example to go to the second page add the "p=2" query string.

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

- Signature

The Signature component allow your end users to sign your form – either with their mouse or finger on an iPad/smartphone – their John Hancock directly onto the form. So, you can securely capture signatures for contracts, legal documents, and other forms in which you need a physical autograph.

• There are two details that must take into account:

• The Signature component adds two buttons to allow Canvas Interactions. You can customize the text on the 'Clean' and 'Undo' buttons by clicking on the component.Field Settings: The Signature field has the following special options:

1. Clear: Enable / Disable the "Clear" button. When an end user clicks the "Clear" button, the signature will be removed. And the canvas will be clean to start again.

2. Undo: Enable / Disable the "Undo" button. When an end user clicks the "Undo" button, the last stroke of his signature will be removed. He can continue pressing this button to undo his signature step by step.

3. Additionally, you can define the width and height of the canvas, the color of the pencil, as well as change the text of the buttons between other common settings.

- Matrix Field

The Matrix field is an advanced component, allows you to group multiple form controls with the same input type within a table. You can create a matrix field with the following input types:

• Radio Button (By Default)

• Checkbox

• Select List

• Text

• Text Area

• Number

• Range (Slider)

• Email

• Tel (Phone)

• URL

• Color

• Password

• Date

• DateTime-Local

• Time

• Month

• Week

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

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.

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.

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.

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. While it is normal to add one button per form, nothing prevents you to add more, for example at the beginning and end of the form. This component can be of 3 types:

• Submit: To submit the form. It is selected by default.

• Reset: To reset the form to their default values.

• Image: Displays an image on the button and like Submit is used to submit the form. If you use this type of button you need to add the URL of the image and also remove the CSS class.

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

Buy Now!

It will display your button with a nice icon at the beginning:

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

Field Validation

A very important point to consider is the field validation that runs when users submit a form.

Field validation is the process by which it is verified that the data submitted by users meet certain requirements. For example, a Date Field requires that the value sent to the server has the following format yyyy-mm-dd. Validation ensures that this happens.

You should note that FormSprout works with standard HTML5 fields, so you can always go to HTML5 documentation for more information. In addition to validation by type, fields may have other requirements, such as 'Required' and 'Unique'.

Many of these requirements are validated at the client, by the browser; but they are all validated on the server, by FormSprout

Introduction:

The Theme Designer is a feature that lets you design your form in minutes, removing the friction related to creating a new design, like writing and rewriting custom CSS.

To customize the look and feel of your form, just go to the Form Builder, on the right side you will see the "Design" panel. From there, set the different properties you want for your form design, the form preview area will be updated in real-time.

Design Sections:

The "Design" Panel has the following sections. Each section focuses on a form class that can be applied to multiple elements.

• Global: It's the Form Container.

• Form: The form itself. By default it doesn't have a padding, to keep compatibility when a form widget is displayed in an external website.

• Form Group: Group of Label, Input, Help Text and Validation Message.

• Form Control: Input Field.

• Button: Submit Button (Bootstrap Primary Button).

• Label: Label Field (Bootstrap Control Label)

• Placeholder

• Heading

• Paragraph

• Help Text

• Link

• Form Steps: Appears when a PageBreak field has been added to the form.

• Form Alerts: Success or Error message that appears when a form has been submitted.

• Field Validation: To customize the error state of your fields.

• Other Components: Options for Custom Checkboxes, Custom Radio Buttons, reCAPTCHA, Signature Pad and Progress Bar are available, also.

Copy, Paste & Reset Design

If you’ve created a Form before, you know the process inherently includes a considerable amount of repetitive work. With the Copy Design & Paste Design features, you can copy and paste CSS styles from one form to another with a couple of clicks. Also, you can reset the design to the default styles with one click.

Main Tools and Features

The Theme Designer come with useful tools to make complex designs more easy.

- Google Fonts Selector

Select Google fonts with live preview from a dropdown list.

- Stock Images

Thousands of stock images are now in the Form Builder. With our Unsplash integration you can search and add stock images to your form with a couple of clicks.

You don't need to license Unsplash images. Under Unsplash’s license, you can copy, modify, download, and distribute any of their images for free, even for commercial purposes. You don’t need to ask permission from or provide attribution to the artist, but we recommend crediting them anyway.

- Web Gradient Selector

You can find the gradient selector to build your own gradient (linear, radial, choose your colors and stops and more) or choose between 100+ ready-to-use beautiful web gradients.

- Subtle Patterns

Choose between hundreds of Subtle Patterns selected to you by Toptal, beautiful textures for your forms.

Common Uses Cases

The Theme Designer is a flexible tool that let you customize different parts of the form to generate an stylesheet. Some common use cases are:

- Hide Field Labels

If you want to hide a field label, just click the field and enter the following Label CSS Class: sr-only

But, if you'd like to remove the entire form labels all at once, simply follow the next steps:

1. In the Design panel -> Open the Label section

2. Scroll down until Extra sub-section

3. On Display choose None.

That's it!

Note: Never leave a field without a label, as it will help you to identify your field within the entire system.

- Align Your Form to Center

If you want to show your form on a full page (Share Form -> Link without box) this tip will be very useful.

There are several ways to center a form, below we will describe the most common option:

1. In the Global Section, Select Text Align: Center

2. And In the Form Section, Select:

• Text Align: Left - Margin: Auto - Width: 80%

That's all You can expand or reduce the Form width according to your requirements.

- Design Full Width Buttons

If you want to show a specific button with full width, just click the field and enter the following CSS Class: btn-block

But, if you'd like to design the entire form buttons all at once, simply follow the next steps:

1. In the Design panel -> Open the Button section

2. Scroll down until Size sub-section

3. On Width choose 100%.

That's it!

Introduction:

UI widgets are custom controls that improve the visualization of our Standard HTML5 fields. For example, we can use the "International Telephone Input" widget to display a Dropdown with flags and country codes as dynamic placeholders. Of course, we can customize them by making use of the Form Builder's custom attributes.

How to use a UI Widget:Using UI widgets is pretty easy, just go to Form Settings > UI Settings and select the UI widget you want to use in your form.For example, we are going to select the "International Telephone Input" widget and click Save.

Let's see the result.

Take into account that some widgets require to add a Css Class to your Form Field. For others, like in our previous example, we only need to activate them to display them in the form.

How to configure a UI Widget

To configure the UI Widget we want to use, we need to go to the Form Builder > Field Settings > Custom Attributes.

In our example, the International Telephone Inputs displays the User country flag. For this example, we are going to customize this behavior to display the flag of Great Britain. For this we are going to add the following custom attribute:

• Attribute: data-initial-country

• Value: gb

And, Save all.

Let's see the result.

Custom Attributes For UI Widgets

Now we are going to list all the attributes we can use to configure the UI Widgets.

Flatpickr

Replace any Date field with a lightweight cross-browser datepicker.

• data-alt-format: A string of characters which are used to define how the date will be displayed in the input box. For example: F j, Y

• data-allow-invalid-preload: Allows the preloading of an invalid date. It can be true or false.

• data-aria-date-format: Defines how the date will be formatted in the aria-label for calendar days. For example: F j, Y

• data-default-date: Sets the initial selected date in HTML5 format (yyyy-mm-dd). For example: 2021-12-31

• data-default-hour: Initial value of the hour element. For example: 12

• data-default-minute: Initial value of the minute element. For example: 0

• data-disable: A comma-separated dates in HTML5 format. For example: 2022-01-01,2022-01-02,2022-01-03

• data-disable-mobile: Set to true to always use the non-native picker. It can be true or false.

• data-enable-time: Enables time picker. It can be true or false.

• data-enable-seconds: Enables seconds in the time picker. It can be true or false.

• data-hour-increment: Adjusts the step for the hour input (incl. scrolling). For example: 1

• data-inline: Displays the calendar inline. It can be true or false.

• data-max-date: The maximum date that a user can pick to (inclusive). For example: 2021-12-31

• data-min-date: The minimum date that a user can start picking from (inclusive). For example: 2021-12-01

• data-minute-increment: Adjusts the step for the minute input (incl. scrolling). For example: 5

• data-mode: "single", "multiple", or "range". Date fields are only compatible with "single" mode, but you can use the others with Text fields.

• data-next-arrow: HTML for the arrow icon, used to switch months. For example: >

• data-no-calendar: Hides the day selection in calendar. Use it along with "data-enable-time" to create a time picker. This is not compatible with a Date field, but you can use it with Text fields.

• data-position: Where the calendar is rendered relative to the input vertically and horizontally In the format of "[vertical] [horizontal]". Vertical can be auto, above or below (required). Horizontal can be left, center or right. For example: "above" or "auto center"

• data-prev-arrow: HTML for the left arrow icon. For example: <

• data-shorthand-current-month: Show the month using the shorthand version (ie, Sep instead of September). It can be true or false.

• data-show-months: The number of months to be shown at the same time when displaying the calendar. For example: 1

• data-time-24hr: Displays time picker in 24 hour mode without AM/PM selection when enabled. It can be true or false.

• data-week-numbers: Enables display of week numbers in calendar.

• data-month-selector-type: How the month should be displayed in the header of the calendar. It can be "dropdown" or "static". If "data-show-months" has a value greater than 1, the month is always shown as static.

International Telephone Input

Adds a flag dropdown to Phone fields and displays a relevant placeholder. The user types their national number and the plugin send the full standardized international number.

• data-initial-country: It can be "auto" or a two-letter country code, for example: "us", "gb" or "it".

jQuery Mask

Make masks on form fields and HTML elements.

• data-mask: To get your mask applied with the data-mask attribute just use it. For example: 00/00/0000

• data-mask-placeholder: To add a placeholder to your mask. For example: "//____"

• data-mask-reverse: Activating a reversible mask. It can be true or false.

• data-mask-clearifnotmatch: Clear field if not match. It can be true or false.

• data-mask-selectonfocus: Select Mask On Focus. It can be true or false.

Common values that you can add to the "data-mask" custom attribute:

• Date: 00/00/0000

• Time: 00:00:00

• DateTime: 00/00/0000 00:00:00

• CEP: 00000-000

• Phone: 0000-0000

• Phone with DDD: (00) 0000-0000

• US Phone: (000) 000-0000

• Mixed: AAA 000-S0S

• IP Address: 099.099.099.099

• Accept Only Numbers: 0#

jQuery Ui Datepicker

Select a date from a popup or inline calendar on any 'date' field.

• data-date-format: The format for parsed and displayed dates. For example: mm/dd/yy

• data-show-button-panel: Whether to display a button pane underneath the calendar. It can be true or false.

• data-change-month: Whether the month should be rendered as a dropdown instead of text. It can be true or false.

• data-change-year: Whether the year should be rendered as a dropdown instead of text. It can be true or false.

• data-year-range: The range of years displayed in the year drop-down. For example: 2019:2022

• data-number-of-months: The number of months to show at once. For example: 1

• data-min-date: The minimum selectable date. For example, "+1m +7d" represents one month and seven days from today

• data-max-date: The maximum selectable date. For example, "+1m +7d" represents one month and seven days from today.

• data-is-rtl: Whether the current language is drawn from right to left. It can be true or false.

• data-show-week: When true, a column is added to show the week of the year. It can be true or false.

• data-first-day: Set the first day of the week: Sunday is 0, Monday is 1, etc.

Krajee File Input

Add the "file" css class to the file field to enhance the HTML 5 file input.

• data-browse-label: The label to display for the file picker/browse button. Defaults to Browse...

• data-browse-icon: The icon to display before the label for the file picker/browse button. Defaults to

• data-remove-label: The label to display for the file remove button. Defaults to Remove.

• data-remove-icon: The icon to display before the label for the file remove button. Defaults to .

• data-cancel-label: The label to display for the file upload cancel button. Defaults to Cancel.

• data-cancel-icon: The icon to display before the label for the file upload cancel button. Defaults to .

• data-upload-label: The label to display for the file upload button. Defaults to Upload.

• data-upload-icon: The icon to display before the label for the file upload button. Defaults to .

• data-show-preview: Whether to display the file preview. It can be true or false. Defaults to true.

• data-show-browse: Whether to display the file browse button. It can be true or false. Defaults to true.

• data-show-remove: Whether to display the file remove/clear button. It can be true or false. Defaults to true.

• data-show-upload: Whether to display the file upload button. It can be true or false. Defaults to true.

Krajee Star Rating

Display a Star Rating widget on any field with the .rating css class. Also, we can use a custom theme with the following css classes:

• .rating-theme-fas: Font Awesome 5.x Theme

• .rating-theme-uni: Unicode Theme

• .rating-theme-gly: Glyphicons Theme

We can customize this widget by using the following custom attributes:

• data-container-class: The CSS class to be appended to the star rating container. This is useful if you want to prefix some CSS class to the container and override the plugin widget styling for your use case.

• data-empty-star: The symbol markup to display for an empty star. Defaults to:

• data-filled-star: The symbol markup to display for a filled / highlighted star:

• data-stars: The number of stars to display. Defaults to 5.

• data-min: The minimum value for the rating input. Defaults to 0.

• data-max: The maximum value for the rating input. Defaults to 5.

• data-step: The step to increment the rating when each star is clicked. Defaults to 0.5.

• data-rtl: Whether the rating input is to be oriented RIGHT TO LEFT. It can be true or false. Defaults to false.

• data-show-caption: Whether the rating caption is to be displayed. It can be true or false. Defaults to true.

• data-size: Size of the rating control. One of xl, lg, md, sm, or xs. Defaults to md.

• data-default-caption: The default caption text, which will be displayed when no caption is set up for the rating. Defaults to {rating} Stars.

• data-star-caption: The caption text corresponding to one star. Defaults to One star.

• data-star-captions: The caption text corresponding to multiple star. Defaults to {rating} stars.

• data-clear-button: The markup for displaying the clear button. Defaults to

• data-clear-button-title: The title displayed on clear button hover. Defaults to Clear.

• data-clear-caption: The caption displayed when clear button is clicked. Defaults to Not Rated.

Introduction

Rule Builder allows you to add conditional logic to your Forms in a quick and intuitive way without using a single line of code. You simply need to add a number of conditions to fulfill to implement a number of actions such as hide/show HTML elements, enable/disable fields, copy fields values, skip pages and do math.

To access the Rule Builder you must go to Form Manager, click the Actions button corresponding to the form you will work, then Conditional Rules.

Requirements

Before using the Rule Builder, your form must have at least one field. Otherwise, a warning message is displayed.

No limitations

You do not have any limitation to create conditional rules. You can create as many rules, conditions, sub-conditions and actions as required.

Add your first rule

For this example, you should create a contact form with four fields:

• Name (text field)

• Email (email field)

• Message (text area)

• Button (with text Submit)

Then, go to Form Manager, locate your form, click on the Actions button, and then click Conditional Rules.

1. Once in this Form Rule Builder, the first thing you will notice is a blank panel with the Add Rule button. Click this button to create your first rule.

2. Then you will see two lines, the first refers to the conditions and second to actions.

3. Click the button Add condition and the first field of the form will appear, followed by a statement. In our example, the first field of the Form is a Text field with the 'Name' label, so the Rule Builder will show the condition 'Name' 'is present'.

4. Now click the button Add Action and notice that several selection lists appears. The first list shows the action to perform (For this example, leave in 'Show'); the second shows the Type of result (For this example, leave 'Field') and the third, the first field label: 'Name'. For this example, you will change it for 'Submit' (The text 'Submit' refers to the button).

5. Finally, in the top right of this rule you will see a small orange warning "Unsaved Changes" and next a green button with the Check icon. Click on this button to save this rule. The warning will disappear.

If you see your form, you will notice that the button has disappeared, but if you enter a text in the 'Name' field, the button appears.

You should be aware that some rules are met bi-directionally; that is, if the condition has been fulfilled the action will be executed. But, if the condition has not been fulfilled the opposite action will be executed (Show <=> Hide, Enable <=> Disable, Math <=> Reset to O).

You can add additional rules by clicking the "Add Rule" button, but this will not be saved until you press the green button. Remember that each rule will be stored separately.

Note: To delete a rule, click the red button with the Trash icon. Also, if you want to stop executing a rule for a certain time, you can disable it and then enable it when you need it.

Rule Anatomy

A conditional rule is composed of three parts: Name/Description, Conditions and Actions.

Name / Description

The first part allow us to describe the conditional logic. Just use a few words to name or describe what you want to achieve with this rule. (Optional. Max Length: 255)

Conditions

• It is the second part of a rule, is at the beginning and let you specify the field or fields that need to be evaluated, as the type of evaluation.

• Condition: Is the statement refer to a form field and must be fulfilled. It consists of 3 parts.

• Name: The name of the form field on which the condition is based.

• Operator: The comparison operator used to evaluate the condition.

• Value: It is an arbitrary value that the user must enter to the Form. The way Values will be defined are going to vary according to the type of field and the type of operator.

• Type of Condition: The condition type indicates how many conditions must be met to execute the action. It can be: All, Any or None. The default is All.

• Multiple conditions: You can add multiple conditions to a rule. The type of condition will indicate if all must be met (AND), if any (OR) or none.

• Group of conditions: In addition of conditions, a rule can contain a group of conditions. A group of conditions differs from a condition that allows changing the type of condition. So a rule can be of type All (AND), but the group can be of type Any (OR).

• Evaluation Process: The conditions evaluation process is top-down. That is, the conditions at the beginning will be evaluated before to those who are at the end, in descending order.

Note: Conditions "Belongs To" and "Does not Belongs To" can analyze multiple values separated by "|", this allows you to compare the field value with multiple values, if one of them matches the action will be executed.

Actions

The last part of a rule indicates the action to be performed if the conditions are met. As conditions, actions have a declarative easy way to understand.

An action consists basically of three parts:

• Action Type:

• Show / Hide

• Enable / Disable

• Copy: Let you copy the value of a field or another element or a static value and paste it to another field automatically. A great example of where this is useful, is on a Form where you might be collecting a Shipping and Billing address. The end user could enter their Shipping address and check the Copy option to automatically fill the Billing Address Fields with the same data. Another common use case is use a static empty value to clear a field by using conditional logic.

• Math: Allows Addition / Subtraction / Multiplication / Division / Remainder of fields and show the result in another field or HTML element.

• Evaluate: Allows the evaluation of math expressions (formulas) and set the result in another field. It is also compatible with date calculations. For example, if you want to calculate the multiplication of two fields and divide this value by 10, you use the following formula: {{number_1}} * {{number_2}} / 100. Please take into account the evaluation of math expressions doesn't work with opposite actions. You can read the full list of advanced calculations that the Rule Builder supports thanks to the excellent Math.js and date-fns libraries.

• Number Format: Allows you to format a number in different ways and without any coding. For example, to give the currency format to a number: 10130.25 use the following format ‘$0,0.00’ and the number will now be displayed as $10,130.25. Also, by default, the format will take the locale of the language you have selected in the configuration of your form, so for example, if our Form Language is German, will get: €10 130,25. You can read the full list of formats that the Rule Builder supports thanks to the excellent Numeral.js library.

• Text Format: Allows you to select multiple fields to create a new formatted text string and set the result in another field or HTML element. Eg. To auto-generate an email address, select a Name field and enter the following format {{0}}@example.com, then select the Email field where the email address will be displayed. You can use number tokens to identify the field position in the field list, or you can use the Field ID or Field Alias, in our example: {0}@example.com or {{text_1234}}@example.com or {{name}}@example.com should work.

• Skip: Allows you to define which page to go to when we go to the next page. This action should only be used in a Multi Step Form.

• Form: Allows you to set actions related to the form:

1. 'Submit': To submit the form.

2. 'Reset': To reset the form.

3. 'Next Page': To go to the next page.

4. 'Previous Page': To go to the previous page.

• Target: Will vary depending on the type of Action. It can be of two types:

1. Field

2. Element

• Name:

1. If the Target is Field it will be the field name.

2. If the Target is Element it will be among several HTML elements selected by jQuery. For instance:

• '#abc': The target is the HTML element with 'abc' as ID.

• '.abc': The target is all HTML elements with 'abc' as the CSS class.

1. Opposite Actions: By default, opposite actions has been enabled because they help the creation of common conditional rules and made them more logic. For example, if after meeting a condition I want to show a field then clearly by not meeting the condition I want to keep this field hidden. However, there are occasions when the disabling of opposite actions can be helpful. When this occurs, only the action described in the rule will be executed.

Note that the use of elements requires a basic knowledge of jQuery, but offers big advantages. For example, you could create an action to hide all the form fields; 'Hide' 'Element' '.form-group'.

Note: You can identify the ID and CSS Class of the form fields using the Code tab of the Form Builder.

Conditional Validation

You can omit a required field validation by using conditional rules in two ways:

1. When the field is hidden.

2. When the field belongs to a page that has been skipped.

For example, if a field is created with the Form Builder and in the conditional rules is defined that this field should only be displayed if another field meets a condition and the condition is not met, then the first field will no longer be required (will not be validated by the server).

Note: To use Conditional Validation, the client side validation must be disabled. (See Form Settings -> No validate))

Introduction

Submission Manager let you create, view, edit and delete data collected by your forms. To access the Submission Manager, you must go to Form Manager and click on the form name. From there click on Submission (Paper Airplane icon). Now you can check, edit or delete your submissions.

The Submission Manager, unlike other managers of the application, offers more features to adapt flexibly to the data collected by your forms. By default, it will display the first 4 fields to keep a perfect compatibility with the GridView. Then, you can use the tool to set up what columns to show or hide.

These are some Submission Manager features you should consider:

• Navigation: The Submission Manager displays submissions in tabular form. In the table upper cell, the form field label will be displayed and then the submission data corresponding to that field. Submissions have been sorted by creation date (when they were sent). You can sort your submissions by clicking on the cell "Submitted". Also, the number of submissions displayed per page has been defined according to the number of rows for the entire application, default is five. To view more submissions, you can use the Next and Previous buttons to go forward or backward.

• Show / Hide columns: You will see a button with a Table icon to the search box right. If you hover the mouse over it, the message "Show / Hide Columns" appears. If you click on this button, a list with the name of each column will be displayed, remove the check of any column name, and the column will be hidden, check to the same name, and the column will be displayed. The only thing to keep in mind at this point is that you cannot hide the "Checkbox", "Submitted" and "Actions" columns. Also, they must show at least two fields. If your form has many fields, use this feature to organize your manager to your preference. Take into account that the selected configuration will be saved in your User Preferences, so you will see the same configuration on any browser or used device.

• Submission ID vs Submission Number vs Serial Numbers: While the Submission ID is the number that identifies an entry in the entire system, the Submission Number identifies an entry in a form, that is, two different forms can have the same Submission Number, while they can never share the same ID. For its part, Serial Numbers is the number that identifies a row in the Submission Manager and is in accordance with the page we are visualizing. (See: How to create custom submission numbers).

• Resize columns: If your form has a lot of fields, display them all can make the data look too close together. Use this option to expand the width of the columns to a predefined minimum. You should note that FormSprout has a responsive design, so those fields that exceed the width of the page will be hidden. To view them you will be able to scroll horizontally.

• Reset the Manager: If you have made modifications in the manager, for example, hiding columns. You can return to the default view by clicking on the "Reset" button.

• Sort submissions: Sorting is one of the most common tools for data management. In FormSprout, you can sort the submissions by columns, by ascending or descending order, by clicking the column header (Field Label).

• New submissions: Submissions with the "new" label next to the date are those unread. Once you enter to read the submission, the label "new" will disappear.

• Bulk actions: If you need, you can "delete" or "mark as read" or "mark as unread" multiple submissions at a time. For this, check the checkbox of each submission to modify and then click the top right button (Checkbox Checked Icon). It will show a menu with two options: Delete, Mark as Read and Mark as Unread. Click on the required action. You should note that to eliminate submissions, a popup will appear asking you to confirm your decision to delete. When you click OK, submissions will be deleted. This action cannot be undone.

Viewing a Submission Record

When you click an entry in the Submission Manager, a vertical table with all information collected will be displayed. By default, this entry is for view-only. To edit the entry, continue reading until you find the "Editing a Submission" section.

Submission information has been divided in three sections:

1. Submission Details: Shows the information collected by your form fields.

2. Sender Information: Shows sender information collected by the application. Including the country, city, geolocation map, ip address, user agent, landing page, referrer url. An icon will appear to indicate if the geolocation information has been obtained with the user's consent.

3. Additional Information: Displays the Hash ID of the Form Submission. If Submissions are editable (See: Form Settings), a link to the form page to edit this entry will appear. You can share this link with your end-users to allow the edition. Also, in this section you can see the date when the Submission has been sent or updated and if it was made by a logged-in users, his username will appear.

Note: Leave a comment about the submission. Comments can only be viewed in the Submission Manager—they aren't included in exports.

Editing a Submission

To edit a Submission, go to the Submission Manager. Then, perform the following steps:

1. Click on the submission to edit.

2. You will see the Submission Information and at the right top see the "Edit" (pencil icon) button.

3. Click the Edit button.

4. The vertical table will become a similar form than the one you have created.

5. Make the changes you need

6. Submit the Form

Note: Keep in mind that when you edit an item, the data related to that submission will be overwritten permanently.

Create a Submission

To edit a submission, go to the Submission Manager. Then, perform the following steps:

1. Click the Add submission button (icon with the plus sign)

2. You will see a similar form than the one you have created.

3. Make the changes you need

4. Submit the Form

5. The new Submission will appear in the Submission Manager.

Deleting Submissions

To delete a submission, go to the Submission Manager. Then, perform the following steps:

1. Click on the submission you want to delete

2. Click on the Delete red button (trash can icon) at the top right.

3. A pop-up will appear asking you to confirm your decision to delete the submission.

4. Click OK.

Note: Keep in mind that when you delete an item, the data related to that submission (including attachments) will be removed permanently.

Printing a Submission

To print a Submission, go to the Submission Manager. Then, perform the following steps:

1. Click on the submission to print.

2. You will see the Submission Information and at the right top see the "Print" (printer icon) button.

3. Click the Print button.

4. The page preview to print will be displayed in black and white with submission details

5. Make the changes you prefer in the printer dialog window

6. Click on 'print'

Filtering Submissions

To filter the data collected by the form you must select the Date Range and click the "Filter" button.

Exporting Submissions

To export the data collected by the form you must select the Date Range and click the "Export" button.

Then select the format of the file to be generated:

• Export as CSV

• Export as MS Excel

File Management

You can manage files sent with your forms. Basically file management allows to:

• View sent files associated with the field used (label).

• Upload files when creating Form Submissions using the Submission Manager.

• Update uploaded files.

• Delete files

Important! When trying to update a Submission file made before the upgrade to version 1.3.6, older files will appear at the bottom of the list of uploaded files. You can remove them when you consider appropriate.

Resend a Notification or Confirmation Email

If your form has been configured to send confirmations or notifications by email, an Email button will appear in the Submission Details page. To resend any of these emails, just click on them and confirm you want to send.

Introduction

Report Builder allows you to see the data collected by a form.

Note: You can only create a report per form.

Create my first report

To create your first report go to Form Manager. Then, click on the Actions button and select the Submission Report option.

A report is made of multiple charts. You can create as many charts as you have fields in your Form. When finished editing, you should click on the Save report button.

Add a chart

To create a chart:

1. Click the Add chart button

2. Fill the Title field

3. Select the Type of chart

4. Select the Field from which to get data

5. Click Save

Your chart has been added. Now you just need to Save the report.

Edit a chart

To edit a chart:

1. Click the Edit button. Note that the report has now a yellow background and the Edit button now says Stop. In addition, all charts must show a pencil icon (for editing) and X (to delete).

2. Click the pencil icon of the chart to edit.

3. In the form that appears, change the data you need.

1. Click Save

2. When the chart is reloaded, press the Stop button.

Your chart has been edited. Now you just need to Save the report.

Delete a chart

1. Click the Edit button. Note that the report has now a yellow background and the Edit button now says Stop. In addition, all charts must show a pencil icon (for editing) and X (to delete).

2. Click on the X icon and the chart will disappear.

3. When the chart disappears, press the Stop button

Your chart has been deleted. Now you just need to Save the report.

Resize a chart

1. Click the Edit button. Note that the report has now a yellow background and the Edit button now says Stop. And when you hover the mouse over a chart an icon will appear in lower right part to resize the it.

2. Click on the icon to resize the chart and drag to make it bigger or smaller.

1. When the chart has the size you need, press the Stop button.

Your chart has been resized. Now you just need to Save the report.

Save the report

To save the report:

1. Be sure you are not in Edit view. Click the Stop button if this still appears.

2. Press the Save report button.

3. A message will appear confirming that the report has been saved.

Interacting with the report

Charts can interact with one another. When you click one of them you will see how the others change to show the chart element information you clicked.

Reset a report

If you want to create a new report, you can press the Reset button. You will notice that all charts have disappeared. Now you just need to Save the report.

Print / Save a report as PDF document

To print a report:

1. Press Ctrl + P, or use the browser print feature.

2. Select "Microsoft Print to PDF" (Windows) or "Save as PDF" (Mac).

3. Now just click "Print".

Introduction

Want to know how well are your forms performing? Well, now you can do it fast and easy with the FormSprouts' In-App Analytics. Get the best results from your forms, improve them to increase your conversion rates and much more. Yes, with only a few steps, you can start tracking your forms and in real time! Try it now and see the difference!

In-App Analytics offers two kinds of reports, each with a different approach:

• Performance Analytics

• Submissions Analytics

Performance Analytics

The Performance Analytics report let you measure how effective is your form in converting inbound visitors.

The funnel: KPIs

The funnel in this report represents how many visitors make it to the next conversion stage.

• Users: Visitors who landed on the Form.

• The first step in the funnel is the number of unique users that landed on the form. This number represents the total amount of people that saw the form and serves as a baseline for the rest of the funnel steps.

• Began Filling: Users who interacted with the Form.

• The next step in the funnel shows how many unique users have interacted with the form beside the users that saw your page.

• An interaction will be considered an action with any of the input fields in the form (attempting to fill them out, change them, or any other). This funnel step tells you how many people made some effort to fill out this form, but weren't able to make it through to the next step (a successful conversion). We recommend looking at this segment very closely, because the visitor that have made it to this step, but not to the next; have displayed interest in the form but due to confusion, form validation errors, or other reasons, decided not to go any further.

• Conversions: Users Converted Successfully

• This number represents the unique users that successfully converted the form by completing every stage of the funnel.

• Conversion Rate: This is the average number of conversions per users, shown as a percentage.

Timeline

The Timeline represents the evolution of the first three indicators mentioned above through the time.

These three graphs grouped the number of users, interactions and conversions in that time unit. For example, at a glance we can know that on Mondays we have more conversions than on Fridays.

Conversion Time

The Conversion Time chart shows how much time your average users are spending filling out your form.

Conversion Time Average

The Conversion Time Average chart shows the average time per day that users are spending filling out your form.

Conversion vs. Abandonment

This chart makes a comparison between the number of conversions and the number of abandonments.

Abandonments: This rate represents the number of unique users that interacted with the form (start filling it) but, for one reason or another, didn't send it.

Abandonment Rate

This chart shows you the percentage of abandonments in the course of time.

Abandonment Rate: This is the average number of abandonments per users, shown as a percentage.

Submissions Analytics

Unlike the previous report, the Submissions Analytics report focuses on submissions and for example, let you know at a glance the number of submissions that are made in time, how many sessions are performed by your users to submit the form or which country and city have made more submissions.

Timeline

With the Timeline you can see how many submissions are made each day.

Sessions before submission

Each time a user visits a site, FormSprout sets a session counter: Set to 1 on the user’s first visit, 2 on the user’s second visit, etc. So with this chart you'll know the average number of visits by users before sending the form. This KPI will help you better understand the behavior of your users

By country

One of the coolest features of In-App Analytics system is that it can show you a geographic map of your form's submissions. Geographic maps can help determine top markets, the effectiveness of offline Campaigns, where to target special offers and advertisements, and more.

This chart will show you a world map with each country with a shade of blue. For example, some countries (like the USA and Canada) will have a dark shade of blue, which indicates that these are your most important countries in terms of submissions. Other countries may not have any shading at all, which indicates you’ve likely never had a submission from that country.

Top cities

Next to the World Map is this Row chart listing the major cities where users have made a submission, as the number of submissions made in each.

Submissions by hour

With this chart you can know in what time of the day are made more submissions. Some websites will experience peaks of traffic through the day depending on the content they publish and the audience they target. For example, a children’s website will be quiet at night, while a B2B website will be much busier during business hours.

Note: This chart complements the Performance Analytics' charts (By Year, By Month, By day).

Top referrers

With this chart you will see the main domains that send traffic to your form, listed by number of submissions.

By type referrer

With this chart you can see the number of submissions segmented by the type of reference from which the user came.

Types:

• search

• social

• internal

• email

• unknown

• invalid

By device category

With this chart you can see the number of submissions according to the device categories from which was made.

Categories:

• desktop

• smartphone

• tablet

• feature phone

• console

• TV

• Car browser

• Smart Display

• camera

• portable media player

• phablet

By OS

With this chart you can see the number of submissions segmented by the type of operating system.

By Browser

With this chart you can see the number of submissions segmented by the Navigator.

Is Mobile?

With this chart you can quickly determine the number of submissions made from a mobile device or not.

Interacting with In-App Analytics

Keep in mind that the In-App Analytics Charts are naturally data driven and reactive, therefore providing instant feedback on user's interaction.

Just click on one of the charts and the rest of them will show the segment reporting.

For example, on the Performance Analytics report click on Monday ('Sun') and you will see how the other charts update their data, including the funnel where you can see the number of users, interactions and conversions performed on Mondays.

Enable / Disable In-App Analytics

Most of the time, you won't have to do anything to enable form analytics. When a form is created the option to track their performance is enabled.

To disable a form tracking, you must follow these steps:

1. Go to the Form Manager.

2. Click the Actions button of the Form and then Settings

3. Change Analytics from On to Off or vice versa.

4. Click Save.

Enable / Disable In-App Analytics on the fly

Depending on the requirements of your site, you may be interested to track your form when certain conditions are met. For these cases you can enable / disable in-app analytics on the fly by adding the configuration option record to the embed code you use to publish the form in your website.

For disable:

‘record’: 0,

For enable:

‘record’: 1,

This parameter is enabled by default.

Note: You can read more details in the Form Widget documentation.

Advanced Settings

How often should statistics be computed?

In-App Analytics is updated once by hour, so you will see the stats until yesterday. We decided this because multiple queries are made to the database in order to upgrade the data and this could degrade the application's performance (especially in sites with high traffic). However, this can be configured easily.

For example, follow these steps:

1. Open the @app/config/params.php file.

2. Change App.Analytics.cronExpression value of @hourly with @daily or * * * * *

3. Save the file

With this change, the stats will be updated every day or every minute.

Note: Remember, it's important to properly configure your server's cron.

Introduction

Embed code are a few lines of html and javascript that you can use to embed a FormSprout’ form into your own website. This is the easiest way to display a form on your site and the method least susceptible to errors. Also, one of the most important things about the form widget is that every time you make a change to your form in the form builder, the embedded form will automatically update.

The Form Widget has been designed to work on any web page. Our Form Widget basically creates an iFrame on the fly, and the form will be loaded in it. Then, since it creates the iFrame, it can also resize it and that means there's no need to update the code every time you make some change. Also, when you keep a form inside an iFrame, you also prevent it from conflicting with existing JavaScript or CSS elements on your page.

Which Form Embed Code Should I Use?

Right now FormSprout offers two options for publishing a form in your web site:

• Embed with Design: Lets you publish the form with the theme that has been applied to the form.

• Embed without design: Lets you publish the form without any theme, even if you have applied one to your form.

Usually, the first option is the one you should use.

How to populate a Field with a Querystring?

You can populate a field with URL parameters. Just make sure to use the Field ID or Field Alias as the parameter key, then the value assigned to this parameter will appear in the field.

Note: If you are using a Multi-Step Form, you can go to a specific page by appending the page number to the URL, for example to go to the second page add the "p=2" query string.

How to listen postMessages sent by the Form Widget

To be able to listen to the messages sent by the Form Widget, you simply have to add an event listener to your web page. For example, if you need to know a submission ID from your own webpage, you can add this code bellow the pasted embed code:

Form Widget Setting

The Form Widget (embed code) has two parts:

• An HTML code that displays the default content if the user accesses the form when JavaScript is disabled in his browser. By default, a link to your form within a DIV element is displayed.

• A Javascript code that is responsible for displaying the form and initialize the Form Tracker (if Analytics is enabled).

The form widget allows you to set some options of the form on the fly:

• Id: Form's ID in the application. For example: 'id': 132

• Sid: Submission ID. Use this option to edit a form submission previously collected. To find the Submission ID, go to the Submission Manager. For example: 'sid': 964

• Container: ID of the HTML element where the form's iframe will be inserted. By default, points to the DIV ID that contains the link to the form. For example: 'container': 'c132'

• Width: Specifies the width of the form's iframe. For example: 'width': '100%'

• Height: Specifies the height of the form's iframe. Usually, the embed code comes set with a value in pixels. This value is calculated by the Form Builder at the time of its creation. For example: 'height': '846px'

• Auto Resize: By default, is enabled. Indicates whether the iframe can automatically resize to the real height of the form. For example, when validation messages are shown. If set to false, the form does not resize and its height will be defined in the "height" option. For example: 'autoResize': !0

• Theme: By default, is enabled. Is a integer value (1 or 0) that lets you enable or disable a theme on the fly. For example: 'theme': 1

• Custom JS: By default, is enabled. Is a integer value (1 or 0) that lets you enable or disable the loading of external javascript files on the fly. For example: 'customJS': 1

• Record: By default, is enabled. Is a integer value (1 or 0) that lets you enable or disable the Form Tracker on the fly. For example: 'record': 1

• Page: In a Multi-Step Form, this option specifies the page we want to display by default. For example, to display the second page: 'page': 2

• Form: Specifies the path to the form's embed. It contains no parameters.

• addToOffsetTop: By default, is 0. Add or subtract a number of pixels to OffsetTop before calculating the form location. This allows correct the form location when html elements on the website (like a header) have the CSS property: "fixed". For example: 'addToOffsetTop': '-60'

• Default Values: If you want to pre-fill form fields with default values, you can use this option. Default Values is a JSON object where your key is the id of the form field and its value is the content of the field. For example:

Note that checkboxes and radio buttons will be selected with boolean values. For example:

Interacting with the Form via JavaScript

The Form Widget contains many features and options that can be configured inside an external JavaScript File.

Note: To load a JavaScript File you must go to Forms -> Actions -> Settings -> UI Settings.

By default, a jQuery object is available. So you can interact with the Form in a very simple way by using the following lines of code:

The Form element

The Form element - formEl - is a jQuery object to which you can access for get information and/or manipulate it directly. For example, we're going to know the high of our form with the following lines of code:

Listening for Events

Certain events are triggered when the Form does something.

• view: This event will be triggered when a form has been viewed.

• fill: This event will be triggered the first time you interact with the form. For example, by fill a text field or select a radio button.

• error: This event will be triggered when the Server threw a validation error.

• success: This event will be triggered when the Form has been submitted successfully.

• nextStep: This event will be triggered each time you progress to the next step in a multi-step form.

• previousStep: This event will be triggered each time you go back one step in a multi-step form.

A very basic example for detecting when a form fail would be:

The Rule Engine also triggers the following events when a field is shown or hidden by using conditional rules:

To implement this feature, the rule engine will trigger the following events:

• ef.shown: This event will be triggered when a field has been shown.

• ef.hidden: This event will be triggered when a field has been hidden.

Then, to interact with these events just write the event listeners. For example:

The Event Handlers:previousStep and next

StepIn addition to the events, FormSprout offers two event handlers that allow you to go backward and forward a page on a Multi-Step form ready to use using JavaScript. For example, now we're going to see how to forward a page without pressing the button "Next" using the auto-advance feature.

Auto-Advance in Multi-Step Forms

By default, when you create a Multi-Step Form, two navigation buttons are added automatically: "Previous" and "Next" at the bottom of the form. These buttons allow you to navigate through the form until you reach the last page where usually the Submit button is placed.

Note: FormSprout lets you add multiple Submit buttons on different pages or parts of the form.

However, in certain use cases you can may want to advance directly to the next page without pressing any buttons. For this we will make use of the “nextStep” event handler.

Note: Some use cases in which this feature is useful are surveys and/or tests where is not allowed to change response and lets to complete the survey as soon as possible.

For example, with the following lines of code, we are going to tell our Form that each time a radio button is selected, the form will forward to the next page:

Finally, if you want to hide the navigation buttons you can add the following lines in the CSS Theme assigned to your form:

Upload Multiple JavaScript and CSS files in our Form

By having the jQuery object, we can make use of jQuery.when().done() to load multiple javascript objects and make use of them once they are ready to use. Let’s see the following example.

Display a jQuery UI DatePicker in a Date field

For example, with the following lines of code we will show a jQuery UI DatePicker in the Date fields of the form:

As you can see:

• We're loading 2 files within the function when(): jquery-ui.css and jquery-ui.min.js.

• We have inserted a function that will run when the previous two files are loaded on the page within the function done().

• The function basically runs 3 Instructions:

1. Find all fields of type "date" and convert each field "date" in "text".

2. Clone each Date field in a Text field that displays the DatePicker.

3. Hides the Date field, because its value will be established automatically by the DatePicker, by the attributes: altField and altFormat.

Introduction

Migrate a form with FormSprout is a very easy process due to the simplicity of the import/export tool. Once a form is migrated, you can edit it like any other form in FormSprout, so you won't need to restart from scratch.

Note: You can import/export multiple forms at once.

Importing a Form

Note: This section assumes that you have already exported your forms and saved them in a JSON file. If you have not already done so, below you can read the steps to export forms using FormSprout.

To import a form with FormSprout, just follow the next steps:

1. Go to FormSprout and click your username. Then, click Settings. In the Sidebar, click the "Import / Export" link.

2. From here, click on the Browse button and navigate to the form settings file that you need to import.

3. Click the "Upload Migration File" button.

If successful, you should see a message on the top of the page indicating that the form has been imported successfully.

You should now see the form appropriately listed with the rest of your forms.

Exporting a Form

When moving a form from one location to another, or even to backup your data, we have implemented a tool within FormSprout to perform an export of your created forms with just a few clicks.

To export a form with FormSprout, just follow the next steps:

1. Go to FormSprout and click your username. Then, click Settings. In the Sidebar, click the "Import / Export" link.

2. In the Export Forms panel, select any forms that you want to export.

3. Click the "Download Migration File" button.

4. Then, you will be prompted to save a JSON file containing all of your form settings. Be sure to save this is a safe place for easy access later.

Your form should now be successfully exported. If you need to import your form, you may review the first section of this article on importing forms into FormSprout.

Note: This export is only for FormSprout and not include any submission data.

Introduction

You can use the WebHooks Add-On to send data from your forms to any custom page or script you like. This page can perform integration tasks to transform, parse, manipulate and send your submission data to wherever you choose.

If you are developing an application that needs to be updated every time a form is submitted, WebHooks is for you. The advantage of WebHooks is that the passing of data is immediate and you can pass all submitted form data at once.

What's a WebHook?

A WebHook is just a push notification from FormSprout to another server every time someone submits your forms.

What can you do with a WebHook?

WebHooks makes easier to integrate two systems. The most common use for a WebHook is to feed leads into your CRM. But there are lots of other things you could do as well.

What Do You Need?

The very nature of a WebHook assumes that you have some ability to write code (or bribe a friend or colleague who does). You need to have a server that can accept a POST request (the one you’d get from a form submission), and be able to write a script that does something in response.

Note: Formsprout supports the integration of multiples WebHooks by form.

Install WebHooks add-on

You can purchase the WebHooks add-on from our marketplace.

Create a WebHook

To create a WebHook, you must perform the following steps:

1. Go to the Add-Ons Manager and click on WebHooks.

2. Click on the Create a Webhook button.

3. A form used to configure the WebHook will appear:

• Form: Select the form that will send notifications.

• Handshake Key: This is a an optional key that you choose as an authentication mechanism to prevent spam to your Web Hook. This key will be included as a post parameter when our servers call yours. If you use this key, you should compare it to your copy to validate that the submission is legit.

• Url: The URL where your script is located.

• Status: Can be:

1. On: Send notifications

2. Off: Does not send notifications

• Json: Can be:

1. On: Send data as JSON string

2. Off: Send data as Url Encoded string

• Alias: Can be:

1. On: Send data with Field Alias as parameter key. Eg. Replaces 'text_0' by 'name'.

2. Off: Send data with Field ID as parameter key

• Click Create.

Note: Select multiple forms to create the same WebHook for each form.

Disable / Enable a WebHook

To stop a webhook temporarily, you can choose to disable and enable later. To disable a form webhook, you must follow these steps:

• Go to the Add-Ons Manager and click on WebHooks.

• Click the Actions button of the WebHook to disable.

• Click Update.

• Change the Status from On to Off or vice versa.

• Click Update.

Delete a WebHook

To delete a WebHook, you must perform the following steps:

• Select the checkbox of the WebHook to delete.

• Click Bulk Actions.

• Click Delete.

• Then it will show a popup asking you to confirm your decision to delete the WebHook.

The WebHooks Manager will reload and the selected WebHook will be deleted.

Send data as JSON

• To send the post data as a JSON string, you must follow these steps:

• Go to the Add-Ons Manager and click on WebHooks.

• Click the Actions button of the WebHook to disable.

• Click Update.

• Change the Json field from On to Off or vice versa.

• Click Update.

Using WebHooks

Now that you know what are WebHooks and how to use them in FormSprout, let's see an example.

Note: You can follow this tutorial using the FormSprout demo. But keep in mind that our demo page will refresh every 15 minutes.

In this tutorial we are going to send notifications from one of our forms to the page: Beeceptor. This page captures our notifications and printed them on screen.

First Steps:

1. Go to https://beeceptor.com/

2. Enter a Endpoint Name and

3. Press the Create Endpoint button

4. Copy the Endpoint Url

Very Good! Know you have a URL that will serve to receive notifications sent by FormSprout.

Next Steps:

1. Go to FormSprout

2. Go to the Add-Ons Manager and Install WebHooks

3. Now, Click on WebHooks.

4. Click on the Create a Webhook button.

5. Fill the form:

• Form: Select ‘Mailing List - Inline Layout'

• Url: Paste the Endpoint Url

• Handshake Key: For this example: my_handshake_key

• Status: ON

Click on Create

Final Steps: Test your notifications

1. Go to Form Manager

2. Click on the ‘Mailing List - Inline Layout' form

3. Click on the Publish and Share button (the green arrow icon)

4. Click on Share Form Link

5. Check Without box and press Go!

6. Fill the Mailing List form and submit

If your submission is received, a success message will appear.

Now, go to Endpoint Url (and without refresh the page) you will see that the notification contains:

• Form ID

• Form Name

• User IP

• Submission Data

• HandShake Key

And that’s it! You have sent your first notification to another server. Congratulations!

Saving Form Submissions in an external database

Now that we know how to export Form Submissions in real time to an external application, we will see how we can store these submissions in a database.

If you have a website, you can perform the following steps and store Form Submissions of our Demo Form in your own database, you just need to change the WebHook URL.

In Your own Website:

1.- Create a database: 'test'. You can do this with your favorite software, such as phpMyAdmin or also using the following MySQL command:

2.- Create a database table: 'subscribers', with 4 fields: id, name, email and ip_address. You can run the following MySQL query:

3.- Setup the information to your database: 'test'. The @app/custom/saveToDB.php file allows you to configure the following parameters:

4.- Upload the @app/custom/saveToDB.php file to your server.

From now on, each time you submit the form, the data will be forwarded to your saveToDB.php file that will store the information in the corresponding field in the database.

As you can see in the saveToDB.php file:

• We are receiving $_POST data sent by FormSprout when a Form is submitted. For example:

Introduction

The Google Analytics add-on will allow you to track a form with different Google Analytics accounts or track several forms with a single Google Analytics account, including Google Analytics 4.

The add-on for Google Analytics let you capture the user data and send them to Google's servers. This will let you know how many people saw your forms, filled them or finished and submitted them.

Create Form Tracking

To create a form tracking with Google Analytics, you must perform the following steps:

1. Go to the Add-ons Manager and click on Google Analytics.

2. Click on the Create Form Tracking button.

3. A form used to configure the GA tracker will appear.

• Form: Select the form to track.

• Tracking ID: The ID account provided by Google Analytics.

• Tracking Domain: Put the domain name of the site where you will publish the form

• Status: Can be:

On: Send data

Off: Does not send data

• Anonymize Ip: The full IP address is never written in Google Analytics.

Click Create

Disable / Enable Form Tracking

To stop a form tracking temporarily, you can choose to disable and enable later.

To disable a form tracking, you must follow these steps:

1. Go to the Add-ons Manager and click on Google Analytics.

2. Click the Actions button of the Tracking to disable.

3. Click Update.

4. Change the state from On to Off or vice versa.

5. Click Update.

Delete Form Tracking

To delete a form tracking, you must perform the following steps:

1. Select the checkbox of the Tracking to delete

2. Click Bulk Actions

3. Click Delete

Then it will show a popup asking you to confirm your decision to uninstall the add-on.

The tracking manager with Google Analytics will reload and the selected track will be deleted.