loading..
< View all articles in API & Webhooks.

Capturing leads from Web Forms using JavaScript API

There are three common ways to capture leads from website forms:

If you want to avoid replacing your form or dealing with REST APIs then you can use our JavaScript API to capture leads.

Prerequisites

  1. You should know your LeadSquared account number 
  2. There should be a published landing page (with any form fields) that can be associated with lead submissions. You should know the id of the landing page. To find the landing page id, click on the published page and from the URL copy the alphanumeric text after “LandingPageId=”. An example is shown below:

lpid

 

Integrating the form

Please follow the below steps to connect your web  form with LeadSquared landing pages.

Step 1

Include following Java Script library:

“https://web.mxradon.com/t/FormTracker.js”

 Example:

<script src=”https://web.mxradon.com/t/FormTracker.js” type=”text/javascript”></script>

 

Create following Java Script objects of  LeadSquared and map the form fields with the relevant LeadSquared fields by defining the variable.

Example:

var fieldMapping = { }

Objects:

  • MXHOrgCode – This is your LeadSquared Account Number (Mandatory)
  • MXHLandingPageId – The  Landing Page ID for which you wish to capture the submissions (Mandatory)
  • MXHAsc – This is the score you provide for the capture submission. This is an optional property.

Example:

MXHOrgCode: "6049",
MXHLandingPageId: "5f9cec8b-854b-11e6-8f87-22000aa8e760",
MXHAsc: "5",

Fields Mapping:

Format: <LeadSquared Field Schema Name> : “<Form Field Name>”;

Example:

FirstName: "fname",
LastName: "lname",
EmailAddress: "email",
Mobile: "mobile",
mx_Gender: "gender",
mx_City: "city",
mx_Country: "country"

Step 2

Create a new instance of LSQForm() and pass the parameters which is defined in step 1 to the function setupLeadCapture(parameter). Using setupLeadCapture , the form submission is captured automatically no function need to be called.

Format:

new  LSQForm().setupLeadCapture(parameter);

Example:

new LSQForm().setupLeadCapture(fieldMapping);

If you have multiple forms and you wish to capture leads from a specific form, then you can pass the Form ID with parameter as given below.

Format:

new LSQForm().setupLeadCapture(parameters, { id: “form ID” });

Example:

new LSQForm().setupLeadCapture(fieldMapping, { id: "myLandingPageForm" });

Step 3

You can also add an event to run a function on form submission request completion, success or error.

Example:

On Success:

var onSuccess = function (data) {
<span style="color: #ffcc00;"><span style="color: #ff9900;"> </span></span>console.log("ok");
}

On Error:

var onError = function (data) {
console.log("error");
}

Custom:

var always = function (data) {
console.log("always");
}

Code Snippet:

new LSQForm().setupLeadCapture(fieldMapping,{
onSuccess: onSuccess,   /*optional*/
onError: onError, /*optional*/
always: always   /*optional*/
});

If you have your own code and you do not want to create the lead automatically using setupLeadCapture, then use captureLead , which calls manually and creates a lead in LeadSquared.

To implement the captureLead function instead of setupLeadCapture:

Create a  function like below and inside that function define variables and create instances.

function onFormSubmit() {

<span style="color: #ff9900;">/* Step 01 - Map fields*/</span>

var fieldMapping = {
MXHOrgCode: "6049",
MXHLandingPageId: "5f9cec8b-854b-11e6-8f87-22000aa8e760",
MXHAsc: "5",

FirstName: "fname",
LastName: "lname",
EmailAddress: "email",
Mobile: "mobile",
mx_Gender: "gender",
mx_City: "city",
mx_Country: "country"
};

<span style="color: #ff9900;">/*Step 02 - Add callbacks*/</span>

var onSuccess = function (data) {
<span style="color: #ff9900;"> /* Success callback code goes here*/</span>
console.log("ok");
}

var onError = function (data) {
<span style="color: #ff9900;">/*Error callback code is given below*/</span>
console.log("error");
}

var always = function (data) {
<span style="color: #ff9900;">/*Always callback code is given below*/</span>
console.log("always");
}

<span style="color: #ff9900;">/*Step - 03 Capture Lead in LeadSquared*/</span>
new LSQForm().captureLead(fieldMapping, "myLandingPageForm",
{
onSuccess: onSuccess,  <span style="color: #ff9900;"> /*optional*/</span>
onError: onError, <span style="color: #ff9900;">/*optional*/</span>
always: always <span style="color: #ff9900;">/*optional*/</span>
});
return false;
};
Sample Codes: