APIs & Integrations

SLindblom
Member

Hubspot & Drupal Integration

SOLVE

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
himanshurauthan
Solution
Thought Leader | Elite Partner
Thought Leader | Elite Partner

Hubspot & Drupal Integration

SOLVE

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
himanshurauthan
Thought Leader | Elite Partner
Thought Leader | Elite Partner

Hubspot & Drupal Integration

SOLVE

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

Hubspot & Drupal Integration

SOLVE

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
Thought Leader | Elite Partner
Thought Leader | Elite Partner

Hubspot & Drupal Integration

SOLVE

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
SLindblom
Member

Hubspot & Drupal Integration

SOLVE

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

0 Upvotes
SLindblom
Member

Hubspot & Drupal Integration

SOLVE

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
himanshurauthan
Thought Leader | Elite Partner
Thought Leader | Elite Partner

Hubspot & Drupal Integration

SOLVE

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
dennisedson
HubSpot Product Team
HubSpot Product Team

Hubspot & Drupal Integration

SOLVE

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