Skip to content

Instantly share code, notes, and snippets.

@JohnBra
Created December 8, 2021 01:56
Show Gist options
  • Save JohnBra/425aa9ada40a02fac1391b5f500da539 to your computer and use it in GitHub Desktop.
Save JohnBra/425aa9ada40a02fac1391b5f500da539 to your computer and use it in GitHub Desktop.
Simple Mailchimp sign up form for nextjs with tailwindcss
import React, { useState } from 'react';
import Link from 'next/link';
import MailchimpSubscribe from 'react-mailchimp-subscribe';
import { CheckCircleIcon, InformationCircleIcon, XCircleIcon } from '@heroicons/react/solid';
export default function EmailList(): JSX.Element {
// error currently not used
const [error, setError] = useState(null);
const [email, setEmail] = useState('');
const MAILCHIMP_URL = process.env.NEXT_PUBLIC_MAILCHIMP_URL;
function handleSubmit(subscribe: any) {
setError(null);
if (!email) {
setError('Please enter a valid email address');
return null;
}
const isFormValidated = subscribe({ EMAIL: email });
// The absolute most basic check if it is a real email address
return email && email.indexOf("@") > -1 && isFormValidated;
}
return(
<MailchimpSubscribe
url={MAILCHIMP_URL}
render={(props) => {
const { subscribe, status, message } = props || {};
return (
<>
<div className="mt-8 mb-4 sm:flex">
<label htmlFor="email-address" className="sr-only">
Email address
</label>
<input
id="email-address"
name="email"
type="email"
autoComplete="email"
value={email}
onChange={event => setEmail(event.target.value)}
required
className="w-full px-5 py-3 placeholder-gray-500 focus:ring-primary-500 focus:border-primary-500 sm:max-w-xs border border-gray-300 rounded-md"
placeholder="Your best email"
/>
<div className="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
<button
onClick={() => handleSubmit(subscribe)}
className="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
>
Subscribe
</button>
</div>
</div>
{status === "sending" && (
<div className="rounded-md bg-blue-50 p-4">
<div className="flex">
<div className="flex-shrink-0">
<InformationCircleIcon className="h-5 w-5 text-blue-400" aria-hidden="true" />
</div>
<div className="ml-3 flex-1 md:flex md:justify-between">
<p className="text-sm text-blue-700">Sending...</p>
</div>
</div>
</div>
)}
{status === "error" && (
<div className="rounded-md bg-red-50 p-4">
<div className="flex">
<div className="flex-shrink-0">
<XCircleIcon className="h-5 w-5 text-red-400" aria-hidden="true" />
</div>
<div className="ml-3">
<h3 className="text-sm font-medium text-red-800">We found some errors with your submission</h3>
<div className="mt-2 text-sm text-red-700" dangerouslySetInnerHTML={{__html: message}}/>
</div>
</div>
</div>
)}
{status === "success" && (
<>
<div className="rounded-md bg-green-50 p-4">
<div className="flex">
<div className="flex-shrink-0">
<CheckCircleIcon className="h-5 w-5 text-green-400" aria-hidden="true" />
</div>
<div className="ml-3">
<p className="text-sm font-medium text-green-800">Successfully subscribed!</p>
</div>
</div>
</div>
</>
)}
<div className="mt-2 text-center text-sm text-gray-600 hover:text-gray-900">
<Link href="/" >
<a>Back to home page</a>
</Link>
</div>
</>
);
}}
/>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment