Introduction to Web Form Designer

Overview

Web Form Designer is a web form editor that allows you to create electronic documents by uploading document files to eformsign and adding components. You can upload PDF files in the New from template or the New from my file menus to create documents using Web Form Designer. After uploading a file, simply click and add the components available in the left tree menu of Web form designer and set the properties of each component. This is all you need to do to create documents with an ease.

Note

Currently, only PDF files are supported, but other various file formats such as Microsoft Office, JPG, PNG, etc. are planned to be supported.

Note

In addition to Web form designer, eformsign also provides an Microsoft Office Add-in feature named OZ in Office (Form builder) which allows you to create electronic documents directly in Microsoft Office. To use Form builder, please install the Microsoft Office add-in, and refer to Form Builder.

  • Uploading a PDF file in the New from my file menu.

  1. Click the New from my file menu.

    image1

  2. Drag and drop the file onto the screen or click the Select a file button and select a file from your computer to upload.

    image2

  3. Once the file is uploaded, the Web Form Designer screen will be displayed. You can add components to the document here.

    image3

Uploading a PDF file in the Manage templates menu.

  1. Go to the Manage templates menu.

    Web Form Designer Screen
  2. To upload a file, simply drag the file onto the Manage templates page or click the Select a file button and then upload the file.

    Web Form Designer Screen
  3. When a file is uploaded, the Create template page will be displayed as follows:

Web Form Designer Screen

Web Form Designer Menu Layout

Web form designer consists of a screen that displays the file, the left and right panels, and the top bar.

Web Form Designer Menu Layout - Create from template
Web Form Designer Menu Layout - Create from my file
  1. Document display screen: Displays the uploaded file.

  2. Top bar: In Create from template, there are two steps: Design form and Configure. You can also go back to the Manage templates page and preview the template with components added. In Create from my file, there are three steps: Design form, Add recipients, and Options. After designing a form, you can create a document or save the form as a draft.

    Note

    Clicking each step shown on the top bar displays the screen for each step. You can set the workflow, permission, etc. Make sure to configure the settings before you finish creating a document.

  3. Component list: There are 13 basic components including text, multiline, signature, check, and radio. There are also two data components which are document ID and document number. More components including custom and shape components are planned to be added in the future.

  4. Properties: Allows to set the properties of each component after adding components such as Signature, Text, and Check by clicking and locating them to the document display screen.

Overview of Components

Components are used to create fields in electronic documents that users can enter information. Many different components including Signature, Check, Date, and Text are provided, and each component can be configured in detail by using the Properties tab.

Adding a component in Web Form Designer

Component Types

The components provided in eformsign are as follows:

  • Signature: Enters a signature.

  • Text: Enters short text (usually 1 to 2 words).

  • Multiline: Enters long text with multiple lines.

  • Label: Sets the form ID.

  • Check: Ticks a check box.

  • Radio: Selects an item among multiple items (can also be set to select multiple items).

  • Combo: Displays a drop-down menu that allows you to select an item.

  • Toggle: Switches to another value if two or more values are entered.

  • Datetime: Enters a specific date.

  • Numeric stepper: Enters a number.

  • Camera: Takes a photo using a camera or selects a photo from an album in devices with a built-in camera (e.g. smartphone, tablet, etc.). Selects an image file in devices without a camera (e.g. desktop PC).

  • Voice: Records audio in devices with a voice recording function.

  • Attachment: Attaches a file.

    Data components

  • Document ID: Enters the document ID in a document.

  • Document number: Enters the document number in a document.

Setting Properties for Each Component Type

All components have common and unique properties. When you click the component added, the Properties tab where you can set and see detailed properties of each component will be displayed on the right side of the Web form designer screen. Common properties include ID and Tooltip Text, and the meaning of each property is as follows:

  • ID: Unique ID that identifies each component. When assigning who can fill out a component, you can use the component ID to do so. You can also use the component ID to extract data in CSV format.

  • Placeholder: Text displayed as a help message before entering information.

  • Tooltip Text: In Windows, the text in the Tooltip Text box of a component is displayed in the form of a speech bubble when hovering the mouse over the component. In mobile, the text is displayed on the quick type bar when clicking on the component.

Note

For the Document component which is for providing information, Tooltip Text is not provided.

The description of each component is as follows.

Signature

This component is used for signing a signature on a document.

Clicking the signature area displays the Signature pop-up which allows you to sign a signature by drawing, entering text, or using a previously registered signature.

image4

Component Properties

Setting Signature Component Properties

① ID

Enters the ID of the signature component. For example, the ID of the component can be ‘signerSignature’ for contract signers.

② Signature Type

Selects the signature type to be used when signing.

  • Enter Directly: Clicking the signature area displays the Signature pop-up which allows you to sign by selecting one of the multiple signing methods which are Draw, Text, Mobile, Stamp, and Registered signature.

  • Registered Signature: If the user has already registered a signature on eformsign, then clicking the signature area inserts the registered signature into the document.

  • Registered Initial: If the user has already registered an initial on eformsign, then clicking the signature area inserts the registered initial into the document.

  • Registered Stamp: If the user has already registered a stamp on eformsign, then clicking the signature area inserts the registered stamp into the document.

Note

If there is a registered signature or initial, then it will be automatically entered in the signature area when a signature area is clicked. However, if there is no registered signature or initial, then a regular Signature pop-up will be displayed when a signature area is clicked.

Note

In some cases, you may need to use a seal or stamp on a document rather than your own signature. With eformsign, you can also use a stamp image to stamp the signature on a document. To use a stamp image when submitting a document, click the Stamp tab in the Signature pop-up, and then select a stamp image and click OK.

③ Signature Pen Thick

Sets the signature pen thickness.

④ Signature Pen Color

Sets the signature pen color.

⑤ Placeholder

Sets the help message displayed before signing.

⑥ Tooltip Text

Displays the description in Tooltip Text when you hover the mouse over a component. On the eformsign app, it is displayed at the top center of the keypad.

Tip

Automatically entering signer and signature date

Click the signature component and then click the icons shown to add the signature date and signer.

Signature date and signer

① Signature date: Automatically enters the date signed. By clicking the Add date signed icon, you can set the date format in the date signed component properties on the right.

Date signed

② Add signer: Automatically enters the signer information. By clicking the Add signer icon, you can specify the signer information by ID, name, department, title/position, mobile, or phone.

Add signer

Note

You can add multiple signed dates and signers for a given signature. You can use this when you need to enter the date signed repeatedly in a given document such as a contract or enter detailed information of a signer.

Text and Multiline

Both Text and Multiline components are used to create text fields. The Text component is suitable for short text with 1 to 2 words, and the Multiline component is suitable for long text with more than 1 line.

Component Properties

Setting Text and Multiline Component Properties

① ID

Enters the ID of the Text/Multiline component. For example, the ID of the component in which John Doe, Jane Doe, etc. are entered can be named ‘personName’.

Note

All components must have an ID. An ID is automatically generated when you create a component, but it is recommended to rename it to something you can easily recognize. For example, you can rename the ID of a component for entering John Doe, Jane Doe, etc. as ‘name’. By doing so, it is easier to identify components when deciding whether to display a field to a specific user when you are configuring the Field settings of a template.

②Default value

Sets the default text.

Note

This option can be set only in the Text component. By checking this option, the password is hidden with the password symbol (●) or asterisk (*) when entering text. The password is also hidden with the password symbol in PDFs, and can only be seen when downloaded in the CSV format.

③ Max length

Sets the maximum length of characters (including space) that can be entered. By default, it is set to ‘0’, and in this case, there is no limit for the number of characters

④ Keyboard type

Selects the keyboard type to be used when entering text in the component. Keyboard Type can only be used in mobile devices such as smartphones and tablets.

④ Tooltip text

Displays the description in Tooltip Text when you hover the mouse over a component.

⑤ Placeholder

Displays a help message when no value is entered.

⑥ Tooltip Text

Displays the description in Tooltip Text when you hover the mouse over a component.

Label

This component is used for setting the form ID of a document.

Component Properties

Setting Label Component Properties

Setting Label Component Properties

① ID

The form ID of the document is automatically generated and displayed. It can also be changed.

The form ID defined here can be applied when editing the document.

②Text

Text entered in the text box is displayed on the document.

Check

The Check component is used to check whether an item is checked or not. This component is similar to the Radio component, but the Check component is used for checking the status of an item (whether it is checked or not) while the Radio component is used for checking which item among multiple items is checked.

Tip

Difference between check and radio components

You can select multiple items for check components, but not for radio components.

When data is downloaded in the CSV format, the Check component’s input value is displayed as follows:

  • When the item is checked: true

  • When the item is not checked: false

In Word and PowerPoint, the Check component is shown as a rectangular shape. Make sure to enter data inside the rectangular shape.

Component Properties

Setting Check Component Properties

① ID

Each Check component must be given a different ID. If multiple check components are given the same ID, then only the value of the last component is displayed.

② Items

You can enter the text to be displayed in the item. You can also add multiple check components so that multiple items can be selected.

③ Checked Style

You can specify the style of each component in Component Properties. The check box is set as the default style, and you can change it to another style (radio button or red circle).

The below example shows how checks are displayed according to the selected style.

image5

Tip

You can select the color and style by clicking the drop-down icon. Once selected, the check style will be shown in the color and style you selected.

image6

④ Unchecked style

You can select the style of each component that is not selected. For unchecked style, checks display square boxes, radio buttons display circles, and circles display nothing.

⑤ Tooltip text

If you hover mouse over a component, the description you entered in the tooltip text will be displayed. In the eformsign app, this will be displayed at the top center of the keypad.

Radio

The Radio component is used for checking which item is selected among multiple items. When data is downloaded in the CSV format, the selected item will be displayed.

Component Properties

Setting Radio Component Properties

① ID

In Component Properties, make sure that all the selected radio buttons are assigned the same ID.

For example, if there are six choices available in a multiple choice question, assign ‘question1’ as the ID for all of them. In the example shown below, the IDs of all the items are set to the same “question 1”.

Example of Setting a Radio Component

② Items

Items with the same ID are shown in the item list of the component properties window and you can edit text easily.

③ Selected style

You can specify the style of each component in Component Properties. The black circle set as the default style, and you can change it to another style in the dropdown menu.

Tip

You can select the color of each style by clicking the drop-down icon. Once selected, the circle will be in the color you selected.

image7

④ Unselected style

You can select the style of each component that is not selected.

⑤ Tooltip Text

If you hover mouse over a component, the description you entered in the tooltip text will be displayed. In the eformsign app, this will be displayed at the top center of the keypad.

Combo

The Combo component is used when you need to select one of multiple items.

If you click a Combo component, a list of items is displayed as follows:

image8

Component Properties

Setting Combo Component Properties

① ID

Enter the ID of the Combo component. For example, the ID of the component for selecting the favorite color can be ‘Favorite color’.

② Item count

Enter the items you want. You can separate the items by pressing Enter.

③ Default item

Select the item set as default.

④ Placeholder

Text displayed as a help message before entering information.

Note

If you want to display a message such as ‘Select a color’ in a combo box, then enter ‘Select a color’ and set the default item as ‘Select a color’.

Toggle

This component is used for indicating a specific status such as ON/OFF. If you use this component, then the input value is switched according to a defined order whenever the component is clicked.

You can change the status to Good or Bad by clicking the components as follows:

image9

Component Properties

Toggle Component Properties

① ID

Enters the ID of the Toggle component. For example, the ID of the component for the first inspection item can be named ‘APT inspection 1’.

② Items

Enters the list of items that will be toggled whenever the Toggle component is clicked. You can separate the items by pressing Enter.

③ Default item

Select the item set as default.

④ Tooltip Text

Displays the description in Tooltip Text when you hover the mouse over a component.

Datetime

This component is used for entering a date. Clicking the component displays a date selection window where you can select the date you want.

Component Properties

Setting Datetime Component Properties

① ID

Enters the ID of the Datetime component. For example, the ID of the component for selecting the vacation start date can be named ‘Vacation start date’.

② Default value

Sets the date to be displayed as default. If you check Set today’s date as default date, then today’s date is automatically entered when a document is opened.

③ Format

Sets the format in which date will be displayed. The default setting is date_yyyy-MM-dd.

  • yyyy: Displays the year.

  • MM: Displays the month. Must be in uppercase.

  • dd: Displays the day.

For example, if you want to display the date in the format of ‘15-02-2020’, then enter dd-MM-yyyy in the Format field.

④ Minimum Date/Maximum Date

Sets the range of dates that can be selected in the component by specifying the minimum and maximum dates.

⑤ Placeholder

Text displayed as a help message before entering information.

⑥ Tooltip Text

If you hover mouse over a component, the description you entered in the tooltip text will be displayed. In the eformsign app, this will be displayed at the top center of the keypad.

Numeric stepper

This component is used for entering a number. Clicking the component displays two arrows on the right, and you can increase or decrease the number by clicking them. In PCs, you can directly enter the desired number into the component by using a keyboard. In smartphones and tablets, you can scroll through the list of numbers and select the one you want.

Component Properties

Setting Numeric Component Properties

① ID

Enters the ID of the Numeric component. For example, the ID of the component for entering the number of people in a reservation can be named ‘peopleCount’.

② Default value

Enters the default number to be displayed.

③ Unit of Change

Enters the unit of number that will increase/decrease the number whenever the up/down arrow icon is clicked. For example, if the Unit of Change is set to 100, then when you click the up arrow icon (▲), the number is increased by 100 such as 200, 300, 400, and so on.

④ Minimum/Maximum Value

Sets the range of numbers that can be entered into the component by specifying the minimum and maximum values. For example, for the date of birth, setting the Minimum Value to 1900, Maximum Value to the current year, and the Unit of Change to 1. Also, if you enter a value that is lower/higher than the Minimum/Maximum Value, then the Minimum/Maximum Value will be automatically entered. For example, if the Maximum Value is set to 100 and you enter 101, then the number will automatically change to 100.

⑤ Placeholder

Text displayed as a help message before entering information.

⑥ Tooltip Text

If you hover mouse over a component, the description you entered in the tooltip text will be displayed. In the eformsign app, this will be displayed at the top center of the keypad.

Camera

This component is for uploading photos (taken with a device with a built-in camera such as smartphones and tablets) to a document. In PCs without a camera, clicking the component displays a window for selecting the desired image file.

If the size of the selected image is larger than the size of the component, then it is resized to fit the component.

Note

For the device with a built-in camera, camera feature will be executed, and for the devices with no camera, a window for selecting an image file will be displayed.

image10

Component Properties

Setting Camera Component Properties

① ID

Enters the ID of the Camera component. For example, the ID of the component that takes the photo of a driver’s license can be ‘driverLicense’.

② Placeholder

Enters the text displayed before taking a photo.

③ Tooltip Text

If you hover mouse over a component, the description you entered in the tooltip text will be displayed. In the eformsign app, this will be displayed at the top center of the keypad.

Tip

If you check the camera icon, the camera icon is shown on the camera area.

image11

Voice

This component is used for storing recorded voice. You can set the maximum recording time and you can also configure the settings to allow users to only listen to the voice recording.

When you add a Voice component, you can record voice or play a voice recording as follows:

image12

Note

Voice recording is only available in the eformsign app.

Component Properties

Setting Voice Component Properties

① ID

Enter the ID of the voice component. For example, the ID of the component that plays voice recordings can be named ‘Record1’.

② Placeholder

Enters the text shown before recording.

③ Tooltip text

If you hover mouse over a component, the description you entered in the tooltip text will be displayed. In the eformsign app, this will be displayed at the top center of the keypad.

Tip

If you check the voice icon, the mic icon will be displayed on the voice recording area.

image13

Attachment

This component is used for attaching a file to a document. When attaching a file to a document by using the Attachment component, the file will be attached at the very end of the document as a new page.

The types and sizes of files that can be attached are as follows:

  • File type: PDF, JPG, PNG, and GIF

  • File size: Up to 5MB

Component Properties

Setting Attachment Component Properties

① ID

Enters the ID of the Attachment component. For example, the ID of the component for attaching a resume can be named ‘myResume’.

② Placeholder

Enters the text shown before attachment.

③ Tooltip text

If you hover mouse over a component, the description you entered in the tooltip text will be displayed. In the eformsign app, this will be displayed at the top center of the keypad.

Tip

If you check the clip icon, the clip icon will be displayed on the voice recording area.

image14

Document ID and Document number

Data components are used for entering document-related information in the document itself. You can select either one of the document ID or document number.

  • Document ID: A unique ID assigned to all documents in the system and is shown in 32 digit alphanumeric format. E.g. 0077af27a98846c8872f5333920679b7

  • Document number: Document number set in Template settings > General. For information about setting a document number, refer to Generating and viewing a document number.

    Note

    The document ID is a unique document ID assigned in the system, so it does not require separate settings.

Component Properties

Setting Document Component Properties

① ID

Enter the ID of the Document component. For example, the component ID can be ‘docNum’ for document number.

Configuring Template Settings

After uploading a file and adding components with Web Form Designer, you can configure additional settings for documents that will be created from the template such as the document name, document number, and workflow.

In the Design form screen, click the Next button to go to the Configure screen. In the Configure screen, you can configure the five settings shown below.

  • General: Sets the template name, abbreviation, document name, document number, etc.

  • Set permissions: Sets the permissions for who can create documents created from the template and who can open, void, or permanently remove documents created from the template.

  • Workflow: Sets the steps of the document workflow from Start to Complete.

  • Field: Sets the field default values, auto-filled values, etc.

  • Set notifications: Sets the notification settings for documents created from the template.

The 5 Configuration Tabs in Template Settings

Important

In order to create documents from a template, you must save and deploy the template. If you save a template but not deploy it, then template does not appear in the New from template page of members with permission to use that template.

Note

For more information on templates, refer to Creating templates using Web Form Designer.