Embedding Forms

3 min read

WittyForm embeds are plain iframes. You drop a snippet on your page and the form renders inside it, fully self contained. There is no JavaScript SDK to load and no message based event or command API to wire up, so embedding stays simple and there is nothing extra to maintain.

How embedding works

Open a form, click Share, and choose Embed. The dialog generates a ready to paste snippet for the embed style you pick. Each snippet points at your form URL with ?embed=1 appended, which loads the form in a clean layout suited for embedding.

<iframe
  src="https://wittyform.com/form/FORM_ID?embed=1"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none; border-radius: 8px;"
  allow="camera; microphone"
  loading="lazy"
></iframe>

The form handles its own validation, navigation between pages, and submission entirely inside the iframe. Nothing is posted back to your page, so you do not need to add listeners or send commands from the parent window.

What the form handles on its own

Submission. When a respondent submits, the form shows its own thank you screen or runs the redirect you configured in the builder. You do not need to listen for a submit event.
Multi page navigation. Page to page movement, progress, and back and next buttons all run inside the iframe.
Theme. The form uses the theme you set in the builder. Pick the look in the Theme tab rather than switching it from the parent page.

Pre-filling fields

You do not need a command API to pre-fill a form. Add query parameters to the form URL and the matching fields are filled in when the form loads. This is handy for carrying tracking values or a known email through to the form.

<iframe
  src="https://wittyform.com/form/FORM_ID?embed=1&[email protected]"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none;"
></iframe>

Cross-origin notes

CSP headers. If your site uses Content Security Policy, allow frame-src https://wittyform.com so the iframe can load.
Permissions. Keep the allow="camera; microphone" attribute if your form includes file upload fields that capture from a device camera or microphone. You can drop it otherwise.

Full example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>WittyForm Embed Demo</title>
  <style>
    body { font-family: sans-serif; max-width: 800px; margin: 40px auto; }
  </style>
</head>
<body>
  <h1>Feedback Form</h1>

  <iframe
    src="https://wittyform.com/form/abc123xyz?embed=1"
    width="100%"
    height="600"
    frameborder="0"
    allow="camera; microphone"
    style="border: none; border-radius: 8px;"
    loading="lazy"
  ></iframe>
</body>
</html>

PreviousWhite Labeling NextEmbed Methods