Hubspot & Drupal Integration

SOLVE
SLindblom
Member

I have a Drupal 9 site with 2 different webforms created. I have the HubSpot module (https://www.drupal.org/project/hubspot) installed and is actively connected to my HubSpot developer account with matching scopes. I have created a form in my main HubSpot account that matches one of my forms on the website (contact form to be specific).

 

The module explains how you can add a 'Hubspot Handler' to a form, then map the fields. I am unable to map any fields to the form I created. None appear and I cannot save the handler. I do however, receive worthless submissions(screenshot below) of my website forms for each time a submission is entered. I want to map from site form to hubspot form, therefore giving me the ability to capture the contact information as leads. Please guide me! I'm willing to hop on a zoom or anything at this point! Thanks!Screen Shot 2021-10-28 at 2.41.52 PM.png

1 Accepted solution

Accepted Solutions
himanshurauthan
Solution
Recognized Expert | Platinum Partner

Ok, so these are the forms. Let's first talk about the contact form, now what you can do is:

 

  • Create a form on your company's HubSpot portal with the same fields that are present on the contact form and store that form ID in the DB

  • Create a function and call portal ID and Form ID in that function, also collect form fields in that function using ajax/jquery

  • Prepare an array in which you will send form ID, portal ID, and form field's values that you have fetched from the form

  • Make an API call to this endpoint, and pass all the properties of the array in the given format.

    Example function data:

     

    $data = array();

    $form_id = get_option( 'hubwoo_checkout_form_id', '' );

    $portal_id = get_option( 'hubwoo_pro_hubspot_id', '' );

    $form_data = ! empty( $_POST ) ? map_deep( wp_unslash( $_POST ), 'sanitize_text_field' ) : '';

    $required_data = array(

    'billing_email' => 'email',

    'billing_first_name' => 'firstname',

    'billing_last_name' => 'lastname',

    );

     

    foreach ( $required_data as $key => $name ) {

    if ( array_key_exists( $key, $form_data ) ) {

    $value = $form_data[ $key ];

    if ( empty( $value ) ) {

    continue;

    }

    $data[] = array(

    'name' => $name,

    'value' => $value,

    );

    }

    }

    submit_form_data( $form_data, $portal_id, $form_id );

     

    Example of call:

    $url = 'https://api.hsforms.com/submissions/v3/integration/submit/' . $portal_id . '/' . $form_id;

    $headers = $this->get_token_headers();

    $res_body = '';

     

    $form_data = json_encode( $form_data );

     

    $response = wp_remote_post(

    $url,

    array(

    'body' => $form_data,

    'headers' => $headers,

    )

    )

     

    And do the same thing for the newsletter form, please let us know if you further need any help.

Digital Marketing & Inbound Expert In Growth Hacking Technology

View solution in original post

7 Replies 7
dennisedson
Community Manager

@himanshurauthan , I believe you helped out with forms and drupal in the past.  Any chance you could help out here?

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
himanshurauthan
Recognized Expert | Platinum Partner

Hi @SLindblom,

 

To map data in HubSpot form from a non-HubSpot form firstly, you have to fetch the data or form fields of the non-HubSpot form from your site then, you have to map the data to HubSpot using forms API.

 

Hope it will help you out! 🙂

 

Regards,

Digital Marketing & Inbound Expert In Growth Hacking Technology
SLindblom
Member

Thank you for your reply. This screenshot is from within the settings/handlers section of one of my webforms. I am able to see a non hubspot form I created (New Contact Us) but unable to see any of the fields it has. Any suggestions?

Screen Shot 2021-11-02 at 7.51.22 AM.png

0 Upvotes
SLindblom
Member

Are there any updates for me on this? My forms still aren't showing any fields to map on the Drupal side.

0 Upvotes
himanshurauthan
Recognized Expert | Platinum Partner

Hello @SLindblom

 

I guess this is the backend setting of the form, can you please show me the form so that I can tell you which form fields you can sync to HubSpot and how can you fetch them.

 

Regards,

Digital Marketing & Inbound Expert In Growth Hacking Technology
0 Upvotes
SLindblom
Member

There are 2 forms I wish to sync with Hubspot. A newsletter and a contact form, very basic. Again, my Drupal Hubspot module is successfully connected to the Hubspot developer account where I have the app and scopes to match. I just can't seem to get the fields to show up in Drupal to map them. See screenshots.

Screen Shot 2021-11-11 at 8.27.43 AM.png

Screen Shot 2021-11-11 at 8.27.32 AM.png

0 Upvotes
himanshurauthan
Solution
Recognized Expert | Platinum Partner

Ok, so these are the forms. Let's first talk about the contact form, now what you can do is:

 

  • Create a form on your company's HubSpot portal with the same fields that are present on the contact form and store that form ID in the DB

  • Create a function and call portal ID and Form ID in that function, also collect form fields in that function using ajax/jquery

  • Prepare an array in which you will send form ID, portal ID, and form field's values that you have fetched from the form

  • Make an API call to this endpoint, and pass all the properties of the array in the given format.

    Example function data:

     

    $data = array();

    $form_id = get_option( 'hubwoo_checkout_form_id', '' );

    $portal_id = get_option( 'hubwoo_pro_hubspot_id', '' );

    $form_data = ! empty( $_POST ) ? map_deep( wp_unslash( $_POST ), 'sanitize_text_field' ) : '';

    $required_data = array(

    'billing_email' => 'email',

    'billing_first_name' => 'firstname',

    'billing_last_name' => 'lastname',

    );

     

    foreach ( $required_data as $key => $name ) {

    if ( array_key_exists( $key, $form_data ) ) {

    $value = $form_data[ $key ];

    if ( empty( $value ) ) {

    continue;

    }

    $data[] = array(

    'name' => $name,

    'value' => $value,

    );

    }

    }

    submit_form_data( $form_data, $portal_id, $form_id );

     

    Example of call:

    $url = 'https://api.hsforms.com/submissions/v3/integration/submit/' . $portal_id . '/' . $form_id;

    $headers = $this->get_token_headers();

    $res_body = '';

     

    $form_data = json_encode( $form_data );

     

    $response = wp_remote_post(

    $url,

    array(

    'body' => $form_data,

    'headers' => $headers,

    )

    )

     

    And do the same thing for the newsletter form, please let us know if you further need any help.

Digital Marketing & Inbound Expert In Growth Hacking Technology

View solution in original post