<!-- 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";
});
}
});
});
This Pen doesn't use any external JavaScript resources.