Form Designer

<< Click to Display Table of Contents >>

Navigation:  Add-ons > Web eForms Add-on >

Form Designer

This sections covers:

 

Add Fields

Add Field Properties

 
 

The Designer interface is divided into 3 panels:

 

The left 'Add Fields' panel shows the field types available in Docsvault. Click a field type button or drag it to the center panel to add the field to your form.

 

The center panel displays all the fields added in a form.

 

The right 'Properties' panel allows you to label and customize the properties for each specific field.  

 

At the top of the form designer are the buttons to preview and save your form.

 

 

Add Fields

 

Layout

 

Note - This field allows you to display read only text on the form. This can be used to give more instructions to your respondents while filling out the form. They will not be able to add anything to this field.

 

HTML Text - Like the Note, this field is display as read-only text on the form. You are allowed to insert text, hyperlinks, videos and images to display on your form. You can use the formatting tools to choose font, alignment, list formatting and text formatting.

 

Panel - This field allows you to insert panel in the form. You can configure header, border and background color of the panel.  You can also build multi-column in this section and add fields. For more information, see Building Multi-Column Forms.

 

Section - This field inserts a section break.

 

Divider - This field inserts a separator. You can style the divider color, type and thickness.

 

Formula Table - This will allow you to collect data in a tabular format as well as perform simple arithmetic calculations in the columns. By default, invoice template with summarized fields is inserted which can be further edited. For more information, see Creating a calculating form.

 

Standard

 

Textbox - This field allows you to enter a single line of text. You can specify the label, hint text, placeholder, default text, input mask, mark field as required, range of characters and words, and field size under Properties.

 
Textarea - This field allows you to enter multiple lines of text. You can specify the label, hint text, placeholder, default text, mark field as required, range of characters and words, and field size under Properties.

 
Number - This field allows you to collect data in numerical format. You can specify the label, hint text, placeholder, default text, mark field as required, input mask, range of digits and values, and enable spinner under Properties.
 
You can also incorporate simple basic math calculation into your forms using number fields. For more information, see Creating a calculating form.

 

Dropdown - A Dropdown field allows you to select one option from a list. You can have the display values (to show on forms) different from their actual values using a label value pair. Add hint text, mark field as required, field size and list options under Properties.

 

Radio Button - This field is used when you want to let your respondents select only one option from a set of alternative. You can specify label-value pair and column layout under Properties.

 

Checkbox - This field is used when you want to let your respondents select a multiple options.You can specify checkbox label-value pair,  set column layout and define minimum and maximum selection range under Properties.

 

Choice List - This field also presents a list of option to the respondents from where they can select multiple options. You can specify label-value pair and field size under Properties.

 

File Upload - The File Upload field allows your respondents to attach multiple files to their form submission. You can specify the upload file size limit, number of files and allowable upload file types.ad

 

Profile Index - This control allows you to place Docsvault index filed as a control on the form. The index field can be of text, numeric, date, static lists as well as the dynamic Users/Groups index type. for example: fetching Departments (static) or Managers (dynamic Docsvault users) from indexes.

 

Pre-Formatted

 

Full Name - The Full Name field places a set of 2 text fields next to each other, with the labels "First" and "Last". You also have an option to add "Middle" name field from the Properties.

 

Address - This field is created in a standard style, which allows for 2 street addresses, city, state/region/provision, postal/zip and country.  The Properties panel, let you select the USA, Canada or International address format. You can also determine which elements of an address should be displayed in the address field.

 

Email - This field is used to collect valid email addresses. The email address will require a “@”and “.” from the user before the form can be submitted. You can specify the field size, and default text under Properties.

 

Phone - This is the Phone number field. Edit the field format under Properties.

 

Date - This field is used to insert a date. You can set the format of date to be used for that particular date control from its properties panel on the right. You also have an option to let the form auto fill current date in the Date field when the form is being filled in. Date field can even be used in formulas to manipulate the date of other date fields. For example: You can add a certain number of days to a date to calculate a new date. For more information, see Creating a calculating form.

 

SSN - This field is used to insert social security number.

 

Website - This field is used to collect valid URLs or website addresses.

 

Time - This field is used to insert time.

 

Password - This field is used to insert password.

 

Currency - This field is used to insert currency. You can change the currency type under Properties.

 

Terms - This field allows users to specify yes/no or true/false responses. Ex: I agree with the term. You can change the text and add hyper link to the text.

 

Signature - This field is used when you want your respondents to electronically sign a form before submission. All electronic signatures are saved as image files and get printed in PDFs and Word documents.

 

designer

 

Field Properties

 

Form Properties

 

Click on the Title of your form.

Under Properties, enter a Description to be shown under the title.

Choose where you want to place the title.

Personalize your form by adding a Logo to your form. The image used for the logo must have dimensions of 250px x 50px.

The width of the form can be adjusted by selecting Standard or Wide Form width property. The Standard option will use the default width of the form whereas the Wide option will use a wider width.

At times you may also need to use the Margin property to create perfect alignment for your form for your target screen size. The Auto option will automatically adjust the left & right margins based on the screen width, None will remove all the margins, and the Min option allows users to specify a minimum margin in pixel to leave on the left & right of a form.

Select the Theme to style your form's backgrounds, border, colors and more.  To customize your own theme, see Themes.

Customize the default Submit button text and choose it's alignment.

Enable Captcha feature to ensure the validity of the input data. Say no to spam with captcha form validation image.

 

Set Default Values for Fields

You can set a default value for your form fields. The default values that you set will appear in the field while filling up the form. If you want, you can change the value in a record from the default value to another value.
 
You can set a default value for fields set to the Text, Textarea, Number,  Email, Currency, and Hyperlink data types. You can even set default selection for Dropdown, ChoiceList fields.
 

Select the field for which you want to provide hint.

Under Properties panel, enter the text in the Default Text.

Click Save button.

 

Provide Hint text

The Hint text attribute can be used to specify extra information about a file or describes the expected value of an input field. The short hint is display as a tool-tip text.
 

To provide hint or help text for fields

Select the field for which you want to provide hint.

Under Properties panel, enter the text in the Hint textbox.

Click Save button

 

Mark Fields as Mandatory

You can collect important information such as name, email address, ssn etc from the respondents while filling up the form by marking fields as required. An asterisk (*) symbol next to fields indicate required fields.
 

Select the field that you want to mark as mandatory.

Under Properties panel, select the checkbox next to Required

Click Save button

 

Apply Input Masking to a Field

A field you provide may require data to be filled in a specific format to help maintain consistency. The mask 9 indicates digital input and 0 indicates Alphanumeric.

Few examples of validation: 0 signifies Alphanumeric and 9 a digit.  

 

 

Input Mask

Data Input

Postal Code

0090  900

EC1A 1BB

Phone number with an ext.

9 (999) 999-9999 x 9999

1 (555) 563-3434 x 5555

License Plate

9000999

1ABC234

4 chars only

0000

ABCD

IP address

9.999.99.999

1.160.10.250

 

 

Assigning Labels and Values

When you add a Dropdown, Radio, Choice List or Checkbox field to your form, you can assign a value to each choice under the field. To do this:.

Add a Dropdown field to your form.

Under Properties, go to Options > Assign Label & Value

Enter the value for each choice in the Label & Value columns.

Now you can use the values assigned to the choices under this field in the form. Similarly, you can assign values to the choices of the Radio, Choice List or Checkbox fields.

 

controlLabelValue

Note: Only the labels would be visible in your forms.

 

Using Docsvault Index Fields on Forms

 

Add a Profile Index field to your form and then:

 

Under Properties, go to Docsvault Index

 

The drop list will display static and dynamic indexes created in Docsvault. Select the one to map with the Profile index on the form.

 

profileIndex

 

Auto Fill Current User: Enable this option if you want to auto populate the dynamic user index field with current user.

Example: In the image above, 'Approved by' selected against Profile Index field is a dynamic user type index field. If the form is called from within Docsvault, the 'Approved field' will be auto populated by login username.

 

dynamic-user-auto

 

Auto Fill Current Date

Enable this option if you want to auto populate the date field with current Date.

 

current_date

 

 

Date Format

Docsvault will automatically select the date format as per your server localization settings. However, you may select a different format for any of your date index fields (ex: mm/dd/yy, dd/mm/yyyy, dd.mm.yyyy etc.). Once set, the date format for any date field will remain the same until manually changed.  

 

date-format

 

If Auto Fill Current Date is enabled the date would be displayed in the format selected above.

 

Showing & Hiding Fields

By default, fields will always display on the form. However, you may want to hide specific fields or sections.

 

To hide (or show) a field, click on the field. The field's properties will appear to the right side of the builder canvas. Select the appropriate options under the Visibility option.