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:

1. email address
2. company
3. first name
4. last name
5. 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