Landing page vimeo video plays after form fill

[Jo_Pitts1 · Accepted solution]

@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

[Tracy_Boesken]

HUGE shout out to @Jo_Pitts1  for all his help!! His finessing made this work perfectly!

[Jo_Pitts1]

Thanks for the shout out @Tracy_Boesken , I was just pleased I could make it work for you.