Introduction to Web Form Designer

Web Form Designer is a web form editor that allows you to create electronic documents by uploading document files to eformsign and adding fields. You can upload 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 fields available in the left tree menu of Web form designer and set the properties of each field. This is all you need to do to create documents with an ease.

Note

File formats that can be uploaded are pdf, hwp, doc, docx, xls, xlsx, ppt, pptx, odt, jpg, png, gif, and tiff. The maximum file size supported is 9MB.

Note

In addition to Web Form Designer, eformsign also provides a 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.

File Uploading

Uploading a 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 fields to the document here.

    image3

Tip

You can add a file by clicking the Add file button and replace a file by clicking the see more icon (⋮) on the file tab and then clicking the Replace file button.

Add/replace file

Uploading a file in the Manage templates menu.

Note

Creating a template in the Manage templates menu requires either a company administrator or template manager permission.

  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

Tip

You can add a file by clicking the Add file button and replace a file by clicking the see more icon (⋮) on the file tab and then clicking the Replace file button.

Add/replace file

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 my file
  1. Top bar: In New 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 fields added. In New 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.

  2. Document display screen: Displays the uploaded file.

  3. Participants: Select the participants of the document and then drag and drop the fields to be filled in by each participant. You can add new participants by clicking the Add new participant. There can be up to 30 participants for each document.

  4. Field list: There are 14 basic fields including text, multiline, signature, check, and radio. There are also two data fields which are document ID and document number. More fields including custom and shape fields are planned to be added in the future.

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

  6. Bottom bar: Displays the file name, and contains the Add file button for adding files, and the see more button (⋮) that shows the Change name, Replace file, Delete file, and Move forward options.

Overview of Fields

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

Adding a field in Web Form Designer

Field Types

The fields provided in eformsign are as follows:

Basic fields

  • Signature: Inserts a signature.

  • Company stamp: Inserts a company stamp.

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

  • Handwriting: Allows to trace text shown on the background.

  • Number: Enters a number.

  • 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 fields

Setting Properties for Each Field Type

All fields have common and unique properties. When you click a field added, the detailed properties of that field will be displayed on the right and you can set the properties. Common properties include ID and Tooltip Text, and the meaning of each property is as follows:

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

  • Who can fill this out: Sets which participants are allowed and/or required to fill in the field. All the participants added for this document are shown, and you can check or uncheck the Allowed and Required check boxes for each one. When a documents is sent, fields that are checked as Allowed are highlighted in yellow, and fields that are check as Required are highlighted in red.

    • Allowed: Allows the participant to fill in the field.

    • Required: Requires the participant to fill in the field.

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

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

Note

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

The description of each field is as follows.

Signature

This field 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

Field Properties

Setting Signature Field Properties

① ID

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

② Available signature Type

Selects the signature type to be used when signing.

  • Signature: If the user already has a signature added on eformsign, then clicking the signature area or the Signature button inserts the added signature onto the document. If not, then the user manually creates a signature.

  • Initial: If the user already has an initial added on eformsign, then clicking the signature area or the Initials button inserts the added initial onto the document. If not, then the user manually creates an initial.

  • Stamp: If the user already has a company stamp added on eformsign, then clicking the signature area or the Stamp button inserts the added stamp onto the document. If not, then the user manually applies a stamp by scanning and uploading a stamp.

Note

In some cases, you may need to use a 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 button after clicking on a signature area, and then select a stamp image and click OK.

Select signature type

③ Signing method

If you check the Disable auto-fill check box, it prevents the signature field from being automatically filled when clicked/touched.

④ 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 field. On the eformsign app, it is displayed at the top center of the keypad.

Tip

Automatically entering signer and signature date

Click the signature field 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 field 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.

Company stamp

The company stamp field is used for applying a company stamp onto a document. If you add a company stamp field, documents that require a company stamp will show a company stamp pop-up as shown below and you’ll be able to select and apply company stamps that you have permission to access.

Field Properties

Setting Text and Multiline Field Properties

① ID

Enter the ID of the Company stamp field. For example, the ID of the field for applying a company stamp can be named ‘companystamp’.

② Who can fill this out

Sets whether the recipient is required or allowed to fill in this field.

③ Placeholder

Sets the help message displayed.

④ Tooltip Text

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

Text and Multiline

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

Field Properties

Setting Text and Multiline Field Properties

① ID

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

Note

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

② Who can fill this out

Selects who is allowed or required to fill out the field.

③Default value

Sets the default text.

Note

This option can be set only in the Text field. 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

⑤ Keypad type on mobile devices

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

⑥ 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 field.

Handwriting

The handwriting field is used to trace a pre-written tex.

You can type in the text to be displayed on a document in which recipients can trace.

Example of the handwriting field

Field propertites

Configuring handwriting field properties

① ID

Enters the ID of the handwriting field.

② Pen Thickness

Sets the pen thickness.

③ Pen Color

Sets the pen color.

④ Show Word Tracing

Allows you to type in the text that will be displayed on the handwriting field.


Number

Enters a number.

Field properties

Number field properties

① ID

Sets the ID of the number field.

② Default value

Sets the default value.

③ Allow negative value

Allows to enter a negative value.

④ Maximum Value, Minimum Value

Sets the minimum or maximum value that can be entered.

Note

If you enter a value that is lower than the minimum value set, then the value is changed to the minimum value. If you enter a value that is higher than the maximum value set, then the value is changed to the maximum value.

⑤ Number of decimal places

Sets the number of decimal places that can be entered. The number of decimal places that can be entered is from 0 to 10.

⑥ Show thousands separator

Automatically marks the value entered with a comma separated by thousands.

⑦ Prefix, Suffix

Sets the prefix/suffix required for a number to be entered automatically. For example, if you need to enter “10,000 dollars in total,” set the prefix to “total” and the suffix to “dollars”.


Label

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

Field Properties

Setting Label Field Properties

Setting Label Field 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 field is used to check whether an item is checked or not. This field is similar to the Radio field, but the Check field is used for checking the status of an item (whether it is checked or not) while the Radio field is used for checking which item among multiple items is checked.

Tip

Difference between check and radio fields

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

When data is downloaded in the CSV format, the Check field’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 field is shown in a rectangular shape. Make sure to enter data inside the rectangular shape.

Field Properties

Setting Check Field Properties

① ID

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

② Who can fill this out Selects who is allowed or required to fill out the field.

③ Items

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

④ Checked Style

You can specify the style of each field in Field 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 field 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 field, 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 field 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.

Field Properties

Setting Radio Field Properties

① ID

In Field 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 Field

② Who can fill this out Selects who is allowed or required to fill out the field.

③ Items

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

④ Selected style

You can specify the style of each field in Field 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 field that is not selected.

⑥ Tooltip Text

If you hover mouse over a field, 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 field is used when you need to select one of multiple items.

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

image8

Field Properties

Setting Combo Field Properties

① ID

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

② Who can fill this out Selects who is allowed or required to fill out the field.

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

⑥ Tooltip Text

If you hover mouse over a field, 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.

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 field is used for indicating a specific status such as ON/OFF. If you use this field, then the input value is switched according to a defined order whenever the field is clicked.

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

image9

Field Properties

Toggle Field Properties

① ID

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

② Who can fill this out Selects who is allowed or required to fill out the field.

③ Items

Enters the list of items that will be toggled whenever the Toggle field 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 field.

Datetime

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

Field Properties

Setting Datetime Field Properties

① ID

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

② Who can fill this out Selects who is allowed or required to fill out the field.

③ 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 field 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 field, 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 field is used for entering a number. Clicking the field 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 field by using a keyboard. In smartphones and tablets, you can scroll through the list of numbers and select the one you want.

Field Properties

Setting Numeric Field Properties

① ID

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

② Who can fill this out Selects who is allowed or required to fill out the field.

③ 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 field 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 field, 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 field 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 field displays a window for selecting the desired image file.

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

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

Field Properties

Setting Camera Field Properties

① ID

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

② Who can fill this out Selects who is allowed or required to fill out the field.

③ Placeholder

Enters the text displayed before taking a photo.

Tip

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

image11

④ Tooltip Text

If you hover mouse over a field, 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.

Voice

This field 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 field, you can record voice or play a voice recording as follows:

image12

Note

Voice recording is only available in the eformsign app.

Field Properties

Setting Voice Field Properties

① ID

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

② Who can fill this out Selects who is allowed or required to fill out the field.

③ Placeholder

Enters the text shown before recording.

Tip

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

image13

④ Tooltip text

If you hover mouse over a field, 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.

Attachment

This field is used for attaching a file to a document. When attaching a file to a document by using the Attachment field, 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

Field Properties

Setting Attachment Field Properties

① ID

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

② Who can fill this out Selects who is allowed or required to fill out the field.

③ Placeholder

Enters the text shown before attachment.

Tip

If you check the Shown icon check box, the clip icon will be displayed on the attachement area.

image14

④ Tooltip text

If you hover mouse over a field, 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.

Document ID and Document number

Data fields 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: The document number set in Template settings > General.

    Note

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

Field Properties

Setting Document field Properties

① ID

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

Configuring Template Settings

After uploading a file and adding fields 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: Selects the members and groups who can edit the template or create documents using the template.

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

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

  • Notification settings: 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.

A template that is not deployed are indicated with the text Not deployed. To deploy a template, click on the see more (⋮) button on the template and click the Deploy option. You can also click on the template to go to Template settings and click the Save button and then click Yes to deploy.

Template deployment

Note

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