Handling form submission delay to contact properties

[tmcmillan99]

We have a form that is gathering inputs from the user, doing calculations (via javascript) based on those inputs, then obviously posting the data to the appropriate contact properties. The form would originally redirect to a "results" page where we display the data from the form. However, we ran into the issue where the redirected page would not display the data initially. Doing a refresh after a couple of seconds would populate the data. We assumed it was due to a timing issue with Hubspot getting the data posted to the contact properties. The redirect does not give Hubspot enough time to post the data. As a result, we are now redirecting to a temp page that has a message stating your data is being "calculated". There is a javascript delay that then redirects to the real results page.

Is this the best way to handle this scenario or are there better options we can look at? 

Thanks,

Terry

[BarryGrennan · Accepted solution]

IMO the best way to handle this is to use a form event listener to pass the data to the results page as a query string. That way you avoid any uncertainty.

Here's an example I used for a client

window.addEventListener('message', event => {
   if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
     let formData = event.data.data;
      window.location.href = createURL(formData);
   }
});

const resultURLSlug = '/calculator-results?results=';

// Create search param for URL
function createURL(data) {
  let searchParam = [];
  for (var i = 0; i < data.length; ++i) {
    let score = data[i];
     if(score.name != 'email'){
       var firstWord = score.name.split("_", 2);
       searchParam.push(`${firstWord[0]}-${[score.value]}`);
     }
  }
  resultsURL = `${resultURLSlug}${searchParam.join('_')}`;
  console.log(resultsURL)
  return resultsURL;
}

Then use 

{{ request.query_dict.[SOME PIECE OF DATA FROM THE URL] }}

to fill in the data on the page.

---

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

[tmcmillan99]

@BarryGrennan Thanks for the suggestion. I really appreciate it. I hadn't even thought about that option but makes sense.  Since you're using the window.location.href, I am assuming that the redirect option in the form settings is no longer needed and I would just set it back to the default thank you message option, correct? The code will load the redirect page.

Terry

[BarryGrennan]

@tmcmillan99. 

If memory serves, yeah, that works.

In custom modules I've also pulled the part of the form code that sets the URL and used that in the event listener so the client can still set the landing page URL.

(I'm tired and not in front of my laptop, I hope that made sense)

---

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn