FORM

Layout options

• The form module can contain the following elements: 
• Title*
• Introduction (optional)
• Step indicator (optional)
• Input fields*
  
  
  • Text fields and drop down
  • Check boxes and radio buttons
• Consent section (optional)
• CTA*
   

*required element

Title

Give each form section a clear and informative title that indicates the type of information being collected.

Character limit: 42
Do not exceed two lines of text on 360px viewports

Introduction

Include a brief description that explains the purpose of the section and provides context for the form fields.

Character limit: 124
For general copywriting guidelines, please refer to the Writing rules.

Step indicator

The step indicator is primarily used on campaign pages to allow users to navigate directly from a campaign to step 2 in the form. It can also be used to make long forms seem shorter and easier to fill out, thereby likely increasing the form’s conversion rate.

Input fields

Text fields and drop downs

Text fields are generally what makes up the main part of a form. The individual text fields and drop downs can contain the following elements: 


1. Label*

   Short text describing the desired input (eg. name, city, zip code, etc.).
Labels can include an asterix(*) that indicates that an input field is mandatory.

2. Input field*

   Either a text box or a drop down. Input fields can be either 1:1, 1:2 or 1:3 column width. Please make sure to size the text fields to fit the expected input.

3. Error message*

   All input fields should include helpful and actionable error messages for when the form field is incorrectly filled out. You can find the full list of error messages in the error message repository.
4. Example text (optional)

   Input fields should include an example text inside it to help show users what kind of input is expected.

5. Supporting text (optional)

   Supporting text can be used to support the label by providing additional information. Supporting text will be displayed underneath the form field.
Character limit: The text should not be longer than the width of the form field it describes - on on 360px viewports.

6. Tooltip (optional)

   Tooltips have the same function as supporting text but can hold more text than the supporting text can. The tradeoff is that the tooltip has to be hovered for the contents to be visible. Because of this we generally recommend using Supporting text over tooltips whenever possible.

7. Info box (optional)

   Info boxes can be used to provide additional information or instructions related to the form in general. Keep the information concise and relevant to help users complete the form successfully. It should be used when there is an important message that needs to be highlighted, to avoid friction for the customer, i.e.  “Please note that you can only order a free sample one time. Make sure to choose the right sample.“ as seen on the request a sample page.
    

*required element

Check boxes and radio buttons

There are two formats of check boxes and radio buttons:

1. Check boxes / radio buttons with large text: Checkboxes and radio buttons with large text can be used for multiple selections within a single field (they are currently used for consent). Please ensure they are neatly aligned and labeled appropriately.

2. Check boxes / radio buttons with small text: The checkboxes and radio buttons with small text can be used for secondary content/functions such as hiding repetitive form fields like ‘delivery address same as company address’ within the form.

Ensure that checkboxes and radio buttons are visually distinct and easy to select. They should be accompanied by clear labels and concise descriptions. 

Consents (terms and conditions *)

Most forms require some form of consent such as opting into newsletters or agreeing to terms and conditions. Clearly explain the implications of each consent.

The consent and terms and conditions are required elements, but the content of the terms and conditions are dependent on the form and the market. Please ensure that the text is easy to read and understand and that it includes all necessary legal text, such as terms and conditions, privacy policy links, and consent statements as well as hyper links to all relevant ‘external’ documents (eg. Terms of use, Privacy policy, CA Privacy policy etc.). 

The consent section is generally located immediately below the form and just above the submit CTA.

CTA

Either used to continue to the next step or to submit the form. We recommend right aligning the CTA, unless the form calls for a different alignment (for example the form to unlock case studies and white papers).

Colorways

Error messages

You can find an overview of all possible error messages for forms here: https://henkelgroup.sharepoint.com/:x:/r/teams/ProjectNow/_layouts/15/Doc.aspx?sourcedoc={365060EB-96B9-43AA-880B-95FE95CC9FFF}&file=DECP error messages.xlsx&action=default&mobileredirect=true

Examples of use

DON’T: Use eg. a drop down to ask a yes or no question. Make sure to use the optimal input type for the task.

DON’T:  Create ambiguous or confusing labels.

DON’T:  Write generic or non-actionable error messages.