Skip to main content

Creating a Form page in Typecase

How to create a Form page on the University website. Part of the Typecase manual.

Only Typecase Admins can create Forms.

If you think you need a Form, read this guide first to help you decide.

The purpose of a Form

Use a Form page to allow users to complete a form without them having to leave the University website.

You will need to create a form in an application like Microsoft Forms or Gecko before you can embed it on the Form page in Typecase. This will display the form on the University website using the branding.

If you are collecting personal data from users, it is a legal requirement for your form to include a statement about how that information will be processed. You should read the data protection guidance.

Read more about choosing a content type for your web content.

By choosing to use the Form template, you will be able to get Google Analytics data about usage of the page which may not be available if you link to the form created without the Typecase template.

Appearance

A Form on the University website is made up of a Title and Summary and a large embed section that displays the external form. The appearance of the embedded form will depend on which application you use to create it.

There is also a Thank you page that is displayed after users have completed the form so they know that their responses have been submitted. The text can be customised in Typecase.

Accessibility

You must make sure your content is accessible.

As a public sector body, we're legally required to make the content on our website as accessible as possible. The government checks our content to make sure it complies with the internationally recognised guidelines from the World Wide Web Consortium (W3C).

Find out more about accessibility or contact beta-content@bath.ac.uk if you have any questions.

Creating content

Core components

The Form must have a User need, Title, Summary, Navigation and Owning organisation. Read more about these in our Core components guide.

The Form Title should tell users what the form is and describe its use. For example, 'Open Day booking form'.

Don't give the Form a title that sounds like a call to action. Any active commands should be used in the Summary, not the Title.

Labels

You can create a page without using Labels. If you do need Labels, find out more about how they work.

Adding Form information

Introduction

The Introduction component in Typecase

In the Introduction field, write some copy to tell people what to expect from the form, what information they need to complete it and what will happen after they submit it. This will be displayed on the page above the embedded form.

Form embed

The Form embed component in Typecase

Paste the URL of your Gecko or Microsoft form in the 'Form web address (URL)' field. Do not use an embed code.

Editing the iframe height

Add the size of the form in pixels to the 'Height of iframe' field. For example, '1200'.

Preview your page on desktop and mobile devices to make sure the iframe is long enough for the form and doesn’t truncate it. If the form is truncated, you’ll see a scroll bar inside the iframe. This means you need to increase the height of the iframe. If you make the iframe too long, there could be too much space between the bottom of the form and any footnotes you include. This means you need to decrease the height of the iframe.

Removing an additional title and summary from a Gecko form

When previewing a page containing a Gecko form, you may discover that the Typecase template's title and summary are followed by an additional title and summary built into the Gecko form itself.

To remove this redundant information, replace the word 'modern' with 'iframe' in the Gecko form URL. For example:

https://app.geckoform.com/public/#/modern/21FO00klriaon200dftmwPgWh3

Would become:

https://app.geckoform.com/public/#/iframe/21FO00klriaon200dftmwPgWh3

These Gecko form URLs were made up for the purpose of this example.

Data protection

If your form already includes a data protection statement or does not collect any personal data, click the 'Yes' button below the 'Data protection statement' heading. If your form does collect personal data but does not include a data protection statement, you must add one using the form application.

Thank you page

The Thank you page component in Typecase

In the 'Thank you message' field, add some copy to thank users for completing the form. You can also add information about what will happen next, for example, if they will be sent a confirmation email or ticket.

To preview your thank you message, you can do by adding '/thank-you' to the end of the preview URL of the form. For example: https://www.bath.ac.uk/forms/undergraduate-open-days-interest-form/thank-you

Campaign tracking

The Campaign tracking component in Typecase

You can use this section to track which parts of the form users are interacting with.

Only complete these fields if the customer relationship management (CRM) Manager has created hidden campaign tracking fields in the form.

Ask the CRM Manager the names of each of the hidden campaign tracking fields in the form. Add those names to the appropriate fields in Typecase.

Google Analytics goal

The Google Analytics goal component in Typecase

If you have created a goal in Google Analytics to measure the success of this form, add the URL of the goal page here. This will create a link from Typecase to your goal, just for your reference. It will not be published on the form page.

Bottom of page components

You can choose to add a Footnotes component if needed.

Unpublishing your Form

You should unpublish your Form from the live website when it is no longer needed or when you will no longer be reading the responses. You can find out how to do this in the Maintaining your web content guide.

Requesting a Form

Email web-support@bath.ac.uk You will need to provide a User need, Title and Summary for the page and explain why the Form is required.

Contact us

If you have any questions about creating content or using Typecase, get in touch.


On this page