Submit form data to Hubspot API and Expression Engine database

Question

I have a basic HTML form on an Expression Engine site which looks sort of like this:

<form action="http://www.autouplinktech.com/?ACT=28" accept-charset="utf-8" method="post">
    <input type="text" name="first_name" id="first_name" placeholder="{freeform:label:first_name} *">
    <input type="text" name="last_name" id="last_name" placeholder="{freeform:label:last_name} *">
    <input type="text" name="email" id="email" placeholder="{freeform:label:email} *">
    <input type="text" name="phone" id="phone" placeholder="{freeform:label:phone} *">
    <input type="text" name="company" id="company" placeholder="{freeform:label:company} *">
</form>

I need to retain the ability to submit to the main database, but also post the data to a hubspot.php page which sends the data via their API. The hubspot.php looks like this:

<?php
//Process a new form submission in HubSpot in order to create a new Contact.

$hubspotutk = $_COOKIE['hubspotutk'];  //grab the cookie from the visitors browser.
$ip_addr = $_SERVER['REMOTE_ADDR'];  //IP address too.
$hs_context = array(
        'hutk' => $hubspotutk,
        'ipAddress' => $ip_addr,
        'pageUrl' => 'http://www.example.com/form-page',
        'pageName' => 'Example Title'
    );
$hs_context_json = json_encode($hs_context);

//Need to populate these varilables with values from the form.
$str_post = "firstname=" . urlencode($first_name)
        . "&lastname=" . urlencode($last_name)
        . "&email=" . urlencode($email)
        . "&phone=" . urlencode($phone)
        . "&company=" . urlencode($company)
        . "&hs_context=" . urlencode($hs_context_json);  //Leave this one be :)

 //replace the values in this URL with your portal ID and your form GUID
$endpoint = 'https://forms.hubspot.com/uploads/form/v2/{portalId}/{formGuid}';

$ch = @curl_init();
@curl_setopt($ch, CURLOPT_POST, true);
@curl_setopt($ch, CURLOPT_POSTFIELDS, $str_post);
@curl_setopt($ch, CURLOPT_URL, $endpoint);
@curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/x-www-form-urlencoded'));
@curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$response = @curl_exec($ch);  //Log the response from HubSpot as needed.
@curl_close($ch);
echo $response;

?>

I'm pretty sure this can be accomplished with AJAX and jQuery, but I do not know exactly what to do... Thanks!

Answer 1

I dont know whether it is helpfull to you , since its too late. Anyway i am posting this.

<script>
    $(document).ready(function(){
        $('#send_button').click(function(e){
            e.preventDefault();
            var res="";
            x=$("form").serializeArray();
            $.each(x, function(i, field){
                res+=i>0?"&":"";
                res+=field.name + "=" + field.value;
            });                
            $.ajax({
                type:'hubspot.php',
                url: url,
                data:res
            });
        });
    });
</script>
<form action="http://www.autouplinktech.com/?ACT=28" accept-charset="utf-8" method="post" id="form1">
    <input type="text" name="first_name" id="first_name" placeholder="{freeform:label:first_name} *">
    <input type="text" name="last_name" id="last_name" placeholder="{freeform:label:last_name} *">
    <input type="text" name="email" id="email" placeholder="{freeform:label:email} *">
    <input type="text" name="phone" id="phone" placeholder="{freeform:label:phone} *">
    <input type="text" name="company" id="company" placeholder="{freeform:label:company} *">
    <a href="javascript:void(0)" id="send_button"><span>Submit</span></a>
</form>

Then in your hubspot php you can get all the values in $_POST