When it comes to embedding your Forms, you have options.
We provide several different Form embed codes so you can pick the best option based on your platform and preferences.
NOTE: This article applies to Forms only. Landing Pages cannot be embedded within web pages or blog posts. Rather, they take over an entire page on their own. Learn more about the difference here.
Where are the embed codes?
Click the Grow tab under the navigation, and then select Landing Pages & Forms.
Click the name of the Form you want to embed to open it in the Form builder. Then, look for the Embed button at the top right:
Once clicked, it'll reveal different embed options along the top, plus a convenient option for copying its code (bottom right):
NOTE: If you've opened a Landing Page, its share menu will look different. Be sure you're on a Form!
Let's go over these embed options.
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 less prone to theme conflicts as we attempt to load its CSS styling after your website's, to help ensure yours 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 is formatted as HTML. It therefore needs to be embedded in a custom HTML block, not a Script block.
If you use WordPress, we have a tutorial on embedding a Form using JavaScript in the classic and block editors.
Our JavaScript embed code will suffice for most cases. But if you have a reason to opt for a different embed option instead, keep reading.
HTML
This is the raw HTML version of your Form's code. If you need to edit the Form's HTML, this option is for you.
There are a couple things to note if you choose this option:
If you change your Form in Kit, you'll need to re-copy and paste its HTML code into your site. Your site won't reflect your Form's changes automatically.
This embed includes our Form's CSS styling, but you can manually strip it out if you need a raw version of the Form code
You won't be able to edit the HTML within Kit. If you need to, copy the HTML to your site and edit it from there.
Share
This is your Form's direct URL. Feel free to share this link if you want to send someone directly to your Form, without any bells and whistles or the need to embed it on a 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 your Form's URL yourself before sharing it with others to ensure the Form displays as you intend.
WordPress
This is your Form's WordPress shortcode, which you can use if you've installed our WordPress plugin on your site.
Unbounce
If you use our Unbounce integration, you'll find the URL for its webhook settings here.
FAQs
Why aren't my Form's changes reflected on my site?
Did you embed your Form using its raw HTML code? If so, you'll need to re-copy and paste its code into your site after updating your Form.
If this doesn't help, try clearing your browser cache and/or caching plugins on your website (if applicable).
My Forms aren't displaying consistently on my Squarespace site.
Certain Squarespace themes have Ajax pre-loading turned on by default. This means 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, try turning this feature off. Squarespace has a guide on that here.
Can I embed Kit Forms on [insert website platform here]?
Probably! Website platforms generally don't need a Kit integration to display Kit Forms.
Does your website platform support JavaScript and let you add custom HTML code blocks? If so, then yes—you can embed our Forms.
We have embed guides for these website platforms:
If your platform isn't listed, try embedding your Form by pasting its JavaScript embed code into a custom HTML block on your site. This should work in most cases, but our support team is always happy to help if you run into trouble.