{"id":8,"date":"2016-05-07T00:58:39","date_gmt":"2016-05-06T23:58:39","guid":{"rendered":"http:\/\/beta.devon.gov.uk\/styleguide\/?page_id=8"},"modified":"2021-08-18T15:52:07","modified_gmt":"2021-08-18T14:52:07","slug":"forms","status":"publish","type":"page","link":"https:\/\/www.devon.gov.uk\/standards\/digital-design\/forms\/","title":{"rendered":"Form elements"},"content":{"rendered":"<div class=\"form-elements\">\n<h2 class=\"heading-medium\">Start pages<\/h2>\n<p>Forms that have a higher level of complexity, are transactional or require the user to provide or be aware of additional information, should have a start page. Simple forms such as contact us or newsletter signup would not need to have a start page.<\/p>\n<p>To find out more, <a href=\"https:\/\/www.devon.gov.uk\/standards\/digital-design\/start-page\/\">see our start pages section<\/a>.<\/p>\n<h2 class=\"heading-medium\">Layout<\/h2>\n<p>To avoid disrupting a user&#8217;s vertical momentum, all forms should be in a single column. More complex forms that require a greater number of fields to be completed should be split into smaller groupings to avoid the user feeling overwhelmed.<\/p>\n<p>In some cases it may be appropriate for forms to be split across multiple pages or into a series of show\/hide sections. When a form has been split in this way, there should always be a clear indication of how many pages there are and where you are in the process (see process indicators below). It is also appropriate to use a start page to inform users of what&#8217;s coming next.<\/p>\n<h2>Process indicators<\/h2>\n<ul>\n<li>Only use if absolutely needed.<\/li>\n<li>Keep process indicators simple.<\/li>\n<li>Avoid complex tabs or button.<\/li>\n<\/ul>\n<div class=\"panel\">\n<p class=\"process-indicator\">Page 3 of 9<\/p>\n<h3>Your details<\/h3>\n<div><label for=\"first-name\">First name<\/label><input id=\"first-name\" type=\"text\" \/><\/div>\n<\/div>\n<h2 id=\"form-optional-fields\" class=\"heading-medium\">Optional and mandatory fields<\/h2>\n<ul class=\"text list list-bullet\">\n<li>Only ask for the information you absolutely need.<\/li>\n<li>If you do ask for optional information, mark the labels of optional fields with &#8216;(optional)&#8217; rather than using an asterisk.<\/li>\n<\/ul>\n<div class=\"panel\"><label for=\"tel\">Telephone (optional)<\/label><input id=\"tel\" type=\"tel\" \/><\/div>\n<h2 id=\"form-labels\" class=\"heading-medium\">Labels<\/h2>\n<ul class=\"text list list-bullet\">\n<li>All form fields should be given labels.<\/li>\n<li>Don&#8217;t hide labels, unless the surrounding context makes them unnecessary.<\/li>\n<li>Labels should be aligned above their fields.<\/li>\n<li>Label text should be short, direct and in sentence case.<\/li>\n<li>Avoid colons at the end of labels.<\/li>\n<li>Labels should be associated with form fields using the <code class=\"code\">for<\/code> attribute.<\/li>\n<li>Ensure there is enough height between a label and the previous field above.<\/li>\n<li>Do not use caps in labels.<\/li>\n<\/ul>\n<div class=\"panel\"><label for=\"first-name\">First name<\/label><input id=\"first-name\" type=\"text\" \/><label for=\"last-name\">Last name<\/label><input id=\"last-name\" type=\"text\" \/><\/div>\n<h2 class=\"heading-medium\">Placeholder text<\/h2>\n<ul class=\"list list-bullet text\">\n<li>Avoid the use of placeholder text in form fields, as this will disappear once content is entered into the form field.<\/li>\n<li>Use hint text for supporting contextual help, this will always be shown.<\/li>\n<li>Hint text should sit above a form field.<\/li>\n<li>Ensure hint text can be read correctly by screen readers.<\/li>\n<\/ul>\n<div class=\"panel\">\n<p><label for=\"ref\">Reference number<\/label><\/p>\n<div class=\"placeholder\">Provided in your registration email, example XN023-012345<\/div>\n<p><input id=\"ref\" type=\"text\" \/><\/p>\n<\/div>\n<h2 id=\"form-fieldsets\" class=\"heading-medium\">Fieldsets and legends<\/h2>\n<p>Use fieldsets to group related form controls. The first element inside a fieldset must be a <code class=\"code\">legend<\/code> element which describes the group.<\/p>\n<h2 id=\"form-select-boxes\" class=\"heading-medium\">Select boxes<\/h2>\n<p class=\"text\">For smaller sets of options, avoid using select boxes (drop-down lists) &#8211; use radio buttons or checkboxes instead.<\/p>\n<div class=\"panel\"><label for=\"selectbox\">Label text for select box<\/label><select id=\"selectbox\" name=\"selectbox\" aria-invalid=\"false\"><option value=\"First Choice\">First Choice<\/option><option value=\"Second Choice\">Second Choice<\/option><option value=\"Third Choice\">Third Choice<\/option><\/select><\/div>\n<h2 id=\"form-radio-buttons\" class=\"heading-medium\">Radio buttons<\/h2>\n<ul class=\"list list-bullet text\">\n<li>Use radio buttons to let users choose a single option from a list.<\/li>\n<li>Create radio buttons with large hit areas are easier to select with a mouse or touch devices.<\/li>\n<li>Stack radio buttons if there are more than 2 options.<\/li>\n<\/ul>\n<div class=\"panel\">\n<p>Do you have British citizenship?<\/p>\n<ul class=\"gfield_radio radio-horizontal\">\n<li><input id=\"citizenship-1\" name=\"citizenship\" type=\"radio\" value=\"Yes\" \/><label class=\"wrapper-label\" for=\"citizenship-1\">Yes<\/label><\/li>\n<li><input id=\"citizenship-2\" name=\"citizenship\" type=\"radio\" value=\"No\" \/><label class=\"wrapper-label\" for=\"citizenship-2\">No<\/label><\/li>\n<\/ul>\n<\/div>\n<h2 id=\"form-checkboxes\" class=\"heading-medium\">Checkboxes<\/h2>\n<ul class=\"list list-bullet text\">\n<li>Use these to select either on\/off toggles or multiple selections.<\/li>\n<li>Make it clear with words when users can select one or multiple options.<\/li>\n<li>For more than two options, checkboxes should be stacked.<\/li>\n<li>Labels should appear after the checkbox.<\/li>\n<\/ul>\n<div class=\"panel\">\n<p>Which areas does your service cover<\/p>\n<div class=\"placeholder\">Select all that apply<\/div>\n<ul class=\"gfield_checkbox\">\n<li><input id=\"checkbox1\" type=\"checkbox\" \/><label class=\"wrapper-label\" for=\"checkbox1\">North Devon<\/label><\/li>\n<li><input id=\"checkbox2\" type=\"checkbox\" \/><label class=\"wrapper-label\" for=\"checkbox2\">South Devon<\/label><\/li>\n<li><input id=\"checkbox3\" type=\"checkbox\" \/><label class=\"wrapper-label\" for=\"checkbox3\">East Devon<\/label><\/li>\n<li><input id=\"checkbox4\" type=\"checkbox\" \/><label class=\"wrapper-label\" for=\"checkbox4\">West Devon<\/label><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p>You can view working examples of DCC forms on our <a href=\"http:\/\/forms.reworkdigital.info\/\" rel=\"noopener\">forms website<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Start pages Forms that have a higher level of complexity, are transactional or require the user to provide or be aware of additional information, should have a start page. Simple forms such as contact us or newsletter signup would not need to have a start page. To find out more, see our start pages section. [&hellip;]<\/p>\n","protected":false},"author":945,"featured_media":0,"parent":515,"menu_order":60,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"acf":[],"publishpress_future_action":{"enabled":false,"date":"2026-05-16 15:26:36","action":"change-status","newStatus":"draft","terms":[],"taxonomy":"","extraData":[]},"publishpress_future_workflow_manual_trigger":{"enabledWorkflows":[]},"_links":{"self":[{"href":"https:\/\/www.devon.gov.uk\/standards\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devon.gov.uk\/standards\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.devon.gov.uk\/standards\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.devon.gov.uk\/standards\/wp-json\/wp\/v2\/users\/945"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devon.gov.uk\/standards\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":5,"href":"https:\/\/www.devon.gov.uk\/standards\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":630,"href":"https:\/\/www.devon.gov.uk\/standards\/wp-json\/wp\/v2\/pages\/8\/revisions\/630"}],"up":[{"embeddable":true,"href":"https:\/\/www.devon.gov.uk\/standards\/wp-json\/wp\/v2\/pages\/515"}],"wp:attachment":[{"href":"https:\/\/www.devon.gov.uk\/standards\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}