How to collect pre signup emails

One of the most import thing when you start a new application and want to validate your idea before building to much is to deploy a landing page and collect email signups. You can install a snippet from one of the email marketing providers but in this tutorial I will show you how you can build and use a reusable LiveView signup component.

The landing page

I already have a page that I want to be able to collect pre-signup emails.

Instead of the GET STARTED-button, I want to replace it with a signup component.

Generate a feature

mix saaskit.gen.feature signup_component

Since this generates a migration file, you need to run migrations as well with the command:

mix ecto.migrate

Modify index page

When the migrations are run, I can open up page_live.ex and in the top alias the component:

alias ScreenBuilderWeb.Live.SignupComponent

and after that open up the heex file page_live.html.heex and replace the button with

<h3 class="mt-12 mb-6 text-xl font-bold md:text-center">Signup for product notifications</h3>
<div class="flex md:justify-center">
  <.live_component module={SignupComponent} id="signup-form" topic="pre-signup" />
</div>

Note, the topic is needed and the idea is that you can have several signups in different contexts.

Now this is ready to be tested in the browser and look something like this:

After someone signs up, the input field is replaced with a message the indicates that they are signed up: