Launch It
Posts
Create an Email Collection Page for Your Upcoming product with $0 investment

Create an Email Collection Page for Your Upcoming product with $0 investment

Prajun
June 01, 2024 • 🔖 7 minutes

In this tutorial, we'll walk through the process of creating a functional email collection page for gathering potential users' contact information before the official launch of your product with $0 investment.

Before launching PactMate, I created a cost-effective email collection page that allowed me to gather valuable potential user emails, building excitement and anticipation for the platform.

This page will allow interested users to sign up to be notified when your product is ready.

We'll use HTML, CSS, JavaScript, and deploy the page using GitHub Pages - all at zero cost. We'll utilize EmailJS, which allows up to 200 emails each month for free, to handle the email submissions.

Pactmate email collection page

Create a free account on Email.js

Got to Email.js
Once logged in, click on "Email Services" in the left sidebar.
Click on "Add new service" and select the email service you want to use (e.g., Gmail, Outlook, etc.).
Follow the prompts to connect your selected email service. You might need to log in to your email account and grant necessary permissions.
You will get the Service ID once the step 4 is completed
Click on "Email Templates" in the left sidebar.
Click on "Create new template".
Give your template a name and fill in the subject and message fields. Use placeholders (e.g., {{email}}) to dynamically insert data.
Click on contacts tab on the top of the Template page. Here add for the Contact Email. This will save the email address and you can view all of those emails from the Contact tab.
After setting up the template, click on "Save template". And copy the TEMPLATE ID
Click on your account name in the top right corner and select under General you will see your API Keys. You need to copy the PUBLIC KEY.

You will need Service ID, Public Key and Template ID from above steps.

Create the HTML File

Create an index.html file. And write some information about the product

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Your Product</title>
    <link rel="stylesheet" href="styles.css" />
    <link rel="icon" href="yourLogo.jpeg" type="image/jpeg"> 
    <script src="https://cdn.emailjs.com/dist/email.min.js"></script>
    <script>
      (function () {
        emailjs.init("email_js_public_key"); // Replace with your EmailJS public key (user ID)
      })();
    </script>
  </head>
  <body>
    <div id="notification" class="notification"></div>
    <div class="container">
      <div class="logo-container">
        <img
          src="yourLogo. png"
          alt="Product Logo"
          class="logo-image"
        />
      </div>
      <main>
        <h2>Product info</h2>
        <p>
          More information
        </p>
        <div class="form-container">
          <p>Join Arya, Arjun, and 27 others on the waitlist</p>
          <form id="joinForm">
            <input
              type="email"
              id="email"
              placeholder="Enter your email"
              required
            />
            <button type="submit">Join</button>
          </form>
        </div>
        <p><a href="https://zaap.bio/launch_it" target="_blank">Launch It</a> | <a href="https://twitter.com/_launch_it_" target="_blank">Twitter</a> | <a href="https://www.instagram.com/_launch_it_" target="_blank">Instagram</a></p>
      </main>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Create the CSS File

Create a style.css file to style your page

body {
  margin: 0;
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f9f9f9;
}

.container {
  text-align: center;
  background: #fff;
  padding: 2rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

header {
  margin-bottom: 2rem;
}

.logo-container {
  display: flex;
  justify-content: center;
}

.logo-image {
  width: 150px; /* Adjust the size as needed */
  height: auto;
}

main h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

main p {
  margin-bottom: 1.5rem;
  color: #555;
}

.form-container {
  margin-top: 2rem;
}

form {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

input[type="email"] {
  padding: 0.5rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 250px;
}

button {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

p {
  margin-top: 1rem; /* Add some space above the paragraph */
}

a {
  text-decoration: none;
  color: #007bff;
  font-weight: bold;
}

a:hover {
  text-decoration: underline;
}

.notification {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: bold;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.notification.error {
  background-color: #ff4d4f;
}

.notification.success {
  background-color: #52c41a;
}

.notification.show {
  opacity: 1;
}

Create the JavaScript File

Create a script.js file to handle form submissions

document
  .getElementById("joinForm")
  .addEventListener("submit", function (event) {
    event.preventDefault();

    const email = document.getElementById("email").value;

    // Basic email validation
    if (!email) {
      alert("Please enter a valid email address.");
      return;
    }

    // Prepare the parameters to send with EmailJS
    const templateParams = {
      user_email: email,
      customer_name: email,
    };

    // Send the email using EmailJS
    emailjs.send("your_Service_ID", "your_email_template", templateParams).then(
      function (response) {
        console.log("SUCCESS!", response.status, response.text);
        showNotification("Join request sent successfully!", "success");
      },
      function (error) {
        console.error("FAILED...", error);
        showNotification(
          "Failed to send request. Please try again later.",
          "error"
        );
      }
    );

    // Clear the form
    document.getElementById("joinForm").reset();
  });

function showNotification(message, type) {
  const notification = document.getElementById("notification");
  notification.textContent = message;
  notification.classList.add(type);

  // Remove notification after 5 seconds
  setTimeout(function () {
    notification.textContent = "";
    notification.classList.remove(type);
  }, 5000);
}

Deploy to GitHub Pages

Go to GitHub, create a new repository and push your local repository to GitHub. To deploy the site, click on "Settings," then "Pages" in the left sidebar. Under "Source," select "main branch" and click "Save." Your site will be published at https://YOUR_GITHUB_USERNAME.github.io/YOUR_BRANCH_NAME/

Congratulations!

You have successfully created and deployed a cost-free email collection page to gather potential users' contact information for your upcoming product.

Using HTML, CSS, and JavaScript, we built a simple yet effective email collection page, and GitHub Pages provided an easy way to host it at zero cost. Additionally, EmailJS allows us to handle up to 200 emails per month for free, making this solution entirely budget-friendly. Feel free to customize the design and functionality further to fit your needs.

Happy coding!

Are you curious about what it’s like to navigate life as an international student in the USA? Or how to juggle a 9 to 5 job as a software engineer while pursuing your passion projects from 5 to 9? If so, join me on this thrilling journey as I share my experiences, challenges, and successes in real time.

In my newsletter, you’ll get an inside look at my life as I develop various products and work towards scaling my business. I’ll be transparent about the lessons I learn, the strategies I use, and the insights I gain along the way. From discovering startup ideas and launching them quickly to becoming profitable and preparing for interviews at top companies—I cover it all.

But this newsletter is more than just a glimpse into my life; it’s an invitation for you to learn, grow, and be inspired. Whether you’re an aspiring entrepreneur, a student, or someone who’s simply curious about bringing their own projects to life, you’ll find valuable advice, practical tips, and motivational stories that will help you on your own journey.

Read My Story and Explore My Projects

If you are interested in starting a newsletter like this, try out beehive for free

Reply

or to participate.