Embed Default Forms

Here is how we get up and running with a Default form.

Copy form link

Embed your form

Option 1: Regular Iframe

To embed the form using a regular iframe, use the following code:

<iframe src="forms.default.com/yourformid"></iframe>

Replace "forms.default.com/yourformid" with your copied form link.

This iframe can be placed anywhere in your <body> tag and can be customized with HTML and CSS.

Option 2: Full page iframe setup

For a full-page iframe setup that occupies the entire browser window, use the following code:

<style>
  html,
  body,
  .full-page-iframe {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
  }

  .full-page-iframe iframe {
    border: none;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
</style>
<div class="full-page-iframe">
  <iframe src="forms.default.com/yourformid" allowfullscreen></iframe>
</div>

Replace "forms.default.com/yourformid" with your copied form link.

Insert the code

Insert the code snippet into your HTML file.

Deploy

Your form is now embedded and ready to collect responses!

FAQ

Footer

Q: The footer on my forms page sometimes moves, and sometimes it doesn't. How can I resolve this issue?

A: The div containing the Default iframe (as well as the Default iframe itself) is set to always match the height of the browser. This can lead to the behavior you're experiencing, especially on pages with content taller than the browser's height, causing scrolling within the iframe.

To address this, set the minimum height to approximately 1100px. Additionally, you may need to adapt the iframe's height to match the form's contents for optimal display.

Last updated 1 year ago