Changing default styles of HTML5 forms changing-default-styles-of-html-forms

HTML5 forms are rendered using HTML5 capabilities and the styling of the rendered form is done using CSS. Default appearance of a HTML5 forms is similar to its PDF rendition. Developers can use custom CSS to change default appearance of HTML5 forms.

This article provides step-by-step information to change style of an HTML5 form and Introduction to Styles article contains detailed information about various styling aspects of HTML5 forms. Ensure that you read Introduction to styles article before performing steps mentioned in this article.

The following two images show the difference between the default and customized styles.

pictures-002-small

Style your forms style-your-forms

  1. Choose a profile to add custom styles

    Access the CRX DE interface at the URL: https://<server>:<port>/crx/de and create a profile or choose an existing profile. To know how to create a profile, see Creating a Profile

  2. Create a CSS style sheet for styling the HTML5 forms

    Navigate to the folder in which you have created the profile renderer and create a CSS style sheet file. The steps to follow are

    1. Right-click the folder and select create > create File from the menu

    2. In the create file dialog, enter the name of the style sheet. Make sure that you use the extension .css (for example, stylesheet.css)

    3. From the navigation pane, open the CSS file that you have created.

    4. Define the CSS classes of the components that you want to style and add styles in those classes.

    To know which CSS classes to create for a particular component in your HTML5 forms, see Introduction to Styles.

  3. Include the style sheet in Profile Renderer

    Open the Profile Renderer page (jsp file) in CRX DE, and include the CSS file in the page just below the XFA client library. Perform these steps to include the CSS file in profile.

    1. Search in the renderer page for the following line:

      <cq:includeClientLib categories=“xfaforms.profile” />

    2. Insert the following below the line above to include the style sheet:

      <link href=“https://experienceleague.adobe.com/path/to/stylesheet?lang=en” rel=“stylesheet” type=“text/css”/>

    3. Save the file.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2