> ## Documentation Index
> Fetch the complete documentation index at: https://buttercms.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Rendering embedded forms

> Render third-party form embeds and handle security and performance considerations in your frontend.

<Info>
  Set up embeds in the dashboard first. See [Embedding forms in the dashboard](../../create-content/creating-editing-content/forms/embedding-forms).
</Info>

## Rendering the form embed Component

```jsx theme={null}
const FormEmbed = ({ form_title, embed_code, form_height, show_title }) => {
  return (
    <div className="form-embed-container">
      {show_title && <h2>{form_title}</h2>}
      <div
        className="form-wrapper"
        style={{ minHeight: form_height || 500 }}
        dangerouslySetInnerHTML={{ __html: embed_code }}
      />
    </div>
  )
}
```

<Warning>
  When using `dangerouslySetInnerHTML`, only render embed code from trusted providers. Sanitize HTML in production environments.
</Warning>

## Popular form providers & embed codes

### HubSpot forms

```html theme={null}
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
  hbspt.forms.create({
    region: "na1",
    portalId: "YOUR_PORTAL_ID",
    formId: "YOUR_FORM_ID"
  });
</script>
```

### Mailchimp signup forms

```html theme={null}
<div id="mc_embed_signup">
  <form action="https://yoursite.us1.list-manage.com/subscribe/post?u=XXXXX&amp;id=XXXXX" method="post">
    <input type="email" name="EMAIL" placeholder="Email Address">
    <input type="submit" value="Subscribe">
  </form>
</div>
```

### Google forms

```html theme={null}
<iframe
  src="https://docs.google.com/forms/d/e/YOUR_FORM_ID/viewform?embedded=true"
  title="Google Form"
  width="100%"
  height="800"
  style="border:0;">
  Loading...
</iframe>
```

### Calendly

```html theme={null}
<div class="calendly-inline-widget"
     data-url="https://calendly.com/your-username/30min"
     style="min-width:320px;height:700px;">
</div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
```

## Best practices

<Info>
  Performance tip: Lazy-load heavy embeds using Intersection Observer to avoid impacting page load.
</Info>

### Security considerations

1. Validate embed sources and limit to trusted domains.
2. Enforce HTTPS for all embeds.
3. Update your Content Security Policy (CSP) to allow the provider domains.
4. Sanitize HTML output when rendering raw embed code.

### Accessibility

1. Ensure embedded forms include labels and instructions.
2. Test keyboard navigation and screen reader behavior.
3. Verify color contrast for embedded form UI elements.