Embedding Forms

Embedding allows you to display your form directly on your own website, landing page, or app. Respondents can fill out the form without leaving your site.

How Embedding Works

SmarterForm uses standard HTML iframes to embed forms. An iframe displays your published form inside a container on your webpage. All form data is still saved to your SmarterForm account, and you can view responses in your Analytics dashboard.

Get Your Embed Code

1. 1

   Publish your form

   Make sure your form is published. Unpublished forms cannot be embedded.

2. 2

   Open the Share modal

   In the Form Builder, click Share in the top-right corner.

3. 3

   Find the Embed section

   Scroll to the Embed section in the Share modal.

4. 4

   Copy the embed code

   Click Copy embed code. The code will look like this:

   <iframe
     src="https://smarterform.dev/f/s/your-form-slug"
     width="100%"
     height="640"
     frameBorder="0"
     allow="camera; microphone"
     style="max-width: 100%;"
   ></iframe>

5. 5

   Paste into your website

   Paste this code into your website's HTML where you want the form to appear. Most website builders (WordPress, Squarespace, Webflow, etc.) have an "Embed" or "Custom HTML" block where you can paste this code.

Customizing the Embed

Adjust Height

The default height is 640px. You can change this in the iframe code:

<iframe
  src="https://smarterform.dev/f/s/your-form"
  width="100%"
  height="800"
  ...
></iframe>

Adjust Width

The default width is 100%. For centered layouts, you can wrap the iframe in a container:

<div style="max-width: 700px; margin: 0 auto;">
  <iframe
    src="https://smarterform.dev/f/s/your-form"
    width="100%"
    height="640"
    frameBorder="0"
  ></iframe>
</div>

Making Embeds Responsive

To ensure your embedded form looks good on all devices:

Use a Responsive Container

<div style="
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
">
  <iframe
    src="https://smarterform.dev/f/s/your-form"
    style="
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
    "
  ></iframe>
</div>

Platform-Specific Guides

WordPress

• Add a Custom HTML block to your page
• Paste the iframe code
• Publish or update your page

Squarespace

• Add a Code Block to your page
• Paste the iframe code
• Save and publish

Webflow

• Add an Embed element
• Paste the iframe code
• Set height in the Webflow designer
• Publish your site

React / Next.js

export default function ContactPage() {
  return (
    <div className="max-w-4xl mx-auto p-8">
      <h1>Contact Us</h1>
      <iframe
        src="https://smarterform.dev/f/s/contact"
        width="100%"
        height="640"
        frameBorder="0"
        allow="camera; microphone"
        style={{ maxWidth: '100%' }}
      />
    </div>
  );
}

Embedding Best Practices

• Test on mobile: Always check how your embedded form looks on mobile devices
• Adequate height: Use 640px minimum, 800px+ for longer forms
• Page loading: Iframes may slow down page load slightly—place them below the fold if performance is critical
• HTTPS required: Your website must use HTTPS for the embed to work properly