Guidelines for creating HTML Custom Form Layouts
1. HTML template files with extensions .html, .htm or .zip (compressed zip file containing the html file along with resources such as images and css used in the html) are considered as valid files to be uploaded for custom form layout.
2. The HTML template should not contain any script tags and JavaScript. Any JavaScript present in the html will be removed by our conversion process.
3. All CSS should be created in an external stylesheet.
4. It is recommended that the Html body tag should contain the first element as div with id=”customform”. The entire html template body should be within this customform div.
<html>
<head>…</head>
<body>
<div id="customform">
…
</div>
</body>
</html>
5. It is recommended to use html <label> with for attribute, like <label for="FirstName">Enter your first name</label><input type="text" id="FirstName" name="FirstName" />, to automatically add the label for the form fields. This label will then appear for field in form design and as column header in data exports.
Note: Link to download the sample layouts is available at bottom of this article. Feel free to download and use them as Custom Form Layouts for your Workflow.
Click here to view a working example with all the supported fields with HTML custom form layout.
Click here to view a working example of HTML custom form layout in French language.
6. If your html custom form layout has more than one page and you want to provide pagination controls like:
It is required that the Html body tag should contain the first element as div with id="customform" and within this div add the contents of each page into a container div having an attribute as data-page-no="1" as:
<div id="customform">
<div id="page1" data-page-no="1">
...
</div>
<div id="page2" data-page-no="2">
...
</div>
</div>
7. The html custom form layout should not have any default values for the controls. If you want any default values to be set, then set them in the Workflow field defaults and then map the fields accordingly.
8. In the html, it would be nice to add a red * next to the required fields. This way user using the custom form layout will easily recognize the required fields while submitting the data.
9. To add the File Upload field into the html that can be mapped to Workflow File Upload field use the following:
<input id="…" type="file" />
10. To add the Signature field into the html that can be mapped to Workflow Signature field use the following:
<input id="…" type="signature" />
11. To add the Password field into the html that can be mapped to Workflow Password field use the following:
<input id="…" type="password" />
12. For the html fields Checkbox and Radio button where users have to select value(s) from a pre-defined list of items, it is necessary that the html option’s value should be the same as the display name on Workflow field. This is required when you are willing to map the html fields to Workflow fields of type Dropdown, Multi Choice, Checkboxes, Extension List, Status, Priority and Group.
It is recommended to use html label tag with for attribute, like <label for="control_id">display_text</label>, to add the label for the checkbox or radio button options.
For example, you can add a checkbox list to the html as:
<div>
<label>Country</label><br/>
<input type="checkbox" name="country" id="chkEngland" value="England"><label for="chkEngland">England</label></input><br/>
<input type="checkbox" name="country" id="chkNorthernIreland" value="Northern Ireland"><label for="chkNorthernIreland">Northern Ireland</label></input><br/>
<input type="checkbox" name="country" id="chkIreland" value="Ireland"><label for="chkIreland">Ireland</label></input><br/>
<input type="checkbox" name="country" id="chkScotland" value="Scotland"><label for="chkScotland">Scotland</label></input><br/>
<input type="checkbox" name="country" id="chkWales" value="Wales"><label for="chkWales">Wales</label></input>
</div>
In order to map the above custom form layout field with the workflow Checkboxes field, configure the workflow field as:
Similarly, you can add a radio button list to the html as:
<div>
<label>Country</label><br/>
<input type="radio" name="rcountry" id="rdoEngland" value="England"><label for="rdoEngland">England</label></input><br/>
<input type="radio" name="rcountry" id="rdoNorthernIreland" value="Northern Ireland"><label for="rdoNorthernIreland">Northern Ireland</label></input><br/>
<input type="radio" name="rcountry" id="rdoIreland" value="Ireland"><label for="rdoIreland">Ireland</label></input><br/>
<input type="radio" name="rcountry" id="rdoScotland" value="Scotland"><label for="rdoScotland">Scotland</label></input><br/>
<input type="radio" name="rcountry" id="rdoWales" value="Wales"><label for="rdoWales">Wales</label></input>
</div>
In order to map the above custom form layout field with the workflow Multiple Choice field, configure the workflow field as:
13. Please note that following is applicable to html fields Select and List (e.g.: <select [multiple]><option>…</option></select>):
a. Options in the html will be populated from the Workflow mapped field.
b. The style and formatting of the matching option will be retained whereas for options in the html field that do not match with the Workflow field will be removed.
c. The value attribute of option will be ignored and will be replaced by the option text defined in the Workflow mapped field.
For example, you can add a select (dropdown) field to html as:
<div>
<label>Country</label><br/>
<select id="ddlCountry" name="country">
<option value="England">England</option>
<option value="Northern Ireland">Northern Ireland</option>
<option value="Ireland">Ireland</option>
<option value="Scotland">Scotland</option>
<option value="Wales">Wales</option>
</select>
</div>
You can add a list field to html as:
<div>
<label>Country</label><br/>
<select id="lstCountry" name="country" multiple="multiple">
<option value="England">England</option>
<option value="Northern Ireland">Northern Ireland</option>
<option value="Ireland">Ireland</option>
<option value="Scotland">Scotland</option>
<option value="Wales">Wales</option>
</select>
</div>
14. If the custom form layout html contains images, css, resources, etc., then zip them up into a single file.
a. The zip file should contain at least one file with extension .html or .htm.
b. When multiple html files are present in the zip, then system will consider a file for custom form layout based on following order:
i. Html file with the same name as zip file.
ii. default.html / default.htm
iii. index.html / index.htm
iv. home.html / home.htm
15. You can use following HTML markup to map existing Workflow Table field with HTML type custom form layout:
<div><input id="…" type="table" /></div>
Note: It is required that the table field is added with in a div containing only the table field.
To customize the overall look of table type field in HTML type custom form layout; you can override the default styles given in CSS file tablefields.css in the head section of your custom form layout html markup like below:
<head>
<style>
.tblTableField > tbody > tr > td, .tblTableField > thead > tr > th {
font-family: monospace;
border-color: rgb(169, 169, 169)!important;
font-size: 11pt;
}
.tblTableField > tbody > tr > td > input, .tblTableField > tbody > tr > td > textarea {
font-family: monospace;
font-size: 11pt;
}
</style>
</head>
Note: You can customize any class defined inside tablefields.css based on your requirement.
16. To add the File Download field into the html that can be mapped to Workflow File Download field use the following:
<input id="…" type="filedownload" />
17. To add the Create Folder field into the html that can be mapped to Workflow Create Folder field use the following:
<input id="…" type="createfolder" />
Create Fillable PDF Custom Form Layouts
Preparing the Original File
You can convert numerous file types into fillable PDF forms including Microsoft Word or Excel documents, non-interactive PDFs, and even scanned paper documents. Acrobat Pro analyzes your document and adds form fields automatically. Most legible form fields can be detected and created automatically. If Acrobat cannot detect a particular form field automatically, you can quickly and easily add your own.
Before you convert an existing form into a fillable PDF form, edit the form carefully.
- Allow enough room for the fields that you will add to the form
- Add underscored blanks where you want a fillable text field to appear on the form
- Plan where you want radio buttons, drop-down menus, and read-only fields
Refer Adobe Acrobat Pro DC for product details and subscription. Note: Current document is based on Adobe Acrobat Pro version 2015.017.20053
Note: Link to download the sample layouts is available at bottom of this article. Feel free to download and use them as Custom Form Layouts for your Workflow.
Click here to view a working example with all the supported fields with PDF custom form layout.
Create fillable PDF from existing template document
1. Open Adobe Acrobat Pro DC
2. Within Acrobat, click on the Tools tab
3. In the new window, select Create PDF option and use Prepare Form menu to create fillable PDF from existing template document
4. Browse for the file and click on Start
Fields
Adobe Acrobat Pro automatically converts underscored blanks into fillable text fields. You may need to add additional fields to complete the form. To do so, right click on the document area or use the below field toolbar at the top to add new fields to the form. Choose the desired field and place your mouse pointer in the location you wish to place your fillable field, and then click on the screen to place the field.
Common field choices includes
- Text Fields for free response answers. They can be formatted for single or multi lines.
- Check Boxes for responses that require one or more answers.
- Radio Buttons for responses that require one right answer.
- Drop-down Menus, a space-efficient way to display multiple responses.
Multiple fields can be aligned by selecting the fields, right clicking on the highlighted fields, and choosing the desired alignment.
Use highlighted help icon to know more about supported field types.
Properties
The properties of each type of field can be modified. Select the field and right click to see the field property options.
1. Rename the field if needed. The tool tip is the word that pops up when the reader hover mouse over the field.
2. When changing the appearance of your form, be sure to select a font and font size that is compatible to the font type and font size on the original form.
3. Depending on your needs, you can limit the field to a single line or multi lines. If you select Multi-line, the field will scroll if it runs out of space for the words.
4. To test the field properties, click on Preview and type information into the fields. Then click on Edit and adjust the field properties as needed.
Check Boxes Field
To create a group of checkboxes in the PDF custom form layout, add the checkbox and set the Name property to GroupName [OptionName], group name followed by option value enclosed in square brackets.
For example: You can group the country checkboxes by setting the name as Country[England], Country[Northern Ireland], Country[Ireland], etc.
The value for the checkbox can be set on the Options tab Export Values textbox.
After adding all the checkboxes the fields will be available in the PDF as:
Checkboxes whose Name property do not contain group name & value pattern are considered as individual checkboxes, such as an “I Agree” checkbox.
Radio Buttons Field
To create a group of radio buttons in the PDF custom form layout, set the Name property to be the same across multiple radio buttons.
The value for the radio button can be set on the Options tab Radio Button Choice textbox.
For example: You can group the country radio buttons by setting the Name property as rCountry and value of each radio button as England, Northern Ireland, Ireland, etc.
After adding all the radio buttons the fields will be available in the PDF as:
List Box Field
To add a list of choices in the PDF custom form layout, click on the following icon in the toolbar and set the Name property (to properly identify the field), e.g. lstCountry.
To add list items to the list go to Options tab and enter a value in the Item textbox, then click the Add button.
The added options can be reordered or removed by selecting the item from the Item List and clicking the available buttons.
Dropdown Field
To add a dropdown field in the PDF custom form layout, click on the following icon in the toolbar and set the Name property (to properly identify the field), e.g. ddlCountry.
To add dropdown items go to Options tab and enter a value in the Item textbox, then click the Add button.
The added options can be reordered or removed by selecting the item from the Item List and clicking the available buttons.
Tab Order of Fields
When filling out a form, recipients should be able to tab from field to field in chronological order. In the Fields pane located in the bottom right hand corner of the screen, you can check the tab order of the fields. To change the tab order, click and drag the field names in the Fields pane. Another way to change the field tab order is to use the Tab Order drop-down menu.
Once you have placed all of your field boxes where you would like them to stay, click the Preview button to see what the form looks like from a user's perspective. Go ahead and fill out your form as a user would to see each field’s placement.
Table Type Field
To add a table type field in the PDF custom form layout like below
Each control name on PDF has unique field name hence to map PDF custom form with table type field following criteria must be matched:
- Each column name should start with TableName_Row[RowNumber]_ColumnName examples POItem_Row[1]_Quantity, POItem_Row[1]_UnitPrice, POItem_Row[2]_Quantity, POItem_Row[2]_UnitPrice etc
- Important Note: RowNumber should always start from 1
System will check for occurrences of above mentioned pattern while PDF type custom form layout mapping. PDF fields with above mentioned pattern are only allowed while mapping with particular table field column.
Saving a Fillable PDF Form
You can save the created fillable form using the save icon on the top left corner. It will display following options to save file
Reduce File Size checkbox
Clicking the Reduce File Size checkbox will shrink the saved file size if possible
Restrict Editing checkbox
1. Click the Restrict Editing checkbox at the bottom of the right hand pane to open the Password dialog box
2. Create a Permissions Password and confirm it, then click OK
3. Remember to save the file to apply the security settings
Note: This method will apply Acrobat's default security settings. Choose File > Properties, and click the Security tab to further customize the settings.
Saving a Reader Extended Version of your Form
Reader Extended PDF which allows recipients to save the information typed into the form fields.
1. Go to File > Save As Other > Reader Extended PDF > Enable More Tools
2. Click on Save Now. Rename your file to differentiate it from the PDF version of the file.
WARNING: Once you save a file as a Reader Extended PDF, you can no longer edit the form fields in that file.
Create fillable PDF from scratch
You can create PDF from scratch using Create Form option instead of Prepare Form option like below:
1. Open Adobe Acrobat Pro DC
2. Within Acrobat, click on the Tools tab
3.In the new window, select Create PDF option
4. Select the Blank Page option and click on Create
Still Have Questions?
If you have further questions, please feel free to contact us and we will be happy to assist you.
Sample Custom Form Layouts:
0 Comments