Friendly Warning: Welcome to Developer Territory.

You will have a lot of fun if you are comfortable with HTML, JavaScript and CSS, or have a friend / colleague that is. If not, you may have a bad time.
If you are a real do-it-yourselfer and want to learn yourself, we highly recommend first taking Codeacademy's free HTML/CSS and Javascript courses.

Summary

You can add a HubSpot form to your videos with HapYak's iframe annotation. The best part is this will be a native HubSpot form directly on top of your video. Anything submitted to this form will be sent directly to HubSpot (as if it were embedded on a web page).

How To

To embed a HubSpot form into your video, first add an iframe annotation where you want the form to pop up. Somewhere in-between the two <head> tags, add the following code:

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>

Then, inside of a <script> tag in the body of the HTML section of your iframe editor, paste your HubSpot form embed code.

The only mandatory fields are 'portalID' and 'formID', which you can get from your HubSpot account. HubSpot's API docs provide a number of ways to customize what happens after users submit your form, which you can add inside of the statement that creates your form. 

If you want the form modal to disappear after a user submits a form, you will have to write a function telling it to do so, and then call that function 'onFormSubmit', as seen above. 

In this case, the div with the embedded form has an ID of "collapsed-state-container", and this function tells the player to hide that container and continue playing the video onFormSubmit. This function is written in between two <script> tags at the bottom of the HTML. 

function onGoodFormSubmit() {

  setTimeout(function() {
    collapseSidePanel(function() {
      $("#collapsed-state-container").hide();
      hapyak.context.player.play();
    });
  }, 1000);

}

That's it! Now hen a viewer submits the form through your video, the data will flow to your HubSpot account.

You can add styles to the iframe to style the form however you'd like. 

You can even use HapYak's slide-in form feature to make to let the viewer show and hide the form on demand.

Did this answer your question?