You are using an older version of Internet Explorer. Get out of the past and upgrade!
Click here to upgrade to the latest version of IE.

How to Integrate Hubspot and Gravity Forms in WordPress


UPDATE 3/26/12
Hubspot has just released an easier way to integrate Gravity Forms with WordPress. Click here for more details.


Google has always been my best friend when it comes to development woes, but in this scenario, I was treading unknown grounds. Keyword upon keyword, I found little to no insight on how to integrate Hubspot with Gravity forms – surprisingly. I eventually figured it out after having a “Doh!” moment.

Hubspot has this handy tool called Webhooks that allows you to use your forms and register the information in Hubspot using its API. This definitely came in handy as I was trying to integrate Hubspot with Gravity Forms. Here’s a step by step guide on how I completed what I thought was impossible:

Hubspot API Integration

1. Go to Hubspot > Settings > Hubspot API

2. Click “Add New Form” and then fill it out. It isn’t required to link your form with a Lead Nurturing Campaign. Click Save when you’re finished.

3. Upon successful completion of the form, you’ll be given an API POST URL. Keep this somewhere safe!

Gravity Forms

1. Log into your WordPress Dashboard and go to Gravity Forms.

2. Create a form (if you haven’t already ). Place this form on a page and go to that page.

3. Using some sort of web development tool (my favorite is Firebug), “inspect” the form.

4. Copy the form id and the names of the input fields. You’re going to need these!

Bringing It All Together

1. Go to your themes function.php file and copy and paste the following code. I recommend putting it at the very end.

// HubSpot: CONTACT FORM
add_action("gform_after_submission_1", "do_hubspot_contact", 10, 2);
function do_hubspot_contact($entry, $form) {
if ($_SERVER['REQUEST_METHOD'] == "POST")
{
/*******************************
your existing form processing
********************************/
//START HubSpot Lead Submission
$strPost = "";
//create string with POST data
$strPost= "FullName=" . urlencode($_POST['input_1'])
. "&Phone=" . urlencode($_POST['input_2'])
. "&Email=" . urlencode($_POST['input_3'])
. "&Message=" . urlencode($_POST['input_4'])
. "&IPAddress=" . urlencode($_SERVER['REMOTE_ADDR'])
. "&UserToken=" . urlencode($_COOKIE['hubspotutk']);
//put POST header and data into array
$context_options = array (
'http' => array (
'method' => 'POST',
'header'=> "Content-type: application/x-www-form-urlencoded\r\n"
. "Content-Length: " . strlen($strPost) . "\r\n",
'content' => $strPost
)
);
$ctx = @stream_context_create($context_options);
$url = "API POST URL";
//allow_url_fopen must be set to true in your php.ini file to use fopen with a URL
@fopen($url, 'r', false, $ctx);
//END HubSpot Lead Submission
}
}


2. Change the add_action to your gform ID. For example, my is gform_after_submission_1. I recommend you leave all other information the same unless you know what you’re doing.

3. Go to “create string with POST data” section and enter in your input names and their respective labels.

4. Paste in your API POST URL. This is very important and connects your form with Hubspot.

5. After you’re finished, save and upload!

Integration with Salesforce

If you want to bring Salesforce into the picture, you can do one of two things:

  1. You can either use the plugin Gravity Forms Add-on Salesforce.
  2. Or nothing at all! Hubspot and Salesforce automatically recognize basic fields. Here’s a complete list of Hubspot fields.

And that’s it! I recommend you test your form and make sure that it’s sending the information to Hubspot. For more information , visit Hubspot’s documentation on Webhooks.

About Lan Nguyen

I began working with WrightIMC in July 2010 as a graphic and web developer. I’m responsible for designing and building many of WrightIMC’s sites from the ground up, as well as managing them.

I’ve been professionally designing for almost 5 years and practicing for more than 10. Though I’ve left NYC, I continue to work for a NYC-based online foreign media streaming company and freelance for local businesses in the Dallas Metroplex.

I am currently a full time student at the University of Texas at Dallas (UTD) for a B.A. in Emerging Media and Communications (EMAC) with a focus in Web Design.

Discussion

  1. In step 3 of Gravity forms above you have Div ID highlighted but say to use form ID but then neither of those match what you pasted in step 2 of bringing it all together. Can you clarify here?

    Are you definitely using input name and not input ID?

    For FullName, Phone, Email are you using what you named these in Gravity Forms or the name of the corresponding field in HubSpot advanced section of the API form? And finally, did you custom map the fields in the Hubspot API form?

    Thanks! If I can get this to work it is the best Hubspot workaround I have seen!

    Jeff

    • Lan Nguyen says:

      Hey Jeff!

      The form is for step 2 in bringing it all together. You’re not going to change the entire name but the number. For example, if my form ID was 7 I would change it to gform_after_submission_7.

      The input field names will correspond with the highlighted green fields in step 3 of bringing it all together.

      Because these are basic fields already recognized by Hubspot, you don’t have to map it.

      Let me know if need more clarity!

      • Thanks for the quick response! I think step 3 is my sticking point now. Example, I have a field for First Name and a field for Last Name. How would you code that and transfer to Hubspot? Or should I rename my fields to match theirs, since mine do not all match, and create a single line fill in for Full Name instead of first and last?

        Jeff

        • Finally got it! Thanks for the tutorial here!

          Have you dealt with having more than 1 GF lead capture form on a site? How did you tackle that since functions.php will not allow you to repeat function do_hubspot_contact?

          Jeff

          • Lan Nguyen says:

            Glad to hear it!

            You just change the action name. For example, I normally change it to the form name:

            add_action(“gform_after_submission_1″, “do_hubspot_freequote”, 10, 2);

Speak Your Mind

*