Lead Capture Setup: Connect Form & Capture Leads

The form on your landing page looks good. But right now if someone fills it in and clicks Submit, nothing happens.

This lesson connects your form so that every submission arrives in your inbox and the visitor sees a proper thank-you page.

How the form works

The form Claude built uses Netlify Forms, a feature built into Netlify's free hosting.

When you deploy your landing page to Netlify, Netlify automatically detects any form with the data-netlify="true" attribute. From that point every submission is stored in your Netlify dashboard and sent to your email as a notification.

No server. No backend. No monthly fee. Free for up to 100 submissions per month.

Step 1: Check your form code

Before you deploy, verify the form in your index.html has these attributes:

html

<form method="POST" data-netlify="true" name="landing-page-leads" action="/thankyou.html">
<input type="hidden" name="form-name" value="landing-page-leads">
<!-- your form fields go here -->
</form>

Four things to check: method="POST" is present, data-netlify="true" is present, name="landing-page-leads" is present, and the hidden field form-name has the same value as the name attribute on the form tag.

If any of these are missing, send Claude this:

• The lead capture form is missing the Netlify form attributes.
• Add these to the form tag: method="POST" data-netlify="true" name="landing-page-leads"

Add this hidden field inside the form:

<input type="hidden" name="form-name" value="landing-page-leads">

Step 2: Add a thank-you page

When someone submits the form, Netlify redirects them to a page. By default that page is a generic Netlify confirmation page. You want to redirect them to your own thank-you page instead.

Ask Claude to create one:

Create a simple thank-you page called thankyou.html in the same folder as index.html.

This page should:

• Match the design of my landing page using the same colours, fonts, and CLAUDE.md rules
• Show a clear confirmation message: "You are in! Check your email."
• One short paragraph: "Your [LEAD MAGNET NAME] is on its way to your inbox.

Check your email and your spam folder just in case."

• One button linking back to index.html: "Back to Home"
• No form on this page at all

Keep it simple. This page only exists to confirm the action and set expectations.

Then ask Claude to update the form tag:

Update the form tag to include this attribute: action="/thankyou.html"

The complete form tag should read:

<form method="POST" data-netlify="true" name="landing-page-leads" action="/thankyou.html">

Step 3: Deploy to Netlify

Deploy your landing page the same way you deployed your website in Track 3.

Go to app.netlify.com/drop. Drag your entire project folder into the drop zone. Get your live URL.

The key difference this time: once the landing page is live on Netlify, your form will actually work and collect real submissions.

Step 4: Enable form notifications

After your site is deployed, go to your Netlify dashboard at app.netlify.com. Find your deployed site and click on it. Click Forms in the top navigation. You should see your form listed as landing-page-leads. Click Form Notifications. Add your email address to receive a notification every time someone submits the form.

From this point every lead that comes through your landing page will appear in your Netlify Forms dashboard and send you an email notification with the submitted name and email address.

Step 5: Test the form

Do a live test on your deployed page before you send any traffic to it.

Open your live Netlify URL. Fill in the form with a test name and your own email address. Click Submit. You should land on your thank-you page. Check your email and confirm the test submission arrived within a few minutes. Check your Netlify Forms dashboard and confirm the submission appears there as well.

If both of those work, your lead capture system is live and collecting real leads.

Alternative: Formspree

If you are using a different hosting method and cannot use Netlify Forms, use Formspree instead.

Go to formspree.io and create a free account. Create a new form and copy the form endpoint URL which looks like https://formspree.io/f/XXXXXXXX. Then ask Claude to update your form:

Update the form to use Formspree instead of Netlify Forms.

Replace the form action with: https://formspree.io/f/[YOUR_FORM_ID]

Remove the data-netlify="true" attribute and the hidden form-name field.

The form tag should read: <form method="POST" action="https://formspree.io/f/YOUR_FORM_ID">

Formspree handles the rest. The free tier allows 50 submissions per month and submissions appear in your Formspree dashboard and get emailed to you automatically.

Your leads are now live

Once the form is connected and tested, every visitor who fills it in is a real lead. Their name and email address arrive in your inbox and your dashboard automatically.

This is the moment your landing page becomes a business tool and not just a web page.

Your action right now

Verify your form code has all the required attributes. Ask Claude to create your thank-you page. Confirm the action="/thankyou.html" attribute is on your form tag. Deploy to Netlify. Enable email notifications in your Netlify Forms dashboard. Send yourself a test submission.

When the test submission arrives in your inbox, move to the next lesson.