Creating HTML forms using LiveCycle Designer and CSS

Using PDF technology to render forms is beneficial in many use cases. However, the features offered by this technology are sometimes not required. For instance, consider the following scenario: a team member enters information in an Air or Flash application, which uses a LiveCycle ES2 process to create and email a form to the rest of the team. Because the form will undergo very few modifications, and its primary use is to display information, HTML is a viable alternative to PDF.


Dynamically rendering an HTML form can be accomplished by using the renderHTMLForm operation in LiveCycle ES2 ( this operation belongs to the Forms service). There are two main inputs:

  • A form design file (XDP) created in LC Designer
  • An optional CSS file used for styling

It is easier to create a lot of the form’s style in LC Designer. Because HTML does not support all of the features offered in Designer, it is better to use basic functionalities such as colors, fonts, and layout to make the form readable and visually appealing. A full list of features transferable to HTML can be found at the first link below.Modifying CSS classesAfter creating the XDP form design, additional styling can be added by using a Cascading Style Sheet. The current style used by the XDP file is converted to CSS classes internal to the HTML file generated by the renderHTMLForm operation. When an external CSS file is added to the mix, if any of its classes have the same name as one of the internal CSS classes, the Forms service uses the external class.The output is still a single HTML file, the internal CSS is simply changed to reflect the content of the external CSS file. It is important to note that the standard cascading behavior of CSS follows the opposite rule. That is, the internal CSS takes precedence over external CSS files. The renderHTMLFormoperation does not follow this rule. Another key difference to note is that the entire internal class is overwritten with the one located in the external CSS file – not just properties with conflicting values as in typical CSS cascading rules.Armed with this knowledge, it is possible to use any CSS properties to further customize the rendered form. For more information on creating HTML forms using LC Designer see links 2 and 3 below.Tips1 – LiveCycle Designer borders are set to 0.0069in by default. In the Chrome browser, borders measuring less than the pixel pitch of a monitor are not displayed. To avoid this problem, either increase the size of the borders in Designer, or set them to 1px with a CSS file. Note that the pixel pitch varies between monitors so the CSS approach may be more consistent.2 – Using LiveCycle Designer to set the background color will only change the color around the form. To change the color of the entire page, simply add body {background-color: #A6A6A6;} to the CSS file (changing “a6a6a6″ to another color if desired).Links1 – A compatibility reference between LiveCycle Designer objects and HTML can be found here: http://help.adobe.com/en_US/livecycle/9.0/programLC/help/index.html2 – More information on creating HTML form with LiveCycle Designer ES2: http://help.adobe.com/en_US/livecycle/9.0/designerHelp/index.htm?content=000673.html3 – More information on the renderHTMLForm operation can be found here: http://help.adobe.com/en_US/livecycle/9.0/programLC/help/index.html

VN:F [1.9.22_1171]
Was this helpful? Please rate the content.
Rating: 1.0/10 (1 vote cast)
Creating HTML forms using LiveCycle Designer and CSS, 1.0 out of 10 based on 1 rating

2 Responses to Creating HTML forms using LiveCycle Designer and CSS

  1. its good to know someone is concerned enough to feed us technical information on how best to choose a technique that suits you. Are there any other information you would like to share on link building using styles that are not common but are quite usable? Would appreciate it,

  2. Maybe you can give us laymen a better description using non technical words. We would appreciate it.