Embedding Hubspot Form in Statically-Hosted Website Modal

ericwb95 · ‎Jun 1, 2018

Hi,

This is my first time using hubspot. Basically, my team and I have built a website with a single form for collecting user information. To email us the results, we have set up a modal window containing a form and a submit button that closes the form. Upon submission, we have a PHP script that emails us the results. To save costs instead of requiring us to run an EC2 instance hosting our website, we were hoping to just host our landing page on github pages, which hosts static pages. This has the downside that we can no longer leverage our PHP script for retrieving the user information from the form (static pages -> no PHP server to submit:( ). We figured hubspot could be an effective tool to help us, but haven't had luck getting the hubspot form embedded in our original modal window. So my question is, 1) is it possible to embed a hubspot form in a modal or popup? We would prefer to use a modal, but a popup is fine too if that's not possible. 2) Are there any tutorials for how to do this easily, without requiring a separate page for the form?

Our current code is as follows. The CSS code for the modal:

.modal {

padding-right: 0 !important;
padding-left: 0 !important; }
.modal .modal-content {
border-radius: 0 !important;
background-color: #fff;
color: #616161; }
.modal .modal-content .modal-body {
position: relative;
padding: 0 40px;
text-align: justify; }
.modal .modal-content .modal-bis just a single blank line and does nothing right now.ody img {
padding-top: 10px;
padding-bottom: 10px; }
.modal .modal-content .modal-header {
padding: 15px;
border-bottom: 0; }
.modal .modal-content .modal-header .close:focus, .modal .modal-content .modal-header .close:hover {
color: #1976D2;
opacity: 1; }
.modal .modal-content .modal-footer {
border: 0 !important; }
.modal .modal-content .btn-default {
border-radius: 0;
background-color: #1976D2;
color: #fff;
border-color: #1976D2; }
.modal .modal-content .btn-default:hover, .modal .modal-content .btn-default:focus {
color: #fff;
background-color: #1976D2;
border-color: #1976D2;
border-radius: 0; }

This css file is in the html header, and the modal is working/fine as far as I can tell (it worked with a PHP server as expected). In the html, we have the following button that triggers the modal:

<a href="#" data-toggle="modal" data-target="#userinfoForm" class="btn">Request Info</a>

And the modal itself:

        <div class="modal fade" id="userinfoForm" tabindex="-1" role="dialog" 
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">                    
                <div class="modal-body">
                  <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
                  <script>
                    hbspt.forms.create({
                    portalId: "#####",
                    formId: "#####"
                  });
                  </script>
                </div>
                <!-- Modal Footer -->
              </div>
        </div>
    </div>

As you can tell, I tried to just use the hubspot embed snippet, but to no effect. The modal is still triggered properly by the button, but the modal itself is just 1 blank line. Does anybody have experience with this? The goal is: Our button triggers a modal/popup (preferably modal; popup fine too), user fills out form, presses "submit" button at bottom, window closes and form is submitted properly to the email we specified when creating the form on the hubspot website.

MikeJordan · ‎Sep 7, 2021

Thank you!

ZSilverzweig · ‎Feb 2, 2021

I'm having a similar challenge, and also not a dev. I'm using Elementor and it seems that the popup can't find the modal to put the form into. I've tried this hard-coded approach as well but I also can't get it to work...

Derek_Gervais · ‎Jun 6, 2018

Hi @ericw95,

Can you try loading the forms shell.js script outside of the modal, and calling the hbspt.forms.create() method once the modal is loaded? That seems to work for me. You can also include a target parameter in the form; this parameter is a jQuery selector for the container you want the form to appear in. That should allow you to call the create() method before the modal is opened.

APIs & Integrations