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
- Mount the Component: You can embed the Signup Component into any LiveView using the following line of code.elixir
<.live_component module={MyAppWeb.Live.SignupComponent} id="signup-form" topic="some topic" />
Here,id
is a unique identifier for the component, andtopic
is a string indicating what the signup is for, like "Newsletter" or "Special Offers."- 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.
- 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!". - 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:
- 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
|> cast(attrs, [:email, :name, :phone, :topic, :signed_of_at, :new_field]) |> validate_required([:email, :topic, :new_field])
- 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
.
- Change Button Label: To change the button label, update the text inside the
<.button>
tag in therender
function. - Placeholder Text: To change the placeholder text for the email field, simply update the
placeholder
attribute in the<.input>
tag. - 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 therender
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.