Embed Kartra forms on external websites to collect leads and add contacts to your Kartra account from outside the Kartra ecosystem.
Whether you're working with a website builder, blog, or landing page, you can embed a Kartra form as long as you have the ability to insert custom code. Kartra offers two types of embed codes—JavaScript HTML and Naked HTML—for flexible integration.
Here’s how to find the embed code and where to use it.
Get the Kartra form embed code
In Kartra:
- Navigate to Contacts > Forms: Edit an existing form or create a new one.
- Click on the Embed tab: This will show you the available embed code options.
- Select your preferred embed code:
- Naked HTML: For more control over the form’s style and layout. This option is best for advanced users or teams with a web designer.
- JavaScript HTML: For an easy, copy-paste solution that automatically includes the design and styling from the form builder.
Once you've selected the code, copy it to use on your external site.
Types of embed codes
Naked HTML embed code
- What it is: This code provides the raw structure of the form, giving you complete control over how it appears.
- When to use it: Choose this if you or your team have experience with HTML and CSS, and you want to customize the form’s appearance and layout manually.
- Where to use it: Add this code anywhere that accepts raw HTML.
JavaScript HTML embed code
- What it is: This code is a simple copy-and-paste solution that retains all the design elements you created in the Kartra form builder.
- When to use it: Choose this option if you want a quick and straightforward way to embed the form without editing its design.
- Where to use it: Use the JavaScript HTML code on any site or platform that accepts HTML, and the form will appear as you designed it in Kartra.
Note: The JavaScript embed code will display the styles and layout you designed in the Kartra form configuration. After embedding, test the page to make sure the form looks and works as expected.
How to use the Kartra form embed code
Once you have your embed code, the steps to add it to an external platform will depend on the tools you're using. Generally, you’ll need to find a widget, block, or HTML editor within your website or page builder to paste the code. If you’re not sure where to place the code, consult the platform’s help documentation or contact their support team.
Here are a few examples for popular platforms:
- Squarespace: Code blocks in Squarespace
- Wix: Embedding custom code in Wix
- WordPress.com: How to use embed blocks in WordPress
Final tips
- Always test your form after embedding it to ensure the design appears correctly.
- If you're using the Naked HTML option, make sure you understand how to style forms using CSS.
- If you have trouble adding the embed code to your page, refer to the platform’s help articles for embedding custom code or reach out to their support team.