Dynamic Hubspot forms per blog page

Hey @marcmarcmarc,

Thank you for reaching out!

Our plugin includes an Elementor and Gutenberg widget named ‘HubSpot Form’. This widget functions like a standard widget and features a searchable dropdown menu listing all your forms. This is the simplest and most officially supported method for changing the form on a page.

While we don’t officially support integrating with alternative plugins, it should be feasible to dynamically set a form ID using ACF that Elementor can recognize through its Dynamic Tag feature. You could then insert a HubSpot form shortcode within an Elementor Shortcode widget, using a dynamic tag for the form ID value.

Please note: Elementor Dynamic Tags are an Elementor Pro feature. As I don’t have a Pro license, I haven’t been able to test this thoroughly.

Here’s a step-by-step guide:

1. Create an ACF Field Group and a corresponding Field for each of your forms.
   Example for my form ‘Form A’ I created:
   ACF Group: Form A Group
   Field: Form A
   Name: hubspot_form_id (Use the same name for all your fields as this will be referenced in the shortcode.)
   Default value: a447cd08-7939-4d17-ade5-a806ba5f03c8 (Replace with your form UUID)
2. Set a Location Rule in the ‘Form A Group’ settings so that the field only appears on desired pages/posts.
   For instance:
   Rule: Show this field group if => ‘Post Category’ equals ‘Test Category’.
3. In the Elementor editor, add a Shortcode widget to your Page/Post that meets your rule condition and select the Dynamic Tag button (it looks like a database icon).
   Your shortcode might look something like this:
   [hubspot type="form" portal="YOUR_PORTAL_ID" id="{{acf:hubspot_form_id}}"]

4. Provided the Page/Post satisfies the rule condition, the form should render correctly.

If you don’t have an Elementor Pro license, an alternative and more complex workaround involves creating a custom shortcode in your theme’s functions.php file using ACF’s get_field function.
Always back up this file before making changes.

The code snippet would resemble the following:

function acf_hubspot_form_shortcode($atts) {
    // Retrieve the ACF field value, ensuring it matches your actual ACF field name
    $form_id = get_field('hubspot_form_id');

    // If there's no form ID returned, do nothing
    if(!$form_id) {
        return '';
    }

    // Return the HubSpot form shortcode with the dynamic form ID. You could also hardcode the portal ID here to avoid including it in each shortcode instance.

    return do_shortcode('[hubspot type="form" portal="'.esc_attr($atts['portal']).'" id="'.esc_attr($form_id).'"]');
}

// Register your new shortcode with WordPress
add_shortcode('acf_hubspot_form','acf_hubspot_form_shortcode');

Then, in your Elementor or Gutenberg Shortcode widget, simply use:[acf_hubspot_form portal="YOUR_PORTAL_ID"]

Hopefully, one of these solutions helps!

Best Regards,
Gearoid