Embedding with iframe

Embed your contact form directly into any webpage using an iframe for seamless integration.

Getting iframe Code

Go to Form Management (/admin/form)
Click the Embed tab
Find the iFrame Embed section
Copy the generated iframe code

Basic iframe Code

The standard iframe code:

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

iframe Attributes

Width and Height

width="100%" - Form spans full container width
height="600" - Default height (adjust as needed)

Styling

frameborder="0" - Removes default border
style="border: none;" - Ensures no border appears

Customizing Dimensions

Adjust the iframe size to fit your layout:

<!-- Narrow sidebar -->
<iframe 
  src="https://supportretriever.com/form/your-form-id" 
  width="400" 
  height="800" 
  frameborder="0" 
  style="border: none;">
</iframe>

<!-- Full-width section -->
<iframe 
  src="https://supportretriever.com/form/your-form-id" 
  width="100%" 
  height="700" 
  frameborder="0" 
  style="border: none;">
</iframe>

Implementation Examples

In HTML

<section class="contact-section">
  <h2>Get in Touch</h2>
  <iframe 
    src="https://supportretriever.com/form/your-form-id" 
    width="100%" 
    height="600" 
    frameborder="0" 
    style="border: none;">
  </iframe>
</section>

In React/Next.js

<iframe
  src="https://supportretriever.com/form/your-form-id"
  width="100%"
  height="600"
  frameBorder="0"
  style={{ border: 'none' }}
  title="Contact Form"
/>

In WordPress

Add a Custom HTML block
Paste the iframe code
Publish your page

In Webflow

Add an Embed element
Paste the iframe code
Adjust dimensions in the designer

Responsive Design

For mobile-friendly embeds, use responsive techniques:

<div style="position: relative; padding-bottom: 100%; height: 0; overflow: hidden;">
  <iframe 
    src="https://supportretriever.com/form/your-form-id" 
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
    frameborder="0">
  </iframe>
</div>

Or use CSS:

.contact-form-container {
  position: relative;
  padding-bottom: 100%;
  height: 0;
  overflow: hidden;
}

.contact-form-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

Styling the Container

Wrap the iframe in a styled container:

<div class="form-wrapper" style="max-width: 800px; margin: 0 auto; padding: 20px;">
  <iframe 
    src="https://supportretriever.com/form/your-form-id" 
    width="100%" 
    height="600" 
    frameborder="0" 
    style="border: none; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
  </iframe>
</div>

Advantages of iframe Embedding

Seamless Integration: Form appears as part of your page
No Redirects: Users stay on your site
Easy Updates: Form changes reflect automatically
Isolated Styling: Form styles don't conflict with your site

Considerations

Height: Ensure iframe height accommodates your form
Mobile: Test on mobile devices for proper display
Loading: iframe content loads separately from your page
Security: iframe sandboxing is handled automatically

Testing Your Embed

Paste iframe code into your page
Preview on desktop and mobile
Test form submission
Verify submission is received
Check form styling matches your brand

Troubleshooting

Form Not Displaying

Verify the form URL is correct
Check iframe dimensions are set
Ensure no CSS is hiding the iframe
Test the form URL directly in a browser

Height Issues

Increase height value if form is cut off
Use responsive techniques for mobile
Consider using min-height in CSS

Styling Conflicts

iframe content is isolated from your page CSS
Form uses its own styling (set in form editor)
Customize form appearance in SupportRetriever, not via CSS