Clicking on Form Builder in your main SignFlow menu will bring up the Create Form page, featuring the 12 form field options on the right-hand side. 

 



Form Name:
First, you will need to give your form a name by which it will be easily identified. This usually follows the naming conventions of the company - for example "HR243 - Contract of Employment" - but you can name the form as you wish. 


Form Scope:

This is a drop-down menu that will contain your company's predetermined departments. You will select the one to which the form is relevant. For example, a department, the whole business, a team, etc.


Include as a Cover Page (Yes/No):

This allows you to merge multiple documents into one, and and send them out without the recipient seeing the form that was used to merge them together. 

* If you select "No", you will fill in the form (after you've built it), attach the required documents, click submit and  only the attached documents will be sent for signing. 

* If you select "Yes", the form will be merged with the attached documents and whoever needs to sign the documents will also be able to see the associated form.

To read more about this feature, go to the article on From Builder: Include as a cover page.


Save form:

Click this once you have finished building your form. Your form will immediately be available in Form Manager (at the top of the list) and as an option in the Forms drop-down menu (forms are in alphabetical order here, according to their allocated names).


Clear:

Clicking Clear at the bottom right of the form builder will clear all the fields you have placed. You will be asked "Are you sure you want to clear all fields?" before deleting them.



Field Options


Now let's zoom in on the above-mentioned 12 field options that allow you to customise your forms to your specific needs: 


To place any of the 12 above fields, simply drag them to the open area inside the broken-line border. Once you have placed your field, hover over the box to reveal two icons on the top right-hand side - Edit (pencil icon) and Remove Element (x). 

Clicking on the edit pencil will bring up different options for each of the 12 fields, but you will notice there are a few common denominators: 


Required: Tick this if you require the checkbox to be ticked before the form can be signed and submitted. Leave it unticked if it's an optional field. If Required is ticked, a red dot will appear alongside the label (instruction text) to indicate the requested information is compulsory for the individual filling in the form to enter.


Label: This is the text (usually the question or instruction) that will appear above the checkbox or text/date field. 


Help Text: This allows you to insert text to help the individual filling in the form understand what is required from them, or to qualify the Label.  It will be presented to them in the form of a black question mark next to the Label, which - when hovered over with their cursor - will bring up a black speech bubble containing our help text. (See screenshot under Checkbox below - "A gold club member is an individual who has been a customer for more than five years."). This is an optional field - you need not create help text if you feel it is unnecessary. 


Class: This is an advanced field that requires knowledge of CSS coding. Contact SignFlow support if you would like to change the Class, or to find out more. 


Name: This is the unique identifier of the respective form fields. You do not need to change this, it is automatically generated. 


Value: This field is used for when you want to create default text that will pop up when the form is being filled in. The individual filling in the form can either select the default text, or change it to what they want. This does not apply to all form fields (e.g. Checkbox). 


Close: Clicking on Close at the bottom (middle) of the form field box will close the editable box and show you what the form field you have just set up will look like to the individual filling in the form. 



Now let's go through each field individually:


1. Logo

The logo is predetermined by the company administrator, as saved in your unique business profile. Clicking on the Logo field will pull this into the document as it has been set in the profile. Clicking on the Edit pencil will bring up the box below: 

You need not fill in any of the fields, unless you want to resize your logo, which you can do by changing the value in the Class box:


  • By default, the Class field will read img-responsive image.
  • You have four size options, starting from small to large.
  • For the smallest size, insert col-xs-2 after img-responsive image - leaving a space after the word image.
  • For a slightly larger logo - and recommended for optimal sizing - insert "col-xs-4" after "img-responsive image", leaving a space after the word image.
  • The last two options are col-xs-6 and col-xs-8, which will each result in larger logos, with 8 being the largest. 


2. Checkbox

This places a single checkbox on the form and is often used for a non-mandatory response - for example, "Click here if you like this" (The person completing the form can skip over this if they so choose). However, it can also be mandatory (Required) - for example, "Click here to accept the terms & conditions". The person completing the form will not be able to sign and submit the form if the box is not ticked in this case. 


There are two main options with Checkbox: The above-mentioned text and box format, and toggle. Click the edit pencil to bring up the following set of options: 



Toggle: This places a toggle box field on the form. If Toggle is ticked, you need only fill in the Label box, which contains the text above your toggle box (as in the image below). 



3. Checkbox Group

This allows you to build a question/instruction with multiple checkboxes. This is used for when there are a number of options the individual filling in the form can choose from. The individual can select one, or more options. 


In the image below, the top box is the editable form field you will add text and options to, and the bottom is what it will look like to the recipient (after you click on Close): 


The majority of your options here are the common ones (described in the Field Options above) - i.e. Required, Label, Help Text, Class and Name


Options

  1. Fill in your multiple text options on the left-hand side (Option 1; Option 2) only and leave the right-hand side blocks blank (option-1; option-2) as these are not applicable for Checkbox Group fields. 
  2. You can add as many options as you like. Clicking Add Option at the bottom right-hand side of your Checkbox Group box will bring up two more boxes, which read Label (left box) and Value (right box). As with Option 1 and Option 2, fill in only the left box. 
  3. Clicking the X to the right of these additional options will delete them.
  4. Click Close to view the Checkbox Group you have just set up, as in the example above. 



4. Date Field 

This will present the individual filling in the form with a date field, which they can fill in by clicking on the arrows to bring up a scrolling calendar. They then simply click on the date that corresponds with the Label (instruction) you set. 


In the image below, the top box is the editable form field you will add your instructional text to, and the bottom is what it will look like to the recipient (after you click on Close): 

The majority of your options here are the common ones (described in Field Options above) - i.e. Required, Label, Help Text, Class, Name and Value (not applicable to Date Field).


Note:

  1. The date format is by default Year/Month/Day.
  2. You can add as many date fields to a form as required.
  3. The individual filling in the form can either click the big down arrow to the far right of the yyyy/mm/dd to bring up the scrolling calendar (pictured above); or
  4. they can highlight either yyyy, mm or dd and click on the small up/down arrows to select the appropriate date.



5. File Upload 

This enables the individual filling in the form to upload a file from their hard drive, which will be attached to the form as a PDF file. 


Required, Label, Help Text, Class and Name are, again, as described in Field Options above.


Other options:

  1. Multiple Files gives the person filling in the form the option of uploading as many documents as they wish. If this is unticked, they will only be able to upload one document. 
  2. Max Length is not applicable here. 



6. Header  

This field allows you to create headlines - usually single lines of text that head sections of your form. You can create as many of these as necessary. 


  1. The Label field is where you type in your headline/header.
  2. Type offers three size options, with H1 being the biggest, H2 medium text and H3 small. 
  3. Class - as above, this requires knowledge of CSS coding. Contact support if you wish to change this.



7. Paragraph

This allows you to insert single paragraphs of text into your form. You can use as many words as you wish (type/paste into Content box), but the text will appear as one paragraph on the form. If you wish to insert multiple paragraphs, you will need to place a paragraph field for each one. 




 Class is, again, as described above (requires CSS code, consult SignFlow support).

  1. Content: type or paste the text you want to appear as a paragraph on the form here. 
  2. Type: This is how the paragraph will appear on the form:
    1. P - ordinary paragraph format.
    2. Address - ordinary paragraph format.
    3. Blockquote - a block of text with a blue border line on the left. This is usually used to indicate the quotation of a large section of text from another source. 


NOTE: If the amount of text you wish to insert exceeds the default content box area, click and drag the bottom right-hand corner to increase size. 


8. Number

Use this field when you need the individual filling in the form to respond in digits only - for example, "How many days of leave would you like to request?". The respondent will then have the option of using an up/down arrow to scroll to the number they need to input. 

Required, Label, Help Text, Class and Name are, again, as described in Field Options above. 


  1. Min allows you to set the minimum number required by the respondent. For example, in the case of a sick leave form, 1 would generally be the minimum. 
  2. Max, as above, allows you to set a maximum number required.  For example, if an employee is not entitled to more than 15 days' leave, the max will be set to 15. 
  3. Step allows you to make the number field go up in increments of a chosen number. For example, if you set this to 2, every time the respondent clicks the up arrow, the number will jump two digits. (0; 2; 4; 6; 8 etc).
  4. Value is not applicable here. 


NOTE: You may insert as many number fields as you wish on your form. 



9. Radio Group (combo boxes)

A radio button is defined as an icon representing one of a set of options, only one of which can be selected at any time. Radio Group is a form field that only allows the person filling in the form to tick one option (out of however many you wish to set up). Checking one radio button that belongs to a radio group unchecks any previously checked radio button within the same group. Initially, all of the radio buttons are unchecked.


Similar to 3. Checkbox Group above (which, unlike Radio Group, allows for multiple boxes to be ticked), the majority of your options here are the common ones (described in the Field Options above) - i.e. Required, Label, Help Text, Class and Name


Options

  1. Fill in your text options on the left-hand side (Option 1; Option 2) only and leave the right-hand side blocks blank (option-1; option-2) as these are not applicable for Radio Group fields. 
  2. You can add as many options as you like. Clicking Add Option at the bottom right-hand side of your Checkbox Group box will bring up two more boxes, which read Label (left box) and Value (right box). As with Option 1 and Option 2, fill in only the left box. 
  3. Clicking the X to the right of these additional options will delete them.



10. Select (dropdown boxes)

This is basically a list box. It is a list of items that appear when an individual clicks on a button or text selection.It allows the person filling in the form to choose one value from a list of however many you make available on your form.

 

Required, Label, Help Text, Class and Name are all as described above in Field Options.


The Placeholder box allows you to insert text that the user will see before clicking on the dropdown box of text. If this is left blank, whatever your first option in the dropdown box is, will show here.


Options

  1. Fill in your text options on the left-hand side (Option 1; Option 2) only and leave the right-hand side blocks blank (option-1; option-2) as these are not applicable for Select/dropdown fields. 
  2. You can add as many options as you like. Clicking Add Option at the bottom right-hand side of your option box will bring up two more boxes, which read Label (left box) and Value (right box). As with Option 1 and Option 2, fill in only the left box. 
  3. Clicking the X to the right of these additional options will delete them.



11. Text Field (Single line)

This form field is used for when you want the person filling in the form to enter a single line of text, for example a password (as in the image below), email address or relatively short written answer, like a job title, for example. 


Required, Label, Help Text, Class and Name are all as described above in Field Options


  1. Type allows you to input what kind of text you expect from the user. This is then formatted accordingly, for example, selecting Password as a type will blank out the characters entered (********); Text and Email will show up as a normal line of text; and then there is a Colour option, which offers the person filling in the form a colour selector with full spectrum to choose a colour from. 
  2. Placeholder allows you to insert text that will show up in the text box field before a user types in their own text.
  3. Value allows you to enter default text, which the user can either select or type over.
  4. Max Length allows you to curtail the user's info by placing a maximum limit on the number of characters he can input. 255 characters is the maximum database size for a single-line text field (this is known as a "short interger" in data terms). 



12. Text Area

This is similar to Text Field above, but is intended for longer sections of text (more than 255 characters). This will be used when you require a paragraph or more of information from the individual filling in the form, for example a comprehensive description of duties and responsibilities in an employment role. 


Required, Label, Help Text, Class and Name are all as described above in Field Options


  1. Placeholder is not applicable here. 
  2. As above, Value allows you to enter default text that will show up in the text box, which the user can either select or type over.
  3. Max Length allows you to curtail the user's info by placing a maximum limit on the number of characters he can input. You can set your Max limit to whatever you wish ("long interger"). 


NOTE: You will need to advise the person filling in the form that they need to stretch the Text Area (Value) so that all text they input is visible. They can do this by dragging the box with their cursor at the bottom right-hand side.