Automatically change a form or add a expire/redirect on a landing page based on a criteria
解決
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.
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!
Automatically change a form or add a expire/redirect on a landing page based on a criteria
解決
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 :D, 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
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;cursor:pointer;" 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>
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!
Automatically change a form or add a expire/redirect on a landing page based on a criteria
解決
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 :D, 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
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;cursor:pointer;" 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>
Automatically change a form or add a expire/redirect on a landing page based on a criteria
解決
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.
Note: Please search for recent posts as HubSpot evolves to be the #1 CRM platform of choice world-wide.
Automatically change a form or add a expire/redirect on a landing page based on a criteria
解決
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.