Can you please help me embed my form script into my FancyBox?

Question

Good Morning,

I am having trouble figuring out how to embed my form script into my FancyBox.

I am new to this, so apologize in advance. I've looked everywhere but can't seem to find the correct answer.

I have a very simple test page created just so I can use it to figure out how this all works.

Basically, I need to replace the image that pops up with my form.

Here is my form script that I need to embed:

<script charset="utf-8" src="//js.hubspot.com/forms/current.js"></script>

<script>

  hbspt.forms.create({ 

    portalId: '206683',

    formId: 'ecaa931c-1fc4-4b96-8aea-b040169f449d'

  });

</script>

And here is my test page:

http://online.saintleo.edu/FancyBox2/FancyBox2.html

Thank you in advance. You time and guidance is greatly appreciated.

Answer 1

Answering to get the formatting

Main page:

<table width="1264px" height="100" border="0" bgcolor="#0A3D32">
  <tr>
    <td><img src="https://online.saintleo.edu/main-logo.png" width="334" height="94" /></td>
    <td>
      <a class="iframe" href="#form"><img src="https://online.saintleo.edu/RequestInfoButton-Test.jpg" width="127" height="36" /></a>
    </td>
  </tr>
</table>
<div id="form" style="display:none">
  <iframe height="500" src="form.html"></iframe>
</div>

form.html

<script charset="utf-8" src="https://js.hubspot.com/forms/current.js"></script>
<script>
  hbspt.forms.create({
    portalId: '206683',
    formId: 'ecaa931c-1fc4-4b96-8aea-b040169f449d'
  });
</script>