Troubleshooting: Embedding Issues

Fix problems when embedding FormRobin forms on your website. FormRobin uses a simple div + script embed code — not a manual iframe tag. The script automatically creates and manages the iframe for you.

How FormRobin Embedding Works

When you embed a FormRobin form, you paste a snippet like this into your website's HTML:

<div class="formrobin-embed" data-path="/f/your-form-slug"></div>
<script src="https://formrobin.com/js/embed.js"></script>

The embed.js script automatically:

  • Creates an iframe and replaces the <div> element
  • Sets the iframe source to your form's URL
  • Uses the iframe-resizer library to auto-adjust the iframe height as content changes (minimum height: 500px)
  • Handles scrolling back to the top of the form when users navigate between pages

You do not need to write or modify any iframe tag yourself.

Common Embedding Problems

  • Form doesn't appear on the page
  • Form appears but is cut off or the wrong size
  • Form works at its direct URL but not when embedded
  • Browser console shows security errors

Issue: Incorrect or Modified Embed Code

Solution:

  1. Get a fresh embed code from FormRobin (click Share on your form, then copy the Embed code)
  2. Copy the entire snippet — both the <div> tag and the <script> tag
  3. Do not modify the data-path attribute or the script src URL
  4. Paste the snippet exactly where you want the form to appear in your page's HTML

Common mistakes:

  • Copying only the <div> without the <script> tag — the form won't load
  • Changing the data-path value — the form URL will break
  • Placing the snippet inside an element that hides overflow or has display: none

Issue: Form Cut Off or Wrong Size

FormRobin's embed script uses the iframe-resizer library to automatically adjust the iframe height based on the form's content. You should not need to set height manually.

If the form still appears cut off:

  1. Check that no parent CSS is restricting the container's height (e.g., max-height, overflow: hidden)
  2. Ensure the <div class="formrobin-embed"> container is not inside a fixed-height element
  3. Remove any custom CSS targeting the FormRobin iframe
  4. Test on both mobile and desktop — the iframe width is set to 100% automatically

Note: The iframe starts at 700px tall and auto-resizes with a minimum height of 500px. If your form is very short, some empty space below the form is expected.

Issue: Content Security Policy (CSP) Blocking

Symptoms: Browser console shows "Refused to frame" or other CSP errors, and the form does not load.

Because embed.js creates an iframe pointing to formrobin.com, your site's Content Security Policy must allow framing from that domain.

Solution:

  1. Add formrobin.com to your CSP frame-src directive
  2. Also add it to script-src so the embed script can load
  3. Example header:
    Content-Security-Policy: frame-src 'self' formrobin.com; script-src 'self' formrobin.com;
  4. Contact your website administrator or hosting provider if you are unsure how to update CSP headers

Issue: Mixed Content (HTTP/HTTPS)

Symptoms: Form does not load, and the browser console shows a mixed-content warning.

Solution:

  1. FormRobin embed URLs always use https:// — do not change them to http://
  2. If your own site is served over HTTP, modern browsers may block the HTTPS iframe — switch your site to HTTPS
  3. Check that no proxy or CDN is rewriting the embed script URL to HTTP

Issue: Browser Cache Showing Old Version

Solution:

  1. Hard refresh: Ctrl+F5 (Windows) or Cmd+Shift+R (Mac)
  2. Clear your browser cache
  3. Test in an incognito or private window
  4. Try a different browser

Issue: Multiple Forms on One Page

You can embed more than one FormRobin form on a single page. Each form needs its own <div class="formrobin-embed"> element with its own data-path, but you only need to include the <script> tag once.

<div class="formrobin-embed" data-path="/f/first-form"></div>
<div class="formrobin-embed" data-path="/f/second-form"></div>
<script src="https://formrobin.com/js/embed.js"></script>

Note on Domain Restrictions

Good news: FormRobin forms can be embedded on any website without domain restrictions. You don't need to whitelist or configure domains — simply copy the embed code and paste it into your site.

FAQ

Q: Do I need to write my own iframe tag?
A: No. The embed code is a <div> + <script> snippet. The script creates and manages the iframe automatically.

Q: How do I control the form's height?
A: You don't need to. The iframe-resizer library automatically adjusts the height to match the form content. If something looks off, check that no parent CSS is restricting the container size.

Q: Can I style the embedded form?
A: Use FormRobin's built-in Form Styling options (colors, fonts, background) inside the form editor. Custom CSS applied from your website cannot reach inside the iframe due to browser security restrictions.


Still having embedding issues? Contact support with your website URL and the embed code you're using!

Related Articles