How to make redirection urls dynamic in hubspot module.

[FurqanAli]

Hi there,

I was working on setting the form redirection after submission based on the select box values in my form and I was able to set it up in javascript but how I can make it dynamic by adding the possibility to a set URL for different options from my module in the editor using hubl.

my javascript code:
let result;
// console.log("Checking result: "+result);
window.addEventListener('message', event => {
if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
result = event.data.data.find(x => x.name === 'workspace_size').value;
}
if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
if (result === '1-45') {
window.location = 'https://www.example1.com';
} else if (result === '46-200'){
window.location = 'https://www.example2.com';
}
}
}); 

[DHarrison0]

---

@FurqanAli wrote:

Hi there,

I was working on setting the form redirection after submission based on the select box values in my form and I was able to set it up in javascript but how I can make it dynamic by adding the possibility to a set URL for different options from my module in the editor using hubl.

my javascript code:
let result;
// console.log("Checking result: "+result);
window.addEventListener('message', event => {
if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
result = event.data.data.find(x => x.name === 'workspace_size').value;
}
if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
if (result === '1-45') {
window.location = 'https://www.accedii.com';
} else if (result === '46-200'){
window.location = 'https://www.example2.com';
}
}
}); 

---

Thanks For It! I'm also suffering from this issue and it really helpful.

[BarryGrennan · Accepted solution]

Add some URL fields to your module and put your js inside a {% require_js %} tag in the modules HTML + HubL area like this:

{% require_js %}
<script>
 let result;
window.addEventListener('message', event => {
if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
result = event.data.data.find(x => x.name === 'workspace_size'').value;
}
if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
if (result === '1-45') {
window.location = '{{ module.url_1.href }}';
} else if (result === '46-200'){
window.location = '{{ module.url_2.href }}';
}
}
}); 
</script>
{% end_require_js %}

{{ module.url_1.href }} and {{ module.url_2.href }} being the call to the module fields.

I tested it in my portal and it works 🙂

---

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

[FurqanAli]

Thanks a lot, @BarryGrennan I had a similar solution in my mind.