Embedding Forms on Your Website

Add FormRobin forms directly to your website using the JavaScript embed code. 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

How to Embed a Form

Ensure your form is published (toggle the publish switch to ON)
Go to your form details or settings page
Click the Share button
Select the Embed on website tab
Copy the 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 uses a JavaScript snippet that automatically handles form sizing and display:

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

How It Works:

The <div> acts as a placeholder for your form
The <script> loads FormRobin's embed handler
The script automatically creates an iframe and handles sizing
Forms auto-resize based on content (no manual height adjustment needed)

Code Components:

data-path - The form URL path (unique to your form)
class="formrobin-embed" - Required class for the script to detect the embed
embed.js - FormRobin's JavaScript that handles embedding

Benefits of JavaScript Embed

Auto-Resize - Form height adjusts automatically as users progress through pages
Responsive - Works perfectly on mobile and desktop without manual configuration
Smooth Navigation - Handles multi-page forms seamlessly
No Cut-Off Issues - Never worry about forms being truncated
Scroll Management - Automatically scrolls to form on page changes

Embedding on Different Platforms

WordPress

Edit the page or post where you want the form
Add a Custom HTML block (or switch to HTML/Code editor)
Paste the embed code
Update and publish the page

Note: Some WordPress themes may strip script tags. If the form doesn't appear, try using a plugin like "Insert Headers and Footers" or contact your theme developer.

Wix

Click Add (+) on your page
Select Embed → Embed HTML
Paste the complete embed code (both div and script tags)
Adjust position and size if needed
Publish your site

Squarespace

Edit the page where you want the form
Click to add a block
Choose Code block
Paste the 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 embed code
Save the page

Webflow

Drag an Embed element onto your page
Paste the embed code
Set the height to auto or 700px initially
Publish your site

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 embed code
Upload the updated file to your server

Advanced: Custom Container Styling

You can wrap the embed code in a styled container:

<div style="max-width: 800px; margin: 0 auto; padding: 20px;">
  <div class="formrobin-embed" data-path="/f/your-form-slug"></div>
  <script src="https://formrobin.com/js/embed.js"></script>
</div>

This centers the form and limits its width for better readability on wide screens.

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)
Form automatically resizes as users navigate between pages
No Domain Restrictions: Forms can be embedded on any website without domain restrictions

Limitations

JavaScript Required: Browsers must have JavaScript enabled for forms to load
Script Loading: Some website builders may restrict script tags (workarounds available)
Styling: Form appearance is controlled within FormRobin, not through the embed
Multiple Embeds: Can embed the same form multiple times on different pages

Troubleshooting

Issue: Form not loading (blank space or error)

Fix:

Verify form is published (check publish toggle is ON)
Check browser console for JavaScript errors
Verify both the div and script tags are present in your HTML

Issue: Script tag is being stripped by website builder

Fix:

WordPress: Use a plugin like "Insert Headers and Footers" or add script to theme
Wix: Use the HTML iframe embed option instead
Shopify: Add script tag to theme.liquid file
Contact your platform's support for help with custom scripts

Issue: Form appears but doesn't resize properly

Fix: Ensure the embed.js script is loading correctly. Check browser console for errors. Clear browser cache and reload.

Issue: Multiple forms on one page interfering with each other

Fix: This shouldn't happen with the JavaScript embed. Each form is independent. If you experience issues, ensure each embed has its own div and only include the script tag once per page.

FAQ

Q: Can I embed multiple forms on one page?

A: Yes, add multiple div placeholders with different data-path values. Include the script tag only once per page.

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

A: Yes, use the same embed code on as many pages as needed, on any website.

Q: Does embedding affect form performance?

A: No, embedded forms perform the same as standalone forms. The auto-resize feature actually improves user experience.

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

A: You can style the container around the form, but the form's internal styling is controlled within FormRobin's form editor.

Q: Do I need to include the script tag on every page?

A: Yes, include both the div and script tag wherever you want to embed a form. For multiple forms on one page, include the script tag just once.

Q: Can I use a direct iframe instead of the JavaScript embed?

A: While technically possible, we strongly recommend using the JavaScript embed for auto-resize functionality and better user experience.

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