@Tracy_Boesken ,
there are possibly more elegant solutions, but this is what ended up working
<script src="//info.edifecs.com/js/forms2/js/forms2.min.js"></script>
<div id="myThumbnailDiv" style="display: block;">
<img ID="thumbnailImage" width="760" src="https://info.edifecs.com/rs/183-PWY-190/images/webinar thumbnail Screenshot 2021-10-08 140029.png" onclick="moveToNextStep()">
</div>
<div id="myFormDiv" style="display: none;">
</div>
<div id="myVideoDiv" style="display: none;">
<iframe title="vimeo-player" src="https://player.vimeo.com/video/617208817?h=89542b1b4b" width="640" height="360" frameborder="0" allowfullscreen=""></iframe>
</div>
<script>
/* This code makes the thumbnail hide, and the form appear */
function moveToNextStep() {
var formContainer = document.getElementById("myFormDiv");
var thumbnailContainer = document.getElementById("myThumbnailDiv");
formContainer.style.display = "block";
thumbnailContainer.style.display = "none";
}
</script>
<script>
/* This code moves the form into the form Div, makes for form disappear on submission and makes the video div appear*/
MktoForms2.whenReady(function(form){
var formEl = form.getFormElem()[0];
var formContainer = document.getElementById("myFormDiv");
var videoContainer = document.getElementById("myVideoDiv");
formContainer.appendChild(formEl);
form.onSuccess(function(vals,thankYouURL){
videoContainer.style.display ="block";
formContainer.style.display ="none";
return false;
});
});
</script>
Hopefully that gets you to the next step in your project.
Cheers
Jo
.png)