Lead Capture Tools

Srappaport26
Member

Pass form value to external application through query string

SOLVE

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.

0 Upvotes
1 Accepted solution
MatthewShepherd
Solution
Key Advisor

Pass form value to external application through query string

SOLVE

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.)

Matthew Shepherd

Freelance HubSpot Consultant
CRM Consultant | SEO Specialist

Did my post help answer your query?Help the community by marking it as a solution.

View solution in original post

0 Upvotes
10 Replies 10
webdew
Guide | Diamond Partner
Guide | Diamond Partner

Pass form value to external application through query string

SOLVE

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.

0 Upvotes
Srappaport26
Member

Pass form value to external application through query string

SOLVE

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.

0 Upvotes
MatthewShepherd
Key Advisor

Pass form value to external application through query string

SOLVE

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: https://knowledge.hubspot.com/website-pages/include-jquery-across-your-hubspot-pages

Matthew Shepherd

Freelance HubSpot Consultant
CRM Consultant | SEO Specialist

Did my post help answer your query?Help the community by marking it as a solution.
Srappaport26
Member

Pass form value to external application through query string

SOLVE

x

0 Upvotes
Srappaport26
Member

Pass form value to external application through query string

SOLVE

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!

0 Upvotes
MatthewShepherd
Solution
Key Advisor

Pass form value to external application through query string

SOLVE

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.)

Matthew Shepherd

Freelance HubSpot Consultant
CRM Consultant | SEO Specialist

Did my post help answer your query?Help the community by marking it as a solution.
0 Upvotes
Srappaport26
Member

Pass form value to external application through query string

SOLVE

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.

AmandaM
Member

Pass form value to external application through query string

SOLVE

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! 

0 Upvotes
JeremySteben
Member

Pass form value to external application through query string

SOLVE

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.

0 Upvotes
Srappaport26
Member

Pass form value to external application through query string

SOLVE

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

0 Upvotes