formsbootstrapping

how to use a Hubspot form embed code with a bootstrap form


I have a client that uses hubspot for their tracking and thank you pages. I have created a landing page using bootstrap and within the page I have two forms. Both forms are the same and I want them to go to the same thank you page. The client has provided me with an embedd code but I am not sure how I can bridge the gap. Below I have listed my form code and the embed code. I basically want the user fields to be submitted into hubspot and for it to trigger the thank you page but I am not entirely sure this is possible. Any help would be appreciated.

<div class="col-lg-12 contact-form">


            <div class="container">
                <div class="formContainer">
                <form role="form">
                <div class="form-group">
                    <div class="col-sm-6 left-field">
                        <input type="text" class="bottom-form" id="firstname" placeholder="First Name">
                    </div>
                    <div class="col-sm-6 right-field">
                        <input type="text" class="bottom-form right-field" id="lastname" placeholder="Last Name">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-12">
                        <input type="email" class="bottom-form email" id="email" placeholder="email">
                    </div>
                     <div class="col-sm-12">
                        <button type="submit" class="submit bottom-submit">Download Now</button>
                    </div>
                </div>
                </form>
                </div>

            </div>
        </div>

Here is the hubspot embedd code.

<!--[if lte IE 8]>

hbspt.forms.create({ css: '', portalId: '2030148', formId: 'd9005302-a859-4a39-9d47-74d8a1d25fb0' });

Solution

  • I actually figured out a proper solution without having to do any redirects or hairy coding.

    First I setup a local host, which was my biggest issue, this helps with getting the actual hubspot form to show within my page (using a local show the embedd code does not appear, although obvious to others, it took me a sec). Oh, I should mention that the code is not necessary.

    Once you have it showing you basically inspect the element and then add to the classes that hubspot spits out get it to look that way you want too.