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
And here’s how that is done:
Video: Step 2 of the form embed code customization