How to redirect to a page URL based on a form (hidden) field option

VRey — Tue, 19 Dec 2023 15:07:31 GMT

Hello all,

I've never really used any script and here's my problem:

I have a HS landing page with a HS form embeded.

If a visitor comes to my landing page from a Wordpress "cloud" page, a hidden property (solution) in the form is filled with "cloud" (with a ? in the url).

So if a visitor comes to the landing page from a "Cloud" page, the hidden form field "solution" is filled with "cloud".

What I need is that when he clicks on "subbmit", he is redirected to a certain url page : https://mywebsite/cloud_thankyou_page

and same thing if he comes from the "cyber" page or the "datacenter" page etc.

I tried this :

(of course the xxx are is stead of the real info)

hbspt.forms.create({

region: "xxx",

portalId: "xxxxxx",

formId: "xxxxxxxxxxxxxxxxxxxxxxxxxxx"

onFormSubmit: function($form){

var solution = $form.find('select[name="solution"]').val();

setTimeout( function() {

if (solution == "cloud" ) {

window.location.href = 'https://mywebsite/cloud_thankyou_page ';}

else if (xprsolution == 'datacenter'){

window.location.href = 'https://mywebsite/dc_thankyou_page ';}

else if (xprsolution == 'cyber'){

window.location.href = 'https://mywebsite/cyber_thankyou_page ';}

}, 500 ); //

}

});

</script>

Then I read a post and replaced

var solution = $form.find('select[name="solution"]').val();

by this line with my info :

const employeeCount = $form.querySelector('select[name="numemployees"]').value;

Then I read about jQuery being desactivated on my pages on HS, so I activaed it. And tried again both versions of the code. Nothing seems to work.

Also I read countless pages on this and nobody explains where we have to put this script ? So I tried in <head> and then in enriched text - advances - source code.

Still nothing.

Could someone please help me ? I've been at this for hours...

Re: How to redirect to a page URL based on a form (hidden) field option

SteveHTM — Tue, 19 Dec 2023 18:41:53 GMT

@VRey,

It seems to me that you have most of the required elements in place for this to work. I'll comment here about how I used the form enhancement mechanics to achieve a content specific redirection. Hopefully there is enough overlap for you to complete your own solution. Since you have got this far, I hope you already know the form MUST be in RAW mode for this type of adaptation.

There are a couple of things I would comment on specifically:

Firstly, the redirect URL can be added to a form creation directly using one of the parameters: redirectUrl. If timing is an issue here, then the page redirect can be actioned in JS directly on the submit action, although I would note that there seems to be some precedence rules to be applied to the URL thats actually used - that is don't add a redirect value in the form editor directly.

Secondly, the extraction of the value from a hidden form field (populated by a query parameter) can actually be undertaken on "form ready" rather than on submit. my own approach may not be optimal, but it is posssible to use the HubSpot generated IDs for this form instance to uncover the DOM Input object and get its value.

hbspt.forms.create({ region: "na1", portalId: "{{hub_id}}", formId: "{{ selected_form_id }}", redirectUrl: "{{ module.document_url.href }}", onFormReady: function($form) { // YOUR SCRIPT HERE console.log("ready\n",$form); console.log("Salesforce campaign: {{ module.salesforce_campaign }}"); //find sibling of label on a hidden field) var field_id = "label-" + "{{ module.property }}" + "-" + "{{ selected_form_id }}"; let label = document.getElementById(field_id); let field = label.nextSibling.nextSibling.firstChild; console.log("Found element type: ", field.nodeName); } });

Hope this helps!

Steve

topic Re: How to redirect to a page URL based on a form (hidden) field option in APIs & Integrations

How to redirect to a page URL based on a form (hidden) field option

Re: How to redirect to a page URL based on a form (hidden) field option