Pass form value to external application through query string

Marketing & Content Hub Lead Capture Tools
1

Hi. I am looking to integrate a HS form with an external application. I am using Marketing Starter. The 3rd party asked us to supply our HS form values in this way:

<app-url>/external-access?email=name@example.com&firstName=John&lastName=Doe &phone=5555555555&desiredNumber=50

I have the form set up but don’t know what to do next to get this to work in Starter. I’m a real newbie and discovering just how powerful and useful HS is.

Thank you in advance for your guidance and advice.

2

Hi @Srappaport26
If you use your HubSpot form embed code to place your form on your page, you can then customise your form embed code to add form data to a redirect URL via URL parameters. This forum thread has a few potential solutions.
As you need to send the data using specific parameter names you will need to use something like this jQuery solution. Your form embed code should end up looking something like the code below, but you will have to make sure the red bolded values in the code below are replaced with the values for your form, your submit message, the names of your form input fields, and the URL you want to redirect to.
hbspt.forms.create({
portalId: ’

xxxxxxxx

',
formId: ’

xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

',
inlineMessage: ’

Your submit message here

',
onFormSubmit: function($form){
setTimeout( function() {
var email = $form.find('input[name="

email

“]').val();
var firstname = $form.find('input[name=”

firstname

“]').val();
var lastname = $form.find('input[name=”

lastname

“]').val();
var phone = $form.find('input[name=”

phone

“]').val();
var desirednumber= $form.find('input[name=”

desirednumber

"]').val();
var redirectBase = ’

<app-url>/external-access

';
window.location = redirectBase + ‘?email=’ + email + ‘&firstName=’ + firstname + ‘&lastName=’ + lastname + ‘&phone=’ + phone + ‘&desiredNumber=’ + desirednumber;
}, 250 ); // Redirects to url with query string data from form fields after 250 milliseconds.
}
});
Note: The above code uses jQuery so make sure it is enabled for your site: Include jQuery across pages

3

Thank you Matthew. We’ll test your solution out.

4

Hi Matthew, my colleague reviewed your script and offers the following comments.

The suggested solutionprovided is for embedding a form on a non-HubSpot page like a page on a WordPress site.

He suggests that I share the URL for the landing page with you and see if you have a different apporach.

https://www.suretys.com/pre-approval

The use case is:

We have a form on a HubSpot website page and after form submission, want to redirect to a non-HubSpot page, passing parameters in the URL based on the form submission.

The expected use is for new contacts to HubSpot -

We’ve been trying a redirect with URL formed as below but it is not working (either null values for parameters or the default value):


https://policydev.suretys.com/external-preapproval-access?email={{personalization_token(“contact.email”)}}&firstName={{personalization_token(“contact.firstname”)}}&lastName={{personalization_token(“contact.lastname”)}}&phone={{personalization_token(“contact.phone”)}}&desiredMonthlyPayment={{personalization_token(“contact.monthly_payment”)}}

Can you suggest a modification or alternative with the more specific info provided?

Many thanks!

5

Hi @Srappaport26
You can also embed a HubSpot form using the form embed code in a HubSpot hosted page. This is particularly useful when you need to customise your form as in your use case. You just need to embed the code in a Rich Text module (select advanced menu in text editor and then source code) or a HTML module (available in the asset marketplace.)

6

Thanks again Matthew. I’m grateful for the time and thought you are giving my question. I’ve passed your suggestion on and I’ll let you know how things turn out.

7

Hi @Srappaport26, can you let me know which solution you ended up implementing and what worked for your team? I’m now in a very similar situation and could use some help.

Thanks!

8

Hey Amanda,

I’m @Srappaport26’s co worker. We went the jquery solution originally posed by Mathew Sheppard. Our working code looks almost identical except for some additional logic tweaks and variables as features were added over time. As he mentions in his second response we used this code inside a richtext embed that was inside a custom hubspot form module. Works great, and as I mentioned it was easy to update as well. I’ve not got some if/else statements at the end that pass different parameters back depending on what parameters were found already in the URL referring string, if any.

9

Sorry for pulling up an old post but I think I’m really close using your solution. Any idea why this works when I pull a text field like firstname but not a drop down like state?

 onFormSubmit: function($form){
 setTimeout( function() {
 var state = $form.find('input[name="state"]').val();
 var redirectBase = 'https://url.com/test';
 window.location = redirectBase + '?states=' + state ;
}, 250 );
10

Hi @JMoran23
Dropdown fields are typically ‘select’ elements instead of ‘input’ elements. Try updating the state variable line of code to
var state = $form.find(‘select[name=“state”]’).val();

11

x

12

Hi @Srappaport26 ,

To provide you with the right approach, can you please specify which external application you are talking about. Also, clarify, whether you want to show data of your form to other place or want something else to work on?
Regards.

13

Thanks for replying and posing your follow up questions. We’ve got what we need now to go forward, and appreciate your offer to help.