May 12, 202111:51 AM - edited May 12, 202111:58 AM
Top Contributor
Embed video inside a form
Hello, I just wondered if anyone has ever managed to embed a video inside a HubSpot form?
I've been tasked with creating a business induction page with a form. One of the questions will ask if the new starter is aware of the company Health and Safety policy and if they select no, then a video appears.
I've tried using a text box and inserting html but it doens't work - "you inserted unsafe html" is displayed
I've looked at using external forms such as Jotform but would prefer to stick with HubSpot where possible.
@ben-duchy , sorry. it was from my sandbox. forgot you can't share those links. give it a shot though and paste a link if it doesn't work. we'll figure it out.
<div id="video-source" style="display: none;">
{{ module.richtext_field }}
</div>
{% require_js %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
<script>
window.addEventListener('message', event => {
if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
$(function() {
$('select[name="show_video"]').change(function() {
// get the NAME-OF-FIELD by inspecting the selecting the select element in inspector.
if ($(this).val().toLowerCase() == 'no') {
$('#video-target').html($('#video-source').html());
}
});
// or do it with vanilla js if you're not into the whole brevity thing.
});
}
});
</script>
{% end_require_js %}
You'll need to add the rich text field to the module where you will input the video in the page editor.
Also, in your form builder add this to a rich text form field:
<div id="video-target"> </div>
Here's my select field (from inspector). Note the value in the "name" attribute of "show_video". Yours will be different so grab the value from yours and insert into the selector in in the code above here "select[name="CHANGE-THIS"]
@dennisedson, that made me laugh. I do need to change it, but I've had it for so long that it's become a part of me 😂
@dbeau79 an interesting idea, thanks. I will give it a go, but I assume the video (assuming it works) will appear outside the form? My employer wants the video to appear within the form, directly underneath that particular question, in the same way as a conditional hidden field. I'll let you know how I get on.
@ben-duchy , no the video should appear inside the form. In the text box within the form where you were trying to embed the video (from your screenshot) you will instead add that <div id="video-target"></div> element. Via the js I put down, the video from the other module will get inserted into that div when the select field is changed AND the answer is "no". I'm also thinking you should and an "else" statement to that so if the answer is "yes" it removes the video. Or maybe you want to leave it? The custom module with the video in it won't actually display the video. That should be hidden.
I would drop this empty div in the text box (if it's allowed...you may have to throw in a ) like this: <div id="video-target"></div>
Add a custom module with the video in it and wrap it with <div id="video-source"><!-- video code goes here --></div>
Then add this js
window.addEventListener('message', event => {
if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
$(function() {
$('select[name="NAME-OF-FIELD"]').change(function() {
// get the NAME-OF-FIELD by inspecting the selecting the select element in inspector.
if ($(this).val().toLowerCase() == 'no') {
$('#video-target').html($('#video-source').html());
}
});
// or do it with vanilla js if you're not into the whole brevity thing.
});
}
});
I am a little concerned that there's a reson HubSpot isn't letting you add the video directly. Wondering if it interferes with the submission. Another alternative would be to put the video in a lightbox and pop it open with an element in the form field text box.
This is a pretty fun question and I am intrigued what the answer might be. Going out on a limb that you won't be able to accomplish this via traditional means.
@dbeau79 , @piersg , @Kevin-C ! I challenge you to make my chin drop to the ground in awe with your solutions.