Add a contact form to your static site: Astro, Hugo, 11ty, Jekyll
One snippet in your layout template. Works in Astro, Hugo, 11ty, Jekyll, Gatsby, Bridgetown, and every other static-site generator.
<script src="https://cdn.toimii.io/components/your-code.js" async></script>
<toimii-contact></toimii-contact>
Step by step
Common gotchas
Frequently asked
How do I add it in Astro?
Drop the script tag in your base Layout component (e.g. src/layouts/Base.astro) and use the custom element in any .astro file. Astro renders unknown elements as plain HTML — no client directive needed for the tag itself.
How do I add it in Hugo?
Add the snippet to your layouts/partials/footer.html (or wherever you load custom scripts) and use the custom element in your content files, layout templates, or shortcodes.
How do I add it in 11ty (Eleventy)?
Add the snippet to your base layout (_includes/layout.njk in Eleventy defaults). It applies to every page that extends the layout. Set hot-reload on; you'll see the form as soon as the dev server rebuilds.
How do I add it in Jekyll / GitHub Pages?
Add the snippet to _layouts/default.html (or your layout of choice). Use the custom element in any Markdown post by enabling html in the Markdown renderer.
Will it slow down my build?
No. The script loads at runtime, not build time — your build emits the script tag and the browser fetches the actual component when a visitor hits the page. Astro, Hugo, 11ty, Jekyll: all unaffected.
Embedding on a different platform?
Same two lines of code, picked apart for each platform.
Ready to try it?
30-day free trial. No credit card. Set up in minutes.
No credit card required. Set up in 2 minutes.