Webforms

Using webforms

A webform is an advanced function used to gather responses from customers. A webform is a reusable piece of content created within the CMS that can be added to many webpages or a single webpage. It can be added to a standard page or landing page. 

Do

• Plan where the data from your webform will be stored. You may want to integrate with another system such as a CRM, TRIM or SharePoint. 
• Check the data security of the webform submissions and where the completed webforms are being sent. Find out who has access to the completed webform submissions.
• Consider the protection of privacy and privacy legislation. You will need a privacy collection notice to create a webform, and you may need to conduct a Privacy Impact Assessment, depending on the risk profile. 
• Be clear about why you are asking for information.
• Use forms to create a better customer experience.
• Use webforms instead of downloadable PDF forms. You may also want to provide the downloadable PDF form in addition to the webform for users in some situations, for example:
  • when a frontline worker may be providing a printed form to groups with low digital literacy or internet access.
  • when customers are raising sensitive complaints and want to protect their anonymity. 
• Test your form and check it is working as expected.

Don't

• Ask for information that isn't relevant or required for the purpose of your webform, especially if it is personal or sensitive information. For example, asking for first or last names when only an email address field is necessary. 
• Use the CMS as an information database or to store information. Data submitted will be removed from the CMS after a short period of time as it is expected to be securely stored elsewhere. 
• Don't use the default confirmation email message, which includes a summary of the webform data, if it contains personal or sensitive information as it can increase the risk of a data breach.

How to create a webform

To create a new webform:

1. Go to the menu and select Structure > Webforms > Forms.
2. Click the on-page button + Add webform.
3. In the Add webform pop-up box and you will need to enter the mandatory fields: 
   1. A Title for your webform.
   2. Select your agency from the Data Custodian (owner) look up. 
4. Click Save. 
5. After the form is saved you will automatically be taken to the Build tab > Elements tab within your new form. 

There are then 4 main steps you will need to complete to create and publish a basic webform:

1. You will need to build the questions for the form.
2. You will need to write the confirmation page message and confirmation email that the customer will see after they submit the form.
3. You will need to view and test your webform before it is published to check it is working as expected and that submissions are being received. 
4. After you webform is created, you can then add it to a webpage. 

How to build the questions of your webform

You webform is built by adding individual question types, for example checkboxes or text field elements, into the webform. 

To add questions:

1. Go to your webform, (click Edit if it is not already open) and select the Build tab > Elements tab.
2. Click the + Add element button. You will be presented with many element types, such as Checkboxes and Text fields. 
3. Find the type of element you want to use and click Add element and the Add element box will open to complete the element details. By default the General tab will be displayed.
4. In the General tab you will need to enter the form question, such as 'First name,' in the mandatory Title field. If the webform has multiple choice answers, such as checkboxes or radios, you will also need to add in the answer options.
5. You can choose to make your question a required field in the General tab by ticking the Required box under Form validation. 
6. Click Save.
7. The Add element pop up will close after it is saved and you will see a list of all your elements. You can drag and drop your elements to change the order of your questions. You can also check the Required box on this screen to make a question mandatory.
8. Click the Save elements button at the bottom of the elements list to save your changes. 

Adding a privacy collection notice (PCN)

You must add the Privacy notice element when you are building your webform.

1. Click the + Add element button on the webform, within the Build tab > Elements tab.
2. In the elements search for Privacy notice and click the + Add element to add it to your form.
3. In the edit pop up add the title of Privacy notice.
4. Under the heading Privacy notice settings use the drop down to select the relevant Privacy collection notice.
5. Tick the Required box under the heading Form validation.
6. Click the Save button to save the Privacy notice element.
    

This webform example shows some of the most frequently used element types. 

Webform example

Confirmation the form has been submitted

After a customer submits their form, they should understand it has been successfully submitted. 

Confirmation that the form has been sent is usually done in 2 ways:

• on the website with a confirmation message after the customer has clicked the submit button, and
• an automated email confirmation sent to the customer.

Confirmation message on the website

To edit the confirmation message:

1. Go to the Settings tab > Confirmation tab, within the edit screen of your webform. 
2. Choose the Confirmation type or leave the default option of Page.
3. Scroll to the heading Confirmation settings to add a Confirmation page title and Confirmation message.

A customised Confirmation message can include:

• details about when the customer will have their form processed by staff
• contact details for checking the progress of their form
• links to other parts of the website that may relevant to the customer. 

Here is an example Confirmation page message:

Confirmation email

Customers usually expect to receive an email confirming that their webform has been submitted. 

To edit the confirmation email:

1. Go to the Settings tab > Emails / Handlers tab, within the edit screen of your webform.
2. Click the + Add email button. 
3.  Click the Edit button of the new email field, then scroll to the heading titled Message.
4. Under the Message heading select Custom subject from the Subject dropdown. You can now write your own email subject.
5. Below the Subject field, is the message field. The default message the form generates is the information that the customer provided in their form.
6. To change the email message use the Body dropdown to change the message to either Custom body, or Twig template. You can then edit your email message. 
7. Click Save.

See storing webform submissions for your how your agency should receive completed webforms. You agency should not receive confirmation emails as this isn't a secure way to collect or store submission data. 

Custom body

Custom body gives you an easy to use WYSIWYG interface to create your message. For most webforms, and editors, custom body is the best option to choose. 

Twig template

The twig template should only be used if you are familiar with editing HTML and webform tokens.

Form tokens are functional elements that pull data from the form the customer submitted. For example, a form token for the email address will automatically pull in the unique email address that the customer has provided in the email address field of their form. 

A twig template should be used when you want to populate the confirmation email with unique data the customer has entered into the form. For example, if your webform is for your customer to choose 1 day to attend a multi-day event, using the twig template and retaining the form tokens, the customer email confirmation will show which day they are attending.  

Don't use the twig template with the default tokens if your webform contains sensitive or personal information.

Add a reCAPTCHA

Use reCAPTCHA to reduce the chance of automated spam messages.

1. Select Settings tab > Email/Handlers tab then click the button + Add handler, within your webform edit screen. 
2. Find reCAPTCHA in the list of handlers and click the Add handler button. 
3. Select Edit from the right-hand menu on the new reCAPTCHA handler. 
4. Choose reCAPTCHA v3 (invisible) for single page forms or reCAPTCHA v2 (visible) for multi-page forms from the Handler settings section.
5. Enter 50 in the reCAPTCHA score box. 50 is the recommended initial setting for reCAPTCHA score. If high levels of automated spam continue, then the score can be increased, but if set too high, it may block genuine submissions. It will NOT block manual spam submissions.
6. Replace the Custom error message with:
   
   “Thank you for sending us your request. Unfortunately there was an error during validation of your request. Please try to reload the page and submit again.”
    
7. Click the Save button. 

Test your webform

After you have built your webform you should check it is working as expected.

To view and test your webform:

1. Go to the View tab within the webform edit screen.
2. Check it is displaying as expected, then test your form.
3. Go to the Test tab in the webform edit screen.
4. Change the email address to your own email address to test the confirmation email. All other fields can be left with the pre-populated dummy data. 
5. Click the Submit button. 
6. Check the Confirmation page that displays after you click submit.
7. Click the Back to form link.
8. Go to the Results tab > Submissions tab, in your webform edit screen. You should see your test submission there. 
9. You can download all the submissions in the Results tab > Submissions tab or you can delete submissions in the Results tab > Clear tab. 

Storing webform submissions

The CMS does not store captured webform data because of security and privacy reasons. You will need to ensure any submissions made to your webform are stored in a secure location.

Email and shared email boxes are not supported end points as they have been deemed not secure.

You can store submissions in a location that meets the key considerations, such as:

• Sharepoint
• Salesforce
• any CRM product
• database products that accept one of the listed supported integrations using one of the following secure methods:
  • JWT
  • API Key
  • OAuth.

Key considerations include:

• Secure layer transport
• Encryption at Rest
• Access Controls
• MFA
• Least privilege principals.

Contact your agency’s IT team to see what options are available to you and to help with the set-up. If you need further help from the nsw.gov.au team to set-up your webform you can raise a HelpHub ticket.

Adding the purpose for your data collection to your webform

1. Scroll to and open Third party settings tab > DCS webform customisations tab > Config tab.
2. Scroll to the heading Privacy information.
3. In the Purpose of data collection text field add a description, in lower-case, of why you are collecting data. You should describe the action that happens when a user submits the form, for example, contacting the agency. This will populate the Privacy element correctly.
4. Below the text field you can also change the Agency retention period. By default the CMS will only hold submissions for 10 days but you can make this longer or shorter depending on the policy of your agency. 
5. Scroll to the bottom of the page and click the Save button. 

How to add a webform to a page

To add a form to a page, go to the page and navigate to the edit screen, just as you would for adding other types of blocks.  

1. Click the Add block drop down and select Add Custom block.
2. In the Type drop down select Advanced block.
3. In the Plugin dropdown select Webform.
4. Use the Webform field that is generated to search for and select the title of your webform. 
5. Save your page to display the webform. 

Searching for webforms that have already been created

If you need to find a form that has already been created, you can find it by going to the menu and selecting Structure > Webforms > Forms and using the on-page filter to search for the webform.

Only the webform creator will be able to access the form and give access permission to others.

Giving editor access permissions to others for your form 

To give editing access to others:

1. Go to the Settings tab > Access tab in the edit screen of your webform.
2. Scroll to the bottom of the page and open the final accordion Access webform configuration.
3. Tick the box of what type of access level you would like to give, for example editor.
4. Scroll down to the Users search box and look up the CMS editor you want to give that access to. The person you are giving access to must already have CMS account. 
5. Click the Save button.