Multiple Forms on One Page

Updated:

Sometimes you may have multiple forms on 1 page pre-rendered. These forms may be visible all at once or one at a time based on your own business logic. Either way, you may want to use Demandbase on different forms, the below details describe the strategy to accomplish this. You can find a demo of the functionality described below here.

How does the Form Connector hook to a form:

By default the Form Connector hooks into a single form. On page-load, the connector searches for the Email and Company HTML IDs or Names that are mapped to the connector via a fieldMap within the library. If two or more forms on the same page use the same IDs then the connector hooks into the first form on the DOM. This is because Javascript assumes unique element IDs per HTML standards.

How to hook into different forms

In order to hook into a different form, the connector needs to re-initialize with a different set of inputs and certain configurations need to be uninitialized and re-initialized for this to happen.

Note: This solution may require your developer resources depending on the complexity.

Pre-requisites for EACH form: 

  1. A unique id/name for Email and Company.

EXAMPLE:

THE DEFAULT FORM

<form> <input id='Email': ... <input id='Company': ...</form>

 

OTHER FORMS

<form> <input id='Email2': ... <input id='Company2': ...</form>

<form> <input id='Email3': ... <input id='Company3': ...</form>

 

What if I can't change my Email and Company Ids

HTML standard dictates no two elements can have the same Ids. You can use Javascript to change the Id/Name dynamically before you hook the connector to the target form.

Hook Connector to another form

When the page loads, the connector automatically hooks into the first/default form. In order to move the connector over to another form you have to follow the below steps with code.

1. Release the autocomplete attachment from current Company field

Demandbase.CompanyAutocomplete.initialized = false;

2. Redefine the Company and Email fields for the new form giving the HTML ID or Name of the inputs.

Demandbase.Config.forms.companyID = "Company2"
Demandbase.Config.forms.emailID = "Email2" 

3. Redefine the fieldMap. The attributes on the left of the colon are Demandbase API names, you can reference them API attribute names. The names on the right side of the colon are your HTML ID or Names of the fields.

fieldMap = { [demandbase_attribute] : [html_input_id_or_name] }


Demandbase.Config.forms.fieldMap = {

"demandbase_sid":"mkto_sid_2",

"country": "mkto_country2",

"city": "city2",

"industry":"industry2"

}

4. Reload the Demandbase Form Connector with the new settings 

Demandbase.Connectors.WebForm.connect(Demandbase.Config.forms)

 

Finally you can just create a function and pass in the different inputs.

 


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: When you have a page that doesn't map to the default configuration the form library won't load.You must use a modified version of the function that loads the library first.

Modified

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);
}


 

Was this article helpful?
0 out of 0 found this helpful