Embedding a form into your React application is simple and flexible, whether you’re using a client-rendered React setup such as Vite, or a framework like Next.js. This guide covers two common approaches:
- Embedding into a typical client-rendered React component
- Embedding into static or server-rendered pages using Next.js
We’ll walk through both examples and highlight key adjustments you may need to make, including support for dynamic rendering and form branding.
Important: Before you get started, if you need help with finding your Formstack Forms embed URL, we’d recommend checking out this article.
Embedding a Form in a Client-Rendered React Component
This approach works for standard React apps that are client-rendered (React apps that render in the browser).
Key Points:
- Append ?useDynamicRendering=true to your Formstack embed URL.
- Dynamically insert the script tag using a ref inside a useEffect hook.
- This ensures the form is rendered only on the client.
Example:
import { useEffect, useRef } from "react";
function EmbeddedForms() {
const formRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const script = document.createElement("script");
script.type = "text/javascript";
script.src =
"https://pro-services-demos.formstack.com/forms/js.php/embedded_form_test?useDynamicRendering=true";
if (formRef.current) {
formRef.current.appendChild(script);
}
}, []);
return (
<>
<div>
<h2>Embedded Forms</h2>
<p>This is the Embedded Forms page.</p>
</div>
<div ref={formRef}></div>
</>
);
}
export default EmbeddedForms;
Embedding a Form in Next.js (Static/Server Rendered Pages)
For applications using Next.js (or similar frameworks), extra care is needed to ensure scripts are loaded after hydration to prevent SSR issues.
Key Points:
- Use the next/script component with strategy="afterInteractive".
- Include ?useDynamicRendering=true in your embed script’s URL.
- Replace standard <script> tags with <Script> components from Next.js.
- Inline styles must be converted to JSS syntax (camelCase instead of kebab-case).
Example:
import Script from "next/script";
const FormstackFormNext = () => {
return (
<div>
<div id='fsForm5933778'></div>
<Script
type='text/javascript'
src='https://pro-services-demos.formstack.com/forms/js.php/embedded_form_test?useDynamicRendering=true'
strategy='afterInteractive'
onLoad={() => console.log("Formstack form loaded!")}
/>
<noscript>
<a
href='https://pro-services-demos.formstack.com/forms/embedded_form_test'
title='Online Form'>
Online Form - Embedded Form Test
</a>
</noscript>
<div style={{ textAlign: "right", fontSize: "x-small" }}>
<a
href='http://www.formstack.com?utm_source=jsembed&utm_medium=product&utm_campaign=product+branding&fa=h,5933778'
title='Powered by Formstack'>
Powered by Formstack
</a>
</div>
</div>
);
};
export default FormstackFormNext;
Final Tips
- Always test embedded forms across different environments (dev/staging/production) to ensure proper rendering.
- Use the onLoad callback to verify when the form script has fully loaded.
- For server-side rendered applications, never attempt to embed the form script during the server render phase.