Skip to main content

Questions

Most pages in your form will have at least one question. When in the page builder, adding questions can be done in one of two ways.

Adding a question to a page

  1. Navigate to the page management area, and open the page you wish to add the question to.
  2. Either: Click, hold and drag the required page element from the left hand panel to the drop area on the right hand side. The settings panel for the page element will open.
    • Or: Click on an element in the toolbox, the element will will expand and provide a dropdown of all sections currently on the page. Select the one where you wish to add the question, and click the Add button. The question will be added to the bottom of this section, and the settings panel for the page element will open.
  3. The fields available vary depending on the element being added. Complete the required fields, and click the Add Question button. The question will be added to the page preview area.
  4. Click the Save button to save your changes.
  5. Click Return to Form Structure button which can be found on the right hand side towards the top of the page.
tip

You can drop a question in one of two places:

  • any shaded area labelled There are currently no questions, this is the case when you're adding the first question to a page or section.
  • above or below any page elements already on your page. To do this, just drag and hold the new element over the existing one, and you'll see areas appear above and below that element that you can then drag into.

Updating a question on a page

Any question can be edited in the page builder. To do this:

  1. Navigate to the page management area, and open the page you wish to edit the question on.
  2. In the preview of the page, click on the question to be edited.
  3. The question will become highlighted, and the settings pane will open on the left hand side, populated with this question's settings.
  4. Make the required changes and click the Update Question button. The settings pane will close, and the preview will update to reflect the changes to the question.
danger

Changes made to the form structure can affect data exports.

Removing a question from a page

Any question can be removed in the page builder. To do this:

  1. Navigate to the page management area, and open the page you wish to remove the question from.
  2. In the preview of the page, click on the question to be removed.
  3. The question will become highlighted, and the settings pane will open on the left hand side, populated with this question's settings.
  4. In the settings pane, click the Delete button, a confirmation panel will be shown.
  5. Confirm the change, the settings pane will close, and the preview will update to remove the deleted question.
danger

Changes made to the form structure can affect data exports.

Setting the visibility of a question

Each question has two toggles for visibility in the page builder. One controls whether the question is visible on the online form, and the other whether it is visible on the internal form. Both of these can be on (question shown online and internally), or one may be off. It is not possible to hide a question in both the internal form and the online form.

To change a question's visibility:

  1. Navigate to the page management area, and open the page you wish to remove the question from. In the preview of the page, click on the question to be removed.
  2. The question will become highlighted, and the settings pane will open on the left hand side, populated with this question's settings.
  3. In the settings pane, toggle Show internally and Show publicly to the required positions.
  4. Click the Update Question button. The setting pane will close, and the changes to visibility will be saved.

Making questions required

Any question can be marked as required in the page builder. This means that a customer will have to answer it to proceed to the next page of your form.

To mark a question as required:

  1. Navigate to the page management area, and open the page you wish to remove the question from. In the preview of the page, click on the question to be removed.
  2. The question will become highlighted, and the settings pane will open on the left hand side, populated with this question's settings.
  3. In the settings pane, toggle Required to the on position (green).
  4. Click the Update Question button. The setting pane will close, and the question preview will update to show that the question is required.

Adding help text

Each question can have help text applied, which will show as text underneath the question. Help text is useful for explaining to the customer what you expect them to enter into the question, and can prevent unnecessarily lengthy question text.

To add help text to a question:

  1. Navigate to the page management area, and open the page you wish to remove the question from. In the preview of the page, click on the question to be removed.
  2. The question will become highlighted, and the settings pane will open on the left hand side, populated with this question's settings.
  3. In the settings pane, toggle Help text and enter some text into the text area that appears.
  4. Click Update Question. The setting pane will close, and the help text will be visible in the updated question preview.

Setting an Input Purpose of a Question

Modern web browsers provide a way to autofill values into form questions. In order to instruct the browser on the appropriate value to autofill the question with an input purpose has to be set on the question. Setting the purpose of a form input (question) is a WCAG 2.1 AA requirement.

The input purpose can be set on Text field, Date, Textarea and Dropdown component types. The Location component and Address lookup integrated components will set the Postcode fields input purpose to Postcode/ZIP Code automatically.

note

Autofill values are only applied to web and embedded forms. Internal forms used by Customer Service Advisors will not autocomplete the questions.

danger

Shared devices such as those used in public spaces e.g. Libraries and Contact Centres should have autocomplete disabled in the browser settings to ensure that user details are not stored in the browser. You should ensure any shared device is configured correctly to not leak user information.

To set the input purpose:

  1. Open a page template.
  2. Add a new question to the page or click on an existing question to open up the settings panel.
  3. Toggle on the Input Purpose setting.
  4. Choose the appropriate input purpose for the question from the listed purposes.
  5. Click Add Question or Update Question if editing an existing question.

Input Purposes

The options you can choose from come form the WCAG 2.1 specification.

NameDescription
Full nameFull name
Prefix or titlePrefix or title (e.g. Mr, Ms, Dr)
Given nameThe given (or "first") name
Additional namesThe middle name.
Family nameThe family (or "last") name.
SuffixSuffix (e.g. Jr, B.Sc.)
NicknameA nickname or handle.
Job titleA job title, or the title a person has within an organisation
UsernameA username or account name.
OrganisationA company or organisation name
Street AddressA street address. This can be multiple lines of text, and should fully identify the location of the address within its second administrative level (typically a city or town), but should not include the city name, ZIP or postal code, or country name.
Street address - Line 1Each individual line of the street address.
Street address - Line 2Each individual line of the street address.
Street address - Line 3Each individual line of the street address.
Address - Level 4The most fine-grained administrative level, in addresses with four administrative levels
Address - Level 3The third administrative level, in addresses with three or more administrative levels
Address - Level 2The second administrative level, in addresses with at least two of them. In countries with two administrative levels, this would typically be the city, town, village, or other locality in which the address is located.
Address - Level 1The first administrative level in the address. This is typically the province in which the address is located. In the United States, this would be the state. In Switzerland, the canton. In the United Kingdom, the post town.
Country codeA country or territory code.
Country nameA country or territory name.
Postal/ZIP codeA postal code (in the United States, this is the ZIP code).
Transaction currencyThe currency in which the transaction is to take place.
Transaction amountThe amount, given in the currency specified by "transaction-currency", of the transaction, for a payment form.
Language codeA preferred language, given as a valid BCP 47 language tag
BirthdayA birth date, as a full date.
Day of birth dateThe day of the month of a birth date.
Month of birth dateThe month of the year of a birth date.
Year of birth dateThe year of a birth date.
Gender identityA gender identity
URLHome page or other Web page corresponding to the company, person, address, or contact information in the other fields associated with this field
Telephone numberA full telephone number, including the country code.
Telephone - Country CodeCountry code component of the telephone number
Telephone - Without Country CodeTelephone number without the county code component, with a country-internal prefix applied if applicable
Telephone - Area CodeArea code component of the telephone number, with a country-internal prefix applied if applicable
Telephone - Without Country or Area CodeTelephone number without the country code and area code components
Telephone - Local PrefixExchange number within the telephone number without the country and area code components
Telephone - Local SuffixNumber within the exchange within the telephone number without the country and area code components
Telephone - Extension CodeA telephone extension code within the phone number
Email AddressAn email address.
Instant messaging addressURL representing an instant messaging protocol endpoint
Related Reading
WCAG 2.1: Identify Input Purpose
WCAG 2.1: Input Purposes for User Interface Components
HTML Specification: Autofilling form controls: the autocomplete attribute
Enabling autofill in different browsers