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:

  1. Share - the URL to your form, simply send this link to someone to have them fill out your form.
  2. 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>

Adding Forms to Squarespace

Sign in to your Squarespace account and navigate to the page you want to add your form onto, click a content section then click EDIT.

After you have created and configured your form you can install it into your Squarespace site in just a few steps. We recommend using FormKeep's styled forms for embedding in Squarespace sites.

Forms are easy to embed as Squarespace provides a code content type that you can use directly.

Next, click the + button at the top right of the content section to add new content, then select the code content block.

This will open a text input box. Paste your form code into this box.

That's it! You're finished. Save the page and navigate to your live website to see the form in action.

Note: that when you add the code to your page it is not shown in the page editor. Instead the editor shows a little placeholder. Save your changes and navigate to your live website to see the form in its full glory.

Adding forms to WordPress

Forms are easy to install onto a WordPress website in either a post or a page but you cannot copy/paste the form code directly. Instead you need to use a plugin.

Steps:

  1. Install the Code Embed plug-in
  2. Add the FormKeep form code as a custom field to a post or page
  3. Add the custom field to your post or page
  4. That's it!

Installing Code Embed

Navigate to the wordpress admin dashboard for your website (typically http://yourwebsite.com/wp-admin.php), and click Plug-ins > Add New

Search for 'Code Embed', then both *install* and *activate* the plug-in.

Enable Custom Fields

Before you can use the plug-in, you need to enable custom fields in your screen options. Go to any page or post, click screen options at the top, and make sure 'custom fields' is enabled.

Adding a form to a post or page

All that is left is to add the form to our post or page. This takes about a minute.

Create a custom field

Edit the post or page that you wish to add your form to and scroll down to the 'custom fields' section below the content editor.

Create a new custom field with the name CODE1 and paste your form code as the value.

Add it to your post or page

Within the content editor for your post or page type in the value %CODE1% wherever you would like your form to be. Then save the page.

That's it, navigate to your finished webpage and you'll see your form proudly embedded in the page.

Additional Information

Did this answer your question?