If you have a form that is not built in Pardot, Marketo, or Hubspot, you will need to select custom form during the form configuration process. This will display instructions and sample code for your web developer to connect your form to Qualified.
To send detailed installation instructions to your web developer, click the Email Instructions link or follow 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.
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 by the showFormExperience call detailed 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: Prior versions of custom javascript may have included saveSmartFormData. While this is still supported, it is recommended to use saveFormData for all custom forms going forward.
saveFormData 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 is subsequently invoked. This means that it can be made any number of times without side-effects; it can be invoked optimistically for a form that requires server-side validation, for example.
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.
saveFormData arguments
fieldValues: an object where the attributes are Qualified visitor field API Names, and respective values are form field values. You must capture email address; all other field values are optional. Field values must be mapped to the field’s name.
saveFormData sample code
<!— Qualified —>
<script> window.AddEventListener(“submit”, (e) = { if (e.target.matches(“#demo-form”)){ const formData = new FormData(e.target);
qualified( “saveFormData”, { “email”: formData.get(“email”), “city”: formData.get(“input_1”), “company”: formData.get(“company”), } ); } }); </script> <!— End Qualified —>
Triggering form data using showFormExperience
After a successful form submission, showFormExperience sends the data captured by saveFormData and triggers a specific form experience. the showFormExperience script can be copied from Qualified and should not require any adjustments, unlike the edits required in the first script.
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’)
Arguments
No arguments are required.
showFormData sample code
<!— Qualified —> <script> qualified(“showFormExperience”, “experience-1234567890”); </script> <!— End Qualified —>
.svg)
