Using javascript to securely send captured form data to LeadBoxer
Example: I have a Form on my website which my visitors fill in.
The form contains the following fields that I want to send to LeadBoxer:
- email address
- company
- first name
- last name
- phone number
Question: How can I configure things so that the information submitted via the Form get sent directly into my LeadBoxer lead generation reports?
Note: the same scenario applies to similar visitor touchpoints such as Download Case Study, Create Login, Register, etc.
The HTML
Above form description will look something like this:
<form id=”form” name=”my form” method=”post” action=””>
<label> email: </label>
<input name=”textbox” type=”text” id=”email” value=”” />
<label> company: </label>
<input name=”textbox” type=”text” id=”company” />
<label> first name: </label>
<input name=”textbox” type=”text” id=”firstName” />
<label> last name: </label>
<input name=”textbox” type=”text” id=”lastName” />
<label> phone number: </label>
<input name=”textbox” type=”text” id=”phoneNumber” />
<input type=”button” name=”submitForm” id=”submitForm” value=”Click to submit form” onclick=”sendTextForm()” />
</form>
The Javascript
To submit the event with the form values the visitor has filled in to LeadBoxer’s event engine, add a javascript like this:
<!– Load the LeadBoxer javascript first –>
<script src=”//script.leadboxer.com/?account=yourAccountID”></script>
<script type=”text/javascript”>
function sendTextForm() {
// create a new LeadBoxer events object called “map”
var map = new OTMap();
// with getElementById you can get the data from all the form events
var emailTextbox = document.getElementById(“email”).value;
var companyTextbox = document.getElementById(“company”).value;
var firstNameTextbox = document.getElementById(“firstName”).value;
var lastNameTextbox = document.getElementById(“lastName”).value;
var phoneNoTextbox = document.getElementById(“phoneNumber”).value;
// add the form field to the map
map.put(“email”, emailTextbox);
map.put(“company”, companyTextbox);
map.put(“firstName”, firstNameTextbox);
map.put(“lastName”, lastNameTextbox);
map.put(“phoneNumber”, phoneNoTextbox);
// send the data, give the event a memorable title “Contact …
OTLogService.sendEvent(“Contact demo form submitted”, map);
}
</script>
Delay
Sometimes it is necessary to delay form submission for one second (literally), in order to create a small window during which the form data can be sent to our servers.
Here are two examples, a jQuery and a javascript example.
You can do this by adding the following to the bottom of the sendTextForm function
setTimeout(function() {
document.myform.submit();
},1000);
This is an example using jQuery
$(‘form’).submit(function (e) {
var form = this;
e.preventDefault();
setTimeout(function () {
form.submit();
}, 1000); // in milliseconds
});
Working example
For a working example on how to submit form fields go here