Relative URL to connect Multi page form


#1

I created a multi page form that I want to embed on several sites. However when I redirect to the next page within the form the URL can only be absolute. Where and how can I change this to accept relative URL so the same form pages can be used in several sites as long as the structure is the same?

Like this /page2/ instead of http://mysdite.com/page2/?


#2

Hi @Julia_Ruess

HubSpot forms will only support using absolute URLs as the redirect URL. Our forms submit their data to HubSpot, specifically to a URL on forms.hubspot.com, so any relative URL would be relative to the forms.hubspot.com domain.

It would be possible to set the redirect in the embed code on a specific page, using the redirectUrl option, so you would be able to set a different redirect URL on each page you’re embedding the form on, but you’d still need to use an absolute URL for that setting.


#4

Thanks!
The form is embedded in web pages like this one: http://africanamericanadoptionsonline.com/for-adoptive-families/application-for-adoptive-families/

To clarify: instead of adding the URL to the form, I could just redirect from page to page within each site the from is embedded in?
no redirect added here:

But added to the script here?

<div class="content-form"><!-- [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>
  hbspt.forms.create({ 
    portalId: '386934',
    formId: '7b75d5a2-2a79-42f6-b6d8-358833e1a8d3'
  });
</script></div>

Can you show me how to add the redirectUrl to the code above?


#5

You would add the redirectUrl parameter inside the forms.create() call:

hbspt.forms.create({ 
    portalId: '386934',
    formId: '7b75d5a2-2a79-42f6-b6d8-358833e1a8d3',
    redirectUrl: 'http://africanamericanadoptionsonline.com/path/to/page'
});

#6

Hi David,
First of all thank you so much for your help so far! I entered the redirectUrl to the embedded form code in the page. It all went smoothly until in Hubspot the redirect field is requesting me to enter a URL. I was hoping to just use the redirectUrl within pages of sites to redirect to different thank you pages…) How can I use your awesome suggestion and not fill out the redirect field in the form?


#7

Hi David,
First of all thank you so much for your help so far! I entered the redirectUrl to the embedded form code in the page. It all went smoothly until in Hubspot the redirect field is requesting me to enter a URL. How should t fill out the redirect field in the form?


#8


#9

If you’re manually created the embed code (which you’d need to do if you’re using a different URL on each page), you don’t actually need to grab the embed code from the form settings in HubSpot, you can grab (or manually build) the embed code once, then copy that and just update the redirectUrl on each different page as you’re adding the code to that page.


#10

Hi David,
The image I sent shows that i am forced to enter a re-direct URL into that field. I can’t save the form, Error " The form is invalid, please add a valid URL"


#11

If you’ve previously set up a redirect, I don’t believe the app will let you remove that, but you should still be able to override that setting by manually including the redirectUrl in the embed code on the page itself.


#12

Hi David,
After a long time I am revisiting this issue.
I’m using a form in this page that I also use in another site. Instead of it going to the thank you page of the other site I have been trying to add the redirect ( redirectUrl: ‘http://foothillsevents.com/employment/confirmation/’): http://foothillsevents.com/employment/
but when I insert it into the form code like below the entire form disappears:

<!--[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>
  hbspt.forms.create({ 
    portalId: '386934',
    formId: '8f245dfb-4f2c-4613-979a-e26608a0160a'
    redirectUrl: 'http://foothillsevents.com/employment/confirmation/'
  });
</script>

Maybe any editing breaks the connection to the form?
What would you suggest?

The goal is to use one form in separate sites and to redirect the form to each sites unique confirmation page.


#13

Hi David,

I replied to the post. Please take a look!

Julia


#14

You’re missing a comma between the formId and redirectUrl fields in the code, so you’d probably be seeing an error happening on the page. You should just need to add the comma at the end of the formId line:
formId: ‘8f245dfb-4f2c-4613-979a-e26608a0160a’,

 hbspt.forms.create({ 
        portalId: '386934',
        formId: '8f245dfb-4f2c-4613-979a-e26608a0160a',
        redirectUrl: 'http://foothillsevents.com/employment/confirmation/'
      });

#15

Yay that finally worked! Thank you!