Embedding surveys and contact forms in your website — the right way to do it

"Sending people to a different site for our survey is a weird experience" and "we want contact forms to live inside our own site" — most companies want forms embedded in their own site.

This article covers the embedding patterns and the best practices.

Why embed

1. Lower bounce

Redirects to a third-party site lose 20–30% of users on average. Keep it in-site, keep them.

2. Brand consistency

Forms matching your site's design protect the brand experience.

3. SEO

When the form page lives on your domain, inbound links and traffic feed your SEO, not someone else's.

4. Simple analytics

If GA4 and GTM are already on your site, form page-views and submissions can be measured without additional setup.

Three embedding methods

Method 1: iframe

The simplest. One line of HTML.

<iframe src="https://example.com/forms/abc123/embed"
        style="width:100%;height:600px;border:none;"
        loading="lazy">
</iframe>

Pros:

• Trivial implementation
• Security isolation
• Parent-site styles don't bleed in

Cons:

• Manual height (auto-resize is non-trivial)
• iframe clicks don't easily flow into analytics

Method 2: JavaScript embed

A dedicated JS snippet inserts the form dynamically.

<div id="repoan-form-container"></div>
<script src="https://example.com/embed.js" data-form-id="abc123"></script>

Pros:

• Auto-resize height
• Two-way communication with the parent page
• Events can fire into GA4

Cons:

• Requires JS execution
• Security implications (CSP setup)

Method 3: Direct link

Not technically embedded — a button opens the form in a new tab.

<a href="https://example.com/forms/abc123" target="_blank">
  Contact us
</a>

Pros:

• Easiest implementation
• Maximum form flexibility

Cons:

• Higher bounce

Repoan's embedding

Repoan auto-generates an embed HTML snippet per form. Copy, paste into your site, done.

Standard embed (iframe)

<iframe src="https://repoan.com/f/abc123/embed"
        style="width:100%;height:600px;border:none;"
        loading="lazy"
        title="Contact us">
</iframe>

Modal (button-triggered)

<button onclick="repoanOpenForm('abc123')">Contact us</button>
<script src="https://repoan.com/embed.js"></script>

Button click opens the form as a modal. Lets you wire the form even from less-prominent locations like the footer.

Design unification

Brand colors

Repoan's AI brand theming can extract your site's color palette and font feel from a URL — applied across forms automatically.

Example:

Brand colors:
- Primary: #2563eb (auto-extracted from your site)
- Background: #ffffff
- Font: Inter

Forms now feel like part of the parent site.

Mobile

Embedded iframes need width: 100% — otherwise mobile users hit horizontal scrolling and bounce.

<iframe src="..."
        style="width:100%;max-width:600px;border:none;">
</iframe>

SEO impact

Positive

• Form page on your domain accrues backlinks to you
• Becomes the landing page for "[brand] contact" / "[brand] request information" search
• Improves internal linking

Caveats

• iframe content is poorly indexed by Google
• Put text and headings in the parent page, not inside the iframe

<h1>Contact us</h1>
<p>For inquiries about our service, please use the form below.</p>
<iframe src="..."></iframe>

Analytics setup

GA4 form-submission tracking

Repoan fires a postMessage event to the parent page on submission. Capture it in GTM → record as form_submit in GA4:

window.addEventListener('message', (event) => {
  if (event.data.type === 'repoan-form-submitted') {
    gtag('event', 'form_submit', {
      form_id: event.data.formId,
    });
  }
});

Conversion configuration

• Form submission = conversion
• For long forms, set "30% reached" / "60% reached" staged events too

Bot / spam protection

Embedded forms are exposed to public traffic → bot submissions are real risk.

Repoan ships with Cloudflare Turnstile as standard. Better UX than reCAPTCHA (most users don't need to click anything) and blocks bots automatically.

This protection is on by default in embeds too — no additional setup.

Failure modes

• Fixed iframe height clips content: pair with auto-resize JS
• Submitting inside iframe doesn't navigate to thank-you page: set target="_top"
• CSP blocks the iframe: add frame-src to the parent CSP
• Horizontal scroll on mobile: always set width 100%

Summary

Pick by use case:

Use case	Recommended
Primary in-site form	iframe or JS embed
Footer-accessible at all times	Modal
Keep it simple	Direct link

In Repoan, one line of HTML is the install. Cloudflare Turnstile bot protection is built in, so spam-blocking comes free with the embed.