Follow

eForms - Creating HTML/PDF Custom Form Layout

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

 

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

 

4. If your html custom form layout has more than one page and you want to provide pagination controls like:

DE-8.png

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>

5. 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 eForm field defaults and then map the fields accordingly.

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

7. To add the File Upload field into the html that can be mapped to eForm File Upload field use the following:
    <input id="…" type="file" />

8. To add the Signature field into the html that can be mapped to eForm Signature field use the following:
    <input id="…" type="signature" />

9. To add the Password field into the html that can be mapped to eForm Password field use the following:
    <input id="…" type="password" />

10. 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 eForm field. This is required when you are willing to map the html fields to eForm fields of type Dropdown, Multi Choice, Checkboxes, Extension List, Status, Priority and Group.

11. 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 eForm 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 eForm field will be removed.

    c. The value attribute of option will be ignored and will be replaced by the option text defined in the eForm mapped field.

12. If the custom form layout html contains images, css, resources, etc., then zip them up into a single file.

 DE-Zip.png

    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

 

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

 

Create fillable PDF from existing template document

1. Open Adobe Acrobat Pro DC

2. Within Acrobat, click on the Tools tab

Tools_tab.png

3. In the new window, select Create PDF option and use Prepare Form menu to create fillable PDF from existing template document

Create_PDF_options.png

 

Prepare_Form_menu.png

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. 

Add_New_Field_Toolbar.png

Common field choices includes

  • Text Fields for free response answers. They can be formatted for single or multi lines.
  • Radio Buttons for responses that require one right answer.
  • Check boxes for responses that require one or more answers.
  • 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. 

General_Tab.png

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.

Appearance_Tab.png

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.

Options_Tab.png

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.

5. Drop-down Menus: To enter in values for a drop-down, double-click on the box to open the field’s properties. Next, select the “Options” tab. Enter a value in the “Item” box, then click the Add button to add the value. Click Close when you are done.

 

Tab Order

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.

Tab_Order.png

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.


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

Saving_a_Fillable_Form.png

 

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

Restrict_Editing.png

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

Reader_Extended_PDF.png


2. Click on Save Now. Rename your file to differentiate it from the PDF version of the file.

Save_Reader_Extended_PDF_Form.png

 

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 

Tools tab.png


3.In the new window, select Create PDF option

Create_PDF_options1.png


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:

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk