This tutorial assumes some basic knowledge of HTML and JavaScript – nothing too fancy. We’re going to be using jQuery which is the quickest and easiest way to post leads using JavaScript.
Let’s assume you have a web page with an HTML form on it. You want to make sure the form, when submitted, sends leads right into your Listflex system into a specific list. I will further assume that you already know how to get your API string for the list you want to post leads into. We’re going to be working with this example API:
https://subdomain.listflex.com/lmadmin/api/leadimport.php?apikey=XXX333GGGPPP&list_id=2222&fname=John&lname=Doe&email=testemail@emaildomain.com&phone=789-345-2334&alt_phone=111-111-1111&address=123 W Jeff st. 234&city=Phoenix&state=AZ&zip=85111&country=US&date_subscribed=2014-01-12 12:33:00&date_of_birth=1950-01-19&gender=M&offer=offerurlgoeshere.com&ip=12.12.12.12&comments=
Keep in mind that the above parameters, such as John, Doe, testemail@emaildomain.com, are simply fillers and will need to be swapped with whatever your form will capture.
Let’s now imagine that the HTML for your form looks like this:
<form action=”http://someurlhere.com/leads.php” method=”post”>
<input type=”text” name=”fname” value=”” placeholder=”First Name”><br>
<input type=”text” name=”email” value=”” placeholder=”Email Address”><br>
<input type=”submit” value=”Submit Form”>
</form>
The above form HTML is super basic and yours will most likely be quite a bit different, but the logic will remain the same nonetheless. In the browser your form will look something like this… again this is an unstyled version of it, but it still works the same:
Your objective is to capture First Name and Email and import them into your Listflex software. For that we will employ jQuery. The first thing you want to do is give your form an ID, unless if already has one. Also you want to add a few hidden fields to your form. Here is what your form HTML should look like when you’re done with it:
<form id=”my-lead-form” action=”https://leads.liquidfortune.com/lmadmin/api/leadimport.php” method=”post”>
<input type=”hidden” name=”apikey” value=”XXX333GGGPPP”>
<input type=”hidden” name=”list_id” value=”2222″><input type=”text” name=”fname” value=”” placeholder=”First Name”>
<br>
<input type=”text” name=”email” value=”” placeholder=”Email Address”>
<br>
<input type=”submit” value=”Submit Form”>
</form>
Notice how we changed the action attribute of the form to the endpoint URL of the API. Also, you will notice we have added two hidden fields named apikey and list_id and assigned to them corresponding values from the API URL above.
Now all you need is the JS code that will post your lead into Listflex. You can insert the following code right before the end </body> tag:
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
<script>
jQuery(“#my-lead-form”).submit(function(){
var fname = jQuery(“#fname”).val();
var email = jQuery(“#email”).val();
if(fname == “” || email == “”){
alert(‘Please fill out all fields’);
//or any other logic you want here
return false;
}var $signup_form = jQuery(this);
var formparams = $signup_form.serialize();
var url = $signup_form.attr(‘action’)var call_url = url+”?”+formparams;
jQuery.get(call_url, function(response){
if(response == “success”){
//post was successful. Do something here
alert(‘Success. You have been singed up.’);
}else{
//post was not successful. Do something here
alert(‘Failed’);
}
});return false;
});
</script>
Your page may already be importing jQuery before this code. If that’s the case, then you can skip importing this line from the above snippet: <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
This should do the trick. Please post any questions in the comments section below.
