Enrich Multiple Forms on One Page

In some cases, you may have multiple pre-rendered forms on a single page. These forms may appear at the same time or display one at a time based on your site’s business logic. If you want Demandbase Forms Enrichment to work with different forms on the same page, the Form Connector must be reconfigured to attach to the correct form.

See this example.

How the Form Connector Attaches to a Form

By default, the Form Connector attaches to one form. When the page loads, the connector looks for the Email and Company HTML IDs or name attributes defined in the connector’s fieldMap.

If multiple forms on the page use the same IDs, the connector attaches to the first matching form in the DOM. This happens because JavaScript expects element IDs to be unique, per HTML standards.

How to Attach the Connector to a Different Form

To attach the connector to a different form, you must reinitialize the connector with a new set of input fields. This requires uninitializing certain configurations, updating the field mappings, and reconnecting the Form Connector.

Important: Depending on the complexity of your page and form logic, this setup may require developer resources.

Prerequisites

Each form must have unique HTML IDs or name attributes for the Email and Company fields. No two elements should use the same ID.

Example:

<!-- Default form --> 
<form> 
<input id="Email"> 
<input id="Company"> 
</form> 

<!-- Additional forms --> 
<form> <input id="Email2"> 
<input id="Company2"> 
</form> 

<form> 
<input id="Email3"> 
<input id="Company3"> 
</form>

You can also use JavaScript to update the ID or name attributes dynamically before attaching the connector to the target form.

Steps

When the page loads, the connector automatically attaches to the default form. To move the connector to another form, use code to complete the following steps.

1. Release the autocomplete attachment.
   Demandbase.CompanyAutocomplete.initialized = false;
2. Define the Company and Email fields for the new form.
   Demandbase.Config.forms.companyID = "Company2";
Demandbase.Config.forms.emailID = "Email2"; 
3. Redefine the fieldmap. 
   Tip: The values on the left side of the colon are Demandbase API attribute names. The values on the right side are your form field HTML IDs or name attributes.

   • Demandbase.Config.forms.fieldMap = { "company_id": "mkto_sid_2", "country": "mkto_country2", "city": "city2", "industry": "industry2" };

4. Reload the Demandbase Form Connector. Demandbase.Connectors.WebForm.connect(Demandbase.Config.forms)
5. Create a Reusable Function.

   • function AttachDemandbaseForm(companyID, emailID, fieldMap){
      Demandbase.CompanyAutocomplete.initialized = false;
      Demandbase.Config.forms.companyID = companyID; //string
      Demandbase.Config.forms.emailID = emailID; //string
      Demandbase.Config.forms.fieldMap = fieldMap; //object
      Demandbase.Connectors.WebForm.connect(Demandbase.Config.forms);
     }

Important Note

If the page does not match the default Forms Enrichment configuration, the forms library may not load automatically. In this case, use a modified function that loads the library before reconnecting the Form Connector.

function AttachDemandbaseForm(companyID, emailID, fieldMap){
 Demandbase.utils.loadScript("scripts.demandbase.com/forms.min.js");
 Demandbase.CompanyAutocomplete.initialized = false;
 Demandbase.Config.forms.companyID = companyID; //string
 Demandbase.Config.forms.emailID = emailID; //string
 Demandbase.Config.forms.fieldMap = fieldMap; //object
 Demandbase.Connectors.WebForm.connect(Demandbase.Config.forms);
}