A form page serves as a dedicated space on a website for gathering information, feedback, registrations, and other interactions with visitors or users.
When creating a form page, use the Hero variant 3 module.
A. Title
Create a clear and descriptive title for the form page. The title should convey the purpose of the form or the action users need to take.
B. Short introduction
Write a brief introduction that provides context for the form and explains why users should fill it out. This introduction should be concise and engaging. It should be around two sentences or approximately 100 characters and can be added below the title.
There are four main elements to a form (see the Form module for more information):
A. Step indicator (optional)
The step indicator can be used to make long forms seem shorter and easier to fill out, thereby likely increasing the form’s conversion rate.
B. Input fields
Use the Form module to build your form section. It is important to be deliberate and precise when setting up text fields.
The form section should include the following:
- Section title
- Short description if necessary (Optional)
- Input fields - these include text fields, drop downs, check boxes and radio buttons
- Error messages - make sure that these are clear, unambiguous and actionable
Note: 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
We recommend dividing the form into clear sections with titles to make it easy for users to understand and complete.
Additionally, please keep the following in mind when you build a form:
- The fields can be independent or have a relation (Country + State)
- Mandatory fields should be indicated and show the users where not correctly filled
- Additional information can be added using either supporting text or tooltips
- Helpful and actionable error messages should be supplied when form fields are not filled in correctly
C. 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.
D. CTA
Use a prominent and action-oriented CTA button, such as “Continue”, "Submit," "Join Now," or "Get Started," to encourage users to click the button.
The disclaimer is required for ‘request a sample’ pages in the US
Include any necessary legal disclaimers or disclosures related to the campaign. Ensure they are clearly visible and legible.
The component is used on the sample request, it includes the following:
- ‘Important’-tag
- Headline
- Bulleted list
- Hyperlink to ‘terms and conditions’
Placement on the page:
- Desktop: Right column, below the image
- Mobile: Centred, below the image
Plan for a confirmation or success page that users see after submitting the form. Clearly communicate that their submission was successful and provide any relevant next steps or information with the Confirmation or success pages.
A. Confirmation page
The confirmation message is displayed after the customer submit the form. The message may be personalized.
B. Success page
The success message is displayed after the customer submit the form. The message may be personalized.