Bring your Kit Forms, products, and more to WordPress
Once you've installed the Kit plugin on your WordPress website, you're ready to start displaying your Kit Forms, products, and other content on it.
Check out the respective sections below to learn how:
Set up a default Form for your web pages
While installing the Kit plugin on your website, you may have set up a default Kit Form for your WordPress posts and pages.
To change the default Form, click Settings on your WordPress sidebar > Kit.
On the General page of the Kit plugin settings, use the General Settings to select the default Form for your WordPress page types, including pages and posts.
You can also choose the Form's position:
Before your content
After your content
Before and after your content
After an element, i.e., after a certain number of paragraphs, heading types, or images
Next use the Site Wide settings to select the default Form that should appear across all your web pages, except for:
Those for which you've set up a different default Form (e.g., from the General Settings or by adding a certain Form shortcode to the page). For example, if you've set up your posts to show a modal Form by default, then your default site-wide Form will not appear on your posts.
Search results pages
404 error pages
The default site-wide Form cannot be an inline Form.
You can also use the Behavior setting to configure whether to show the default site-wide Form on WordPress pages and posts that are set up to not show a Form.
Set up a default Form for post categories
NOTE: Your WordPress theme must support post categories for the settings described below to appear.
Go to Posts > Categories on your WordPress sidebar to manage your post categories.
When adding a new post category or editing an existing one, use the Kit Form setting to set up the category's default Form.
The Form you select here will override the default Form you've chosen for posts in the Kit plugin's General Settings. If you don't want to override the default Form, leave this setting as "Default."
If you've added a post to multiple categories and set up a default Form for each category, your post will display the default Form for the most recently created category.
Your posts will display only one default Form at a time.
Use the Display Kit Form on Archive? dropdown menu to configure:
Whether to display the default Form on the category's archive page, and
If so, whether the Form should appear before or after the list of archived posts.
Override the default Form for posts, pages, or WooCommerce product pages
If you don't want to display your default Form on a certain post, page, or WooCommerce product page, navigate to the editor for the post, page, or product page in question.
Scroll to the bottom of the editor, and you'll find a Kit plugin Form setting for changing the Form displayed on this content.
The default Form setting is "Default," which will display the default Form you've set up in the Kit plugin's General Settings.
Change the setting to "None" if you don't want to display a Form on this content. You can also change the Form displayed to any other Form.
Embed your Kit Forms
NOTE: This feature works best for inline Kit forms.
To display a Form at a specific part of a post, page, or WooCommerce product page, navigate to the editor for the content in question.
Then, use the relevant instructions for your editor:
WordPress block editor
WordPress block editor
At the place in your content where the Form should appear, type "/" or click the + icon to add a new block. Search for the Kit Form block and insert it.
Use the Kit Form block settings in the right sidebar to select the Form that should be displayed.
WordPress Classic Editor
WordPress Classic Editor
At the place in your content where the Form should appear, click the Kit Form icon in the visual editor's toolbar:
Select the Form that should be displayed, and then click Insert.
The Form's shortcode will be added to the post.
Elementor page builder
Elementor page builder
Open your content in Elementor. Search for and select the Kit Form widget:
Use the dropdown menu to select the Form that the widget should show.
The Form will appear on the page.
Divi page builder
Divi page builder
Open your content in Divi. Search for and select the Kit Form module:
Then, select the Form that the widget should show.
Other page builders
Other page builders
Copy your Form's embed code from the Form builder in Kit. Then, paste the code into your post, page, or WooCommerce product page.
Alternatively, add a text editor module or widget that implements the TinyMCE Classic Editor to your content. If your page builder doesn't have such a module or widget, you can install a WordPress plugin that offers TinyMCE Classic Editor functionality.
When you add the module or widget, the Kit Form icon should appear on the TinyMCE Classic Editor toolbar. Like this, for example:
You can then follow the instructions in the "WordPress Classic Editor" section above to complete the setup.
NOTE: While we make every best effort to support all page builders, the Kit WordPress plugin may not be supported on certain page builders.
Trigger a Kit Form when a visitor clicks a website button
If you have a modal, sticky bar, or slide in Kit Form, you can create a button that will display a Form when clicked.
Use the relevant instructions for your editor:
WordPress block editor
WordPress block editor
At the place in your content where the button should appear, add a new Kit Form Trigger block to your content:
Use the Kit Form Trigger's general settings in the right sidebar to select the Form that should appear when the button is clicked. You can also customize your button text.
Switch to the styles tab to customize your button's colors and text font size.
WordPress Classic Editor
WordPress Classic Editor
At the place in your content where the button should appear, click the Kit Form Trigger icon in the visual editor's toolbar:
Select the Form that should appear when the button is clicked, customize your button's text and colors, and then click Insert.
The Form Trigger's shortcode will be added to the post.
Elementor page builder
Elementor page builder
Open your content in Elementor. Search for and select the Kit Form Trigger widget:
Use the dropdown menu to select the Form that should appear when the button is clicked, and customize your button's text and colors.
The button will appear on the page.
Divi page builder
Divi page builder
Open your content in Divi. Search for and select the Kit Form Trigger module:
Then, select the Form that should appear when the button is clicked, and customize your button's text and colors.
Other page builders
Other page builders
Add a text editor module or widget that implements the TinyMCE Classic Editor to your content. If your page builder doesn't have such a module or widget, you can install a WordPress plugin that offers TinyMCE Classic Editor functionality.
When you add the module or widget, the Kit Form Trigger icon should appear on the TinyMCE Classic Editor toolbar. Like this, for example:
You can then follow the instructions in the "WordPress Classic Editor" section above to complete the setup.
NOTE: While we make every best effort to support all page builders, the Kit WordPress plugin may not be supported on certain page builders.
Embed Kit Landing Pages on your website
If you've created a Landing Page in Kit, you can have it take over an existing WordPress page. Users who navigate to the page's URL will see your Landing Page.
Launch the editor for the page in question and scroll down to your Kit plugin settings. Use the Landing Page setting to select the Landing Page that should appear in place of the page.
Publish your page to save your changes.
Embed your Kit products
Our Kit Product block will add a button to your WordPress content that displays your product sold through Kit when clicked.
Use the relevant instructions for your editor:
WordPress block editor
WordPress block editor
Add the Kit Product block by selecting it in the editor's block dropdown menu.
Use the right sidebar to select the product to be associated with your button, and a button will appear in your content. Click the button text to customize it.
The right sidebar also has settings for:
Embedding an optional discount code you've set up in Kit
Loading the checkout step to direct users who click the button to the checkout page instead of the product's main page
Disabling the modal on mobile such that mobile users who click the button will be directed to your product's page instead of seeing a product modal pop up on the screen. Enabling this option can help mobile users successfully download your product (if it's a digital product like a PDF file) after buying it.
Click the styles tab to customize your button's colors and text font size.
WordPress Classic Editor
WordPress Classic Editor
At the place in your content where the button should appear, click the Kit Product icon in the visual editor's toolbar:
Select the product that should appear when the button is clicked, and customize the button's text and colors. You can also:
Embed an optional discount code you've set up in Kit
Load the checkout step to direct users who click the button to the checkout page instead of the product's main page
Disable the modal on mobile such that mobile users who click the button will be directed to your product's page instead of seeing a product modal pop up on the screen. Enabling this option can help mobile users successfully download your product (if it's a digital product like a PDF file) after buying it.
Click Insert when you're done.
Elementor page builder
Elementor page builder
Open your content in Elementor. Search for and select the Kit Product widget:
Select the product that should appear when the button is clicked, and customize the button's text and colors. You can also:
Embed an optional discount code you've set up in Kit
Load the checkout step to direct users who click the button to the checkout page instead of the product's main page
Disable the modal on mobile such that mobile users who click the button will be directed to your product's page instead of seeing a product modal pop up on the screen. Enabling this option can help mobile users successfully download your product (if it's a digital product like a PDF file) after buying it.
The button will appear on the page.
Divi page builder
Divi page builder
Open your content in Divi. Search for and select the Kit Product module:
Then, select the product that should appear when the button is clicked, and customize the button's text and colors.
Other page builders
Other page builders
Copy your product's embed code from the product builder in Kit, selecting whether to include a discount as you do so.
Then, paste the code into a HTML block in your post, page, or WooCommerce product page.
Here's an example:
Alternatively, add a text editor module or widget that implements the TinyMCE Classic Editor to your content. If your page builder doesn't have such a module or widget, you can install a WordPress plugin that offers TinyMCE Classic Editor functionality.
When you add the module or widget, the Kit Product icon should appear on the TinyMCE Classic Editor toolbar. Like this, for example:
You can then follow the instructions in the "WordPress Classic Editor" section above to complete the setup.
NOTE: While we make every best effort to support all page builders, the Kit WordPress plugin may not be supported on certain page builders.
Display your Broadcast content on WordPress
The Kit plugin lets you:
Embed your Broadcast feed into a WordPress post or page
Publish your Broadcasts as WordPress posts
Publish your WordPress posts as Broadcasts
Customize your website content based on your subscribers' Tags
Apart from adding Kit Forms, products, and the like to your WordPress website, you can also show different website content to match your subscribers' Kit Tags.
If you're facing difficulties getting your Kit Forms or Landing Pages to appear on your WordPress website, our general WordPress troubleshooting guide might provide the solution you need.
But if you're specifically having trouble finding your Kit Forms or Landing Pages in their respective dropdown menu settings, try this guide instead 👇