Astro integration

Astro does not need a separate FormNode package yet. Use the Embed SDK directly in an Astro component, MDX page, or Starlight docs site. The component renders static HTML, and FormNode handles the live form, dynamic fields, approvals, and webhook delivery.

Create a local Astro component

Astro can load external scripts from a remote URL with is:inline. Put the FormNode script next to the embed markup so the component is easy to drop into a page.

--- 
const {
  formUrl,
  mode = "inline",
  height = 720,
  title = "FormNode form",
} = Astro.props;
---

<div
  data-formnode-form={formUrl}
  data-mode={mode}
  data-height={height}
  data-title={title}
></div>

<script is:inline src="https://app.formnode.io/embed.js"></script>

Use it on a page

Pass the FormNode URL copied from the form's Share panel. Use your custom domain when the form is client-facing.

---
import FormNodeEmbed from "../components/FormNodeEmbed.astro";
---

<FormNodeEmbed
  formUrl="https://app.formnode.io/organizations/{org-id}/form/{form-id}"
  height={900}
/>

Use it in MDX or Starlight

Astro MDX and Starlight content can import Astro components. That makes FormNode a good fit for request forms embedded into documentation, support, onboarding, or implementation-guide pages.

---
title: Request access
---

import FormNodeEmbed from "../../components/FormNodeEmbed.astro";

<FormNodeEmbed
  formUrl="https://forms.example.com/organizations/{org-id}/form/{form-id}"
  height={900}
/>

Popup and slide-in modes

For popup and slide-in embeds, attach the same data attributes to a button or link. The Embed SDK handles the panel behavior.

<button
  data-formnode-form="https://app.formnode.io/organizations/{org-id}/form/{form-id}"
  data-mode="popup"
>
  Open request form
</button>

<script is:inline src="https://app.formnode.io/embed.js"></script>

Environment variables and secrets

Public FormNode embed URLs can live in Astro frontmatter, content, or a PUBLIC_ environment variable. Do not put FormNode API keys in PUBLIC_ variables or client-rendered components. API keys belong only in server-side code, and the embed path does not need one.

Content Security Policy

If your Astro site uses a strict CSP, allow the FormNode domain for scripts and frames:

Content-Security-Policy:
  script-src 'self' https://app.formnode.io;
  frame-src https://app.formnode.io;

With a custom domain, use that domain instead:

Content-Security-Policy:
  script-src 'self' https://forms.example.com;
  frame-src https://forms.example.com;

When to create a package

A dedicated @formnode/astro package is useful if you need typed props, shared URL construction, and one-time script loading across many embeds. Until then, a local component is easier to audit and does not add dependency churn.

Troubleshooting

The script appears more than once

If the component is used many times on the same page, move the script to a shared layout or switch to the imperative API from Embed SDK. Keep one script include per page.

The form does not render on a static host

Confirm the generated HTML contains the data-formnode-formelement and the FormNode script. Then check CSP and ad/script blockers.

The form needs authenticated portal context

Use the customer portal link instead of a public Astro embed when the form must be gated behind FormNode authentication.