How to send form data to both HubSpot API and Expression Engine simultaneously

Other Questions HubSpot
1

I’m working on a website that uses Expression Engine and I need some help with form handling. I have a contact form that currently submits data to my Expression Engine database, but now I also need to send the same information to HubSpot through their API.

<form id="contact-form" action="https://mysite.com/?ACT=42" method="post">
    <input type="text" name="user_firstname" placeholder="First Name">
    <input type="text" name="user_lastname" placeholder="Last Name">
    <input type="email" name="user_email" placeholder="Email Address">
    <input type="tel" name="user_phone" placeholder="Phone Number">
    <input type="text" name="organization" placeholder="Organization">
    <button type="submit">Send Message</button>
</form>

I also have a PHP script that handles the HubSpot API integration:

<?php
// Handle HubSpot form submission
$tracking_cookie = $_COOKIE['hubspotutk'];
$visitor_ip = $_SERVER['REMOTE_ADDR'];

$context_data = array(
    'hutk' => $tracking_cookie,
    'ipAddress' => $visitor_ip,
    'pageUrl' => 'https://mysite.com/contact',
    'pageName' => 'Contact Form'
);

$context_json = json_encode($context_data);

$form_data = "user_firstname=" . urlencode($user_firstname)
    . "&user_lastname=" . urlencode($user_lastname)
    . "&user_email=" . urlencode($user_email)
    . "&user_phone=" . urlencode($user_phone)
    . "&organization=" . urlencode($organization)
    . "&hs_context=" . urlencode($context_json);

$api_url = 'https://forms.hubspot.com/uploads/form/v2/PORTAL_ID/FORM_GUID';

$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $api_url);
curl_setopt($curl, CURLOPT_POST, true);
curl_setopt($curl, CURLOPT_POSTFIELDS, $form_data);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
$api_response = curl_exec($curl);
curl_close($curl);

echo $api_response;
?>

I think I need to use JavaScript or jQuery to make this work, but I’m not sure about the best approach. Can someone help me figure out how to submit the form data to both destinations?

2

using AJAX is a cool idea! just use preventDefault() to stop the normal submit, send the data to hubspot with jQuery, and then allow the form to submit to expression engine. it ll work fine!