Trying to show CTA if Hubspot form has already been submitted on same page.

SOLVE
Highlighted
Occasional Contributor

This is a bit of a tricky one, that will likely require some additional coding or webhooks, but I thought I'd start here, since I figured it might be easier to achieve using a Workflow or Sequence that I'm just unaware of!

 

I have a webpage with a single field (email address) form that downloads a file when submitted. What I'd like to do, is only show the form if a contact hasn't filled it out previously. IF the contact has filled it previously, I would like to display a CTA to download the file directly (without the form/having to submit their email over and over). This is for a site with many gated downloads.

 

So for example: I'm a new user, I get to the download page. There's a form asking for my email address to download the file. I enter my email address and download the file. I close my browser, but go back to the same page tomorrow to re-download the file. This time, I'm presented with a download CTA button, but no form (since I've already filled it previously).

 

Is this possible? I hope I'm articulating this well enough! Thanks in advance!

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Esteemed Contributor

Hi @tdunlavey ,

 

Is this for a specific form, or all forms on the site?

 

Example:

  1. I visit Page A and fill out my email address. I download and enjoy Great Content A.
  2. Tomorrow I return to the site but visit Page B, which also has a form. Should I submit my email address again for Great Content B? Or not? Basically, should this be site-wide behaviour, or specific to each page?

 

Are these pages hosted on HubSpot as landing pages (or Website pages) or are they hosted externally and you're just using HubSpot forms on the pages?

 

If hosted on HubSpot - you can use Smart Content to do what you need. Basically, you'll just need to create a few dynamic Lists for your assets which list the people who have filled out the forms. Then you can have smart content based on a list membership rule -- if the user isn't in the list, show them the form. If they are, just show them a 'Download' button to go straight to the content. Pretty easy.

 

If NOT hosted on HubSpot - the easiest thing to do is to set your own cookies. Roughly, this looks like:

 

  1. Customize the HubSpot Forms Embed code to set your own cookie as the form is submitted. There's a great (free, lightweight) Javascript library for this called Cookies.js.
  2. On page load, check for the cookie, if it's present, show the 'Download' button, if it isn't, show the form.

Rough code (I didn't test this, just wrote it in the editor so do excuse any typos or missing brackets!):

 

<!-- add this in your document <head> </head> section-->
<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>


<!-- the following is how to structure your HTML -->
<div id="download">
  <button>Here's your button straight to the download</button>
</div>

<div id="form">
  <div id="hsForm">
   <!-- your HS form will render in here -->
  </div>
</div>



<script>
hbspt.forms.create({
      portalId: 'XXXX',
      formId: 'XXXXXXX-XXXXXXXXX',
      target: '#hsForm',
      onFormSubmit: function($form) {
         Cookies.set('__my_cookie_name', 'yes', { expires: 7, path: '' })
         // This will set a cookie with '__my_cookie_name' and value 'yes' (this can really be anything)
// It will expire in 7 days (you may want to make that higher).
// The path part means it will just be set on this page. If you want a cookie
// that works across your whole site, simply remove the ",path:''" part! } });
//here we check for the cookie on page load, if it already exists, we hide the form $(document).ready(function() { if(Cookies.get('__my_cookie_name')) { $('#download').css('display','block'); $('#form').css('display','none'); else { $('#download').css('display','none'); $('#form').css('display','block'); } }); </script>

Depends on your level of comfort as a developer how you get on with this Smiley Happy But that template above should pretty much do it. It's much easier and quicker to set your own cookie than to authenticate with the HubSpot API in this instance!

 

Hope that helps Smiley Happy

Mike

Reply
0 Upvotes
3 Replies 3
Highlighted
Esteemed Contributor

Hi @tdunlavey ,

 

Is this for a specific form, or all forms on the site?

 

Example:

  1. I visit Page A and fill out my email address. I download and enjoy Great Content A.
  2. Tomorrow I return to the site but visit Page B, which also has a form. Should I submit my email address again for Great Content B? Or not? Basically, should this be site-wide behaviour, or specific to each page?

 

Are these pages hosted on HubSpot as landing pages (or Website pages) or are they hosted externally and you're just using HubSpot forms on the pages?

 

If hosted on HubSpot - you can use Smart Content to do what you need. Basically, you'll just need to create a few dynamic Lists for your assets which list the people who have filled out the forms. Then you can have smart content based on a list membership rule -- if the user isn't in the list, show them the form. If they are, just show them a 'Download' button to go straight to the content. Pretty easy.

 

If NOT hosted on HubSpot - the easiest thing to do is to set your own cookies. Roughly, this looks like:

 

  1. Customize the HubSpot Forms Embed code to set your own cookie as the form is submitted. There's a great (free, lightweight) Javascript library for this called Cookies.js.
  2. On page load, check for the cookie, if it's present, show the 'Download' button, if it isn't, show the form.

Rough code (I didn't test this, just wrote it in the editor so do excuse any typos or missing brackets!):

 

<!-- add this in your document <head> </head> section-->
<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>


<!-- the following is how to structure your HTML -->
<div id="download">
  <button>Here's your button straight to the download</button>
</div>

<div id="form">
  <div id="hsForm">
   <!-- your HS form will render in here -->
  </div>
</div>



<script>
hbspt.forms.create({
      portalId: 'XXXX',
      formId: 'XXXXXXX-XXXXXXXXX',
      target: '#hsForm',
      onFormSubmit: function($form) {
         Cookies.set('__my_cookie_name', 'yes', { expires: 7, path: '' })
         // This will set a cookie with '__my_cookie_name' and value 'yes' (this can really be anything)
// It will expire in 7 days (you may want to make that higher).
// The path part means it will just be set on this page. If you want a cookie
// that works across your whole site, simply remove the ",path:''" part! } });
//here we check for the cookie on page load, if it already exists, we hide the form $(document).ready(function() { if(Cookies.get('__my_cookie_name')) { $('#download').css('display','block'); $('#form').css('display','none'); else { $('#download').css('display','none'); $('#form').css('display','block'); } }); </script>

Depends on your level of comfort as a developer how you get on with this Smiley Happy But that template above should pretty much do it. It's much easier and quicker to set your own cookie than to authenticate with the HubSpot API in this instance!

 

Hope that helps Smiley Happy

Mike

Reply
0 Upvotes
Occasional Contributor

Thanks, Mike! This is exactly what I was looking for!

 

I suppose in your example above, I am looking for something that works site-wide—ideally. If a user has to submit the form for different pieces of content throughout the site, that's fine, too.

 

I can't use the Smart Content in HS, since I am building on an external site. Basically, the site is a repository of end-to-end solutions and code snippets for AI developers. You can search the site, then sort/filter your results as-needed.

 

Also, instead of showing a form/download button on the page, I would love it if we could just gate access to the asset details page. So the flow would be:

 

A user searches for an Asset via a keyword. They find a result that looks good. When they click the result, they are greeted with a mandatory HS form prior to being able to view the Asset details page (which contains a HS CTA button to download the file for that Asset). It would be great it it appeared as an overlay over the Asset details page - "hold your horses" type of thing. Sort of like the popups I receive from news-sites when my adblocker is active.

 

If a user has already submitted the Hubspot form, then they are taken directly to the Asset details page, and can simply click the CTA found on that page to download the resource.

 

That way, I can track who downloads which assets. When someone enters their email address, then submits the form, they effectively become a contact. So when they subsequently click any of the unique download CTA buttons, I can track that activity.

 

Thanks again for taking the time to reply to this. If you have time to reply to my above thoughts, let me know! I greatly appreciate the assist here.

 

 

Reply
0 Upvotes
Highlighted
Esteemed Contributor

Hi @tdunlavey ,

 

Sorry for the slow response. Theoretically I should have nothing but time these days... theoretically!

 

That workflow sounds good to me. Yep, you can absolutely have it as a pop-up. I'd be aware that as this is not a true authentication approach, clever users could potentially bypass it by using their browser Dev Tools to hide the popup and then figure out from the Javascript where you would redirect them to, and just go straight there.

 

This is probably only a small percentage of people who would do such a thing, but something to be aware of if you're seeing more traffic to your asset page than you are seeing form submissions. I mention it especially as your target audience sounds very much on the technical side! And it's the kind of thing I do myself to sneak around modals from time-to-time. I know, I know... I should know better Smiley Happy

 

The site sounds interesting by the way, I'd be intersted to see it if you can share (or if you don't want to share publically, you can always DM me the link). 

 

Cheers,

Mike

 

PS: If you found the original answer helpful, please mark it as a solution Smiley Happy