Next.js: How to add a Contact Form (Pages Router)

components/ContactForm.tsx

import React, { useState } from 'react'

function ContactForm() {
	const [loading, setLoading] = useState(false)
	const [successMessage, setSuccessMessage] = useState('')

	const onSubmit = async (e: React.FormEvent) => {
		// Prevent the form from submitting the traditional way
		e.preventDefault()

		// Don't submit twice
		if (loading) {
			return
		}

		// 👇 A nice little track to get all the form values as an object
		const form = e.target as HTMLFormElement
		const formValues = Object.fromEntries(new FormData(form).entries())

		setLoading(true)
		setSuccessMessage('')

		try {
			await fetch('/api/contact', {
				method: 'POST',
				headers: { 'Content-Type': 'application/json' },
				body: JSON.stringify(formValues),
			}).then((response) => {
				if (!response.ok) {
					throw new Error(`HTTP error! Status: ${response.status}`)
				}
				return response.json()
			})

			setLoading(false)
			setSuccessMessage('Thank you for contacting us!')

			// Reset the form values after a successful submission
			form.reset()
		} catch (err) {
			console.error(err)
			alert('An error occurred while sending your message...')
			setLoading(false)
		}
	}

	return (
		<form onSubmit={onSubmit}>
			<label>
				<span>Name</span>
				<input type="text" name="name" required />
			</label>
			<label>
				<span>Email</span>
				<input type="email" name="email" required />
			</label>
			<label>
				<span>Message</span>
				<textarea name="message" required />
			</label>
			<button disabled={loading} type="submit">
				Send message!
			</button>
			{successMessage && <p>{successMessage}</p>}
		</form>
	)
}

export default ContactForm

$ yarn add mailgun.js form-data

pages/api/contact.ts

import type { NextApiRequest, NextApiResponse } from 'next'
import Mailgun from 'mailgun.js'
import FormData from 'form-data'

const CONTACT_FORM_FROM_EMAIL = process.env.CONTACT_FORM_FROM_EMAIL as string
const CONTACT_FORM_TO_EMAIL = process.env.CONTACT_FORM_TO_EMAIL as string
const MAILGUN_DOMAIN = process.env.MAILGUN_DOMAIN as string
const MAILGUN_API_KEY = process.env.MAILGUN_API_KEY as string

const mailgun = new Mailgun(FormData)
const mg = mailgun.client({
	username: 'api',
	key: MAILGUN_API_KEY,

	// This needs to be customized based on your Mailgun region
	url: 'https://api.eu.mailgun.net',
})

async function contact(req: NextApiRequest, res: NextApiResponse<string | void>) {
	// Only allow post requests
	if (req.method !== 'POST') {
		return res.status(404).end()
	}

	// Get the form data from the request body
	const { name, email, message } = req.body

	// Put together the email text
	const text = ['From: ' + name + '<' + email + '>\n', message].join('\n')

	// Send the email using Mailgun
	await mg.messages.create(MAILGUN_DOMAIN, {
		subject: 'New contact form submission',
		from: CONTACT_FORM_FROM_EMAIL,
		to: CONTACT_FORM_TO_EMAIL,
		text,
		'h:Reply-To': email,
	})

	// Send a 200 OK response
	res.status(200).json({ status: 'ok' } as any)
}

export default contact