How to Embed Forms in Your Website

Mobyform supports multiple ways to embed forms into your website, so users can fill them out without leaving your site.

Embedding Options Overview

Method	Description	Best For
iframe Embed	Embed the form inline on a page	Most common; works with any website
Popup Embed	Form appears in a popup on button click	Saves page space; great for feedback
Full-Page Embed	Form fills the entire page	Dedicated form pages

iframe Embed

Get the Embed Code

Open the form's "Publish" page
Select the "Embed" option
Copy the iframe code

Example Embed Code

<iframe
  src="https://your-domain.com/s/your-form-key"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none;"
></iframe>

Auto-Adjusting Height

To make the form height adapt to content:

<iframe
  src="https://your-domain.com/s/your-form-key"
  width="100%"
  frameborder="0"
  style="border: none; min-height: 500px;"
  scrolling="auto"
></iframe>

Platform-Specific Instructions

WordPress

In the post or page editor, add a "Custom HTML" block
Paste the iframe code
Preview and publish

React / Next.js

function FormEmbed() {
  return (
    <iframe
      src="https://your-domain.com/s/your-form-key"
      width="100%"
      height="600"
      frameBorder="0"
      style={{ border: 'none' }}
    />
  );
}

Vue

<template>
  <iframe
    src="https://your-domain.com/s/your-form-key"
    width="100%"
    height="600"
    frameborder="0"
    style="border: none"
  />
</template>

Static HTML

Paste the iframe code directly into your HTML file where you want the form to appear.

How to Use

Popup embed is ideal for showing a form when a user clicks a button or link:

<!-- Trigger Button -->
<button onclick="openForm()">Open Feedback Form</button>

<!-- Modal Container -->
<div id="form-modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9999;">
  <div style="position:relative; width:90%; max-width:700px; height:80%; margin:5% auto; background:#fff; border-radius:8px; overflow:hidden;">
    <button onclick="closeForm()" style="position:absolute; top:10px; right:10px; z-index:1; cursor:pointer;">✕</button>
    <iframe src="https://your-domain.com/s/your-form-key" width="100%" height="100%" frameborder="0" style="border:none;"></iframe>
  </div>
</div>

<script>
function openForm() {
  document.getElementById('form-modal').style.display = 'block';
}
function closeForm() {
  document.getElementById('form-modal').style.display = 'none';
}
</script>

Embed Settings

Pre-Fill Fields via URL Parameters

You can pre-populate form fields by adding URL parameters:

https://your-domain.com/s/your-form-key?field_name=John&field_email=john@example.com

Use cases:

Pre-fill email from an email campaign link
Pass product name from a product page
Forward customer info from a CRM

Custom Styling

For more precise style control:

Adjust styles in the form's "Theme" settings
Pro plans support custom CSS injection
Match the form style to your website's overall design

Important Notes

HTTPS required — The embedding page should use HTTPS to prevent browsers from blocking the form
Cross-origin isolation — The iframe form is isolated from the parent page and cannot communicate directly
Mobile responsiveness — iframes on mobile may need additional responsive handling
Load time — First load takes a moment; consider adding a loading indicator

Common Issues

The form doesn't display fully in the iframe?

Check that the iframe height attribute is large enough — set it to at least 600px or use percentage height.

The form won't submit after embedding?

Check for cross-origin restrictions and ensure the form URL uses HTTPS.

How do I redirect after form submission?

In "Form Settings" → "Submission Settings", set a "Redirect URL" — the form will automatically navigate to your specified URL after submission.

Publishing & Sharing — More sharing options
Custom Domains — Use your own domain
Theme Customization — Adjust form styling