Email Capture

Capturing leads is essential for any SAAS business, and our Signup Component is engineered to do just that. Designed to fit seamlessly into your user journey, this feature allows you to collect visitor emails effectively. Whether it's a popup, a footer form, or an inline component within your content, you have the flexibility to place it where it makes the most impact. With easy integration into your email marketing software, you can start nurturing these leads into potential customers right away.

Basic Usage

  1. Mount the Component: You can embed the Signup Component into any LiveView using the following line of code.elixir
  1. <.live_component module={MyAppWeb.Live.SignupComponent} id="signup-form" topic="some topic" /> Here, id is a unique identifier for the component, and topic is a string indicating what the signup is for, like "Newsletter" or "Special Offers."
  2. Data Collection: By default, the component captures email and topic. Users will see an email field where they can input their email to sign up.
  3. Form Submission: Once submitted, the data is saved to the signups table in your database, and a message will appear saying "You are successfully signed up!".
  4. Email Marketing Integration: Since this component is easily configurable, you can also add your code to send the captured email to your email marketing software.

Customizing Fields

You may wish to capture more than just an email and a topic. Here's how you can do it:

  1. Schema Changes: Add the fields you want to capture in MyApp.Signups.Signup schema.elixir
  • field :new_field, :string
  • Changeset Validation: Update the changeset function in the same module to cast and validate the new fields.elixir
  1. |> cast(attrs, [:email, :name, :phone, :topic, :signed_of_at, :new_field]) |> validate_required([:email, :topic, :new_field])
  2. Component Update: Finally, add the new fields in the SignupComponent LiveView, where the form is rendered.

Customizing Appearance and Behavior

The appearance and behavior of the Signup Component can be customized in the render function in MyAppWeb.Live.SignupComponent.

  1. Change Button Label: To change the button label, update the text inside the <.button> tag in the render function.
  2. Placeholder Text: To change the placeholder text for the email field, simply update the placeholder attribute in the <.input> tag.
  3. Post-Submission Behavior: After a successful signup, the message displayed can be changed by modifying the text inside the <div class="py-2 font-semibold"> in the render function.

Multiple Sign-Up Forms

If you want to have multiple sign-up forms targeting different audiences or offers, you can create instances of the component with different id and topic. 

<.live_component module={MyAppWeb.Live.SignupComponent} id="newsletter-form" topic="Newsletter" />
<.live_component module={MyAppWeb.Live.SignupComponent} id="offers-form" topic="Special Offers" />

Conclusion

The Signup Component is not only powerful but also flexible. It allows for seamless integration and customization according to your needs, from capturing different types of user information to being placed wherever you see fit in your application.

Become a member now