Maestro Form User Experience

   MaestroThe UI design product.  |   Form Builder |  All versions This feature is related to all versions.

Maestro forms are highly configurable, which means you build forms for different user experiences. You can use the following Maestro functionality to create a desired user experience as per your organization's requirements:

  • Load a form
  • Data is prefilled
  • Enter data into fields
  • Save and resume
  • Submit the form

Load a form

When an applicant loads a form, what they see is determined by the Template Designer and Form Builder. They might be immediately presented with form fields to complete, or if the applicant needs certain things to complete the form (such as identification or proof of income), they might be presented with a landing page that describes these requirements.

Forms are published as single-page AngularJS applications, which means the entire forms are loaded up-front. This impacts the initial load time, but the user won't have to wait between page transitions once the form is loaded.

Note

To improve the initial load time of a form, enable Static Content Externalization.

Data is prefilled

Data prefilling is the process of automatically inserting applicant data into a form, such as their name or email address, thereby reducing the amount of effort required by the customer to complete the form.

For example, if the applicant is authenticated, many of their details can be pulled in via a HTTP request. Even if an applicant is not authenticated though, details such as their latitude and longitude can be retrieved (with their permission). This is possible with the Util.getGeoLocation() method:

Util.getGeoLocation().then(function(result) {
	console.log("Latitude: " + result.latitude);
	console.log("Longitude: " + result.longitude);
});

Prefilling streamlines the user experience and can significantly reduce the abandonment rate of a form. For more information, see Form Prefill Options.

Enter data into fields

The applicant spends most of their time in this part of the process, entering data into fields and ensuring they meet whatever requirements the Form Builder has configured. Typically, applicants can expect to see:

  • A range of different field types, such as text fields, date pickers, and dropdowns.
  • Errors when invalid data is entered into a field (or when required data is missing).
  • Fields spread across multiple pages and organized into logical sections.

When more advanced functionality is required, users may also interact with third-party services. Many of these services can be integrated with Maestro by using pre-built Exchange packages.

Save and resume

When a form is opened, a tracking code is created. This code allows applicants to complete forms across multiple sessions, which is useful for long forms or forms that have complex requirements. The typical implementation is for applicants to answer a security question when saving the form. This answer can then be paired with the tracking code to re-open the form at a later time.

To learn how to implement a save and resume feature, refer to Create a Save Challenge.

Submit the form

When an applicant submits a Maestro form, they are usually presented with a page that confirms their data has been submitted. This page is often implemented as a Modal Page component, rather than a regular Page component. This prevents the final page from automatically appearing in the navigation menu. If further steps are required by the user, or if some form of approval is required before the applicant can proceed to the next step, this page is an ideal place to explain to the applicant the next step of the process.

Upon submission, Maestro sends the form data to Manager. Once there, a wide range of actions can be performed using the data. For example, Manager can send a confirmation email to the form user about their submission, generate a PDF receipt, or trigger a collaboration job. Other functionality can be implemented via services or Groovy scripts. Some functionality is enabled by default, such as logging and purging of personally identifiable information (PII).

Next, learn how to add Google Tag Manager to a Maestro form.