Intercepting a Hubspot form submission and adding parameters to the redirection URL

[danbraun]

Using the following post, Teun provided a solution for me to intercept a Hubspot form submission and add parameters to the redirection URL: 

https://community.hubspot.com/t5/APIs-Integrations/Include-form-fields-as-redirect-URL-parameters-on...

It was working great, but recently, I am no longer able to capture the redirectURL value of the contextObject. It seems like the page redirects before I have a chance to. While the form is visible, I can see the value of redirectURL in hs_context, but like I said, the function Teun gave me doesn't seem to capture it in time (like it used to). 

If anyone can help me out, the form is the one that pops up when clicking "Get Your Personalized Report" button on this page: 

https://www.attigo.com/slra-roi-calculator

Thank you so much!

Below is the function as I am using it. It is located within a self-excuting function in a coded module used in the page template of the above link.

// Listening for Hubspot form submission

    window.addEventListener('message', event => {

        if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {

            const context = document.querySelector('input[name="hs_context"]');
            const contextObject = JSON.parse(context.value);
            const redirectUrl = contextObject.redirectUrl; // Retrieve the redirectUrl from the form settings
            const firstname = document.querySelector('input[name="firstname"]').value;
            const lastname = document.querySelector('input[name="lastname"]').value;
            const email = document.querySelector('input[name="email"]').value;
            const company = document.querySelector('input[name="company"]').value;
            const jobtitle = document.querySelector('input[name="jobtitle"]').value;
            const formParams = `&firstname=${firstname}&lastname=${lastname}&email=${email}&company=${company}&jobtitle=${jobtitle}`;

//           console.log('redirectUrl:', redirectUrl); // undefined :(

            if (paramString && redirectUrl) {
                document.cookie = "ROIReport=true"; 
                document.cookie = `ROIReportCompany=${company}`;
                document.cookie = `ROIReportFirstname=${firstname}`;
                document.cookie = `ROIReportLastname=${lastname}`;
                window.location.href = redirectUrl + paramString + formParams;
            }

        }
    });

[danbraun]

Sorry for not responding earlier. Thanks for the help!

Shouldn't this instead be kept open? While @BarryGrennan has a work around, isn't this still broken? If anyone needs to embed a form into module with the "snippet", and has need for the redirect url on submission, will they need to edit the snippet each time?

I would like to please know if this is a bug and if it is backlogged for fixing. Thank you!

[BarryGrennan · Accepted solution]

I'm home for the holidays so forgive me for not double checking here but I'm almost certain I got around this on a clients site recently by setting the response_redirect_id to blank like:

 {% form
	form_to_use="{{ module.form.form_id }}"
	response_response_type="{{ module.form.response_type }}"
	response_redirect_id=""
	response_redirect_url="{{module.form.redirect_url}}"
%}

---

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

[Jaycee_Lewis]

Hey, @BarryGrennan 👋 Thanks for looking! Enjoy your break! — Jaycee

[alyssamwilie]

@Jaycee_Lewis @danbraun Looks like the latest forms update was in October:  

https://developers.hubspot.com/changelog/forms-rendered-by-embed-code-are-updating

Doesn't seem like it should have any effect on the global event listener but maybe it's an unforseen bug? Other events for the listener work fine, it's just with onFormSubmit that the form no longer seems to effectively catch changes made using the listener.

[alyssamwilie]

Yea, recently it seems like the global event listener has stopped working to make changes to a form on  submission. We had some modules that broke due to this exact reason. The only solution was to switch to using a form embed code and moving all the code into the callback there.

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
  hbspt.forms.create({
    portalId: "XXXXX",
    formId: "{{ module.form.form_id }}",
    onFormSubmit: function($form) {
      ... code here ...          
    } 
  });
</script>

@Jaycee_Lewis You wouldn't happen to have any insight into wether HubSpot has changed something with forms this year that could have caused this break?

[Jaycee_Lewis]

Hi, @alyssamwilie, My source of truth for updates is the Changelog — Forms API. If the changes from earlier in 2022 are unrelated to what you're experiencing, I am happy to collaborate and do a bit of investigation on my own.

Best,

Jaycee