Rendering embedded forms

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

Set up embeds in the dashboard first. See Embedding forms in the dashboard.

Rendering the form embed Component

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>
  )
}

When using dangerouslySetInnerHTML, only render embed code from trusted providers. Sanitize HTML in production environments.

Popular form providers & embed codes

HubSpot forms

<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

<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

<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

<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

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

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.