Newsletter subscription with Remix and Convertkit.
Tags: remix, conevertkit, newsletter, subscription
Published: 2022-06-03 11:57:16

Used by persons and businesses, newsletter is now very important to any email marketing strategy, it allow you to share important and valuable content with your network of customers.

in this tutorial we are going to setup a newsletter subscription with Remix and Conevrtkit, let's do that.

_we are going to need:_ :point_down:	

1. convertkit API key.
2. convertkit Form Id.
3. fresh installation of remix.

**Get convertkit API key and Form Id.**
go to account>settings>advanced.

![API Key](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1toqkt6jhez1lcgidsgo.png)
_chose any created form and get the id._

![Form ID](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a6gexy81tluwx29tjzg9.png)
_in your _.env__

```
CONVERTKIT_API="https://api.convertkit.com/v3"
CONVERTKIT_API_KEY="your_api_key"
CONVERTKIT_FORM_ID="your_form_id"
```

_make a route newsletter.tsx and create a form inside.
i use tailwindcss for the styling._
```javascript
import { Form } from "@remix-run/react";

export default function Newsletter() {

    return (
    <div className="flex items-center justify-center h-screen bg-gray-100">
        <div className="flex flex-col items-center space-y-4">
            <h1 className="font-bold text-2xl text-gray-700 w-4/6 text-center">
                NewsLetter.
            </h1>
            <p className="text-sm text-gray-500 text-center w-5/6">
                Join our Newsletter and get weekly news.
            </p>
            {/* Newsletter form*/}
            <Form method="post">
                <input
                    name="email"
                    type="text"
                    placeholder="type your mail"
                    className="border-2 rounded-lg w-full h-12 px-4" />
                <button
                    type="submit"
                    className="bg-red-400 text-white rounded-md hover:bg-red-500 font-semibold px-4 py-3 w-full">
                    Subscribe
                </button>
            </Form>
        </div>
    </div>
    );
}
```

![Newsletter Form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mo5n3a75mf8d2ja1sxa5.png)
_add remix action and get the submitted value._
```javascript
...
import { ActionFunction } from "@remix-run/node";

export const action: ActionFunction = async({request}) => {
    const formData = await request.formData();
    const email = formData.get("email");
    console.log(email);
    ...
}

...
```
_after getting the submitted email we can now make a post request to convertkit api and subscribe our user._
```javascript
...
export const action: ActionFunction = async({request}) => {
    ...
    const API_URL = process.env.CONVERTKIT_API;
    const API_KEY = process.env.CONVERTKIT_API_KEY;
    const FORM_ID = process.env.CONVERTKIT_FORM_ID;
    const res = await fetch(`${API_URL}/forms/${FORM_ID}/subscribe`, {
        method: "post",
        body: JSON.stringify({ email, api_key: API_KEY }),
        headers: {
          "Content-Type": "application/json; charset=utf-8",
        },
      });
    
    return await res.json();
}
```
_now we can handle the subscription state, and update ui accordingly, using useActionData and useTransition hooks._
````javascript
...
export default function Newsletter() {
    // add remix hooks to handle state.
    const actionData = useActionData();
    const transition = useTransition();
    let submitting = transition.submission;

    return (
    <div className="flex items-center justify-center h-screen bg-gray-100">
        <div className="flex flex-col items-center space-y-4">
            <h1 className="font-bold text-2xl text-gray-700 w-4/6 text-center">
                NewsLetter.
            </h1>
            <p className="text-sm text-gray-500 text-center w-5/6">
                Join our Newsletter and get weekly news.
            </p>
            {/* Newsletter form*/}
            <Form method="post">
                <input
                    name="email"
                    type="text"
                    placeholder="type your mail"
                    className="border-2 rounded-lg w-full h-12 px-4" />
                    {/* If subscription succeeded*/}
                    {actionData?.subscription && <p className="w-full text-center text-sm text-green-500">
                      Please check your email, and confirm subscription. 
                    </p>}
                    {/* If subscription failed*/}
                    {actionData?.error && <p className="w-full text-center text-sm text-red-500">
                      {actionData.message}  
                    </p>}

                    {/* update button status when submitting*/}
                <button
                    type="submit"
                    className="bg-red-400 text-white rounded-md hover:bg-red-500 font-semibold px-4 py-3 w-full mt-2">
                    {submitting ? "Subscribing ..." : "Subscribe"}
                </button>
            </Form>
        </div>
    </div>
    );
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8abqkfcaryli0c326oaz.png)

![subscription failed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k967rbavpbla3aczwkua.png)
this is a basic implementation of newsletter subscription, you can optimize further the ui, using the power of remix and react hooks.

et voila, hope this help you creating your newsletter with remix and convertkit, to learn more, i'm sharing my #buildinpublic journey on [twitter](https://twitter.com/zee_yass).