ConvertKit is excellent for content-driven email campaigns aimed at converting subscribers into paid users. The first step to launching a campaign is to capture a user's email!

In this article, we're going to build a ConvertKit newsletter form that's not just flexible, but also highly customizable. Sure, we could use the standard form provided by ConvertKit, but where's the fun in that?

We want full control over our form's look and behavior. To make this happen, we'll be using Next.js App Router features and the shadcn/ui components, which are extendable with Tailwind CSS and fully accessible. The best part?

We'll design our component to be super versatile. You'll be able to use it across your website or even multiple websites, with different form IDs and ConvertKit accounts. Plus, you can change up the styling depending on where you're using it. Exciting, right?

Understanding the Newsletter Subscription Flow

In this blog post, we're going to construct a system for subscribing to a newsletter. We'll dissect the process into two main parts: user actions and code execution.

User Actions

1. Form Submission: Our goal is for the user to fill out a form on our website and hit the "Sign me up" button.

2. Email Confirmation: Following form submission, the user should be redirected to the /check-email page. They'll need to check their email and click a confirmation link sent by ConvertKit. This step is crucial as ConvertKit treats subscriptions as unconfirmed until this link is clicked, helping to filter out any spam subscribers.

3. Subscription Confirmation: Once the user confirms their subscription, they'll be redirected to the /confirm-subscription page on our website, which will confirm their successful subscription.

Code Execution

1. Form Data Processing: When the user submits the form, we'll send the data to our /api/subscribe endpoint via a POST request.

2. Server-Side Request to ConvertKit: Our server will extract the email and first name from the request body and send a POST request to the ConvertKit API to subscribe the user to a form.

3. ConvertKit Response Processing: ConvertKit will process the request and send back a response. Our server will then set the subscriber ID and first name in cookies, and send a response back to the client.

4. Client-Side Redirection: If the server response is OK, the client will redirect the user to the /check-email page and reset the form. If the response isn't OK, an error message will be displayed.

The user actions and code execution steps are interdependent up to the point of the user being redirected to the /check-email page. The initial user action of form submission triggers the code execution steps, which in turn enable the user to be redirected to the /check-email page. After this point, the next steps in the user actions are dependent on the user's actions of checking their email and clicking the confirmation link. The entire flow is sequential, with each step depending on the successful completion of the previous step.

Project

You can find the final application's repository here.