APIs & Integrations

lloydsilver
Mitglied

Include form fields as redirect URL parameters on an embedded form

lösung

I need to embed a HS form on an external (not CoS) website. And when the user submits the form, the redirect URL needs to include form fields as parameters.

Is this possible?

We figured out a way of doing this on a CoS landing page using a native HS form, but it was pretty tricky. In this case, I need to embed the form on an external page rather than use a CoS page.

What I’m trying to accomplish is capture the lead’s info (name, company, email) and then pass that info off to a scheduling app which can use parameters to pre-fill a scheduling form so the user doesn’t have to re-enter their info. And I want to do it through a HS form first so that we capture the lead and source information in HS. If we did it straight in the scheduling app then we could create a lead using Zapier but without Source info.

Every other form app I’ve used has been able to do this. Still surprised HS can’t do it off the shelf. But I hope someone has a creative workaround. Thanks.

3 Akzeptierte Lösungen
derekcavaliero
Lösung
Stratege/Strategin | Diamond Partner
Stratege/Strategin | Diamond Partner

Include form fields as redirect URL parameters on an embedded form

lösung

You could achieve this by using the onFormSubmit callback and switching the form to use an inline message instead of a redirect (explained below).

hbspt.forms.create({
    portalId: 'xxxxxxxx',
    formId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
    inlineMessage: 'Your submit message here',
    onFormSubmit: function($form){
        setTimeout( function() {
            var formData = $form.serialize();
            window.location = "http://www.yoururl.com?" + formData;
        }, 250 ); // Redirects to url with query string data from form fields after 250 milliseconds.
    }
});

Because you have access to the jQuery $form object inside the onFormSubmit listener you can serialize the forms data and append it to a url to redirect to after the form is submitted. This only works if you have the inlineMessage set and disable the redirectUrl for the form.

See if that helps you out.

Derek Cavaliero
Director of Engineering

WebMechanix
www.webmechanix.com

Lösung in ursprünglichem Beitrag anzeigen

derekcavaliero
Lösung
Stratege/Strategin | Diamond Partner
Stratege/Strategin | Diamond Partner

Include form fields as redirect URL parameters on an embedded form

lösung

@Albo 

 

Try setting your setTimeout to something higher than 100 milliseconds and see if that helps. I haven't had or seen this issue before - and in theory it shouldn't because the onFormSubmit is processed after the form is validated and request is sent. 

 

My theory is that if you redirect too quickly it may terminate the XHR request over to HubSpot's servers. I haven't actually tested this issue myself yet though - let me know what you find.

Derek Cavaliero
Director of Engineering

WebMechanix
www.webmechanix.com

Lösung in ursprünglichem Beitrag anzeigen

Teun
Lösung
Trendsetter/-in | Elite Partner
Trendsetter/-in | Elite Partner

Include form fields as redirect URL parameters on an embedded form

lösung

For anyone searching for a solution where you can use the redirect settings from the form:

 

  window.addEventListener('message', event => {
    if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
      const input = document.querySelector('select[name="input_name"]');
      const context = document.querySelector('input[name="hs_context"]');
      const contextObject = JSON.parse(context.value);
      const redirectUrl = contextObject.redirectUrl; // Retrieve the redirectUrl from the form settings

      if (input) {
        if (input.value && redirectUrl) {
          window.location.href = redirectUrl + `?input_name=${input.value}`;
        }
      }
    }
  });

 

 



Learn more about HubSpot by following me on LinkedIn or YouTube

Did my answer solve your issue? Help the community by marking it as the solution.


Lösung in ursprünglichem Beitrag anzeigen

46 Antworten
derekcavaliero
Lösung
Stratege/Strategin | Diamond Partner
Stratege/Strategin | Diamond Partner

Include form fields as redirect URL parameters on an embedded form

lösung

@Albo 

 

Try setting your setTimeout to something higher than 100 milliseconds and see if that helps. I haven't had or seen this issue before - and in theory it shouldn't because the onFormSubmit is processed after the form is validated and request is sent. 

 

My theory is that if you redirect too quickly it may terminate the XHR request over to HubSpot's servers. I haven't actually tested this issue myself yet though - let me know what you find.

Derek Cavaliero
Director of Engineering

WebMechanix
www.webmechanix.com
Albo
Teilnehmer/-in

Include form fields as redirect URL parameters on an embedded form

lösung

@derekcavaliero You're spot on! Setting the redirect back to 250 ms resolved the issue. Thank you!

Kristeru
Mitglied

Include form fields as redirect URL parameters on an embedded form

lösung

Could someone help me figure out why @derekcavaliero's solution is not working? I implemented his solution on the page https://www.krister.com/language-of-leadership-assessment

 

The inline message is appearing when I submit the form, but the page is not redirecting to the page that I put into the window.location. 

 

Here's the code that I put into Squarespace.  I bolded the changes I made to your solution:

!--[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: "xxxx",
    formId: "xxxxx",
    inlineMessage: 'Your submit message here',
    onFormSubmit: function($form){
        setTimeout( function() {
            var formData = $form.serialize();
            window.location = "https://www.krister.com/success-language-of-leadership-assessment?" + formData;
        }, 250 ); // Redirects to url with query string data from form fields after 250 milliseconds.
    }
});
</script>

 

0 Upvotes
IsaacTakushi
HubSpot Employee
HubSpot Employee

Include form fields as redirect URL parameters on an embedded form

lösung

Hey, @Kristeru.

 

I'm pretty sure this is because your form is loading in an iframe.

 

I see that you have one of the new "themes" enabled here in the form editor's Style & preview tab. This causes the form to render in an iframe, so I'd recommend reverting to the "old theme" if you need to customize the embed code.

Isaac Takushi

Associate Certification Manager
0 Upvotes
Trevor_Hatfield
Mitglied

Include form fields as redirect URL parameters on an embedded form

lösung

This worked great for me, just wanted to say thanks!

0 Upvotes