Custom Forms

Qualified Meetings can trigger on Pardot, Marketo and Hubspot forms natively, but additional guidance is required to trigger forms that are not natively supported. This includes: Eloqua forms, custom-built forms, forms from a 3rd-party provider such as Gravity and forms that leverage Pardot form handlers. This guidance requires use of the Qualified JavaScript API.

Configuration

Before a form experience can be added to your website, some basic configuration needs to be done by a Qualified admin.

First, navigate to your form experience and click the Form Trigger experience step (pictured below).

If you are not using a supported Marketing Automation form (Pardot, Marketo, or Hubspot), click the “Custom Form” tab to reveal setup instructions and configuration options.

For your experience to function properly, you must indicate the connected systems that your form submits to. For example, if you are using a custom-built form that submits data to Pardot, enable the “Wait for a Prospect in Pardot” option. This area in the Qualified UI also includes sample JavaScript code for your web developer. To send detailed installation instructions to your web developer, we recommend clicking the Email Instructions link or following the guidance below.

Installation Instructions

There are two API calls that will need to be implemented in JavaScript by a web developer on your team, saveFormData and showFormExperience. As a reminder, please ensure that both the page containing the form and the page that the form redirects to, if applicable, have the main Qualified JavaScript snippet installed.

1. Capturing form data using saveFormData

Capturing data from the form submission allows the form experience to qualify the visitor based on form data. Form data captured via this API call is sent to Qualified when the form experience is triggered as described in step 2 below. The saveFormData script can be copied from Qualified and edited to reflect the CSS selector and field names on the form you wish to collect data from.

Note that prior versions of custom form javascript may have included saveSmartFormData. While this is still supported, it is recommended to use saveFormData for all custom forms going forward.

API call

qualified('saveFormData', fieldValues);

This call should be made upon form submission. It’s useful to note that the data captured via this API call will not be sent to Qualified until showFormExperience , described below, is subsequently invoked. This means that it can be made any number of times without any side-effects; it can be invoked optimistically for a form that relies on server-side validation, for example.

Note that if the form submits data to Salesforce or one of the marketing automation platforms that are integrated with Qualified– Pardot, Marketo, Hubspot, Eloqua– it’s not strictly necessary to provide a full set of field mappings as the form submission data will be automatically ingested from those systems by Qualified.

Arguments

fieldValues ****- an object where the attributes are Qualified Visitor Field API Names (found in the Visitor Fields settings section) and respective values are form field values. You must capture email address. All other fields values are optional. Field values must be mapped to the field's name.

Example

2. Triggering form data using showFormExperience

After a successful form submission, showFormExperience sends the data captured by saveFormData and triggers a specified form experience. The showFormExperience script can be copied from Qualified and should not require any adjustments, unlike the edits required in the first script.

Note that this call should be made only after a successful form submission. For forms that redirect to another page after successful submission, the call should be embedded in the page that’s redirected to (for example a 'Thank You' page), and placed after the main Qualified JavaScript snippet. For forms that don’t redirect– e.g. those that send data via XMLHttpRequest– this call should be made after detecting a successful form submission.

API Call

qualified('showFormExperience');