Module 4, Lesson 2: Connect to ConvertKit

Before We Start

Here’s what I’d expect you to have in place before this lesson:

From previous lessons:

• Your landing page from Module 4, Lesson 1 — with a working email CTA input — is ready to go
• Claude Code is installed and you’re comfortable running it inside the WebStorm terminal (Module 3, Lesson 3)
• WebStorm is set up and your project is open (Module 3, Lesson 1)

Tools / setup you’ll need:

• WebStorm (or VS Code)
• Claude Code running in the WebStorm terminal
• A Kit (ConvertKit) account — free tier, sign up at kit.com if you haven’t yet

By the end of this lesson, you’ll:

• Have Kit (ConvertKit) set up and connected to your landing page
• Understand what a Form ID and API key are and where to find them
• Be able to capture real email addresses from your landing page into your Kit subscriber list
• Know how to test the integration end-to-end

About This Lesson

Duration: ~12 minutes video + ~15 minutes practice
Skill Level: Intermediate
What You’ll Build: A live email capture integration between your landing page and Kit (ConvertKit)

The landing page we built in the last lesson looks the part — but it’s not doing its job yet. A waitlist page that doesn’t capture emails is just a pretty picture. In this lesson we make it real: every email someone types in gets routed into Kit, stored in your list, and available for you to follow up on.

Watch the Lesson

What We’re Covering

Here’s what I’m walking you through in this lesson and why it matters if you’re trying to ship real things:

• Why you need a marketing automation system — and why Kit is the right tool to start with (it’s free for your first 10,000 subscribers)
• Creating a Kit Form — the standing form that acts as the entry point for your subscriber list
• Finding your Form ID and API key — the two pieces of information Claude needs to wire everything up
• Letting Claude do the integration — you don’t need to touch the code directly
• Testing the full flow — making sure emails actually land in your Kit list
• The “auto-confirm” setting — a small but important tweak that makes the confirmation flow actually work

1. Let’s Set the Scene (~0:00)

In the last lesson, we completed the landing page. It looks great, the CTA is there, and if someone types in their email and clicks the button it says “added to waitlist.” But here’s the thing — that email doesn’t actually go anywhere.

So what we’ve built so far is a form that looks like it works. What we’re going to do now is connect it to something real: a marketing automation system. And the tool I’m using for this is Kit — which you might know as ConvertKit. They rebranded, but same product.

The reason I like Kit for this stage is simple: it’s completely free for your first 10,000 subscribers. You’re not paying for anything until you’ve got real traction — and by then, you’ll be glad the system is already in place.

2. The Core Idea

2.1 What a Marketing Automation System Actually Does

Here’s the simple version of what we’re setting up: when someone visits your landing page and types in their email address, that email needs to go somewhere — somewhere you can find it, manage it, and send messages to it. That somewhere is Kit.

Kit stores the email, adds the person to your subscriber list, and from there you can send them messages, updates, sequences — whatever you want. Right now we’re just doing step one: get the email into the list.

Think of Kit as the inbox for your waitlist. The landing page is just the front door.

2.2 Why We’re Not Building This Ourselves

You could theoretically build your own email capture backend — a database, an API endpoint, a send function. But you don’t need to. Kit handles all of that, it’s already got the infrastructure, the deliverability, the double opt-in flows, the unsubscribes. There’s no reason to reinvent that wheel at this stage. Use the free tool, connect it, move on.

2.3 How This Connects to Module 4, Lesson 1 — Design the Landing Page

In Module 4, Lesson 1, we built the CTA input on the landing page. Right now that input fires a “success” state locally — but the email goes nowhere. In this lesson we’re completing that loop by giving the form a real destination.

3. Setting Up Kit (~0:30)

3.1 Sign Up for Kit

If you haven’t already, go to kit.com and sign up. You want the free plan — it says $0/month for the first 10,000 subscribers, which is right there on the pricing page. You don’t need to put in a card.

Once you’re logged in, don’t let the dashboard overwhelm you. There’s a lot on screen. We’re only touching one small part of it.

3.2 Create a Form

Here’s the thing about Kit forms: we’re not using Kit’s visual form on our landing page — we’ve already built our own form in the HTML. What we need from Kit is just a standing form that acts as the entry point to our subscriber list. Think of it as a hook we attach our custom form to.

Here’s how to create it:

1. In Kit, go to Grow → Landing Pages & Forms
2. Click Create New
3. Select Form (not Landing Page)
4. Choose Inline Form as the type
5. Pick any template — it doesn’t matter which one, we’re not using the visual design
6. Give it a name — I called mine “waitlist” but name it whatever makes sense for your project
7. Click Save and Publish

3.3 Get Your Form ID

Once your form is saved, look at the URL in your browser while you’re viewing that form. You’ll see a number in the URL — that’s your Form ID.

Copy it and paste it somewhere safe — a scratch pad, a text file, anywhere you’ll find it in the next few minutes. You’ll need it shortly.

3.4 Get Your API Key

1. In Kit, click on your profile picture (top right)
2. Go to Settings
3. Scroll down to Developer
4. Your API key is right there — click Copy

Paste that next to your Form ID in your scratch pad. You now have the two things Claude needs.

4. Let Claude Do the Integration (~3:30)

4.1 The First Prompt

Here’s what I ran in Claude Code to build the integration. Open your terminal in WebStorm, launch Claude Code, and paste this:

update my CTA input to integrate with ConvertKit so that when a user enters their email address, it goes into kit and i'm able to follow up with them.

After building the integration, walk me through setting up kit to work with my landing page

Claude will ask for permission before writing files (as usual), write the code, and then give you the Kit setup instructions. Follow along with those instructions to set up the form in Kit — the steps in section 3 above are exactly what Claude was guiding me through.

4.2 The Second Prompt — Plug In Your Keys

Once you’ve got your Form ID and API key from Kit, you don’t need to manually edit the code. Just send Claude a second prompt:

update my index.html with these
form id: [YOUR FORM ID]
API key: [YOUR API KEY]

Replace [YOUR FORM ID] and [YOUR API KEY] with the actual values from your Kit scratch pad. Claude will update the file for you — no digging around in the HTML required.

5. Fix the Confirmation Flow (~9:00)

5.1 Why Nothing Showed Up the First Time

When I first tested the integration — typed a test email, clicked the button, saw “added to waitlist” — I went to Kit and saw zero subscribers. Nothing.

The reason: Kit defaults to a double opt-in flow. It sends the person an email asking them to confirm before it adds them to your list. If you use a fake email address (which I did the first time), there’s nobody to click confirm, so nothing shows up.

The fix for testing purposes is to either use a real email address, or adjust the confirmation settings.

5.2 The Auto-Confirm Setting

Here’s the tweak I made in Kit to smooth out the confirmation flow during testing:

1. Go to your form in Kit (Grow → Landing Pages & Forms → click your form)
2. Click on Settings for the form
3. Find Incentive settings
4. Under Send Incentive Email, you’ll see an option for Auto-confirm new subscribers
5. Uncheck Send incentive email (for now) and enable Auto-confirm new subscribers
6. Save the form

5.3 Test With a Real Email

After adjusting that setting, go back to your landing page (open it in Chrome, refresh the page), type in a real email address, and click the button.

Then go back to Kit — Grow → Landing Pages & Forms → click your form → check the Reports tab. You should see a subscriber count go up.

You’ll also get a confirmation email to that address — Kit’s default behaviour. When I tested it, mine landed in spam initially. That’s normal for a brand new domain/sender setup — we’ll sort out email deliverability in a later lesson.

6. Try It Yourself

Exercise 1: Connect Your Form to Kit

What to do: Follow the steps in sections 3 and 4. Create a Kit form, get your Form ID and API key, run both Claude prompts, and verify the code has been updated in your index.html.

A nudge if you’re stuck: If Claude’s instructions for Kit setup don’t match exactly what you see in the Kit UI, just focus on the goal of each step — create a form, find its ID, find the API key. The UI changes but the concepts don’t.

How you’ll know it’s working: Your index.html file should now have your Form ID and API key referenced in it. Claude will confirm it updated the file after the second prompt.

Exercise 2: Test the Full Flow End to End

What to do: Open your landing page in Chrome, type a real email address into the CTA input, and click the button. Then go to Kit and verify the subscriber appeared.

What this is practising: End-to-end thinking — don’t just assume the integration works because Claude wrote it. Always test the thing yourself.

7. You Should Be Able to Build This Now

Here’s what you can do with what we just covered:

• Connect any HTML email capture form to a Kit subscriber list
• Use Claude Code to handle the integration code and then feed it real credentials via a follow-up prompt
• Test and verify email capture end-to-end

Check Yourself

• I’ve created a Kit form and know where to find my Form ID
• I’ve located my API key in Kit’s Developer settings
• I’ve run both Claude prompts and my index.html has been updated
• I’ve tested with a real email and verified the subscriber appeared in Kit
• I understand what double opt-in is and why the auto-confirm setting matters for testing

If Something’s Not Working

The Short Version

Here’s what I want you to walk away with:

• Kit is your marketing automation system — free for your first 10,000 subscribers, and it handles all the email infrastructure so you don’t have to
• You need two things to connect your form to Kit — the Form ID (in the URL of your form) and your API key (Settings → Developer)
• Claude does the code — give it the first prompt to build the integration, then a second prompt with your real credentials to wire them in
• Always test with a real email — fake emails can’t confirm subscriptions, so you won’t see anything in Kit until a real person (or you) confirms

Quick Reference

The Two Prompts

Prompt 1 — Build the integration: ``` update my CTA input to integrate with ConvertKit so that when a user enters their email address, it goes into kit and i’m able to follow up with them.

After building the integration, walk me through setting up kit to work with my landing page ```

Prompt 2 — Plug in your credentials: update my index.html with these form id: [YOUR FORM ID] API key: [YOUR API KEY]

Where to Find Things in Kit

Resources

Links & Docs

• Kit (ConvertKit) — sign up for the free plan here
• Kit API Documentation — if you ever want to go deeper on what the integration is doing under the hood

Tools Used

• Kit (ConvertKit) — email marketing and marketing automation platform
• Claude Code — running in the WebStorm terminal, same as Module 3, Lesson 3 onwards

Questions I Get Asked

Q: Do I have to use ConvertKit / Kit? Can I use Mailchimp or something else?

Totally. The principle is the same regardless of which tool you use — you need a Form ID (or equivalent) and an API key, and you give Claude those details to wire up the integration. Kit is what I use and it’s free to start, so it’s what I’m showing here. But if you’re already using Mailchimp, Beehiiv, or something else, the same pattern applies — just ask Claude to integrate with that instead.

Q: Is it safe to put my API key in the HTML file?

Kit’s v3 API key is a public key — it’s designed to be used client-side for exactly this kind of form integration. It’s not a secret token that grants admin access to your account. That said, once we push this to production in the next lesson, you might want to revisit how you’re managing environment variables. For now, for a landing page in this stage, it’s fine.

Q: The confirmation email went to spam — is something broken?

Nothing is broken. Email deliverability is a real thing that takes a bit of setup — domain verification, DKIM records, SPF records. We’ll cover this properly in a later lesson. For now, if the email arrived at all (even in spam) and clicking the confirmation link added you to the Kit list, the integration is working correctly.

Q: How do I know I’m ready for the next lesson?

If emails are landing in your Kit list and you’ve confirmed it end-to-end with a real email address — you’re good. The next lesson is about getting this page live on the internet, so make sure the integration is working locally before we move on.

💬 Stuck? Come Talk to Us

Glossary

Kit (ConvertKit): An email marketing and marketing automation platform. Free for your first 10,000 subscribers. Used here to capture and store email addresses from your waitlist landing page. (first introduced in this lesson — Module 4, Lesson 2)

Marketing automation system: A platform that stores subscriber email addresses and lets you send automated or manual messages to them. Kit is the one we’re using throughout this course. (introduced in Module 4, Lesson 2)

Form ID: A unique identifier for a specific form in Kit. Found in the URL of your form when viewing it in Kit. Needed to tell your landing page which Kit form to submit data to. (introduced in Module 4, Lesson 2)

API key: A string of characters that authenticates your landing page’s requests to Kit’s API. Found in Kit under Settings → Developer. Kit’s v3 API key is a public key — safe to use in client-side code. (introduced in Module 4, Lesson 2)

Double opt-in: An email subscription practice where someone receives a confirmation email after signing up and must click a link to confirm before they’re added to your list. Good for list quality and deliverability. (introduced in Module 4, Lesson 2)

Auto-confirm: A Kit form setting that skips the double opt-in confirmation email and adds the subscriber immediately. Useful during testing; consider carefully before using in production. (introduced in Module 4, Lesson 2)

CTA (Call to Action): The primary prompt or input element on your landing page that invites the visitor to take action — in our case, entering their email address. (first used in Module 4, Lesson 1 — Design the Landing Page)