Skip to main content

Frameworks

Remix

Send email from a Remix route action with the top-level mail().

Postboi is framework-agnostic: read the request’s FormData in a route action and hand it straight to mail(). Postboi extracts the special fields and renders the rest into a tidy HTML table.

// app/routes/_index.tsx
import { Form } from '@remix-run/react'
import { useState } from 'react'
import { mail } from 'postboi'

export async function action({ request }: { request: Request }) {
	await mail({ body: request.formData() })
	return { ok: true }
}

export default function Index() {
	// Mirror the email into the hidden _reply_to field so replies reach the sender.
	const [email, setEmail] = useState('')

	return (
		<Form method="post" encType="multipart/form-data">
			<input type="hidden" name="_subject" value="Contact Form" />
			<input type="hidden" name="_reply_to" value={email} />
			<input name="contact→name" placeholder="Name" required />
			<input
				name="contact→email"
				type="email"
				value={email}
				onChange={(e) => setEmail(e.target.value)}
				required
			/>
			<textarea name="details→message" placeholder="Message" />
			<button type="submit">Send</button>
		</Form>
	)
}
// app/routes/_index.tsx
import { Form } from '@remix-run/react'
import { useState } from 'react'
import { mail } from 'postboi'

export async function action({ request }: { request: Request }) {
	await mail({ body: request.formData() })
	return { ok: true }
}

export default function Index() {
	// Mirror the email into the hidden _reply_to field so replies reach the sender.
	const [email, setEmail] = useState('')

	return (
		<Form method="post" encType="multipart/form-data">
			<input type="hidden" name="_subject" value="Contact Form" />
			<input type="hidden" name="_reply_to" value={email} />
			<input name="contact→name" placeholder="Name" required />
			<input
				name="contact→email"
				type="email"
				value={email}
				onChange={(e) => setEmail(e.target.value)}
				required
			/>
			<textarea name="details→message" placeholder="Message" />
			<button type="submit">Send</button>
		</Form>
	)
}

Field names use the fieldset→field syntax. The provider and default recipient come from postboi.config.ts. A POSTBOI_TOKEN routes to the Postboi provider, or pick any provider.

Or use the Captcha component

postboi/react ships the spam protection (honeypot plus, on the Postboi provider, the managed invisible captcha) as a single prop-free component. It renders inside your existing form, so Remix’s <Form> keeps working:

import { Form } from '@remix-run/react'
import { Captcha } from 'postboi/react'

<Form method="post" encType="multipart/form-data">
	{/* your fields… */}
	<Captcha />
	<button type="submit">Send</button>
</Form>
import { Form } from '@remix-run/react'
import { Captcha } from 'postboi/react'

<Form method="post" encType="multipart/form-data">
	{/* your fields… */}
	<Captcha />
	<button type="submit">Send</button>
</Form>

The publishable key is baked in by bunx postboi sync. See Spam protection.

Runnable example: examples/remix-provider-postboi.