Customization of form submission redirects

Warning: This post assumes some technical know-how.  On a scale of 1 - 10 (1 being my Mom and 10 being that awkward kid in high school that was really pale and is now a billionaire) this assumes you are a 4.

Let’s first layout a use case for this post.  You have a Hubspot form with three fields: Name, Email, and a dropdown where the visitor must select their department.  To simplify let’s say there are only two options: Marketing or Sales. And, based on their selection, you want to send them to different Landing Pages. 

Video: How to create the form for this use case.

Next step is to get the embed code for the form and paste it into a custom module and customize it.  To assist let’s open up Hubspot’s form api documentation.  There’s a couple things I like to do first which aren’t required but can help make this more manageable.  The first is simple which is to add the option to remove Hubspot’s default form styling. My assumption here is that you have form elements addressed in your global stylesheet.  To do this we simply add: css: “”. The second is to add the option to inject the form into a “target” div. To do this we create an empty <div> with the id of “formTarget”. Then add an option in the embed code as such: target: “#formTarget”.

Video: Step 1 of form embed code customization

Now we’ll get into the more technical aspect of this.  We’re going to override the form submit action by using the callback “onFormSubmit” with a little jQuery/javascript.  Here’s what we want it to do:

1. Set up two variables for the different redirect links.
2. When the visitor hits the submit button get the value of the dropdown field (“marketing” or “sales” in this case).
3. Send the visitor to the correct link based on their selection.

And here’s how that is done:

1. var salesLink = “/sales-landingpage”;  var marketingLink = “/marketing-landingpage”;
2. var selectedDepartment = $(‘input[name=””]’).val(); (if you’re unsure of how to get the field selector watch the video above)
3. if (selectedDepartment == “Sales”) { window.location = salesLink} else if (selectedDepartment == “Marketing”) {window.location = marketingLink} (I used “else if” here vs. “else” in case we want to add options down the road… also, there are other opportunities for code efficiency here but my goal was to simplify the process)

Video: Step 2 of the form embed code customization

That’s it!  While we’re on the topic, I find the “onFormReady” callback particularly useful.  As you probably know the Hubspot form elements aren’t in the DOM but are loaded via javascript so if you’re looking to alter a form or interact with it in any way with javascript you can add that code within this callback.