Kloudless Blog

Kloudless Unified APIs enable you to code once and integrate many

Photo by Samuel Zeller on Unsplash

“If we always helped one another, no one would need luck.”

It’s Monday, and that means we’re back with another post aimed at helping you overcome some of the most commonly asked questions about the APIs we work with here at Kloudless. Every Monday, we will aim to help answer some of the more repeated inquiries into the world’s most popular APIs or cloud services. Today, we will be turning to one of the industry’s top names when it comes to cloud CRM management: HubSpot

HubSpot has fast become one of the most trusted CRM platforms available today. Many of the world’s largest companies use the platform to record user form fill data through its easy-to-manage embeddable forms. Marketing campaigns can easily be tracked through the built-in tools available in HubSpot, and even the look of the forms can be customizable through HubSpot’s CSS editor.

Sometimes, however, once a user fills out a form, your site may want to redirect them to another location with URL parameters that have just been plucked from the form submitted. Thankfully, we can use a bit of jQuery and JavaScript to grab that data and serialize it in a callback, allowing you to create a custom redirect from their form data.

Let’s check out how it works!

In order for this method to properly work, you will need to change a few things in the form options for HubSpot. First, make sure that you have an inlineMessage set, and change the option for automatic URL redirect in the form to disabled. This will force the HubSpot form to ignore the normal redirect functionality once a user submits and allow you to serialize the form data in the callback.

Here’s what our code will look like:

We will set up an onFormSubmitevent listener with a setTimeoutfunction inside to fire off once the data has been submitted. In our callback, we have access to the form data in the jQuery object, $form. After that, you can simply serialize the data inside of the$form object and append it to your desired URL while simultaneously setting it as the new window.location.

I recommend placing a console.log inside of the onFormSubmitto ensure that the serialized form data is actually what you think it is. As long as you are getting the correct data to use as URL params, you should be good to go!

We’d love to hear from you on any API questions you may want us to answer in the future, so please send any requests to hello@kloudless.com.


Share this article:

Let’s get started. Start building for free today.