How to add an email sign-up form on the home page

Phoenix Forum Questions / Help
, ,
1

So I’m trying to build my first phoenix website, I’ve been going through various tutorials and the Programming Phoenix 1.4 book and they all seem to be teaching the concept that each Context has it’s own model (Schema), with a controller, and corresponding templates with the model’s form, which is great and makes a ton of sense to me.

However, when it comes time to applying what I’ve been learning, I’m completely lost. I’m trying to figure out how to add a simple email sign-up input on the homepage. I created the homepage by altering the templates/page/index.html.eex and that works great. But now when it’s time to add the email sign-up form, I’m floundering.

I created a lead schema with only an email address field. Now how do I add an email sign-up form on the homepage where the email address gets stored in the database? I started to build out a controller for the lead schema, but that doesn’t seem right to me because the controllers usually map the schema to the templates, but in this case, the only template I want it to map to is the index page. So how do I add a form to the homepage and then pass the data from that form to the database (using the controller for the lead I imagine, but I don’t know how)?

I feel like I’m making this way too difficult than it should be. Any pointers or guidance that can be provided would be greatly appreciated.

2

The below links will provide an easier way to understand the necessary things for building a signup form:

https://lobotuerto.com/blog/building-a-json-api-in-elixir-with-phoenix/

Your post sounds like you’re bit short in experience with building or creating a web application using Elixir / Phoenix. If that’s the case, you’ll need help to understand the framework and other necessary things.

Are you trying to learn / experiment with Phoenix? or Are you building a product?

3

You were on the right track.

The controller’s don’t need to have all the actions, just the ones that are relevant. So in this case, you could add a LeadController with just a create action:

defmodule MyApp.LeadController do
  def create(conn, params) do
    # save lead
  end
end

Then, in the router:

resources "/leads", LeadController, only: [:create]

Then, in your page controller:

def index(conn, _params) do
  lead_changeset = Lead.changeset()
  render(conn, lead_changeset: lead_changeset)
end

Then finally, in your homepage template:

<%= form_for @lead_changeset, Routes.lead_path(@conn, :create), fn f -> %>
  <%= label f, :email %>
  <%= text_input f, :email %>
  <%= error_tag f, :email %>
<% end %>
2 Likes
4

Thanks @delameko, this totally got me where I needed to go. Passing the Lead.changeset() in the page controller was my missing link, and once I got there, it was just a matter of following the error messaging to iron out all my other problems. You Rock!

5

Thanks @pmangalakader, I indeed am new with building web applications with Elixir / Phoenix. Right now I’m working through the Programming Phoenix 1.4 book by Chris McCord, and this website is my attempt to apply the principles being taught.

These look like awesome tutorials. I’ve blocked out time over the next couple of days to work through each. Thanks!

1 Like