Unlimited Email Sign-Ups for Free - Serverless Mailing Lists

Unlimited Email Sign-Ups for Free - Serverless Mailing Lists

Create a simple serverless function to collect email from your users for free without external tools

Unlimited Email Sign-Ups for Free — Serverless Mailing Lists. Create a simple serverless function to collect email from your users for free without external tools

What Are We Going to Build?

We’re going to build a simple HTML form with a serverless function to save all the emails from your users without any hard limit.

Web services that provide you the possibility to save email are usually limited to 1,000 or 2,000 emails with the free tiers, and we will solve this issue easily.

With our combination, we will get up to 125,000 new emails every month for free using Netlify functions or similar serverless hosting providers.

Saving a simple email from your users shouldn’t require you to buy any expensive or external tool.

Netlify offers forms submission, too, but only 100 basic submissions per month.

The Tech Stack

  • Free PostgreSQL database service like the one from ElephantSQL or from Heroku
  • Static HTML file hosting for the form: Netlify or any other service like GitHub Pages
  • Serverless functions hosting: Netlify or Zeit for our simple NodeJS function to save all emails in the database

The Back-End Code

We’re going to save the emails on a database — if you need a simple database with PostgreSQL, you can use the ElephantSQL free tier.

You can build a simple email_signup table with this SQL code:

CREATE TABLE "email_signup" (
"email" citext PRIMARY KEY,
"created_at" TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

You’ll need to host this node-simple serverless function somewhere. I suggest you use Netlify functions.

For the code, we’re going to use just a few basic modules to enable you to check the email validity without any external API:

  • disposable-email-domains: It’s a public module that gives you a complete list of temporary emails to prevent a user from using disposable emails
  • pg: Official module to send data to the PostgreSQL database as a QUERY
  • http and url:Node modules to handle the URL from the request and to build a simple HTTP server to receive the HTTP requests with the user emails

Remember to replace the connectionString with the connection URL from your database, in our case from ElephantSQL.

const http = require("http");
const url = require("url");
const wildcards = require("disposable-email-domains/wildcard.json");
const pg = require("pg");

const connectionString =
  "postgres://bfsovhbw:[email protected]:5432/bfsovhbw";

const client = new pg.Client(connectionString);
client.connect();

function getEmailDomain(email) {
  if (email === undefined) return "";
  const indexAt = email.indexOf("@");
  if (indexAt !== -1) {
    return email.substring(indexAt + 1);
  } else {
    return "";
  }
}

function wildcardDomainCheck(domain) {
  return wildcards.indexOf(domain) > -1;
}

function saveEmailDB(email) {
  const insertQuery = "INSERT INTO email_signup(email) VALUES($1)";
  client.query(insertQuery, [email], function(err, result) {
    if (err) console.log(err.detail);
    if (result) console.log(result.rowCount);
    client.end();
  });
}

http
  .createServer(function(req, res) {
    var parts = url.parse(req.url, true);
    var query = parts.query;

    const email = query.email;
    const emailDomain = getEmailDomain(email);

    if (
      email === undefined ||
      email === "" ||
      emailDomain === "" ||
      wildcardDomainCheck(emailDomain)
    ) {
      res.statusCode = 400;
      res.write(
        "Please insert a correct valid email, no temporary emails, thank you."
      );
      res.end();
    } else {
      saveEmailDB(email);
      res.write("Saved your email, thank you.");
      res.end();
    }
  })
  .listen(8080);

We also prevent SQL injection by using prepared statements with bound parameters in the saveEmailDB function:

  • const insertQuery = “INSERT INTO email_signup(email) VALUES($1)”;

With this Query, your users won’t be able to submit any other value inside this SQL command thanks to the bound set by the VALUES property.

We also handle various response like a 403 status code with an error message if the user sends a temporary email or one without a domain after the @.

The Front-End Code

The front-end code is just a simple HTML form, but that will send the email to our serverless function and will display the message sent from the server inside the result div.

The good thing is that the server handles everything, and you won’t need to update the front-end code but just the server with different messages.

<div id="form">
  <form onsubmit="sendToBackend()">
    <label for="emailUser">Email:</label>
    <input id="emailUser" type="email" name="firstname" placeholder="[email protected]">
    <br>
    <input type="submit" value="Save your email">
  </form> 
</div>
<div id="result"></div>
<script>
  function sendToBackend() {
    event.preventDefault();
    var emailUser = document.getElementById("emailUser").value;
    var serverlessFunctionSaveEmail = "https://southern-mandarin.glitch.me/?email="+emailUser;
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() {
      document.getElementById("result").innerHTML = xmlHttp.responseText;
    }
    xmlHttp.open("GET", serverlessFunctionSaveEmail, true);
    xmlHttp.send(null);
}
  </script>

Hope this tutorial will surely help and you! Thanks!

Serverless Netlify Nodejs JavaScript Programming

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How to Build a Secure Serverless Function with JavaScript and Netlify

Learn to build serverless functions with the JavaScript language, deploy them to Netlify, and secure them using Okta. Netlify is a hosting company that dramatically simplifies deploying web sites and serverless functions (called Netlify Functions) with continuous integration and many more features. Okta is an identity and access management company that makes adding authentication to your applications a breeze.

Netlify & Serverless - 1. Netlify Fundamentals

This is the first video in my Netlify and Serverless Series. This tutorial covers the basics of setting up with Netlify and how to take a website that you ha...

Learn how to build a secure serverless functions with Netlify

Build a secure serverless function with Netlify in simple steps.

How to Build and Deploy Serverless Functions to Netlify

Since your codes are made up of functions basically, serverless functions allow you to deploy those functions without the complexity of managing a server to run them.

Netlify Serverless Functions with Netlify Dev

It's never been easier to create Serverless Functions. With Netlify, you can create and deploy Serverless Functions in minutes! In this video, let's learn how to run your Netlify Serverless Functions locally using the Netlify CLI and Netlify Dev command.