Embedding Forms

After you have created your form you can install it onto your website with a few lines of HTML code.

Under the Setup tab you’ll see two sections:

  • Share - the URL to your form, simply send this link to someone to have them fill out your form.
  • Embed - Code required to embed the form into your website.

Notes

Whichever way you choose to publish your form, you can be assured that it is mobile-responsive. It will shrink to match the width of mobile screens, and any in-line form fields will drop below one another when appropriate.

For Shared forms, the form will display with the theme that you have chosen. For Embedded forms, they will have a transparent background and have some of the styling removed so they will pick up more of the styling of your existing site.

If you have enabled Google’s reCAPTCHA on this form, you don’t have to do anything else. It will just work.

Share

This is a unique link to your form. Just send the link in your emails or under a Contact Us button and everything will work. This link works immediately, no set-up required.

Embed

This section contains HTML code. Copy and paste this code into your website wherever you would like your form to be.

The form will take up the full width of the surrounding div, but will responsively shrink on mobile devices and tablets.

We recommend that forms be embedded in a div which is at most 800px wide. This will ensure it is aesthetically appealing, in other words, fly.

If you look at the form embed code you copied from FormKeep to embed your form you can see there are is a default attributes already specified data-formkeep-url. This is used to identify your form, so FormKeep knows which form to embed in your site.

<div style="width:800px">
  <div id="formkeep-embed"
       data-formkeep-url="https://formkeep.com/p/example?embedded=1">
  </div>
</div>