populating Hubspot Hidden field and 403 error

[JohnSmith2314]

Hi everyone.

My Goal: "I am trying to use the hbspt.forms.create JavaScript function to embed a form so I can use the onFormReady callback to populate a hidden field."

<div id="hubspot-form-target-final"></div>

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

<script>
  hbspt.forms.create({
    region: "na2",
    portalId: "PORTALID", 
    formId: "FORMID",
    target: '#hubspot-form-target-final',
    
    onFormReady: function($form) {
      console.log('Success! onFormReady callback has fired.');
      const formElement = $form[0];
      
      
      const hiddenField = formElement.querySelector('input[name="0-1/giveaway_url"]');
      
      if (hiddenField) {
        
        const currentUrl = new URL(window.location.href);
        const cleanUrl = currentUrl.origin + currentUrl.pathname;
        
        hiddenField.value = cleanUrl;
        
        const inputEvent = new Event('input', { bubbles: true });
        hiddenField.dispatchEvent(inputEvent);
        
        console.log('Hidden field populated successfully with:', cleanUrl);
      } else {
        console.error('Field not found. Please inspect the form to get the correct "name" attribute.');
      }
    }
  });
</script>

The Problem: "The form appears visually on my page, but the onFormReady callback never fires. The browser console shows a 403 Forbidden error for a resource being loaded from forms-na2.hsforms.net."

What I've Already Done: "I have already confirmed the following:

The issue persists in a Chrome Guest/Incognito window, ruling out browser extensions.

All caching plugins (like WP Rocket) and server-side caches are disabled.

My domain is correctly added to the 'Limit tracking to these domains' list in my HubSpot settings.

The form does not have CAPTCHA or special GDPR consent settings enabled."

[JohnSmith2314 · Accepted solution]

I was able to achieve my goal using a different approach.

I discovered that by passing the internal name of a HubSpot property along with its value as a query string parameter in the URL, it’s possible to prefill the corresponding field in the form.

To implement this, I added the following code to my WordPress website via the functions.php file. This code performs a server-side redirect to a version of the URL with the appended query string parameter before the page is returned to the user (so there is no page reload on their end). This in turn pre-fills the giveaway_url parameter:

function custom_function_add_giveaway_url_parameter() {
    // Check if the current page is a singular "page" and if its URL contains '/giveaways/'.
    // You can make this condition more or less specific to target the right pages.
    if ( is_singular('page') && strpos( $_SERVER['REQUEST_URI'], '/giveaways/' ) !== false ) {

        // Check if our specific query parameter is NOT already in the URL.
        // This is crucial to prevent an infinite redirect loop.
        if ( !isset( $_GET['giveaway_url'] ) ) {

            // Get the full, current URL of the page.
            $current_url = home_url( $_SERVER['REQUEST_URI'] );

            // Prepare the URL to be used as a value in the query string.
            $url_for_parameter = urlencode( $current_url );

            // Build the new URL with the query parameter appended.
            $redirect_url = add_query_arg( 'giveaway_url', $url_for_parameter, $current_url );

            // Redirect the user to the new URL and stop script execution.
            wp_redirect( $redirect_url, 302 );
            exit();
        }
    }
}
// Hook our function into the 'template_redirect' action, which runs before the page template is loaded.
add_action( 'template_redirect', 'custom_function_add_giveaway_url_parameter' );