Add google form to hidden element

add-googleform-to-hidden-element.html

<script>
  // ENABLE THE NEXT LINE ONLY FOR TESTING PURPOSES
  // var oskariAttendeeName = 'Markku Vee';
</script>

<script>
  if (_eventData.state === 3) {
    const hiddenContentEl = document.querySelector("#vs-hidden .container");
    const iframeEl = document.createElement('iframe');

    /*
     * Change your own google forms url
     * 
     * 1. In Google Forms, click "more" and choose "Get pre-filled link"
     * 2. Fill the name field with something for example REPLACE
     * 3. Click create button.
     * 4. In bottom you can copy that link to clipboard, do that
     * 
     * It will give you link like this:
     * https://docs.google.com/forms/d/e/1FAIpQLSdCC6gYjLtP9TUR3wci9LiMczAPF_KNalm7sBIeECoM3oYbfg/viewform?usp=pp_url&entry.1133833999=REPLACE
     * 
     * 5. Copy the base url to the question mark: https://docs.google.com/...../viewform? to formsUrl variable below
     * 6. Copy "entry.1133833999=" part to the code inside the if clause
     * 
     * Adjust size using the iframeEl.style.cssText (or give this iframe a className and go from there)
     */

    let formsUrl = "https://docs.google.com/forms/d/e/1FAIpQLSdCC6gYjLtP9TUR3wci9LiMczAPF_KNalm7sBIeECoM3oYbfg/viewform?";
    if (window.oskariAttendeeName) {
      formsUrl += 'entry.1133833999=' + oskariAttendeeName;
    }

    iframeEl.src = formsUrl + '&embedded=true';
    iframeEl.style.cssText = "width: 100%; height:752px;";
    iframeEl.scrolling = "no";
    iframeEl.marginHeight = "0";
    iframeEl.marginWidth = "0";
    iframeEl.frameBorder = "0";
    iframeEl.innerText = "Ladataan...";
    
    hiddenContentEl.appendChild(iframeEl);
  }
</script>