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

Question

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' });

Answer 1

I have created a gist for the same. If you select Raw HTML in Hubspot and using Bootstrap 5 in your website, this gist may be helpful if you're using inline form with form embed code.

Here's the code:

/* Hubspot form styles
* This is for stacked inline forms. 
*  Change custom var styles wherever required.
*/

.hs-form.stacked {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}

.hs-form.stacked .form-columns-1,
.hs-form.stacked .form-columns-2,
.hs-form.stacked .hs-submit {
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
}

.hs-form.stacked .form-columns-1 {
    flex: 0 0 auto;
    width: 100%;
}

.hs-form.stacked .form-columns-2 {
    flex: 0 0 auto;
    width: 100%;
}

@media screen and (min-width: 768px) {

    .hs-form.stacked .form-columns-2 {
        width: 50%;
    }
}

.hs-form.stacked .form-columns-1 .hs-form-field,
.hs-form.stacked .form-columns-2 .hs-form-field {
    float: none;
    width: 100%;
    margin-bottom: 1rem;
}

@media screen and (max-width: 400px),
(min-device-width: 320px) and (max-device-width: 480px) {
    .hs-form.stacked .form-columns-2 .hs-form-field .hs-input {
        width: 100% !important;
    }
}

.hs-form.stacked .form-columns-1 .hs-input[type="text"],
.hs-form.stacked .form-columns-1 .hs-input[type="tel"],
.hs-form.stacked .form-columns-1 .hs-input[type="email"],
.hs-form.stacked .form-columns-1 textarea.hs-input,
.hs-form.stacked .form-columns-2 .hs-input[type="text"],
.hs-form.stacked .form-columns-2 .hs-input[type="tel"],
.hs-form.stacked .form-columns-2 .hs-input[type="email"],
.hs-form.stacked .form-columns-2 textarea.hs-input {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.hs-form.stacked .form-columns-1 .input,
.hs-form.stacked .form-columns-2 .input {
    margin-right: 0;
}

.hs-form .hs-form-required {
    color: red;
    font-size: 0.825rem;
    position: relative;
    top: -0.25rem;
    left: 0.25rem;
}

.hs-form .inputs-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hs-form .hs-error-msgs .hs-error-msg {
    color: red;
    font-size: 0.825rem;
}

.hs-form.stacked .form-columns-1 .hs-input[type="checkbox"],
.hs-form.stacked .form-columns-2 .hs-input[type="checkbox"] {
    --bs-form-check-bg: var(--bs-body-bg);
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    margin-top: 0.25em;
    vertical-align: top;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-form-check-bg);
    background-image: var(--bs-form-check-bg-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: var(--bs-border-width) solid var(--bs-border-color);
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
    print-color-adjust: exact;
    border-radius: 0.25em;
}

.hs-form.stacked .form-columns-1 .hs-input:checked[type=checkbox],
.hs-form.stacked .form-columns-2 .hs-input:checked[type=checkbox] {
    background-color: #0d6efd;
    border-color: #0d6efd;
    background-image: url('data:image/svg+xml,%3csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 20%22%3e%3cpath fill=%22none%22 stroke=%22%23fff%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-width=%223%22 d=%22m6 10 3 3 6-6%22/%3e%3c/svg%3e');
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
}

.hs-form .legal-consent-container .hs-richtext {
    margin-bottom: 1rem;
}

.hs-form.stacked .hs-submit {
    width: 100%;
    text-align: center;
}

.hs-form .hs-submit .hs-button {
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-family: ;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.5;
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-width: var(--bs-border-width);
    --bs-btn-border-color: transparent;
    --bs-btn-border-radius: var(--bs-border-radius);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
    --bs-btn-disabled-opacity: 0.65;
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
    display: inline-block;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-family: var(--bs-btn-font-family);
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    color: var(--bs-btn-color);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    background-color: var(--bs-btn-bg);
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.hs-form .hs-submit .primary {
    color: var(--white);
    background-color: var(--bright-turquoise);
    border-color: var(--bright-turquoise);
}

.hs-form .hs-submit .primary:hover,
.hs-form .hs-submit .primary:focus,
.hs-form .hs-submit .primary:active {
    color: var(--white);
    background-color: var(--bright-turquoise);
    border-color: var(--bright-turquoise);
}

Answer 2

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.

Answer 3

Are you just looking to set the redirect with the embed code? If so, here is the addition to the embed code: portalId: 'xxxxxx', redirectUrl: 'url goes here', formId: 'd9005302-a859-4a39-9d47-74d8a1d25fb0'