Month: October 2018

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