<!-- Add Script to the head or footer -->
<script src="https://getlaunchlist.com/js/popup.js" defer></script>

<!-- Build HTML form. Make sure to replace the key with your form key -->
<div class="m-6">
  <form class="flex flex-wrap items-end justify-start sm:flex-nowrap launchlist-form-popup" action="https://getlaunchlist.com/s/JZIFPd" method="POST" target="_blank">
    <div class="w-full mb-3 mr-4 text-left sm:mb-0 sm:w-1/2">
      <input type="email" required placeholder="Your email" name="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-green-500 dark:focus:border-green-500">
    </div>
    <button type="submit" class="sm:w-1/2 w-full flex justify-center text-white bg-gray-900 font-medium rounded-lg text-sm px-5 py-2.5 text-center">
      <span class="launchlist-form-loader-text">Join Waitlist</span>
      <span class="launchlist-form-loader-icon hidden">Loading..
    </button>
  </form>
  <p class="launchlist-form-popup-error mt-2 text-red-500 text-sm hidden"></p>

  <a class="mt-6 block text-xs font-medium text-gray-500" href="https://getlaunchlist.com/?utm_source=codepen">
    <p>Waitlist powered by</p>
    <img src="https://res.cloudinary.com/launchlist/image/upload/w_120/v1652960498/media/Logo_2x_as9n4r.png" alt="LaunchList Logo">
  </a>
</div>
let forms2 = document.querySelectorAll(".launchlist-form-popup");
// submit form
forms2.forEach((form) => {
  form.addEventListener("submit", function (e) {
    e.preventDefault();
    // Validate all the required fields
    let requiredFields = form.querySelectorAll("[required]");
    let isValid = true;
    requiredFields.forEach((field) => {
      if (field.value === "") {
        isValid = false;
        field.classList.add("error");
      } else {
        field.classList.remove("error");
      }
    });

    // If all the required fields are filled
    if (isValid) {
      // get error
      let errorEl = document.querySelector(".launchlist-form-popup-error");
      let btnLoaderText = document.querySelector(
        ".launchlist-form-loader-text"
      );
      let btnLoaderIcon = document.querySelector(
        ".launchlist-form-loader-icon"
      );
      // Get the action url of the form
      let action = form.getAttribute("action");
      // Get the form data
      let formData = new FormData(form);

      btnLoaderIcon.classList.remove("hidden");
      btnLoaderText.classList.add("hidden");

      // fetch the form data
      fetch(action, {
        method: "POST",
        body: formData,
        headers: {
          Accept: "application/json"
        }
      })
        .then((response) => response.json())
        .then((data) => {
          console.log(data);
          if (data.ok) {
            // replace iframe src
            // select igrame
            let iframe = document.querySelector(".launchlist-iframe");
            iframe.src = data.embeddedLink;
            // document.querySelector('.launchlist-modal').classList.add('launchlist-show-modal')
            toggleModal();
            btnLoaderIcon.classList.add("hidden");
            btnLoaderText.classList.remove("hidden");
          } else {
            errorEl.innerText = data.error;
            errorEl.classList.remove("hidden");
            btnLoaderIcon.classList.add("hidden");
            btnLoaderText.classList.remove("hidden");
            // alert(data.error);
          }
        })
        .catch((error) => {
          btnLoaderIcon.classList.add("hidden");
          btnLoaderText.classList.remove("hidden");
          errorEl.classList.remove("hidden");
          errorEl.innerText = "Something went wrong";
        });
    }
  });
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.