22 Mar 2022

Design a form with HighQ Forms

HighQ Forms allows you to create multiple forms based on an iSheet.

To use the HighQ Forms designer, first:

  • Create an iSheet that contains columns for the data you need to collect.
  • Enable HighQ Forms at the System and Site level (in iSheet module settings).

When HighQ Forms is enabled for an iSheet, a default form is automatically created, using default options.

Forms that contain up to 2,500 columns have been tested, with negligable impact on performance.

Managing HighQ Forms

Open iSheet settings in the Admin module.

Click More actions for the iSheet, then select Manage forms:

Manage forms opens. Click the name of the form to edit the form.

Edit a form

The Edit form window provides the tools needed to design and configure your form.

Tabs divide the configuration into five steps:

If you need to embed the form, the embed code is available in the More actions menu.

Layout

The layout section allows you to design the form layout, including which columns to include, and optionally add a header and footer.

Use the Style tab to apply a custom style to the form layout.

Please note that in version 5.7.2, an update was introduced to apply permissions of the attachment columns when the attachment column is a custom location

Header

The header is displayed at the top of your form; for example, a header typically contains elements such as a logo, introduction and instructions.

Click the Header row to open or close the edit field.

Type text into the field and use the toolbar to add formats, tables, links and images.

iSheet columns

The iSheet columns section defines the underlying layout of the form itself. Each column is displayed as a field to fill in the final form; for example, text columns require typed text and a choice column provides a drop-down menu with predefined answers.

As of October 2022, text from choice columns in drop-down menus is wrapped to fit the width of the drop-down menu.

If you have many columns, you can use iSheet sections to divide the form into pages.

The layout adapts automatically to any changes you make in the section.

To change the look of the fields (colour, size, etc.), open the Styles tab.

To change the order of the fields either:

  1. click and hold the pattern of dots on the left of the field, then drag it to the new position, or 

  1. click the More actions button at the right of the field, then select Move up or Move down.

 

You can set the width of each field; click the More actions button at the right of the field, then select the width: 33%, 50% or 100%.

For example, three fields at 100%:

Three columns at 33%:

A mix of widths:

To change the width of all columns in a section, click the More actions button in the iSheet columns bar and select the width:

Footer

The footer is displayed at the bottom of your form; footers typically contain, for example, legal information and notes.

As with the header, type text into the field and use the toolbar to add formats, tables, links and images.

Dividing the form into pages with sections

You can use iSheet sections to divide your form into pages. By default, each section is shown as a separate page.

Click the row to open the section and edit the order and size of the fields:

The title of the row is the same as the name of the section.

Confirmation

The Confirmation tab allows you to either display a message after the form has been completed and submitted, redirect the browser to a website, or both.

Select Page redirect, then enter a URL to send the submitter to a web page of your choice. This can display any content you choose, such as a thank you message, to provide further contact details or additional information.

Select Confirmation message to display a message without having to create a separate webpage.

Select Include redirect button to add a button below the message; you can define the button text, URL and alignment. 

As of October 2022, Open in allows you to choose if the URL is opened in a new window, or uses the same window in the browser.

If the submitter clicks the redirect button the browser opens the webpage of your choice, similar to Page redirect, above.

 

Notifications

The Notifications tab allows you to send a custom email to the submitter after the form has been submitted. This is able to send an email to a non-registered user, as long as they entered an email address in the form.

You can create multiple notifications for different purposes. Click Add notification to create a message.

Give the notification a Name, the enter the information that is used to generate the email.

Use Send each 'To' recipient a separate email to generate separate email threads. 

You can use variables, taken from the iSheet and data entered in the HighQ form, to customise the email. For example, you can use some of the submitted answers to highlight how the recipients of this email should proceed. 

Use the Email address column to fill the email To field if you need to send an email to an non-registered, or 'external', submitter.

You can only import variables from single line text (SLT) and multi-line text (MLT) columns.

Click Save to create the notification.

When a notification is first saved, the status is Archived so that the form can be completed before notifications are sent.

Click More actions then Activate to start sending notifications.

The More actions menu also allows you to Edit, Copy or Delete the notification.

Styles

The Styles tab allows you to apply custom styles to the published form. Use styles to apply your brand colours and graphic design to the form.

It is possible to apply separate styles, depending if the form is published as its own page, or if it is used as an embedded element.

The system style is the default style, as set by a system admin for the instance.

Click Add style to add a new style.

Give the style a name, then add definitions of colours, sizes, borders, etc. in the window.

A Preview is displayed in the right column that shows the style definitions for each item in the form.

After you have entered the new style, click Save. The style is shown in the style list.

Special style elements

Pagination - if you use iSheet sections for other reasons, you can turn off the option to use sections as separate pages in this section.

Custom CSS - if you require additional CSS definitions for the form, add them here.

Select the Published page and/or Embedded code to apply the style to forms that are published or embedded.

The link to a published form is created in Settings, below.

The More actions menu allows you to Edit, Copy or Delete the style.

Please note that in version 5.7.2, an update was introduced to allow the ability to change the colour of the button and text in the hover state  

Settings

Open the Settings tab to set basic options for the form.

You can rename the form, and add a description to help form administration.

The iSheet and View are set when the form is created and are shown only for reference.

Use Publish form to create a link that can be used to publish the form without embedding the form on another page. Click Copy link, then use this URL to direct anyone to your form (e.g. in an email, or as a link on your website).

HighQ Form management

The main HighQ Forms page also provides these options:

Preview

Use Preview to see how your form looks on various devices. 

The preview simulates each type of device, and is not guaranteed to be 100% accurate.

Copy embed code and more actions

The More actions menu allows you to manage your form.

Select View published page to open the form with the URL available in the Settings tab. 

Select Copy embed code to store the embed code in your clipboard and then paste it into an existing page.

If this page is not on your HighQ instance, check that your website allows embedded content.

You can also copy a style, as a base for a new style, or Delete a style if it is no longer required.

 

 

Was this article helpful?

Related Materials