How to Embed Forms on Squarespace

It's easy to add Cognito Forms to your Squarespace website.

You'll first want to make sure you've styled your form the way you want it (more on that below). And you'll also want your form open in Cognito Forms builder. This way you can easily copy the Seamless Embed Code when you're ready to paste it into Squarespace.

Done that? Great - from here, it's a snap. Embedded form in Squarespace website.

To embed a Cognito Form in your Squarespace website:

  1. Log in to Squarespace using a new browser tab.
  2. Disable Ajax Loading in your site's settings a. Navigate to Design > Style Editor > Site: Loading > Ajax Loading b. Uncheck Ajax Loading
  3. Go to the page where you'd like to add your form.
  4. Click to Edit the content area.
  5. In the content area, click + to add an Insert Point where you'd like to insert the form. (This will pop up a dialog box.)
  6. Scroll down to the Basic section of the dialog box and select the Embed option.
  7. Copy the Seamless Embed Code from the Publish tab in the Cognito Forms builder.
  8. Paste the code into the edit box, and save your changes.

Your form will now appear as a seamless part of your Squarespace site.

Want to style your form to better match your Squarespace site?

You can adjust nearly every aspect of your form's appearance to make it match your website. There are lots of tools in our form builder and here are some tips in our form styling guide.

That's a great place to start when styling your forms.

When it comes to Squarespace sites, however, you have a few additional tools available to you.

1. Using Chameleon mode with Squarespace

chameleon_SS.png Our Chameleon mode adopts any form styling that's been written into your site's CSS. To give it a try, simply: 1. Go to the Publish tab of the Cognito Forms builder. 2. Click Style Editor > Form 3. Choose Chameleon 4. Save your changes

It's that easy.

(Please note that not every theme has all possible form elements defined in its CSS. That's okay – you can adjust those manually by adding custom CSS to your site. Squarespace makes this really simple.)

2. Adding Custom CSS to your Squarespace site

If you'd like to make your form an even more seamless part of your site, Squarespace allows you to add custom CSS using their CSS Editor. This will enable you to change the fonts, line weights and spacing that your site uses for an even more tightly integrated form.

To add custom CSS to your forms in Squarespace: 1. Log in to Squarespace 2. Go to Home > Design > Custom CSS 3. Copy the code below and paste it in the CSS Editor window (Please note – you'll want to tweak the elements in this code to match your site. Elements such as the font family are likely not what's currently used in your site's theme.)

<style>
.cognito .c-action {float:none;text-align:center;}

.cognito #c-submit-button {
   float: none;
   padding: 10px 25px;
   background: transparent;
   border: 2px solid black;``
   border-radius: 4px;
   font-family: Dosis;
   font-style: normal;
   text-transform: uppercase;
   letter-spacing: .1em;
}
.cognito INPUT[type=text], .cognito INPUT[type=password], .cognito textarea, .cognito select {
   padding: 10px;
   border-radius: 2px;
   border: 1px solid #ccc;
}
</style>

Want to take a deeper look? Here's a quick tutorial on using the Squarespace CSS editor.

You should now be able to easily add powerful forms to your Squarespace site and style them to work seamlessly.