CMS Development

DavidFJones
Member | Platinum Partner
Member | Platinum Partner

Hubspot Form Caching Data

Hey all,

I currently have a hubspot form embedded into a custom template I've built, and I'm having an issue with the default values not updating/caching in the form fields.

This is how my form is currently set up 


hubspot_form.png
The current process I am wanting to have is:
User updates field (lets say Nickname)
Form redirects to the same page (so basically a refresh)
User now sees updated values in form fields.

There are a couple of problems I am running into with this approach however.

The first is that the form will not update the data fast enough. So by the time page redirects/reloads, the previously used information will still be in these fields.

The other problem is that if the user lands on this page before the form fields get uploaded, the page seems to cache the default values and will not update.

For example, if the current value of the nickname field is "test1" and we change it to "New Name", when the user hits submit the field will still show "test1". Furthermore, if the user refreshes or even leaves the page and returns to it via a different link, the default value of this field will still be "test1", despite "New Name" now being set on the users contact properties.

Another solution I have tried is  instead of having the page redirect to itself, just have a message telling the user that they need to refresh to see changes, and that it can take sometime. However, if the user quickly refreshes the page before all the data is set, the same caching issue occurs, with the nickname field showing the previously used data.

0 Upvotes
3 Replies 3
stefen
Key Advisor | Partner
Key Advisor | Partner

Hubspot Form Caching Data

@DavidFJones I've done something similar before with gating content on the page and redirecting the form to itself.

 

When the form redirects there is a "submissionGuid" query paremeter added to the URL. So, what I did was check for the query paramater, show a loading spinner if it exists, then refresh the page after 2 seconds. This typically was enough time in my testing for the database to get updated.

 

Here's some example code:

{% if request.query is string_containing "submissionGuid" %}
<div class="loading-spinner"></div>
<script>
	setTimeout(function(){
		window.location = window.location.pathname;
	}, 2000);
</script>
{% endif %}

you'd want to style the loading spinner with your own CSS. Hope that helps!

Stefen Phelps, Community Champion, Kelp Web Developer
0 Upvotes
DavidFJones
Member | Platinum Partner
Member | Platinum Partner

Hubspot Form Caching Data

So this just got a bit more interesting. I tried your solution @stefen , but this seemed to have the same result. I then Incorporated a new script to load the form and submit the data, but delay the page redirect. This new script seemed to fix all the issues except for the form data "caching" the previously stored values. The page (aside from the form) now shows the updated data - 

jQuery.getScript("//js.hsforms.net/forms/v2.js", function() {
        hbspt.forms.create({
            portalId: "xxxxxxx",
            formId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
            onFormSubmit: function($form) {
                setTimeout(function() {
                    window.location = "{{ request.path }}";
                }, 3000);
            }
        });
    });

So my page currently has the nickname property displayed on the top with

{% set name = personalization_token("contact.lms_nickname", "Friend") %}

[1]. A second temporary tag that is set to display {{contact.lms_nickname}}[2], and then the form itself[3].
sample_image.pngIn this screenshot you can see that the nickname field is still showing the old name despite it being different on the contact.
To further complicate things I was also running the following script when I took this screen shot

    var checkExist = setInterval(function() {
      if ($('input').first().length) {
          clearInterval(checkExist);
          updateField($('input').first()[0]);
          return;
      }
      console.log('nope');
    }, 100); // check every 100ms

    function updateField (f) {
      var title = $('strong').first()[0];
      f.value = title.innerHTML;
    }

What this does is every 100ms check to see if the form input exists, and if it does grab the strong innerhtml value of our title[1], and then change the value of the input to match.
When I run this, for a fraction of a second I could see the input's value change to the correct value before changing back to the previously stored value. 

 

[EDIT]: Just to clarify, this is affecting every property in the form as well, not just the nickname field

0 Upvotes
DavidFJones
Member | Platinum Partner
Member | Platinum Partner

Hubspot Form Caching Data

Another Update.

After doing some more testing it seems like the issue is due to how HubSpot uses/creates it's tracking cookies. When you have a form set to "Pre-populate contact fields with known values" it uses the users tracking cookie to pull this data. 

 

I'm not sure how or if this is possible, but I believe the solution to this will involve updating the users cookie with the updated form data on submission. This way the correct data gets pulled after the user is redirected to the page