How to use ACF field value as redirect URL in HubSpot form submission

Other Questions HubSpot
1

I’m working with WordPress using Divi theme, Advanced Custom Fields plugin, and HubSpot forms. My setup includes a HubSpot form that’s embedded through a Divi Code Module. After form submission, users should be redirected to protected content.

The issue I’m facing is that I want my client to be able to modify the redirect URL through an ACF field in the WordPress admin instead of editing the JavaScript code directly. I can confirm the ACF field works fine when used with regular buttons.

Here’s my current implementation:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>

<script>
    hbspt.forms.create({
        region: "na1",
        portalId: "12345678",
        formId: "abcd-1234-efgh-5678",
        onFormSubmit: function($form) {
            setTimeout( function() {
                var userData = $form.serialize();
                window.location = acf.get_field('download_page_url');
            }, 500 ); 
        }
    });
</script>

The redirect works perfectly when I hardcode a URL, but I can’t figure out how to properly retrieve the ACF field value within this JavaScript context. Any suggestions on how to make this work?

2

The problem is acf.get_field() doesn’t work in frontend JavaScript - it’s a PHP function. You need to output the ACF value directly into your script using PHP. Wrap your JavaScript in PHP tags and echo the field value: ```php

3

Here’s another approach that works great with Divi - create a custom shortcode in your functions.php file. Way more flexible than hardcoding PHP in the script. Add this to functions.php:

function hubspot_redirect_script() {
    $redirect_url = get_field('download_page_url');
    return '<script>var hubspotRedirectUrl = "' . esc_url($redirect_url) . '";</script>';
}
add_shortcode('hubspot_redirect', 'hubspot_redirect_script');

Then drop the shortcode in your Divi Code Module before your HubSpot script and reference the variable:

[hubspot_redirect]
<script>
hbspt.forms.create({
    // your form config
    onFormSubmit: function($form) {
        setTimeout(function() {
            window.location = hubspotRedirectUrl;
        }, 500);
    }
});
</script>

This keeps your ACF logic separate from the form config and makes everything easier to maintain. Works reliably across different WordPress setups.

4

I dealt with this exact problem last month on a client project. The cleanest fix is using wp_add_inline_script() in functions.php to inject your ACF value as a JavaScript variable. It keeps everything properly enqueued and you don’t have to mix PHP directly in your Code Module.

Add this to functions.php:

function enqueue_hubspot_acf_data() {
    if (is_page()) { // adjust condition as needed
        $redirect_url = get_field('download_page_url');
        wp_add_inline_script('jquery', 'var acfRedirectUrl = "' . esc_url($redirect_url) . '";', 'before');
    }
}
add_action('wp_enqueue_scripts', 'enqueue_hubspot_acf_data');

Then in your Divi Code Module, just reference the variable:

window.location = acfRedirectUrl;

This way the ACF value’s ready before your HubSpot script runs and follows WordPress best practices for script dependencies.

5

you need to pass that ACF value to JS with wp_localize_script in functions.php. Once it’s available in your script, you can use that var in the HubSpot redirect instead of acf.get_field. that method won’t work on frontend js.

6

Quick fix - add get_field() right in the script tag. Just echo it where you need the URL: window.location = "<?php echo get_field('download_page_url'); ?>"; The Divi code module handles PHP, so you’re good to go.