iframe Embed

A simple alternative when JavaScript embeds aren't possible. The iframe embed loads the form in an isolated frame.

Basic Embed

HTML

<iframe
  src="https://proforms.io/f/YOUR_FORM_ID"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none; max-width: 100%;"
></iframe>

Auto-resize Height

To automatically resize the iframe to match the form height, add this script:

HTML

<iframe
  id="proform-frame"
  src="https://proforms.io/f/YOUR_FORM_ID"
  width="100%"
  frameborder="0"
  style="border: none; max-width: 100%;"
></iframe>

<script>
  window.addEventListener('message', function(event) {
    if (event.origin !== 'https://proforms.io') return;
    if (event.data.type === 'proforms-resize') {
      document.getElementById('proform-frame').height = event.data.height;
    }
  });
</script>

When to Use iframe

•Platforms that don't allow custom JavaScript (some website builders)
•When you need complete CSS isolation from the parent page
•Quick prototyping or testing

ℹ️

The JavaScript embed is preferred for most use cases — it loads faster, looks more native, and supports callbacks. Use iframe only when you can't use JavaScript.