Add a contact form to any website, on any framework, builder or host
FormThunder works anywhere that can output an HTML form or make an HTTP request. These 32 guides give you working code for each framework, generator, site builder and host, with the details that are specific to it, such as which env prefix to use or how an embed's iframe affects your redirect.
Languages and frameworks
HTML contact formCopy an HTML contact form that emails you with no server or JavaScript.JavaScript contact formSend a contact form with plain JavaScript and fetch, show the result on the same page, and fall back to a normal post when JavaScript fails.React contact formA working React contact form component with loading, success and error states.Next.js contact formA Next.js App Router contact form: a client component that posts to FormThunder, the env var to use, and when a server action is the wrong tool.Vue contact formA Vue 3 contact form with script setup, reactive status and no backend of your own.Vite contact formAdd a contact form to a Vite project in TypeScript.Svelte contact formA Svelte 5 contact form using runes, and how to keep it working without JavaScript in SvelteKit.Angular contact formA standalone Angular contact form with Reactive Forms, HttpClient and signals.Alpine.js contact formAn Alpine.js contact form with loading and success states written inline in your HTML, with no build step.Astro contact formAn Astro contact form that ships almost no JavaScript and needs no adapter or SSR.Nuxt contact formA Nuxt 3 and 4 contact form using $fetch and public runtime config.Tailwind CSS contact formA Tailwind CSS contact form that actually sends: accessible labels, focus rings, validation styles and a form backend.
Static site generators
Hugo contact formAdd a contact form to a Hugo site with a partial, a shortcode and site params.Jekyll contact formA Jekyll contact form using an include and _config.yml.Gatsby contact formA Gatsby contact form as a React component, with the right env prefix and no serverless function.Gridsome contact formA Gridsome contact form in Vue 2 with the Options API and GRIDSOME_ env vars.Eleventy contact formAdd a contact form to an Eleventy site with global data and a Nunjucks include.
Site builders and CMSs
Webflow contact formKeep your Webflow form design and send submissions to FormThunder.Framer contact formAdd a contact form to a Framer site using the Embed component and your own HTML.Carrd contact formAdd a working contact form to a Carrd one-page site with an Embed element.Squarespace contact formAdd a custom Squarespace contact form with a Code Block when the built-in Form Block isn't enough.Wix contact formAdd a custom contact form to Wix with the Embed HTML element.Dorik contact formAdd a contact form to a Dorik site with a custom code element and hidden fields.WordPress contact formAdd a WordPress contact form without a plugin or SMTP setup, using a Custom HTML block or a small shortcode.Elementor contact formAdd a contact form to Elementor with the free HTML widget, no Elementor Pro needed.Oxygen contact formAdd a contact form to Oxygen Builder with a Code Block.
Hosts
Vercel contact formRun a contact form on a Vercel site with no serverless function.Netlify contact formRun a contact form on a Netlify site with a backend of your choice.Cloudflare Pages contact formRun a contact form on Cloudflare Pages with Turnstile spam protection, and no Workers code.GitHub Pages contact formAdd a contact form to a GitHub Pages site, which can't process POSTs.AWS contact formAdd a contact form to a site on S3 and CloudFront or Amplify, without building API Gateway, Lambda and SES.DigitalOcean contact formAdd a contact form to a DigitalOcean App Platform site or Droplet.
Or let your AI work it out
Connect the MCP server, and your agent reads your project, picks the right snippet and writes it in.