Embed your form in React, Next.js, or Vue

You can embed your Formware form in React, Next.js, or Vue using a simple iframe. This allows you to display your form directly inside your application.

1. Open your form in Formware.
2. Go to the Share tab.
3. Copy your form URL.

Insert the iframe inside your component or page:

<iframe src="YOUR_FORM_URL" loading="lazy" width="100%" height="700" frameborder="0" marginheight="0" marginwidth="0">
</iframe>

Replace YOUR_FORM_URL with your actual form link.

In React or Next.js, you can include the iframe directly in your JSX:

export default function FormEmbed() {
    return (
        <iframe
            src="YOUR_FORM_URL"
            loading="lazy"
            width="100%"
            height="700"
            frameBorder="0"
            marginHeight="0"
            marginWidth="0"
        />
    );
}

In Vue, add the iframe inside your template:

<template>
    <iframe
        src="YOUR_FORM_URL"
        loading="lazy"
        width="100%"
        height="700"
        frameborder="0"
        marginheight="0"
        marginwidth="0"
    >
    </iframe>
</template>

You can adjust the iframe attributes to better fit your layout:

• width=“100%” → makes the form responsive
• height=“700” → increase or decrease based on your form length
• loading=“lazy” → improves performance by loading only when visible

1. Start your development server.
2. Open your app in the browser.
3. Verify that the form loads correctly.
4. Submit a test response.

All responses will appear in the Results tab in your Formware dashboard.

• Embed your form in HTML or Astro
• Embed your form on any website