Embedding Forms on Your Website

Add FormRobin forms directly to your website using iframe embeds. Collect responses on your own pages without redirecting users away from your site.

Prerequisites

Account: Logged into FormRobin
Form: Created and published a form
Website Access: Ability to edit HTML on your website
Domain Whitelist: Your website domain must be whitelisted (see Domain Whitelisting article)

How to Embed a Form

Ensure your form is published (toggle the publish switch to ON)
Go to your form details or settings page
Find the Embed Code or Share section
Copy the iframe embed code provided
Paste the code into your website's HTML where you want the form to appear
Save and publish your website changes

Embed Code Format

The embed code looks like this:

<iframe 
  src="https://formrobin.com/f/your-form-slug" 
  width="100%" 
  height="600" 
  frameborder="0"
></iframe>

Code Parameters:

src - The form URL (unique to your form)
width - Form width (default: 100% for responsive)
height - Form height in pixels (adjust based on form length)
frameborder - Border around iframe (0 = no border)

Customizing the Embed

Adjusting Size

Width:

width="100%" - Responsive (recommended for mobile)
width="600px" - Fixed width
width="50%" - Half the container width

Height:

Start with height="600"
Increase for longer forms (800, 1000, etc.)
Test on mobile to ensure all fields are visible

Styling the Iframe

Add CSS classes or inline styles:

<iframe 
  src="https://formrobin.com/f/your-form-slug" 
  width="100%" 
  height="600" 
  frameborder="0"
  style="border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);"
></iframe>

Embedding on Different Platforms

WordPress

Edit the page or post where you want the form
Switch to HTML/Code editor mode
Paste the iframe embed code
Switch back to visual editor if desired
Update and publish the page

Wix

Click Add (+) on your page
Select Embed → Embed a Site
Paste your form URL (just the src link, not the full iframe code)
Adjust size and position
Publish your site

Squarespace

Edit the page where you want the form
Click to add a block
Choose Code block
Paste the iframe embed code
Save and publish

Shopify

Go to Online Store → Pages
Edit the page or create a new one
Click Show HTML button
Paste the iframe embed code
Save the page

Custom HTML Websites

Open your HTML file in a text editor
Locate where you want the form (e.g., inside a <div> container)
Paste the iframe code
Upload the updated file to your server

Making Embeds Responsive

For mobile-friendly forms, use this CSS wrapper:

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe 
    src="https://formrobin.com/f/your-form-slug" 
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
  ></iframe>
</div>

Domain Whitelist Requirements

Important: Forms will only load on whitelisted domains.

Go to Settings → Domains
Add your website domain (e.g., example.com or www.example.com )
Free plan: 1 domain allowed
Individual plan: 10 domains allowed

What Happens After Embedding

Form loads directly on your website page
Users fill the form without leaving your site
Submissions are tracked in your FormRobin dashboard
Email notifications work normally (if enabled)
Custom redirects work after submission (Individual plan)
Source tracking captures the embedding page URL (Individual plan)

Limitations

Domain Whitelist Required: Forms won't load on non-whitelisted domains
Iframe Height: Must be set manually; adjust if form is cut off
Styling: Limited ability to style form internals (controlled by FormRobin)
Multiple Embeds: Can embed the same form multiple times on different pages

Troubleshooting

Issue: Form not loading (blank iframe or error)

Fix: Check that: (1) Form is published, (2) Your website domain is whitelisted in Settings → Domains. Domain must match exactly including www if applicable.

Issue: Form is cut off at the bottom

Fix: Increase the iframe height value. Try height="800" or height="1000" for longer forms.

Issue: Form doesn't fit on mobile

Fix: Use width="100%" for responsive width. Consider using the responsive embed wrapper code above.

Issue: "This domain is not authorized" error

Fix: Add your domain to the whitelist in Settings → Domains. If using www.example.com, add that exact version. You may need both www and non-www versions.

FAQ

Q: Can I embed multiple forms on one page?

A: Yes, you can embed multiple different forms on the same page. Each needs its own iframe code.

Q: Can I embed the same form on multiple pages?

A: Yes, use the same embed code on as many pages as needed, as long as they're on whitelisted domains.

Q: Does embedding affect form performance?

A: No, embedded forms perform the same as standalone forms.

Q: Can I customize the form's appearance in the embed?

A: You can style the iframe container but not the form internals. Form styling is controlled within FormRobin.

Need more help? Contact support at support@formrobin.com - we're here to help!