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.
<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>
<div id="mc_embed_signup">
<form action="https://yoursite.us1.list-manage.com/subscribe/post?u=XXXXX&id=XXXXX" method="post">
<input type="email" name="EMAIL" placeholder="Email Address">
<input type="submit" value="Subscribe">
</form>
</div>
<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
- Validate embed sources and limit to trusted domains.
- Enforce HTTPS for all embeds.
- Update your Content Security Policy (CSP) to allow the provider domains.
- Sanitize HTML output when rendering raw embed code.
Accessibility
- Ensure embedded forms include labels and instructions.
- Test keyboard navigation and screen reader behavior.
- Verify color contrast for embedded form UI elements.