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

8 Replies 8
Nagarjoon
Member

Hubspot & Drupal Integration

SOLVE

Encountering an issue with mapping fields from your Drupal webforms to your HubSpot forms using the HubSpot module. Here are some steps you can take to troubleshoot and potentially resolve the issue: Ensure Correct Configuration: Double-check that your HubSpot module is properly configured and connected to your HubSpot developer account with the necessary scopes. Make sure you have the appropriate permissions to access and map fields. Form Settings: Verify that your Drupal webforms are correctly configured and enabled. Ensure that the forms you're trying to map have the necessary fields for mapping. Handler Configuration: When adding the HubSpot Handler to your form, ensure that you're selecting the correct HubSpot form to map to. Sometimes, the form selection dropdown may not populate if there are issues with the connection or permissions. Check for Errors: Inspect the browser console for any JavaScript errors that may be preventing the field mapping interface from loading properly. Also, check the Drupal logs for any errors related to the HubSpot module. Module Compatibility: Make sure that the version of the HubSpot module you're using is compatible with your Drupal 9 site. Check for any updates or patches that may address issues with field mapping. Community Support: Reach out to the Drupal community forums or the HubSpot module's issue queue on Drupal.org for assistance. Other users or module maintainers may have encountered similar issues and could provide valuable insights or solutions. If you're still unable to resolve the issue after following these steps, consider reaching out to the module maintainers directly for more personalized support. Additionally, providing detailed information about your setup and any error messages you're encountering can help others diagnose the problem more effectively.

0 Upvotes
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?