The form banner pattern allows form elements to be used in full-width banner sections.
Rules for form banner
- There must be no more than one form banner on a page.
- May be used anywhere within the main body of a page.
- Styling must not deviate from the options provided. This includes colours and form elements.
- The background colour must either be light grey, light blue or dark green.
- If any other form banner options are required, please contact: firstname.lastname@example.org.
- For complicated or lengthy forms, a standard implementation of a form may be more suitable.
The simplest implementation places the form underneath a heading and optional sub heading.
Form banner - side by side
This places the form alongside a column of text content. This option is most suited to simple forms that have an introduction that would wrap over multiple lines. This example shows a basic newsletter subscription implementation.
- The form should have no more than three or four rows of input fields.
Form banner - inline
This option places the form directly underneath the text content. This example shows a set of filters that can alter a set of results.
- Inline form elements should only be used for filters.