How to Add a Form to an Astro Site

An exported FormToInbox form is framework-independent. In Astro, you can place its static assets in public, paste the semantic markup into an Astro component and test the generated production build.

Choose stable public asset paths

Create a folder such as public/forms/contact and place form.css and form.js inside it. Astro copies public assets into the build without transforming or bundling them, so reference them by their root-relative public URLs.

public/forms/contact/form.css
public/forms/contact/form.js

Paste the form into an Astro component

Place the generated form markup in the page or a reusable .astro component. Keep its labels, ids, names and scoped class names aligned with the exported stylesheet and script.

<link rel="stylesheet" href="/forms/contact/form.css">
<!-- Paste the generated form markup here. -->
<script src="/forms/contact/form.js" defer></script>

Keep scripts and secrets separate

A referenced public script is delivered to every visitor and cannot contain secret tokens. Astro also supports processed component scripts, but the portable FormToInbox export can remain a plain deferred file when you do not need bundling or TypeScript imports.

Test the production build

Run the site build and preview its output. Verify the real route, responsive layout, keyboard flow, validation, browser console and chosen destination. If the site deploys below a base path, confirm every asset URL against that deployment path.

Frequently asked questions

Do I need an Astro integration for the form?

No. The exported form uses standard HTML, CSS and JavaScript.

Does Astro bundle files in public?

No. Astro copies public assets to the build unchanged, so optimize them beforehand and use the correct public URL.

Can I place the form in a reusable component?

Yes. Keep the generated selectors and field identifiers intact, then use the component wherever the destination and page context are appropriate.

Primary sources

Turn the guide into a working form

Start from a template, change the fields and take the code with you.

Open the free builder