Embedding Forms on Your Website

Once your form is ready, you can embed it directly on your website so visitors can fill it out without leaving your page. WittyForm offers four embed methods, each suited to different use cases. You will find all embed options under the Share tab in the form editor.

Inline (iframe)

The inline embed places your form directly inside your webpage content, just like any other section. The iframe automatically resizes to match the form height, so respondents never see scrollbars inside the frame.

When to use

• Landing pages where the form is the primary call to action.
• Contact or signup pages where the form should feel like part of the page.
• Blog posts or documentation pages that include a feedback form at the bottom.

Embed code

Copy the inline embed snippet from the Share tab and paste it into your HTML where you want the form to appear:

<iframe
  src="https://wittyform.com/form/YOUR_FORM_ID?embed=1"
  width="100%"
  style="border:none; min-height:500px;"
  allow="camera; microphone"
  loading="lazy"
></iframe>

<script src="https://wittyform.com/embed/auto-resize.js"></script>

The auto-resize.js script listens for height changes inside the form and adjusts the iframe height automatically.

Popup Modal

The popup modal displays your form as a centered overlay on top of your page. The background dims and the form appears in a modal window that respondents can close when finished.

When to use

• Lead capture forms triggered by a button click.
• Newsletter signups that appear after a time delay.
• Exit-intent forms that show when visitors are about to leave.

Trigger code

Add the embed script to your page, then trigger the popup from a button or with a timer:

<!-- Button trigger -->
<script src="https://wittyform.com/embed/popup.js"
  data-form-id="YOUR_FORM_ID"
  data-mode="popup">
</script>

<button onclick="WittyForm.open('YOUR_FORM_ID')">
  Open Form
</button>

<!-- Timer trigger (opens after 5 seconds) -->
<script>
  setTimeout(() => WittyForm.open('YOUR_FORM_ID'), 5000);
</script>

Slider Panel

The slider panel slides your form in from the right or left side of the screen. It stays visible as a side panel while respondents can still see the page content behind it.

When to use

• Feedback forms that should be available without leaving the current page.
• Support request forms on documentation or product pages.
• Quick surveys that feel lightweight and non-intrusive.

Trigger code

<script src="https://wittyform.com/embed/slider.js"
  data-form-id="YOUR_FORM_ID"
  data-mode="slider"
  data-position="right">
</script>

<!-- Open from a button -->
<button onclick="WittyForm.openSlider('YOUR_FORM_ID')">
  Give Feedback
</button>

<!-- Or attach to a floating tab -->
<script>
  WittyForm.showTab('YOUR_FORM_ID', {
    label: 'Feedback',
    color: '#6C47FF',
    position: 'right'
  });
</script>

Full Page

Full-page mode gives your form its own dedicated URL. The entire browser window is the form, with no surrounding page content. This is the simplest option because there is nothing to embed.

When to use

• Standalone surveys shared via email or social media.
• Registration forms linked from QR codes or ads.
• Any scenario where you want a clean, distraction-free form experience.

URL format

Share the direct link to your form:

https://wittyform.com/form/YOUR_FORM_ID

If you have a custom domain configured, the URL will use your domain instead (for example, forms.yourcompany.com/form/YOUR_FORM_ID).

Customization Options

All embed methods support the following customization options:

• Camera and microphone permissions: If your form includes media upload fields (photo, video, or audio), include allow="camera; microphone" in the iframe attributes so respondents can capture media directly.
• Auto-height: For inline embeds, the auto-resize script keeps the iframe height in sync with the form content. This prevents double scrollbars and provides a seamless experience.
• Custom styling: You can pass query parameters to override the form background color and hide the WittyForm branding. For example: ?bg=transparent&hideBranding=true.
• Pre-filled values: Pass field values through URL parameters to pre-fill form fields for returning visitors or personalized links.

Choosing the Right Embed Method

Not sure which method to pick? Here is a quick guide:

• Use Inline when the form is the main content of the page.
• Use Popup when you want to grab attention at a specific moment.
• Use Slider when you want the form accessible without disrupting the page.
• Use Full Page when you are sharing a link directly.