Question 1

Form Manager

Accepted Answer

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.
 
https://static.wixstatic.com/media/undefined

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.
https://static.wixstatic.com/media/undefined
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".
 
https://static.wixstatic.com/media/undefined

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.
https://static.wixstatic.com/media/undefined

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.
 
https://static.wixstatic.com/media/undefined

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:  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.
 
https://static.wixstatic.com/media/undefined
  
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"
https://static.wixstatic.com/media/undefined

Question 2

Form Builder

Accepted Answer

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: https://static.wixstatic.com/media/undefined 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. https://static.wixstatic.com/media/undefined 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. https://static.wixstatic.com/media/undefined - 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. https://static.wixstatic.com/media/undefined 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. https://static.wixstatic.com/media/undefined 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'. https://static.wixstatic.com/media/undefined - 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'. https://static.wixstatic.com/media/undefined - 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: https://static.wixstatic.com/media/undefined 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. https://static.wixstatic.com/media/undefined - 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: https://static.wixstatic.com/media/undefined 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. https://static.wixstatic.com/media/undefined Custom Radio Button: To customize a Radio Button field, you need to add the Container CSS Class: custom-control https://static.wixstatic.com/media/undefined - 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. https://static.wixstatic.com/media/undefined - 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. https://static.wixstatic.com/media/undefined 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. https://static.wixstatic.com/media/undefined 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": https://static.wixstatic.com/media/undefined 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. https://static.wixstatic.com/media/undefined 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: https://static.wixstatic.com/media/undefined 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: https://static.wixstatic.com/media/undefined 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: https://static.wixstatic.com/media/undefined 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": https://static.wixstatic.com/media/undefined 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 , enclose the text with double square brackets, for example: https://static.wixstatic.com/media/undefined - 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. https://static.wixstatic.com/media/undefined 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. https://static.wixstatic.com/media/undefined 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. https://static.wixstatic.com/media/undefined 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. https://static.wixstatic.com/media/undefined - 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. https://static.wixstatic.com/media/undefined - 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. https://static.wixstatic.com/media/undefined - 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. https://static.wixstatic.com/media/undefined 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. https://static.wixstatic.com/media/undefined 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. https://static.wixstatic.com/media/undefined 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. https://static.wixstatic.com/media/undefined 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: https://static.wixstatic.com/media/undefined 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. https://static.wixstatic.com/media/undefined 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'. https://static.wixstatic.com/media/undefined Many of these requirements are validated at the client, by the browser; but they are all validated on the server, by FormSprout

Question 3

Theme Designer

Accepted Answer

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.
 
https://static.wixstatic.com/media/undefined

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.
 
https://static.wixstatic.com/media/undefined

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.
https://static.wixstatic.com/media/undefined

- 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.
 
https://static.wixstatic.com/media/undefined

- 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.
https://static.wixstatic.com/media/undefined

- Subtle Patterns
Choose between hundreds of Subtle Patterns selected to you by Toptal, beautiful textures for your forms.
https://static.wixstatic.com/media/undefined

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!

Question 4

UI Widgets

Accepted Answer

Introduction:
 
https://static.wixstatic.com/media/undefined

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.
 
https://static.wixstatic.com/media/undefined

Let's see the result.
 
https://static.wixstatic.com/media/undefined

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.
 
https://static.wixstatic.com/media/undefined

Let's see the result.
 
https://static.wixstatic.com/media/undefined

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.

Question 5

Rule Builder

Accepted Answer

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. https://static.wixstatic.com/media/undefined Requirements Before using the Rule Builder, your form must have at least one field. Otherwise, a warning message is displayed. https://static.wixstatic.com/media/undefined 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) https://static.wixstatic.com/media/undefined 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. https://static.wixstatic.com/media/undefined 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. https://static.wixstatic.com/media/undefined 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. https://static.wixstatic.com/media/undefined 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: * / 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 @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 @example.com or @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'. https://static.wixstatic.com/media/undefined 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))

Question 6

Submission Manager

Accepted Answer

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.
 
https://static.wixstatic.com/media/undefined

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).
https://static.wixstatic.com/media/undefined

• 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.
https://static.wixstatic.com/media/undefined

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
https://static.wixstatic.com/media/undefined

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
https://static.wixstatic.com/media/undefined

To filter the data collected by the form you must select the Date Range and click the "Filter" button.
 
Exporting Submissions
https://static.wixstatic.com/media/undefined

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
https://static.wixstatic.com/media/undefined

File Management
https://static.wixstatic.com/media/undefined

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.
 
https://static.wixstatic.com/media/undefined

Question 7

Report Builder

Accepted Answer

Introduction
Report Builder allows you to see the data collected by a form.
 
https://static.wixstatic.com/media/undefined

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.
https://static.wixstatic.com/media/undefined

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.
https://static.wixstatic.com/media/undefined

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.
 
https://static.wixstatic.com/media/undefined

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.
 
https://static.wixstatic.com/media/undefined
    
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".
 
https://static.wixstatic.com/media/undefined

Question 8

In-App Analytics

Accepted Answer

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
https://static.wixstatic.com/media/undefined

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.
 
https://static.wixstatic.com/media/undefined

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
https://static.wixstatic.com/media/undefined

The Conversion Time chart shows how much time your average users are spending filling out your form.
 
Conversion Time Average
https://static.wixstatic.com/media/undefined

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.
 
https://static.wixstatic.com/media/undefined

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
https://static.wixstatic.com/media/undefined

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
https://static.wixstatic.com/media/undefined

With the Timeline you can see how many submissions are made each day.
 
Sessions before submission
https://static.wixstatic.com/media/undefined

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
https://static.wixstatic.com/media/undefined

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
https://static.wixstatic.com/media/undefined

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
https://static.wixstatic.com/media/undefined

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
https://static.wixstatic.com/media/undefined

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
https://static.wixstatic.com/media/undefined

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
https://static.wixstatic.com/media/undefined

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.
 
https://static.wixstatic.com/media/undefined

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.

Question 9

Form Widget (Embed Code)

Accepted Answer

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:
 
https://static.wixstatic.com/media/undefined

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:
https://static.wixstatic.com/media/undefined

Note that checkboxes and radio buttons will be selected with boolean values. For example:
    
https://static.wixstatic.com/media/undefined

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:
 
https://static.wixstatic.com/media/undefined

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:
 
https://static.wixstatic.com/media/undefined

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:
https://static.wixstatic.com/media/undefined
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:
https://static.wixstatic.com/media/undefined

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:
 
https://static.wixstatic.com/media/undefined
Finally, if you want to hide the navigation buttons you can add the following lines in the CSS Theme assigned to your form:
 
https://static.wixstatic.com/media/undefined

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:
https://static.wixstatic.com/media/undefined

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.

Question 10

Import / Export

Accepted Answer

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.
 
https://static.wixstatic.com/media/undefined
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.

Question 11

WebHooks Add-On

Accepted Answer

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/(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
 
https://static.wixstatic.com/media/undefined

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
https://static.wixstatic.com/media/undefined
If your submission is received, a success message will appear.
 
https://static.wixstatic.com/media/undefined

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
https://static.wixstatic.com/media/undefined

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:
 
https://static.wixstatic.com/media/undefined
2.- Create a database table: 'subscribers', with 4 fields: id, name, email and ip_address. You can run the following MySQL query:
 
https://static.wixstatic.com/media/undefined

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

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:
https://static.wixstatic.com/media/undefined

Question 12

Google Analytics Add-On

Accepted Answer

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.
 
https://static.wixstatic.com/media/undefined

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.

Question 13

Acelle Mail Add-On

Accepted Answer

Introduction
The Acelle Mail Add-On is a premium one, you can buy it on the FormSprout marketplace. 
 
The FormSprout Acelle Mail Add-On gives you an easy way to integrate all of your online forms with the Acelle Mail email marketing service. Collect and add subscribers to your email marketing lists automatically when a form is submitted.
 
Custom Fields
Populate Acelle Mail custom fields from form field data.
 
Opt-In
Control opt-in and only add subscribers when a certain condition is met.
 
Create a Sign Up Form
Forms are created through the Form Builder. You just need to drag and drop the fields your form needs.
 
Then, from the Acelle Mail Add-On interface you can select the fields that will collect the necessary information to send to Acelle Mail. For example, email, name and custom fields, etc.
 
Now, to create a Sign Up Form follow the next steps:
1. Click the Set Up a Form button
2. Enter your Acelle Mail API Key and Acelle Mail API Url. Then, Click Connect to Acelle Mail.
3. Finally, you need to map the form fields to the list fields (Acelle Mail).
 • Select your Form
 • Select your List
 • Click on Status: ON.
 • Enable an Opt-In Condition: The opt-in condition shows that in order to forward information to Acelle Mail, the field value must be present when the form is submitted. It's usually a Checkbox field, for example: A checkbox with the label: “Sign-up to our newsletter”.
 • Select your Email Field (required)
 • In the section Map Fields:
 • Map a Form Field to a List Field (Acelle Mail List Field)
Save the Form.

Question 14

Active Campaign Add-On

Accepted Answer

Introduction
The Active Campaign Add-On is a premium one, you can buy it on the FormSprout marketplace.
 
The FormSprout Active Campaign Add-On gives you an easy way to integrate all of your online forms with the Active Campaign email marketing service. Collect and add subscribers to your email marketing lists automatically when a form is submitted.
 
Install Active Campaign Add-On
The Active Campaign Add-On installing process is very simple, same to any other Add-On.
 
Create a Sign Up Form
Forms are created through the Form Builder. You just need to drag and drop the fields your form needs.
 
Then, from the Active Campaign Add-On interface you can select the fields that will collect the necessary information to send to Active Campaign. For example, email, name and custom fields, etc.
 
Now, to create a Sign Up Form follow the next steps:
 
1. Click the Set Up a Form button
2. Enter your Active Campaign API Url and API Key and Click Connect to Active Campaign. Click here to get more information.
3. Finally, you need to map the form fields to the list fields (Active Campaign).
 • Select your Form
 • Select your List
 • Click on Status: ON.
 • Send Last Broadcast: Enable It to resend the last campaign to new contacts.
 • Enable an Opt-In Condition. The opt-in condition shows that in order to forward information to Active Campaign, the field value must be present when the form is submitted. It's usually a Checkbox field, for example: A checkbox with the label: “Sign-up to our newsletter”.
 • In the section Map Fields:
 • Select your Subscriber Email Field (required)
 • Select your Subscriber First Name Field
 • Select your Subscriber Last Name Field
 • Select your Subscriber Status
 • Select your Subscriber Phone
 • Select your Subscriber Organization Name
 • Enter the Subscriber Tags you want to use to segment a subscription group
 • Map a Form Field to a List Field (Active Campaign Custom Field)
Save the Form.

Question 15

Adyen Add-On

Accepted Answer

Introduction
The Adyen Add-On is a premium one, you can buy it on the FormSprout marketplace.
 
FormSprout Adyen Payments Add-On allows you integrate FormSprout forms with Adyen Payments. With this add-on you can create payment forms by using the new Dropin.js SDK to create a payment form that securely collects your customer’s card information without you needing to handle sensitive card data.
 
Install Adyen Add-On
The Adyen Add-On installing process is very simple, same to any other Add-On. 
 
Create a Payment Form
Forms are created through the Form Builder. You just need to drag and drop the fields your form needs and add an HTML Snippet Field with the following content:
 
https://static.wixstatic.com/media/undefined

Then, from the Adyen Add-On UI you can select the fields that will collect the necessary information to pay in Adyen. For example, price, quantity, etc.
 
Get your API Keys from your Adyen account
Now that you have your form, let's integrate it with your Adyen account. For this you must get the following information from your Adyen Account:
 • Api Key
 • Origen Key
 • Loading Context
 • Merchant Account
 • Live Url Prefix (Required to pass a production and receive live payments)
Here are the steps your must follow to get the required information.
 • Adyen - Get started with Adyen(https://docs.adyen.com/user-management/get-started-with-adyen)
 • Adyen - How to get the api keys(https://docs.adyen.com/user-management/how-to-get-the-api-key)
Note: Take into consideration that you can create a Test Account to test your forms and payments, then you can change your Keys and Environment to pass to production and receive Live payments.
 
Set Up Payment Forms with your Adyen account
To create a Adyen configuration, you must perform the following steps
1. Go to the Add-Ons Manager and click on Adyen.
2. Click the Setup a Payment Form button.
3. A form used to configure the payment process will appear:
 • Form: Required. It is the form you'll integrate with your Adyen account.
 • Status: Allows to disable the Adyen configuration.
 • Live: Enable this option when you are ready to pass a "Production".
 • Api Key: Required. Api Credential.
 • Origin Key: Required. Api Credential.
 • Loading Context: Required. Enter your Test or Live loading context.
 • Live Url Prefix: Required only when you want to pass your form to Production.
 • Merchant Account: Required. Your Adyen Merchant Account ID.
 • Opt-In Condition: Enable a conditional logic to only accept payments when a condition is met.
 • Items: Each item represents a product or service that will be detailed on the Adyen website. It's composed of:
 • Description: Describes your product or service.
 • Price: It's the form field used to collect the product price.
 • Quantity: It is the form field to collect the number of products. The number of products is multiplied by the price of each product, to get the sub-total transaction. If you don't select any fields, the amount used is going to be 1.
 • Credit Card Field Settings: Is a group of fields that let you customize how your customers see your Credit Card field and share their information. You can set:
 • Label: Text to identify your credit card.
 • Locale: The language of your Credit Card field. By default, en_US. Available Options(https://docs.adyen.com/checkout/web-sdk/customization/localization)
 • Currency: To change the transaction currency.
 • Dom Element: To change the HTML div ID.
 • Hide Label: Enable to hide the CC label.
 • Required: Enable to accept payments only. Submissions without payments, won't be accepted.
 • Store Detail: Enable to store Customer information for use it in a future transaction.
 • Holder Name: Enable to display the Cardholder name.
 • Styles: This field let you customize the Credit Card Field appearance by using CSS properties in JSON format. Click here to get more details.(https://docs.adyen.com/checkout/web-sdk/customization/styling#styling-the-checkout-form)
 • Placeholders: This field let you specify the sample values you want to appear for card detail input fields in JSON format. Click here to get more details.(https://docs.adyen.com/checkout/web-sdk/customization/styling#styling-the-checkout-form)
Click Create.

Question 16

AWeber Add-On

Accepted Answer

Introduction
The AWeber Add-On is a premium one, you can buy it on the FormSprout marketplace.
 
The FormSprout AWeber Add-On let you easily integrate your online forms with the AWeber opt-in email marketing service. Additionally collect and add subscribers to your email marketing lists automatically when a form is submitted.
 • Automatically add subscribers to your email lists when a form is submitted.
 • Control opt-in and only add subscribers when a certain condition is met.
 • Automatically send a double opt in message to insure only legitimate subscribers are added.
https://static.wixstatic.com/media/undefined

Installing the AWeber Add-On
The AWeber Add-On installing process is very simple, same to any other add-on. To install the AWeber Add-On just follow the documentation to install an add-on from the Add-On Manager.
 
Create a Sign Up Form
Forms are created through the Form Builder. You just need to drag and drop the fields your form needs. Then, from the AWeber Add-On interface you can select the fields that will collect the necessary information to send to AWeber. For example, email, name and custom fields, etc.
 
Now, in the AWeber Add-On User Interface, follow the next steps:
1.- Click on the Create a Sign Up Form
2.- You will be redirected to the AWeber page to grant access to the application.

https://static.wixstatic.com/media/undefined

3.- Now enter your AWeber username and password, and then click on the Allow Access button. You will go back to the Create Sign Up Form page.
 
https://static.wixstatic.com/media/undefined

5.- Finally, you need to map the form fields (from FormSprout) to the list fields (AWeber).
 • In the section Map Fields:
 • Select your Form Email Field (required)
 • Select your Form Name Field
 • Map a Form Field to a List Field (AWeber Custom Field)
 • Select your Form
 • Select your List
 • Click on Status: ON.
 • Click on Subscriber's IP Address: ON.
 • Enable an Opt-In Condition. The opt-in condition shows that in order to forward information to AWeber, the field value must be present when the form is submitted. It's usually a CheckBox field, for example: A checkbox with the label: “Sign-up to our newsletter”.
 • In the section Map Fields:
   1. Select your Form Email Field (required)
   2. Select your Form Name Field
   3. Map a Form Field to a List Field (AWeber Custom Field)
 • In the Section Send Additional Information you can enter Tags, an additional note, an ad tracking code and a sequence number for the autoresponder configuration.
 • Save the Form.
https://static.wixstatic.com/media/undefined

Now when the form you selected is submitted, it will automatically send the data you have selected to the AWeber List you have setup to receive data.
 
https://static.wixstatic.com/media/undefined

Question 17

Braintree Add-On

Accepted Answer

Introduction
The Braintree Add-On is a premium one, you can buy it on the FormSprout marketplace. 
 
FormSprout's Braintree Payments Add-On allows you integrate FormSprout with Braintree Payments. With this add-on you can create payment forms by using the new Dropin.js SDK to create a payment form that securely collects your customer’s card information without you needing to handle sensitive card data.
 
Install Braintree Add-On
The Braintree Add-On installing process is very simple, same to any other Add-On. 
 
Create a Payment Form
Forms are created through the Form Builder. You just need to drag and drop the fields your form needs and add an HTML Snippet Field with the following content:
 
https://static.wixstatic.com/media/undefined

Then, from the Braintree Add-On UI you can select the fields that will collect the necessary information to pay in Braintree. For example, price, quantity, etc.
 
Get your API Keys from your Braintree account
Now that you have your form, let's integrate it with your Braintree account. For this you must get the following information from your Braintree Account:
1. Public Key
2. Private Key
3. Merchant ID
Here are the steps your must follow to get your keys.
 • Braintree Gateway Credentials(https://articles.braintreepayments.com/control-panel/important-gateway-credentials)
Take into consideration that you can use Sandbox environment to test your forms, then you can change your Keys and Environment to pass to production and receive Live payments.
 
Set Up Payment Forms with your Braintree account
To create a Braintree configuration, you must perform the following steps
 
1. Go to the Add-Ons Manager and click on Braintree.
2. Click the Setup a Payment Form button.
3. A form used to configure the payment process will appear:
 • Form: Required. It is the form you'll integrate with your Braintree account.
 • Status: Allows to disable the Braintree configuration.
 • Environment: Required. It can be: "Sandbox" or "Production".
 • Merchant ID: Required. Api Credential.
 • Public Key: Required. Api Credential.
 • Private Key: Required. Api Credential.
 • Items: Each item represents a product or service that will be detailed on the Braintree website. It's composed of:
 • Description: Describes your product or service.
 • API Name: Used when setting the transaction. It's the Name of your Custom Fields in your Braintree account. This value must be less than or equal to 255 characters and can't contain any spaces or capital letters. Braintree -> Creating a custom field
 • Price: It's the form field used to collect the product price.
 • Quantity: It is the form field to collect the number of products. The number of products is multiplied by the price of each product, to get the sub-total transaction. If you don't select any fields, the amount used is going to be 1.
 • Credit Card Field Settings: Is a group of fields that let you customize how your customers see your Credit Card field and share their information. You can set:
    • Label: Text to identify your credit card.
    • Locale: The language of your Credit Card field.
    • Cardholder Name: Enable to display the Cardholder name field.
    • Hide Label: Enable to hide the CC label.
    • Required: Enable to accept payments only. Submissions without payments, won't be accepted.
    • Opt-In Condition: Enable a conditional logic to only accept payments when a condition is met.

Question 18

Campaign Monitor Add-On

Accepted Answer

Introduction
The Campaign Monitor Add-On is a premium one, you can buy it on the FormSprout marketplce.
 
The FormSprout Campaign Monitor Add-On gives you an easy way to integrate all of your online forms with the Campaign Monitor email marketing service. Collect and add subscribers to your email marketing lists automatically when a form is submitted.
 
Create a Sign Up Form
Forms are created through the Form Builder. You just need to drag and drop the fields your form needs.
 
Then, from the Campaign Monitor Add-On interface you can select the fields that will collect the necessary information to send to Campaign Monitor. For example, email, name and custom fields, etc.
 
Now, to create a Sign Up Form follow the next steps:
 
 • Finally, you need to map the form fields (FormSprout) to the list fields (Campaign Monitor).
 • Select your Form
 • Select your List
 • Click on Status: ON.
 • Click on Restart Subscription: ON.
 • Enable an Opt-In Condition. The opt-in condition shows that in order to forward information to Campaign Monitor, the field value must be present when the form is submitted. It's usually a Checkbox field, for example: A checkbox with the label: “Sign-up to our newsletter”.
 • In the section Map Fields:
 • Select your Subscriber Email Address (required)
 • Select your Subscriber Name (required)
 • Map a Form Field to a List Field (Campaign Monitor Custom Field)
 • Click the Create a Sign Up Form button
 • Enter your Campaign Monitor API Key and Click Connect to Campaign Monitor. Click here to get more information.
 • Save the Form.

Question 19

CleverReach Add-On

Accepted Answer

Introduction
The CleverReach Add-On is a premium one, you can buy it on the FormSprout marketplace.
 
Create a Sign Up Form
Forms are created through the Form Builder. You just need to drag and drop the fields your form needs.
 
Then, from the CleverReach Add-On interface you can select the fields that will collect the necessary information to send to CleverReach. For example, email, name and custom fields, etc.
 
Now, to create a Sign Up Form follow the next steps:
 
 • Enter your CleverReach Client ID and Client Secret. Then, Click Connect to CleverReach. To find these keys, go to CleverReach's account and follow the next steps:
 • Inside the CleverReach Admin navigate to My Account > Extras > REST API
 • There you find the button "Create OAuth", which opens a menu. Add an App Name (e.g. My FormSprout), select the REST API version 3 and select all the Scopes in order to give permission.
 • Inside the section "Your Oauth Apps" you will find your entry. There you'll find a Client ID and a Client Secret, these are required inside FormSprout.
 • Finally, you need to map the form fields (FormSprout) to the list fields (CleverReach).
 • Select your Form
 • Select your List
 • Click on Status: ON.
 • Enable an Opt-In Condition. The opt-in condition shows that in order to forward information to CleverReach, the field value must be present when the form is submitted. It's usually a Checkbox field, for example: A checkbox with the label: “Sign-up to our newsletter”.
 • In the section Map Fields:
 • Select the Email Field (required)
 • Select the Tags Field (optional)
 • Select the Subscriber Status (optional)
 • Select the DOI Form (required)
 • Map a Form Field to a List Field (CleverReach Custom Field)
 • Click the Set Up a Form button
 • Save the Form.

Question 20

Conditional Emails Add-On

Accepted Answer

Introduction
The Conditional Emails Add-On is a premium one, you can buy it on the FormSprout marketplace.
 
The FormSprout Conditional Emails Add-On gives you an easy way to send emails to different recipients depending on the form submitted. Do you use the FormSprout as a contact form for different departments? This add-on is an optimal solution for these cases.
With this add-on you will be able to set the form to be emailed to specific email/emails depending on the submitted data.
 
Send Email Based on User's Answer
Trigger emails with different content based on the answer given.
 
Send Emails to the Correct Departments
Set up email notifications that only trigger when one condition has been met.
 
Conditional Email Auto-Responder
Email to your end-user only when a condition has been met.
 
Custom Messages
Populate and send custom messages with form field data.
 
Submission & Attachments
Send a submission copy and files uploaded by your form.
 
Email Templates
Reuse email templates (message body) with different forms.
 
Create an Email Template
The First thing we need to do is creating a Conditional Emails' Template, then we can use this template as the email body.
 
Now, to create a Conditional Emails' Template follow the next steps:
 
1. Click the Set Up an Email Template button
2. Enter the Template Name.
3. Enter the Email Body. This html code will be processed to generate the Conditional Emails body.
4. Enter the Body Text: It must be the email body in plain text.
5. Click Save to store your Email Template.
 
Send Conditional Emails
Now, to send conditional emails, we need to follow the next steps:
 
 • Status: Can be:
 • On: Enable this configuration
 • Off: Disable this configuration
 • Click the Set Up a Form button
 • Enter a Name. The name of this configuration for administrative purpose.
 • Select the Form.
 • Select the Event. In what moment the email will be sent: When form is submitted or when the user email is being verified by double opt-in.
 • Conditions: Select one or more conditions that the user answer must pass to send the email.
 • Subject: The email subject.
 • Body (Template): Select the Email Template created in the previous step.
 • Send To: Email address where your message would end up after you send it and it is delivered.
 • CC: Carbon copy.
 • BCC: Blind Carbon copy.
 • Reply To: Email address that the reply message will be sent.
 • Send To Field: Email Field. Useful if you want to send a conditional email as confirmation message (auto-responder).
 • Sender Name: The “from” name or line, helps to identify you to your recipients.
 • Status: Can be:
    • On: Enable this configuration
    • Off: Disable this configuration
 • Includes a Submission Copy: Enable it if you want to include a submission table.
 • Attach Form Files: Enable it if you want to attach files uploaded by your users.
 • Click Save.

Question 21

Constant Contact Add-On

Accepted Answer

Introduction
The Constant Contact Add-On is a premium one, you can buy it on the FormSprout marketplace.
 
The FormSprout's Constant Contact Add-On let you easily integrate your online forms with the Constant Contact opt-in email marketing service. Additionally collect and add subscribers to your email marketing lists automatically when a form is submitted.
 • Automatically add subscribers to your email lists when a form is submitted.
 • Control opt-in and only add subscribers when a certain condition is met.
 
Create a Sign Up Form
Forms are created through the Form Builder. You just need to drag and drop the fields your form needs. Then, from the Constant Contact Add-On interface you can select the fields that will collect the necessary information to send to Constant Contact. For example, email, name and custom fields, etc.
 
Now, in the Constant Contact Add-On User Interface, follow the next steps:
 
 • Click on the Create a Sign Up Form
 • You will be redirected to the Constant Contact page to grant access to the application.
 • Now enter your Constant Contact username and password, and then click on the Allow Access button. You will go back to the Create Sign Up Form page.
 • Finally, you need to map the form fields (from FormSprout) to the list fields (Constant Contact).
 • In the section Map Fields:
 • Select your Form Email Field (required)
 • Map a Form Field to a List Field (Constant Contact Field)
 • Select your Form
 • Select your List
 • Click on Status: ON.
 • Enable an Opt-In Condition. The opt-in condition shows that in order to forward information to Constant Contact, the field value must be present when the form is submitted. It's usually a CheckBox field, for example: A checkbox with the label: “Sign-up to our newsletter”.
 • Save the Form.
 
Now when the form you selected is submitted, it will automatically send the data you have selected to the Contact List you have setup to receive data.

Question 22

Custom Error Messages Add-On

Accepted Answer

Introduction
The Custom Error Messages Add-On is a premium one, you can buy it on the FormSprout marketplace.
 
So useful to customize any validation message and make it a little bit more friendly.
 
Do you want to change the validation error message (when people did something wrong on your form)? It looks quite unfriendly for you. Let’s make it a little bit more friendly!
 
Granular Customization
Select the field, the validation type and enter the customized message.
 
Improve your Conversion Rate
Define messages that focus on your target with a touch of familiarity.
 
Every Field including reCAPTCHA
You can set a custom message for every field including the reCAPTCHA widget.
 
Every Validation Type
Customize the warning of one, two or all of your validation types.
 
Create a Custom Error Messages
To create a custom error message, you must perform the following steps:
 
 • A form used to configure the validation will appear.
 • Form: Select the form to validate.
 • Status: Can be:
 • On: Enable customization
 • Off: Disable customization
 • Items: It's composed of:
 • Field: Choose the field to be validated.
 • Validation Type: Choose the type, for example: "Required" or "Unique".
 • Error Message: The custom error message if the value entered by the user doesn't pass the validation type.
 • Go to the Add-ons Manager and click on Custom Error Messages.
 • Click on the Set Up a Form button.
 • Click Create

Question 23

Custom Data Validation Add-On

Accepted Answer

Introduction
The CSV Data Validator Add-On is a premium one, you can buy it on the FormSprout marketplace.
 
So useful if you want to validate coupons, license keys, company numbers, IDs, specific email addresses, etc. If the entered value matches one defined in the CSV file, the form will be sent, if not, a custom validation message will be displayed on the validated field.
 
For a Specific Field and for All Fields
You can create a custom validation that can only be used on a specific Field. But also, you can create validation for multiple fields of the same form. There are no limits.
 
Use a custom validation message on each field
You can define the error message that you want to show when the value entered in the field does not match any of the values in the uploaded CSV file.
 
Create a CSV Data Validation
To create a custom validation, you must perform the following steps:
 
 • A form used to configure the validation will appear.
 • Form: Select the form to validate.
 • Status: Can be:
 • On: Enable validation
 • Off: Disable validation
 • Fields: It's composed of:
 • Field: Choose the field to be validated.
 • Field Message: The custom error message if the value entered by the user doesn’t matches to any of the defined values in the CSV file.
 • Field Values: A File Upload field where you must upload your CSV file. The CSV file should only contain one column that lists all valid values for the field.
 • Go to the Add-ons Manager and click on CSV Data Validator.
 • Click on the Set Up a Form button.
 • Click Create

Question 24

EmailOctopus Add-On

Accepted Answer

Introduction
The EmailOctopus Add-On is a premium one, you can buy it on the FormSprout marketplace,
 
The FormSprout EmailOctopus Add-On gives you an easy way to integrate all of your online forms with the EmailOctopus email marketing service. Collect and add subscribers to your email marketing lists automatically when a form is submitted.
 
Obtain More Subscribers Faster
Automatically add subscribers to your email lists when a form is submitted.
 
Update Existing Contacts
Auto-update existing contacts with new submitted information
 
Custom Fields
Populate EmailOctopus custom fields from form field data.
 
Opt-In
Control opt-in and only add subscribers when a certain condition is met.
 
Create a Sign Up Form
Forms are created through the Form Builder. You just need to drag and drop the fields your form needs.
 
Then, from the EmailOctopus Add-On interface you can select the fields that will collect the necessary information to send to EmailOctopus. For example, email, name and custom fields, etc.
 
Now, to create a Sign Up Form follow the next steps:
 
 • Finally, you need to map the form fields (FormSprout) to the list fields (EmailOctopus).
 • Select your Form
 • Select your List
 • Click on Status: ON.
 • Enable an Opt-In Condition. The opt-in condition shows that in order to forward information to EmailOctopus, the field value must be present when the form is submitted. It's usually a Checkbox field, for example: A checkbox with the label: “Sign-up to our newsletter”.
 • Select your Subscriber Email Field (required)
 • Select your Subscriber Status (required)
 • In the section Map Fields:
 • Map a Form Field to a List Field (EmailOctopus Custom Field)
 • Click on the Set Up a Form button
 • Enter your EmailOctopus API Key and Click Connect to EmailOctopus. Click here to get more information.
 • Save the Form.

Question 25

EU VAT Add-On

Accepted Answer

Introduction
The EU VAT Add-On is a premium one, you can buy it on the FormSprout marketplace.
 
So useful if you want to automatically charges the correct EU and UK tax rates based on the user’s location, while reverse charging B2B sales.
 
Charges the correct VAT
Charges the correct VAT on sales to each EU country plus the UK
 
Validates VAT numbers
Validates and stores customers’ VAT numbers
 
Removes and reverse-charges VAT on B2B sales
Automatically make tax-exempt those users in an EU country who supply a valid VAT Number
 
System Requirements
 • PHP SOAP Extension - The PHP SOAP extension is required to communicate with VIES, the Vat Number Validation service of the European Commission.
Note: EUROPA, the service through which VAT numbers are validated, may not accept connections on IPv6.
 
Set Up a Form
To set up the EU VAT validation in a form, you must perform the following steps:
Go to the Add-ons Manager and click on EU VAT.
 
 • A form used to configure the validation will appear.
 • Status: Can be:
 • On: Enable validation
 • Off: Disable validation
 • Name: Configuration name for administrative purpose.
 • Form: Select the form to validate.
 • Conditions: Set Up a condition to validate the form when it's submitted
 • Business Country: Select your own country
 • IP Based Country: If this option is enabled, the Country field (Select List) will be automatically populated with the user's country.
 • Field Mapping: It's composed of:
 • Country: Choose the Country field. We suggest using a Select List (Dropdown menu).
 • VAT Tax Rate: Choose the Tax-Rate field. The system will populate this field automatically based in the selected country (Country field).
 • Validate VAT Number: The VAT Number field to be validated. If the VAT number is empty or not valid, we will calculate the tax.
 • Click on the Set Up a Form button.
 • Click Create
 
Notes
 • When the user selects his Country, the tax rate will be displayed in the VAT Tax Rate field.
 • If the VAT number field is empty or not valid, you should consider as a transaction with a natural person and always calculate the tax.
 • If the VAT number provided is valid, you should consider the transaction as a business transaction. In this case, you should only calculate the tax when the user lives in the same country as your business country.
 • To calculate a Total Cost, you can use conditional rules, for example: Total Cost = Sub-Total * VAT Tax Rate + Sub-Total
 • Country field values should be two-letter country codes, for example you can use:
https://static.wixstatic.com/media/undefined

Question 26

Facebook Login Add-On

Accepted Answer

Introduction
The Facebook Login Add-On is a premium one, you can buy it on the FormSprout marketplace.
 
The Facebook Login Add-On allows you to store a Facebook account information in a form.
1. Add a "Login with Facebook" button to your form
2. If the user is logged in, the button won't be shown, and automatically, the fields will be filled with his facebook account information.
3. Map what facebook account data you want to store in a field.
 
Set Up a Facebook Login
Forms are created through the Form Builder. You just need to drag and drop the fields your form needs.
 
Then, add a Snippet field and enter the following text: . The text will be replaced by the Facebook Login Button. This will allow adding the button anywhere on the form.
 
To display the Facebook Login into the Form, you must perform the following steps:
 
 • Go to the Add-ons Manager and click on Facebook Login.
 • Click the Add Login button.
 • A form will appear with the following fields:
 • Status: Can be:
 • On: Enable
 • Off: Disable
 • Form: Select the form to work.
 • Facebook App ID: Click here to create your Facebook App, here to learn how to configure your Faceboo App and here to learn how to see the available permission keys.
 • Facebook App Version: API Version. For example: "v4.0"
 • Facebook App Scope: For example: "email"
 • Login Button: HTML Code to display the Link with the ID: facebook-login. E.g. "Login"
 • Logout Button: HTML Code to display the Link with the ID: facebook-logout. E.g. "Login"
 • In Fields section, you must select the Form fields that will be filled with Facebook information. In Facebook data you must enter the key used to get the information (with authorized permissions). For example, 'name', 'gender' or 'birthday'.
 • Click Save
 
Disable / Enable a Facebook Login configuration
To stop a Form field temporarily, you can choose to disable and enable later.
To disable it, you must follow these steps:
 
1. Go to the Add-ons Manager and click on Facebook Login
2. Click the Actions button of the Form to disable.
3. Click Update.
4. Change the state from On to Off or vice versa.
5. Click Update.
 
Delete a Facebook Login configuration
To delete a Facebook Login configuration, you must perform the following steps:
 • Select the checkbox of the Form configuration to delete
 • Click Bulk Actions
 • Click Delete
 • Finally it will show a popup asking to confirm your decision to delete the configuration.
The page will reload and the selected item will be deleted.

Question 27

Field Encryption Add-On

Accepted Answer

Introduction
The Field Encryption Add-On is a premium one, you can buy it on the FormSprout marketplace.
 
If you collect personal data, private data or sensitive data with your FormSprout installation (name, address, phone, email, birthdate, SSN, etc.) and/or are working on GDPR compliance you should use this add-on to protect your user information.
 
Powerful Data Encryption
AES-256 Bank/Military grade database storage encryption
 
Multiple Field Encryption
A single configuration to encrypt a field, several fields or all the fields of your forms.
 
Custom Friendly Messages
Show a customized message that registered users will see when viewing your encrypted data.
 
Grant View / Edit Permissions
By default, only you can see the encrypted fields. However, you can grant permission to view/edit encrypted data to other users.
 
Create a Field Encryption
To create a field encryption, you must perform the following steps:
 
 • A form used to configure the encryption will appear.
 • Status: Can be:
 • On: Enable encryption
 • Off: Disable encryption
 • Form: Select the form to validate.
 • Permission to visualize / edit encrypted data: It's composed of: "Grant" or "Deny". If you deny the permission to some users, the rest will be granted permission.
 • Users: Select the users who can see and edit the encrypted data
 • Fields: It's composed of:
 • Field: Choose the field to encrypt its value.
 • Display: The custom message to display instead of the original value. E.g. --Personal Data--, -PERMISSION DENIED- or XXXXXX
 • Go to the Add-ons Manager and click on Field Encryption.
 • Click the Set Up a Form button.
 • Click Create

Question 28

Google Places Autocomplete Add-On

Accepted Answer

Introduction
The Google Places Autocomplete Add-On is a premium one, you can buy it on the FormSprout marketplace.
 
Simplifies the form filling process helping your users to enter their address with the Google Places suggest API. You make them save time by finding accurate addresses with suggestions and filling forms faster with autofill.
 
Smooth Integration
Works with any text field. Turn any  into an address autocomplete.
 
Improve the User Experience
Delight your users by implementing a powerful addresses autocomplete in minutes.
 
Real Time Suggestions
Suggest addresses and locations while your form users begin typing their address.
 
Suggest Accurate Addresses
Auto complete almost all the addresses and locations in the world.
 
Create an Address Autocomplete Field
To create an Address Autocomplete Field, you must perform the following steps:
 • A form used to configure the address autocomplete will appear.
 • Form: Select the form.
 • Api Key: Enter your Google Places Api key.
 • Status: Can be:
 • On: Enable autocomplete
 • Off: Disable autocomplete
 • Fields: It's composed of:
 • Field: Choose the field to be auto-completed.
 • Type: The type of search you want to use: "Address", "Establishment" or "All".
 • Country: Select a country to limit the search to an specific country.
 • Go to the Add-ons Manager and click on Google Places Autocomplete.
 • Click the Set Up a Form button.
 • Click Create

Question 29

Google Sheets Add-On

Accepted Answer

Introduction
The Google Sheets Add-On is a premium one, you can buy it on the FormSprout marketplace.
 
The Google Sheets add-on allows you to connect multiple Google accounts to FormSprout and enable automatic data sync between the two platforms. Enabling this integration allows to receive real-time form data in Google Sheets. This integration can be set up for existing sheets or tabs.
 
Smooth Automation
Quickly and easily send form data into your Google Sheets account when a form is submitted.
 
Map Fields To Columns
Easily map FormSprout fields to any Google sheets columns. Columns don't need to be together.
 
Granular Configuration
Select to which spreadsheet and to which specific worksheet (tab) save the data.
 
Avoid Duplicates
Avoid duplicates by checking for Unique fields. E.g. Email addresses.
 
Only Store the Data You Need
Do you need to fill data in the fourth and fifth columns only? Done!
 
Conditional Logic
Control opt-in and only add data when a certain condition is met.
 
Set Up a Google API Console Project and Oauth Client with your Google account
To do this, you must follow these steps:
 
 • Go to Google Developer Console (https://console.cloud.google.com/)and create a New Project.
 • Go to Library side menu and search Google Sheets API, open it and click Enable.
 • Go to Library side menu and search Google Drive API, open it and click Enable.
 • Go to OAuth consent screen, enter you Application name, enter example.com in Authorized domains then click Save button.
 • Go to Credentials, click Create Credentials, select OAuth Client ID, select application type as Web application, click Create, enter anything in Name, save https://example.com/addons/admin/authorized in Authorized redirect URIs, click Create.
 • Copy Client ID and Client Secret from newly created application.
 • Click Save & Authorize, if appears App is not verified error, click show advanced and then Go to App.
 • Now, go to FormSprout > Add-Ons > Google Sheets > Global Settings.
 • Paste the Client ID and Client Secret and click Save.
Note: Don't forget to use your domain name instead of example.com
 
Set Up a Form
To set up the integration between a form and Google Sheets, you must perform the following steps:
 
 • A form to configure the import will appear.
 • Name: Enter a name for this integration. Used to identify this configuration in the system.
 • Form: Select the form to integrate.
 • Spreadsheet: Select the Google Spreadsheet.
 • Sheet: Select the Google Sheet.
 • Event: Select the event when a Form Entry should be saved in Google Sheets.
 • Status: Enable / Disable this configuration without loose the information.
 • Conditions: Use this tool to filter the entries based on their values
 • Map Fields: It's composed of:
 • Form Field: Choose the form field.
 • Sheet Column: Choose the Sheet column.
 • Go to the Add-ons Manager and click on Google Sheets.
 • Click on the Set Up a Form button.
 • Click on the Authenticate button. You will be redirected to the Google consent page to grant access to the application.
 • Now enter your Google email and password, and then click on the Allow Access button. You will go back to the Create Sign Up Form page.
 • Click Save
Now when the form you selected is submitted, it will automatically send the data you have selected to the Google Sheet you have configured to receive data.

Question 30

HubSpot Forms Add-On

Accepted Answer

Introduction
The HubSpot Forms Add-On is a premium one, you can buy it on the FormSprout marketplace.
 
The FormSprout HubSpot Forms Add-On gives you an easy way to integrate all of your online forms with the HubSpot CRM, to achieve High-Converting Lead Capture Forms and more.
Capture more leads and contacts from your website and sends customer data to HubSpot CRM; helping you develop and keep healthy relationships with your newest visitors.
 
Smooth Automation
Send submitted data from your forms directly into your CRM account.
 
Build Better Relationships
Build custom user-submitted form and pass any information captured on your website or application to HubSpot, including custom data. Good candidates would be forms that do calculations or have custom elements.
 
Map HubSpot Fields
Easily map your FormSprout fields to your HubSpot Forms fields and Gain more information about your customers.
 
Opt-In Conditional Logic
Control opt-in and only add data when a certain condition is met.
 
Create a Sign-Up Form
To create a Form through the Form Builder you just need to drag and drop the fields your form needs.
 
Then, from the HubSpot Forms Add-On interface you can select the fields that will collect the necessary information to send to HubSpot. For example, email, name, etc.
 
Now, to create a Sign-Up Form follow the next steps:
 • Click the Set Up a Form button
 • Name: Enter a configuration name to recognize this configuration in the system.
 • Choose your Form
 • Enter your HubSpot Endpoint. Click here to get more information.(https://legacydocs.hubspot.com/docs/methods/forms/submit_form)
 • Click on Status: ON.
 • Event: Usually we will want to pass data in real time (When a form is submitted).
 • Context. To send a set of data containing contextual information for the submission.
 • Field Mapping: You need to map the form fields (FormSprout) to the HubSpot Form field name.
 • Consent: If the form was created with the GDPR notice enabled, the details of those notices must be included in the form submission data. Click here to get more information.(https://legacydocs.hubspot.com/docs/methods/forms/submit_form#legal-consent-options)
 • Tracking Code: Enable the HubSpot tracking cookie token value used for HubSpot lead activity tracking. Click here to get more information.(https://knowledge.hubspot.com/reports/install-the-hubspot-tracking-code)
 • Save the Form.

Question 31

Import Submissions Add-On

Accepted Answer

Introduction
The Import Submissions Add-On is a premium one, you can buy it on the FormSprout marketplace.
 
This add-on makes it simple to bulk import hundreds or thousands of entries in minutes. There are no limits on the number of rows you can import. If you have a spreadsheet to import, this is the tool you must use.
 
Works with any CSV!
Use any CSV that you want. Just choose which form you want to import the rows into.
 
Import Exported Files From FormSprout
Take the CSV that FormSprout generates and import it to another site.
 
Bulk Update of Existing Entries
Want to bulk update entries? It's easy with our plugin. Export your entries from FormSprout, change some items, then re-import them.
 
Download Import Errors to a CSV
If your import has errors, you can download a CSV that includes only the rows with errors. This allows you to easily correct errors (like badly-formatted emails) and re-import the entries.
 
Advanced Validation
Avoid buggy or incomplete entries. Imported entries will only be created if they are valid.
 
Conditional Logic
Use conditional logic to filter your imported Entries based on their values.
 
Steps to Import Submissions
To import submission, you must perform the following steps:
 
 • A form to configure the import will appear.
 • Name: Enter a name for this import. Used to identify this configuration in the system.
 • Form: Select the form to import entries.
 • File: Select the CSV file.
 • Validate: Can be:
 • On: Enable validation
 • Off: Disable validation
 • Map Fields: It's composed of:
 • Form Field: Choose the form field.
 • File Field: Choose the CSV column.
 • Advanced Settings: It's composed of:
 • Conditions: Use this tool to filter the entries based on their values
 • Notes: Administrative notes.
 • Go to the Add-ons Manager and click on Import Submissions.
 • Click on the Set Up a Form button.
 • Click Save
 
Finally, you will be redirected to a page that displays a progress bar. You can't close this page until finish the import process. If everything goes well, you will see a success message. If something goes wrong you will get an alert message.

Question 32

Insightly CRM Add-On

Accepted Answer

Introduction
The Insightly Add-On is a premium one, you can buy it on the FormSprout marketplace.
 
The FormSprout Insightly Add-On gives you an easy way to integrate all of your online forms with the Insightly CRM. Captures leads and contacts from your website.
 
Captures leads and contacts from your website and sends customer data to Insightly; helping you develop and keep healthy relationships with your newest visitors.
 
Smooth Automation
Send customer submitted data from your forms directly into your CRM account.
 
Build Better Relationships
Full support for all modules: Contacts, leads, organizations, opportunities, projects and tasks
 
Map Insightly Fields
Easily map your FormSprout fields to your Insighly custom fields and Gain more information about your customers.
 
Opt-In Conditional Logic
Control opt-in and only add data when a certain condition is met.
 
Create a Sign Up Form
Forms are created through the Form Builder. You just need to drag and drop the fields your form needs.
 
Then, from the Insightly Add-On interface you can select the fields that will collect the necessary information to send to Insightly. For example, email, name and custom fields, etc.
 
Now, to create a Sign Up Form follow the next steps:
 
 • Click the Set Up a Form button
 • Enter your Insightly API Key and Click Connect to Insightly. Click here to get more information.(https://support.insight.ly/hc/en-us/articles/204864594-Finding-or-resetting-your-API-key)
 • Finally, you need to map the form fields (Easy Forms) to the List fields (Insightly Module).
 • Select your Form
 • Select your List (Insightly Module)
 • Click on Status: ON.
 • Enable an Opt-In Condition. The opt-in condition shows that in order to forward information to Insightly, the field value must be present when the form is submitted. It's usually a Checkbox field, for example: A checkbox with the label: “Sign-up to our newsletter”.
 • Map Fields:
 • Map a Form Field to a List Field (Insightly Custom Field): You need to mapp every list field with the "Required" label.
 • Save the Form.

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