Skip to main content
All CollectionsGrowForms
Form Embedding Basics
Form Embedding Basics

A basic overview of how to embed Kit forms on your blog or website.

Updated over a week ago

When it comes to embedding your forms, you have options.

We provide several different embed codes your forms, so you can pick which works best for you based on your platform and preferences.

NOTE: This article applies to forms only. Landing pages cannot be embedded within webpages or blog posts — rather, they take over an entire page on their own. Learn more about the difference here!

First things first: where are the embed codes located?

Click into the Grow tab within your account, and then select the Landing Pages & Forms option.

Click the name of the Form you want to embed, then look for the red Publish button near the top of the page: 


Once clicked, it'll reveal our different embed options (along the top), plus a convenient link for each that automatically copies its code (bottom right):


NOTE: If you clicked a landing page, the Publish menu will look different. Be sure you're on a form!

Let's go over each of those embed options in turn, and use cases for each.

Our Embed Code Types

JavaScript

This is the embed code we recommend you use, unless you have a particular reason not to.

Here's why:

  • Any changes made within Kit will be reflected automatically on your site.

  • The code is short, sweet, and robust, because it calls the full embed code on page load and not before. This makes it less prone to theme conflicts because we attempt to load our CSS styling after your website's, to help ensure ours has priority (this doesn't guarantee there won't be conflicts — but it helps a lot!)

Note: although this is a JavaScript embed option, the code itself is formatted as HTML and therefore needs to be embedded in a custom HTML block, not a Script block.

Do you use WordPress? We have a tutorial on how to embed a form using JavaScript in both the Classic & Block editors here.

Our JavaScript embed code will suffice for the vast majority of cases (but if you have a reason to opt for a different embed option instead, keep on reading!)

HTML

This it the raw HTML version of our form code. If you need to make manual edits to the Form's HTML, this is the option for you!

There are a couple things to note if you choose this option:

  • If you make changes to your form in Kit, the code will need to be re-copied and pasted over to your site (i.e. it won't reflect new changes automatically)

  • This embed includes our form's CSS styling as well (but it can be manually stripped out if you require a raw version of the form code)

  • You won't be able to edit the HTML within Kit, but you can copy it over to your site and edit it from there

Share

This is the direct URL to your form. Feel free to share this link if you simply want to send someone directly to your form, without any bells & whistles or the need to embed it on another page.

NOTE: This option works best for inline forms. If your form is a modal or slide-in, for example, it might not trigger correctly on its direct URL page depending on its settings. We recommend visiting the URL yourself first, to ensure it displays as you intend!

WordPress

This is our WordPress shortcode that you can use if you have our WordPress plugin installed on your site.

Unbounce

If you use our Unbounce integration, here's where you'll find the URL for its webhook settings.

FAQ

I made changes to my form, but they're not reflected on my site. Why?

Did you embed using the raw HTML code? If so, you'll need to re-copy and paste over the code after making any changes.

If that's not it, try clearing your browser cache and/or any caching plugins on your website (if applicable).

My site is on Squarespace, and I noticed my forms aren't displaying consistently.

Certain Squarespace themes have Ajax pre-loading turned on by default. This means that the site loads a cached page to increase performance and load time, but won't load a dynamic script like JavaScript unless you load the URL directly or refresh the page.

To ensure everything loads in real time, you can try turning this feature off. Squarespace has a guide on that here.

Can I embed Kit forms on [insert website platform here]?

Probably! Please note that a specific integration with Kit is not required to be able to embed our forms directly on most platforms!

Does your website platform support JavaScript, and allow you to add custom HTML code blocks? If so, then yes — you can embed our forms! 🎉

We also have specific guides for the following website platforms: WordPress, Squarespace, Wix, and Weebly.

If you don't see yours listed, first try embedding your form by pasting its JavaScript embed code into a custom HTML block on your site. That should work in most cases! (But we're always happy to help if you run into trouble.)

Did this answer your question?