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: 👇
- convertkit API key.
- convertkit Form Id.
- fresh installation of remix.
Get convertkit API key and Form Id.
go to account>settings>advanced.
chose any created form and get the id.
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.
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>
);
}
add remix action and get the submitted value.
...
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.
...
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.
...
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>
);
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.
Top comments (0)