Context
Sometimes you may have multiple forms on one 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 on the same page. The details below describe the strategy to accomplish this. Here is a demo of the functionality described below.
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.
Important: This solution may require your developer resources depending on the complexity.
Prerequisites/Preparation
For Each Form
A unique id/name for Email and Company. Make sure that no two elements have the same Ids. HTML standards require this. You can use Javascript to change the Id/Name dynamically before you hook the connector to the target form.
Examples:
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>
Steps
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 steps below 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 (see 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 = {
"company_id":"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)
5. 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);
}