<!-- Form collecting both name and email  -->

<div>

   <!--  Building the form  -->
   <form class="launchlist-form" action="https://getlaunchlist.com/s/JZIFPd" method="post" target="_blank">
    
     <!--  Name Input  (Optional)   -->
     <input type="text" name="name" placeholder="Enter your name">
     <!--  Email Input     -->
     <input type="text" name="email" placeholder="Enter your email">
     
    <!--  Submit Button     -->
     <button type="submit">Join Waitlist</button>
     
   </form>
   
</div>

<!-- Script to track referrals -->
<script src="https://getlaunchlist.com/js/widget-diy.js" defer></script>




<!-- Logo -->
<a style="color:#333;text-decoration:none;margin-top:20px;display:block;" href="https://getlaunchlist.com/?ref=codepen_widget">
    <p style="margin:0px;">Waitlist powered by</p>
    <img src="https://res.cloudinary.com/launchlist/image/upload/v1652960498/media/Logo_2x_as9n4r.png" alt="LaunchList Logo" style="width:200px;">
</a>
/* 
Add your own CSS to customize the UI of your form.
*/
// USE THIS IF YOU ARE NOT USING TRACKING SCRIPT

// // This function adds a ?ref query string at the end of form action URL so LaunchList can track the user referral. Without this referral won't work.

// // You have to write your own validation to validate email and empty input

// // Ref query string example - 
// // Your website URL https://example.com/?ref=alex83
// // Below function will modify the form action to https://getlaunchlist.com/s/JZIFPd/?ref=alex83


// function LaunchList() {

//     // Get query string from url
//     var loc = window.location.toString();
//     queryString = loc.split('?')[1];

//     // Get all the forms with .launchlist-form class
//     let forms = document.querySelectorAll(".launchlist-form");

//     // Update the form with referral id
//     forms.forEach(form => {

//         // Get the action url of the form
//         let action = form.getAttribute("action");

//         // Check if query string is present
//         if (
//             queryString !== null &&
//             queryString !== undefined &&
//             queryString !== ""
//         ) {

//             queryParams = "?" + queryString;
//             // update action url with query params
//             form.setAttribute("action", action + queryParams);
//         }
//         else {
//             // update action url without query params
//             form.setAttribute("action", action);
//         }
//     });

// }

// LaunchList();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.