Newsletter subscription with Remix and Convertkit.

#remix #conevertkit #newsletter #subscription

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";exportdefaultfunctionNewsletter(){return(<divclassName="flex items-center justify-center h-screen bg-gray-100"><divclassName="flex flex-col items-center space-y-4"><h1className="font-bold text-2xl text-gray-700 w-4/6 text-center">NewsLetter.</h1><pclassName="text-sm text-gray-500 text-center w-5/6">JoinourNewsletterandgetweeklynews.</p>{/* Newsletter form*/}<Formmethod="post"><inputname="email"type="text"placeholder="type your mail"className="border-2 rounded-lg w-full h-12 px-4"/><buttontype="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";exportconstaction:ActionFunction=async({request})=>{constformData=awaitrequest.formData();constemail=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.

...exportconstaction:ActionFunction=async({request})=>{...constAPI_URL=process.env.CONVERTKIT_API;constAPI_KEY=process.env.CONVERTKIT_API_KEY;constFORM_ID=process.env.CONVERTKIT_FORM_ID;constres=awaitfetch(`${API_URL}/forms/${FORM_ID}/subscribe`,{method:"post",body:JSON.stringify({email,api_key:API_KEY}),headers:{"Content-Type":"application/json; charset=utf-8",},});returnawaitres.json();}

now we can handle the subscription state, and update ui accordingly, using useActionData and useTransition hooks.

...exportdefaultfunctionNewsletter(){// add remix hooks to handle state.constactionData=useActionData();consttransition=useTransition();letsubmitting=transition.submission;return(<divclassName="flex items-center justify-center h-screen bg-gray-100"><divclassName="flex flex-col items-center space-y-4"><h1className="font-bold text-2xl text-gray-700 w-4/6 text-center">NewsLetter.</h1><pclassName="text-sm text-gray-500 text-center w-5/6">JoinourNewsletterandgetweeklynews.</p>{/* Newsletter form*/}<Formmethod="post"><inputname="email"type="text"placeholder="type your mail"className="border-2 rounded-lg w-full h-12 px-4"/>{/* If subscription succeeded*/}{actionData?.subscription&&<pclassName="w-full text-center text-sm text-green-500">Pleasecheckyouremail,andconfirmsubscription.</p>}{/* If subscription failed*/}{actionData?.error&&<pclassName="w-full text-center text-sm text-red-500">{actionData.message}</p>}{/* update button status when submitting*/}<buttontype="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>);