Our New Logo!

Capabilities of DocupletionForms

DocupletionForms.com is a FREE Contact Form Program with a $5 Data-Merge element that can be added.

The FREE Contact Form Program has Conditional-Logic Capabilities.  This means you have the capacity to set rules after you make and save a form, so that the form will ask different next questions of the people filling out your form based on their last answers.

The $5 Data-Merge element allows you to upload and complete .PDF documents with just a few clicks.

Thanks for reading the blog.

Regards, James F. Polk, Founder of DocupletionForms.

Leave a comment

Report Builder

miscellaneous

Introduction

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

Note: You can only create a report per form.

Create my first report

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

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

Add a chart

To create a chart:

  1. Click the Add chart button
  2. Fill the Title field
  3. Select the Type of chart
  4. Select the Field from which to get data
  5. Click Save

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

Edit a chart

To edit a chart:

  1. Click the Edit button. Note that the report has now a yellow background and the Edit button now says Stop. In addition, all charts must show a pencil icon (for editing) and X (to delete).
  2. Click the pencil icon of the chart to edit.
  3. In the form that appears, change the data you need.

  1. Click Save
  2. When the chart is reloaded, press the Stop button.

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

Delete a chart

  1. Click the Edit button. Note that the report has now a yellow background and the Edit button now says Stop. In addition, all charts must show a pencil icon (for editing) and X (to delete).
  2. Click on the X icon and the chart will disappear.
  3. When the chart disappears, press the Stop button

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

Resize a chart

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

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

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

Save the report

To save the report:

  1. Be sure you are not in Edit view. Click the Stop button if this still appears.
  2. Press the Save report button.
  3. A message will appear confirming that the report has been saved.

Interacting with the report

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

Reset a report

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

Form Widget (The embed code)

miscellaneous

Introduction

Embed code are a few lines of html and javascript that you can use to embed an Docupletionforms’ form into your own website. This is the easiest way to display a form on your site and the method least susceptible to errors. But 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 is designed to work on any web page. The Embed code basically creates an iFrame on the fly and the form is loaded in it. And, 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. But also, when you keep a form inside an iFrame, you also prevents it from conflicting with existing JavaScript or CSS elements on your page.

Which Form Embed Code Should I Use?

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

  1. Embed with Design: Lets you publish the form with the theme that has been applied to the form.
  2. 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.

Form Widget Setting

The Embed code has two parts:

  1. 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.
  2. A Javascript code that is responsible for displaying the form and initialize the Form Tracker (if Analytics is enabled).

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

  • ID: Form’s ID number in the application. For example: 'id': 132
  • 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
  • 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:
'defaultValues': {
    'text_0': 'This is my default value'
}

Note that fields of type checkbox and radio button are selected by using boolean values. For example:

'defaultValues': {
    'text_0': 'This is my default value',
    'checkbox_0': true
}

Interacting with the Form via JavaScript

The Form Widget contains a large number of 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:

$( document ).ready(function() {
  // Here we can interact with the Form
});

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:

$( document ).ready(function() {?
  console.log('The form height is', formEl.height());?
});

Listening for Events

Certain events are triggered when the Form does something.

  • view: This event is triggered when a form is viewed.
  • fill: This event is triggered the first time you interact with the form. For example, by fill a text field or select a radio button.
  • error: This event is triggered when the Server threw a validation error.
  • success: This event is triggered when the Form has been submitted successfully.
  • nextStep: This event is triggered each time you progress to the next step in a multi-step form.
  • previousStep: This event is 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:

$( document ).ready(function() {?
    formEl.on('error', function(event){?
            // Track a server validation error?
            // What happens here would be dependent on your analytics product!
?    });?
});

The Event Handlers: previousStep and nextStep

In addition to the events, Docupletionforms 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: Docupletionforms 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:

$( document ).ready(function() {
    $('input[type=radio]').on('change', nextStep);
});

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

.previous, .next {
    display: none !important;
}

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:

$( document ).ready(function() {
    $.when(
        $('head').append('<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" type="text/css" />'),
        $.getScript( "//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" ),
        $.Deferred(function( deferred ){
            $( deferred.resolve );
        })
    ).done(function(){
        $('body').css('padding-bottom', '200px'); // Padding for show the datepicker
        $('input[type=date]').each(function () {
            $(this).attr('type', 'text').after(
                $(this).clone().attr('id', this.id + '_alt').attr('name', this.id + '_alt')
                    .datepicker({
                        // Consistent format with the HTML5 picker
                        dateFormat: 'mm/dd/yy',
                        changeMonth: true,
                        changeYear: true,
                        altField: this,
                        altFormat: "yy-mm-dd"
                    })
            )
            .hide();
        });
    });
});

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.

Theme Manager

miscellaneous

Docupletionforms has a tool that let you create themes that can be applied to a form to change their appearance, backgrounds, colors, text type, etc.

Create a Theme

Go to the Theme Manager, by clicking on Themes in the navigation bar. To create a theme, you must:

  1. Click on the Create Theme button
  2. The form to create a theme have 5 fields:
    • Name: The theme name
    • Description: A very brief description of the theme
    • Main Color: The hexadecimal value of a color to identify your theme
    • CSS: Must be a valid CSS
    • Created by: Defines the owner of this theme (Visible by Administrators only).
  3. Click Save

Note: You can select a Form in the Live Preview field to see how the theme applies to your form while you are editing the CSS field.

Edit a Theme

Go to the Theme Manager, by clicking on Themes in the navigation bar. To edit a theme, you must:

  1. Click the Actions button of the Theme to edit
  2. Click Update
  3. Make the changes you need
  4. Click Update

Delete a Theme

Go to the Theme Manager, by clicking on Themes in the navigation bar. To delete a theme, you must:

  1. Click the Actions button of the Theme to edit
  2. Click Delete
  3. A popup window will appear asking to confirm your delete theme decision
  4. Click OK

Note: When you delete a theme, all data related to it will be deleted too. This action cannot be undone.

Assign a Theme to another User

You can assign a theme to another user using the Theme Editor. To assign a theme, you must:

  1. Go to Themes -> Actions -> Update.
  2. In the ‘Created by‘ field, choose the username to which you want to transfer the theme.
  3. Click Update

Apply a Theme to the Form 

You can apply a theme to the form using the Form Manager. Go to this link to see the steps to take.

Submission Manager

miscellaneous

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

The Submission Manager, unlike other managers of the application, offers more features to adapt flexibly to the data collected by your forms.

These are some Submission Manager features you should consider:

  • Navigation: Manager displays submissions in tabular form. In the table upper cell the form field label is displayed and then the submission data corresponding to that field. Submissions are 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 is 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 is displayed, remove the check of a name and the column is hidden, add a check to a name and the column is displayed. The only thing to keep in mind at this point is that you cannot hide the “Checkbox”, “Submitted” and “Actions” columns. And also, they must show at least two fields. If your form has many fields, use this feature to organize your manager to your preference.
  • Resize columns: If your form has a large number 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 Docupletionforms 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.
  • 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 on a entry of the Submission Manager, a vertical table with all information collected will be displayed. By default, this entry is in read-only mode. To edit the entry, continue reading until you find the “Editing a Submission” section.

Submission information is 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 country, city and google map.
  3. Additional Information: Displays the date and time when the Submission was made. If it was made or updated by a user logged into Docupletionforms, the username will appear.

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

Editing a Submission

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

  1. Click on the submission to edit.
  2. You will see the Submission Information and at the right top see the “Edit” (pencil icon) button.
  3. Click the Edit button.
  4. The vertical table will become a similar form than the one you have created.
  5. Make the changes you need
  6. Submit the Form

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

Create a Submission

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

  1. Click the Add submission button (icon with the plus sign)
  2. You will see a similar form than the one you have created.
  3. Make the changes you need
  4. Submit the Form
  5. The new Submission will appear in the Submission Manager.

Deleting Submissions

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

  1. Click on the submission you want to delete
  2. Click on the Delete red button (trash can icon) at the top right.
  3. A pop-up will appear asking you to confirm your decision to delete the submission.
  4. Click OK.

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

Printing a Submission

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

  1. Click on the submission to print.
  2. You will see the Submission Information and at the right top see the “Print” (printer icon) button.
  3. Click the Print button.
  4. The page preview to print will be displayed in black and white with submission details
  5. Make the changes you prefer in the printer dialog window
  6. Click on ‘print’

Filtering Submissions

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

Exporting Submissions

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

Then select the format of the file to be generated:

  • Export as CSV
  • Export as MS Excel

 

 

 

 

 

 

 

 

Searching Submissions

To search, enter the search criteria in the search box located at the top of the Submission Manager. The search engine will return all instances of the word found in all the collected fields.

File Management

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

  • View sent files associated with the field used (label).
  • Upload files when creating Form Submissions using the Submission Manager.
  • Update uploaded files.
  • Delete files

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

.

Form Builder

form builder

Introduction:

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

User Interface:

The Form Builder interface is divided into two areas: On the left the form fields and to the right a form preview.

The left area 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.
The right area is the Form Preview from where you can manipulate each of the components.

– Add a field
To add a field:

Click a button on the left panel.
Drag it to the right area.
At the time you enter in 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.
– Delete a field
To delete a field (component):

Click on a component and hold.
Drag it out of the active zone.
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:

  1. 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 Docupletionforms.
  2. Change the form layout: The form layout is based on Bootstrap CSS and is used to locate the labels position on the form.
    The Vertical layout displays the field labels above,
    The Horizontal layout displays the labels on the field left side, and
    The Inline layout hides the labels and displays the fields next to each other. For example, you can use it on a mail registration form, to place an Email field and a button by the side.
  3. Disable form elements: Let you disable all form fields. It is an advanced option that can be useful if you plan to interact with the form from an external javascript file.

 

 

 

 

 

 

 

 

 

These basic options are intimately related to the form builder. However, you have other Setup options much more advanced that can be accessed from the Form Manager.

Field Settings
Each form field has many Setup options, for example, the label, the default value, the CSS class, etc. To set up a field, go to the preview and click on it.

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

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

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

 

 

 

 

 

 

 

 

 

 

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

– Checkbox:
The checkbox option is only in the Checkbox fields and is used to add checkboxes to the component (field).

For example, if you insert in the “Checkbox” option:

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

The form preview will show five check boxes with the words One, Two, Three, Four and Five. The option “Two” and “Four” will be checked. And if the user submits the form without making any changes, he will be sending the values: 2,4.

 

 

 

 

 

 

 

 

 

 

 

 

Custom Checkbox 
To customize a Checkbox field, 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-sm-* (the asterisk represents the number of columns).

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-sm-6 no-padding-left
  2. Add the container CSS class to the second field: col-sm-6 no-padding

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-sm-12 to the rest of fields, to preserve the same padding on each field.

Important! Don’t forget that if you create more than one row filled with columns, you should add an empty Snippet as separator between each row. You can go to the Bootstrap CSS documentation for more information.

Note:

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

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

– Disabled:
You can disable a field if you want it to be displayed to the user, but not be edited. (Note that you can also disable a hidden field). Unlike the Read Only option, a disabled field is not sent to the server. 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.

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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

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

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

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

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

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

– 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)

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

– 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 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)

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

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

– 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 is 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 is enabled on a Select List field, you can select several options. The collected information will have a comma-separated format. For example: ‘Option One, Option Two’.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

– Number Pattern:

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

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

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

One|1
Two|2|select
Three|3
Four|4
Five|5
The Form Preview will show a box with the text “Two”. And if the user submits the form without making any changes, he will be sending the value: 2.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

– Pattern

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

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

 

 

 

 

 

 

 

 

 

 

 

–Radios:

The Radios option is only in the Radio Buttons fields and is used to add radio buttons to the component.

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

One|1
Two|2|select
Three|3
Four|4
Five|5
The Form Preview will show five radio buttons with the words: One, Two, Three, Four and Five. The option Two would be selected. And if the user submits the form without making any changes, he will be sending the value: 2

 

 

 

 

 

 

 

 

 

 

 

 

 

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

 

 

 

 

 

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

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

 

 

 

 

 

 

 

 

 

 

 

 

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

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

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

 

 

 

 

 

 

 

 

 

 

 

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

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

– Text Field
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 Docupletionforms 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
Checkbox is a component that adds check boxes to the form. This component provides an option list with a checkbox next, so your users can check all, some or none. Its use is recommended when you ask for several answers, for example: Which of the followings are fruits?

To add, edit and delete options, you must click on the component. Then a form appears with the “Checkbox” 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|check. The second and third part of this format is optional.

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

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

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

Also, since version 1.3 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:

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

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

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

The Form Preview will show 5 check boxes with the words One, Two, Three, Four and Five. The “Two” option will be selected. And if the user submits the form without making any changes, 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:

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

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|select: 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|select: 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|select. The second and third part of this format is optional.

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

One|1
Two|2|select
Three|3
Four|4
Five|5
The Form Preview will show a box with the text “Two”. And if the user submits the form without making any changes, it will be sending the value: 2.

– 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 Snippet field is an advanced use component and allows users to add HTML code. The code inserted will be displayed on the form as such. However, care must be taken to introduce a valid html code, otherwise the Form Builder does not save the form and, instead, displays a 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.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

– reCaptcha
The reCaptcha field is an advanced component that allows you to use Google technology to verify that users are not bots and/or spammers. You can modify the reCAPTCHA configuration, like changing the theme color, type of captcha and size. A detail to keep in mind is that you can only add a reCaptcha component per Form.

 

 

 

 

 

 

 

 

 

 

 

 

 

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

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

  1. The Page Break component adds two buttons to allow Form Navigation. You can customize the text on the button ‘Next’ or ‘Previous’ by clicking on the component.
  2. Form Steps: Shown above form and may be modified as follows.
  • Click Form Steps to check its settings. You can change the titles of each step in the field Form Steps. Each line matches a title.
  • You can specify to display only the titles or steps (numbers).
  • 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.
  • You can change the design of the steps for a progress bar indicating the percentage that has been achieved.
  • Finally, you can hide the Form Steps by checking the ‘No Form Steps’ option.

 

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

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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

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

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

 

 

 

 

 

 

 

 

 

 

 

 

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

 

 

 

 

 

 

 

 

 

 

 

 

Many of these requirements are validated at the client, by the browser; but they are all validated on the server, by Our Form Builder.

 

Form Manager

form builder

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

 

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

Create a form

Before you create your first form, please read the Form Builder documentation.
If you are on the Dashboard or in the Form Manager, follow these steps:

  1. Click “Create Form”
  2. Drag and drop all the fields that your form needs.
  3. Drag and drop one button or more, according to your needs.
  4. Click “Save Form”. A modal window will appear with 3 options:
  • Continue editing the form.
  • Go to Advanced Form Settings
  • Go to Form Manager

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

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

Update a Form

If you have questions about updating your first form, please read the Form Builder documentation.
Updating a form can be done in two ways:
1. From the Form Manager

  • Locate the form to update
  • Click on the “Actions” button and select “Update”

2. From the Form Record

  • To access the Form Record click the name of the form
  • Then click the “Update” button (the pencil icon)

3. Drag and drop one button or more, according to your needs.
4. Click “Save Form”.

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

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

  1. Go to the Form Builder
  2. Click the Up Arrow (At the right side of the “Save” button)
  3. Click “Save Form As Template”
  4. Then you will be redirected to the Template Manager.

 

 

 

 

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

  1. Click on the name of the form you want to set
  2. Click on “Settings” (the gear icon)

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

1. 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.
  • Message: Sets the message to be displayed to the user when the form is disabled (Off).
  • Schedule Form Activity: Set the start an end date in which the Form must be active (ON) Before and after it, the form is automatically deactivated.
  • Start Date: Select the date on which the form will be activated.
  • End Date: Select the date on which the form will be deactivated.
  • Save DB: Indicates if form submissions must be stored in the database or not. In any case, this does not affect each emailing entry.
  • Analytics: Enable/disable monitoring the form by the application.
  • 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).
  • Use password: Enable or disable the form protection by using password. If the option is enabled, you should fill the Password field. Otherwise the form will not be saved and instead, a validation error will be displayed. By default is OFF.
  • 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: Let you disable the fields validation in the client side, by the browser. Note that validation on the server side will not be disabled. It’s recommended to have this option in Off.
  • Autocomplete: Enables the browser’s autocomplete to forms that have been previously filled. By default is ON.
  • Save & Resume later: The browser automatically save the information entered by a user so a Form can be partially filled and then be resumed.
  • Limit total number of submission: Specify the maximum number of submissions that the form will accept in a period of time.
  • Total Number: Total number of submissions to be accepted.
  • Per Time Period: Period in which the number is counted.
  • Limit submissions from the same IP: Sets the maximum number of submissions that the Form can receive from the same user (by IP) in a period of time.
  • Max Number: Maximum number of submissions allowed.
  • Per Time Period: Period in which the number is counted.

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.

2. Confirmation Settings
This tab allows you to configure two 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.
    You can insert field variables into a confirmation URL or confirmation message, in similar way as a confirmation message by email. For more details, go to the ‘Customizing the message’ documentation.
  • 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.

Customizing the message

You can insert field variables into a confirmation email and they’ll be replaced with whatever the user insert into that field.

Every variable must be between a double punctuation keys. Eg. {{My Variable}}

In the following example, we show the two ways you can insert the variables:

  • By using the field label: The variable {{Your Name}} has been inserted to the confirmation email and will be replaced by the name that the person puts in the Form.
  • By using the ID field: In the picture you can see the variable {{text_263547}}, the same relates to the field {{Your Name}} of the form. In other words, we can use both types of variables to get field information. If your field doesn’t have a label, this is the option you should use.

Additionally, you can use the following variables:

  • {{form_id}}: Form ID.
  • {{form_name}}: Form Name
  • {{submission_id}}: Submission ID
  • {{created_at}}: Date of Submission
  • {{ip_address}}: IP Address.
  • {{user_agent}}: Browser’s User Agent of Sender.
  • {{url}}: Web page url where the form was embedded.
  • {{referrer}}: Web page url from where the visitor has arrived to the form.
  • {{country}}: Country of Sender.
  • {{city}}: City of Sender.
  • {{longitude}}: Geographic coordinate that specifies the east-west position of Sender.
  • {{latitude}}: Geographic coordinate that specifies the north–south position of Sender.

This is a great way to personalize your message. Any form field can be used in this way.

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

Two things to keep in mind:

  • If the form has fields of “Email” type, you can select them as email senders (Reply To).
  • If the form has fields of “File” type, you can attach uploaded files to emails.

Note: You can insert field variables into a notification email. For more details, go to the ‘Confirmation Settings’ documentation.

4. UI Settings

UI = User Interface.

From here you can modify the form appearance: The design by using themes and the functionality 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

Docupletionforms 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)
  4. 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.

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”

Template Manager

form builder

Introduction

Create a template is as simple as creating a form. But if you need to create several similar or identical forms, first create a template, then you can create the forms you need with a few clicks.

The Template Manager

To access the Template Manager, go to Form Manager, then click the drop-down menu located on the right side of the “Create Form” button. Finally, click in More templates.

Create a Form from a Template

To create a Form, perform the following steps:

  1. Click the Actions button on the chosen template.
  2. Click Create Form
  3. Form Builder opens and the template will be displayed in the preview.
  4. Click Save

Create a Template

To create a template, follow these steps:

  1. Go to the Template Manager
  2. Click on the Create Template button
  3. The Form Builder will open, but this time will create a template.
  4. Add the fields and make the changes you need.
  5. Click Save

Edit a Template
To edit a template, perform the following steps:

  1. Go to the Template Manager
  2. Click the Actions button on the template to be edited
  3. Click Update
  4. The Form Builder will open, but this time to edit the template.
  5. Make the changes you need
  6. Click Save

Promoting a Template

Promoting a template allows you to create a form without having to go to the Template Manager. You will be able to do it directly from the dropdown menu at the right of the Create Form button.

To promote a template, perform the following steps:

  1. Go to the Template Manager
  2. Click the Actions button on the template to promote
  3. Click Settings
  4. Select the checkbox Promoted
  5. Click Update

 

 

 

 

 

 

 

 

 

 

 

 

 

Note: By default, the promoted Templates drop-down menu displays the last 5 updated templates.

Add Category to a Template

To categorize a template, perform the following steps:

  1. Go to the Template Manager
  2. Click on the Actions button of the template in which you are adding category.
  3. Click Settings
  4. Select a category
  5. Click Update

Delete a Template

To delete a template, perform the following steps:

  1. Go to the Template Manager
  2. Click the Actions button of the template to delete
  3. Press Delete
  4. A popup window will appear asking to confirm your delete template decision.
  5. Click OK

The Template Manager will reload and the Template will be deleted.

Note: When you delete a template, all data related to it will be deleted too. This action cannot be undone.

Rule Builder

form builder

Introduction

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

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

Requirements

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

No limitations

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

Add your first rule

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

  • Name (text field)
  • Email (email field)
  • Message (text area)
  • Button (with text Submit)

 

 

 

 

 

 

 

 

 

 

 

 

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

  1. Once in this Form Rule Builder, the first thing you will notice is a blank panel with the Add Rule button. Click this button to create your first rule.
  2. Then you will see two lines, the first refers to the conditions and second to actions.
  3. Click the button Add condition and the first field of the form will appear, followed by a statement. In our example, the first field of the Form is a Text field with the ‘Name’ label, so the Rule Builder will show the condition ‘Name’ ‘is present’.
  4. Now click the button Add Action and notice that several selection lists appears. The first list shows the action to perform (For this example, leave in ‘Show’); the second shows the Type of result (For this example, leave ‘Field’) and the third, the first field label: ‘Name’. For this example, you will change it for ‘Submit’ (The text ‘Submit’ refers to the button).
  5. Finally, in the top right of this rule you will see a small orange warning “Unsaved Changes” and next a green button with the Check icon. Click on this button to save this rule. The warning will disappear.

You have created your first rule.

you should be aware that some rules are met bi-directionally; that is, if the condition is fulfilled the action is executed. But if the condition is not fulfilled the opposite action is 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 is 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

All rules are composed of two parts: Conditions and Actions.

Conditions

It is the first 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.

  • 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.
  • 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.
  • 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 second 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 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.
    • Math: Allows Addition / Subtraction / Multiplication / Division / Remainder of fields and show the result in another field or HTML element.
    • 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. You can read the full list of formats that the Rule Builder supports thanks to the excellent Numeral.js library.
    • Skip: To a page. This action should only be used in a Multi Step Form.
  • Target: Will vary depending on the type of Action. It can be of two types:
    • Field
    • Element
  • Name:
    • If the Target is Field it will be the field name.
    • 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.
  • Oposite Actions: By default, opposite actions are enabled because they help the creation of 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 this field hidden. However, there are occasions when the disabling of opposite actions can be helpful. When this happen only the action described in the rule will be executed.

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

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

Conditional Validation

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

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

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

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

1 … 3 4 5