React
Build a React contact form that sends submissions to your email with no server code: a typed client, a hook that tracks submit state, safe retries and a delivery timeline for every message.
Platforms
A contact form for whatever you build with.
Every platform sends the same request: a plain HTML form or a fetch call to one endpoint. These guides show where the snippet goes, which website addresses to register, and what happens after submit.
Frameworks
Next.js
Add a contact form to a Next.js app without writing an API route or a server action. Post to Heartdove from a client component and track every email alert to delivery.
Astro
Add a contact form to a static Astro site with zero client JavaScript and no server adapter. Point the form at Heartdove and get every submission by email with delivery tracking.
Gatsby
Add a contact form to a Gatsby site with the React hook or a plain HTML form. No function, no email library, and a delivery timeline for every submission.
SvelteKit
Add a contact form to a SvelteKit or Svelte site with the Heartdove Svelte action. No server route, safe retries and a delivery timeline for every message.
Vue
Add a contact form to a Vue 3 app with the Heartdove directive. No server code, typed submit state, safe retries and a delivery timeline for every message.
Nuxt
Add a contact form to a Nuxt app with the Heartdove Vue directive, rendered on the client. No server route and no email credentials in your project.
Static site generators
Static sites
How to add a working contact form to any static website: one HTML form, one endpoint, every submission saved and emailed with delivery tracking. No PHP, no serverless function.
Hugo
Add a contact form to a Hugo site with one partial and no backend. Submissions are saved to an inbox, emailed to you and tracked to delivery.
Jekyll
Add a contact form to a Jekyll site, including GitHub Pages, with one include and no plugin. Every submission is saved, emailed and tracked to delivery.
Eleventy
Add a contact form to an Eleventy site with one include. Submissions are saved to an inbox, emailed to you and tracked until delivered or bounced.
Styling and interactivity
Alpine.js
A contact form with Alpine.js that posts JSON to Heartdove with fetch, shows submit state, and needs no backend. Every message is saved and tracked to delivery.
Tailwind CSS
A styled Tailwind CSS contact form that posts to Heartdove. Keep your classes, change the action, and get every submission by email with delivery tracking.
Hosting
GitHub Pages
Add a working contact form to a GitHub Pages site. GitHub Pages cannot run server code; Heartdove receives the form, emails you and tracks every delivery.
Netlify
Add a contact form to a site hosted on Netlify without Netlify Forms or a function. Every submission is saved to an inbox, emailed, and tracked to delivery.
Vercel
Add a contact form to a site on Vercel without writing a function or storing email credentials. Heartdove receives the form, emails you and tracks every delivery.
Cloudflare Pages
Add a contact form to a Cloudflare Pages site without writing a Pages Function. Heartdove receives the form on the Cloudflare edge, emails you and tracks every delivery.
Site builders
Framer
Add a contact form to a Framer site with a code embed, get every submission by email and in an inbox, and see whether each alert was delivered. No backend, no plugin.
Webflow
Add a contact form to a Webflow site with an Embed element and get every submission by email and in an inbox, with a delivery timeline for each alert.
Plain HTML and the React, Vue and Svelte adapters have been tested in real browsers. Guides for other platforms place the same snippet and say so on the page.