Automatically change a form or add a expire/redirect on a landing page based on a criteria

SOLVE
Highlighted
Regular Contributor

What I would like to happen:

1. Contacts use a URL to register ( www.register)

2. After 50 contact register, I would like to have www.register redirect to www.waitlist

3. I would like for step 2 to happen automatically 

 

Suggestions on how to make that happen?

 

Reply
0 Upvotes
3 Accepted solutions

Accepted Solutions
Resident Expert

Short A: Not gonna happen without custom development.

 

Longer A

Considered using a custom property to auto-increment a counter, but then re-read your 'step 3' which is really a condition for implementation of 'step 2'.

 

Auto-implementation of a HubSpot page redirect based on criteria within HubSpot isn't native functionality. You may be able to emulate an auto-redirect using javascript, but that will have drawbacks when it comes to your page view stats. Not even sure if that's a viable option.

 

Looped in a few other guys with powerful kung fu - @tjoyce@Ty@roisinkirby@jennysowyrda

 

Can't wait to see what we can help you build on HubSpot next.

 

Best,
Frank


hubspot-solutions-signature-mfrankjohnson-v05.png

www.MFrankJohnson.com

Help find this post quickly ... accept this solution now.

Reply
0 Upvotes
Community Manager
Community Manager

Thanks for the tag @MFrankJohnson!

 

After chatting with another developer (@Tswyter) we seem to have come up with this solution, although we haven't tested it ourselves. What you are trying to do isn't a native function with forms, so there will be some api work involved in getting this to work.

 

Basically, your signup flow should look something like this:

1. User submits form on register.com

2. Form adds user to a custom list (event-registrants)

3. Use the Lists API  to check how many rows/users are currently in the (event-registrants) list

4. If the api sees that there are 50 or more rows, then you want to use the URL Mappings API to create a new url mapping

 

Once your API creates that URL mapping, it will begin to automatically redirect your "register" page, to the "waitlist" page.

The links included should explain how to do both of those actions pretty well. 

 

Hope this helped to clarify some of your questions and points you in the right direction!

-- Ty

Regular Advisor | Gold Partner | HubSpot Certified Trainer

Thanks for the tag too @MFrankJohnson - @aalvarado - Here's a way to do it without having to use the hubspot API

I went to restdb.io and created a simple datastore (you can use it, I won't delete it)

Basically I created a counter where a record gets added to a noSQL database (not that important to know Smiley Very Happy, just sharing)

Then, in the onFormReady() function callback, I am retrieving the record from the datastore and counting them. For the sake of simplicity in the plunkr example I put together, I just made the max number of submissions 3.

 

If the record count is 3 or more, then jQuery is hiding the form and showing the waiting list content. 

 

If the record count is less than 3, the form continues to show and hides the waiting list div.

 

You will also notice a button that you will be able to use internally to reset the counter back down to 0.

 

In order to mimic this functionality in the plunkr, fill out the form and then hit stop and then start again. This will mimic a new user navigating to your form

reset.png

 

Here's the code you can use and swap out your form id and portal id:

    <div class="waiting-room" style="display:block;">
      <h3>Sorry, you're in the waiting room.</h3>
      <div style="background:#3db5d8;color:white;float:left;padding:20px 50px;clear:both;margin-top:20px;cursorSmiley Tongueointer;" class="counter-reset">
        RESET THE COUNTER
      </div>
      <div style="display:none;" class="loading"><img src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/585d0331234507.564a1d239ac5e.gif" /></div>
    </div>
    <div class="show-the-form" style="display:none;">
      <!--[if lte IE 8]>
      <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
      <![endif]-->
      <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
      <script>
        //this is the code for the reset button
        $('.counter-reset').on('click', function(){
          $('.loading').show();
      	  var getsettings = {
            "async": true,
            "crossDomain": true,
            "url": "https://alpha-7a1a.restdb.io/rest/counter",
            "method": "GET",
            "headers": {
              "content-type": "application/json",
              "x-apikey": "5b9c26256e310a4351fdc086",
              "cache-control": "no-cache"
            }
          }
          
          $.ajax(getsettings).done(function (response) {
            $.each(response, function(i, v){
              var settings = {
                "async": true,
                "crossDomain": true,
                "url": "https://alpha-7a1a.restdb.io/rest/counter/"+v['_id'],
                "method": "DELETE",
                "headers": {
                  "content-type": "application/json",
                  "x-apikey": "5b9c26256e310a4351fdc086",
                  "cache-control": "no-cache"
                }
              }
              
              $.ajax(settings).done(function (response) {
                console.log(response);
              });

              if(i == response.length){
                $('.loading').hide();
              }
            })
          });
          

        })
      
      
      
        hbspt.forms.create({
      	portalId: "662325",
      	formId: "6471aa9e-95b7-45fc-8fc0-da054edcc30a",
      	onFormReady: function(){
//this is the code to fectch the counter var settings = { "async": true, "crossDomain": true, "url": "https://alpha-7a1a.restdb.io/rest/counter", "method": "GET", "headers": { "content-type": "application/json", "x-apikey": "5b9c26256e310a4351fdc086", "cache-control": "no-cache" } } $.ajax(settings).done(function (response) { $('body').prepend('<div style="margin-top:30px;margin-bottom:30px;">The counter is currently @ <strong>' + response.length + '</strong>') if(response.length > 2){ $('.show-the-form').hide(); $('.waiting-room').show(); }else{ $('.show-the-form').show(); } }); }, onFormSubmit: function(){
//this is the code to add a new entry to the counter var jsondata = {"counter":"1"}; var settings = { "async": true, "crossDomain": true, "url": "https://alpha-7a1a.restdb.io/rest/counter", "method": "POST", "headers": { "content-type": "application/json", "x-apikey": "5b9c26256e310a4351fdc086", "cache-control": "no-cache" }, "processData": false, "data": JSON.stringify(jsondata) } $.ajax(settings).done(function (response) { console.log(response); }); } }); </script> </div>

And here's the plunkr working example: https://plnkr.co/edit/QxZMHjpe7Qo0epHDUAST?p=preview

 

P.S. I might cleanup the plunkr code later to make it more lean. Just don't have a whole lotta time right now.

 


If this answer helped, please, mark as solved Smiley Very Happy


tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

 

Drop by and say Hi to me on slack.

Reply
0 Upvotes
7 Replies
Resident Expert

Are you using HubSpot Marketing Enterprise or HubSpot Marketing Pro?

Reply
0 Upvotes
Regular Contributor

I am using HubSpot Marketing Pro.

Reply
0 Upvotes
Resident Expert

Short A: Not gonna happen without custom development.

 

Longer A

Considered using a custom property to auto-increment a counter, but then re-read your 'step 3' which is really a condition for implementation of 'step 2'.

 

Auto-implementation of a HubSpot page redirect based on criteria within HubSpot isn't native functionality. You may be able to emulate an auto-redirect using javascript, but that will have drawbacks when it comes to your page view stats. Not even sure if that's a viable option.

 

Looped in a few other guys with powerful kung fu - @tjoyce@Ty@roisinkirby@jennysowyrda

 

Can't wait to see what we can help you build on HubSpot next.

 

Best,
Frank


hubspot-solutions-signature-mfrankjohnson-v05.png

www.MFrankJohnson.com

Help find this post quickly ... accept this solution now.

Reply
0 Upvotes
Community Manager
Community Manager

Thanks for the tag @MFrankJohnson!

 

After chatting with another developer (@Tswyter) we seem to have come up with this solution, although we haven't tested it ourselves. What you are trying to do isn't a native function with forms, so there will be some api work involved in getting this to work.

 

Basically, your signup flow should look something like this:

1. User submits form on register.com

2. Form adds user to a custom list (event-registrants)

3. Use the Lists API  to check how many rows/users are currently in the (event-registrants) list

4. If the api sees that there are 50 or more rows, then you want to use the URL Mappings API to create a new url mapping

 

Once your API creates that URL mapping, it will begin to automatically redirect your "register" page, to the "waitlist" page.

The links included should explain how to do both of those actions pretty well. 

 

Hope this helped to clarify some of your questions and points you in the right direction!

-- Ty

Resident Expert

YW @Ty ... yea, the list part is pretty straight forward right up until we get to the counter which we may be able to do with an Enterprise calc property now (dunno) -- if we were using Enterprise.

Also, thought I saw someone whip out some js kung fu on a HubSpot form, but couldn't find it in search. Besides, most of those hacks come with a serious disclaimer. haha

 

Thanks and have a great weekend.

Reply
0 Upvotes
Regular Contributor

Thank you for your suggestion! API is outside my wheelhouse but I may try a go at it.

Reply
0 Upvotes
Regular Advisor | Gold Partner | HubSpot Certified Trainer

Thanks for the tag too @MFrankJohnson - @aalvarado - Here's a way to do it without having to use the hubspot API

I went to restdb.io and created a simple datastore (you can use it, I won't delete it)

Basically I created a counter where a record gets added to a noSQL database (not that important to know Smiley Very Happy, just sharing)

Then, in the onFormReady() function callback, I am retrieving the record from the datastore and counting them. For the sake of simplicity in the plunkr example I put together, I just made the max number of submissions 3.

 

If the record count is 3 or more, then jQuery is hiding the form and showing the waiting list content. 

 

If the record count is less than 3, the form continues to show and hides the waiting list div.

 

You will also notice a button that you will be able to use internally to reset the counter back down to 0.

 

In order to mimic this functionality in the plunkr, fill out the form and then hit stop and then start again. This will mimic a new user navigating to your form

reset.png

 

Here's the code you can use and swap out your form id and portal id:

    <div class="waiting-room" style="display:block;">
      <h3>Sorry, you're in the waiting room.</h3>
      <div style="background:#3db5d8;color:white;float:left;padding:20px 50px;clear:both;margin-top:20px;cursorSmiley Tongueointer;" class="counter-reset">
        RESET THE COUNTER
      </div>
      <div style="display:none;" class="loading"><img src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/585d0331234507.564a1d239ac5e.gif" /></div>
    </div>
    <div class="show-the-form" style="display:none;">
      <!--[if lte IE 8]>
      <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
      <![endif]-->
      <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
      <script>
        //this is the code for the reset button
        $('.counter-reset').on('click', function(){
          $('.loading').show();
      	  var getsettings = {
            "async": true,
            "crossDomain": true,
            "url": "https://alpha-7a1a.restdb.io/rest/counter",
            "method": "GET",
            "headers": {
              "content-type": "application/json",
              "x-apikey": "5b9c26256e310a4351fdc086",
              "cache-control": "no-cache"
            }
          }
          
          $.ajax(getsettings).done(function (response) {
            $.each(response, function(i, v){
              var settings = {
                "async": true,
                "crossDomain": true,
                "url": "https://alpha-7a1a.restdb.io/rest/counter/"+v['_id'],
                "method": "DELETE",
                "headers": {
                  "content-type": "application/json",
                  "x-apikey": "5b9c26256e310a4351fdc086",
                  "cache-control": "no-cache"
                }
              }
              
              $.ajax(settings).done(function (response) {
                console.log(response);
              });

              if(i == response.length){
                $('.loading').hide();
              }
            })
          });
          

        })
      
      
      
        hbspt.forms.create({
      	portalId: "662325",
      	formId: "6471aa9e-95b7-45fc-8fc0-da054edcc30a",
      	onFormReady: function(){
//this is the code to fectch the counter var settings = { "async": true, "crossDomain": true, "url": "https://alpha-7a1a.restdb.io/rest/counter", "method": "GET", "headers": { "content-type": "application/json", "x-apikey": "5b9c26256e310a4351fdc086", "cache-control": "no-cache" } } $.ajax(settings).done(function (response) { $('body').prepend('<div style="margin-top:30px;margin-bottom:30px;">The counter is currently @ <strong>' + response.length + '</strong>') if(response.length > 2){ $('.show-the-form').hide(); $('.waiting-room').show(); }else{ $('.show-the-form').show(); } }); }, onFormSubmit: function(){
//this is the code to add a new entry to the counter var jsondata = {"counter":"1"}; var settings = { "async": true, "crossDomain": true, "url": "https://alpha-7a1a.restdb.io/rest/counter", "method": "POST", "headers": { "content-type": "application/json", "x-apikey": "5b9c26256e310a4351fdc086", "cache-control": "no-cache" }, "processData": false, "data": JSON.stringify(jsondata) } $.ajax(settings).done(function (response) { console.log(response); }); } }); </script> </div>

And here's the plunkr working example: https://plnkr.co/edit/QxZMHjpe7Qo0epHDUAST?p=preview

 

P.S. I might cleanup the plunkr code later to make it more lean. Just don't have a whole lotta time right now.

 


If this answer helped, please, mark as solved Smiley Very Happy


tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

 

Drop by and say Hi to me on slack.

Reply
0 Upvotes