Bring the power of Kit to Ghost
Using Ghost to run a website or blog? You can add Kit forms to your website to turn website visitors into email subscribers!
In this guide, we’ll cover how you can add a Kit form:
To a single Ghost post or page, or...
Across your entire Ghost website.
Get the Embed Code for Your Kit Form
Open your form in the Kit form builder and click the 'Publish' button at the top.
Then, copy either the JavaScript or HTML code for the form to your clipboard.
Either code will work fine, though we generally recommend using the JavaScript code as it’s less prone to website theme conflicts. This is unless you intend to manually edit your form’s HTML before embedding your form. In which case, use the HTML code.
Embed Your Kit Form In a Single Ghost Post or Page
With your embed code copied, go to your Ghost website. Launch the Ghost editor for the post or page that you want to embed the form in.
Next, click the + icon and insert an HTML block. Paste the embed code for your Kit form into the block, then click Publish.
The form won’t be visible in the editor, but it’ll show up when you view the live version of your webpage. 🙂 Like so!
Embed Your Kit Form Across Your Entire Ghost Website
To embed your form in multiple webpages of your Ghost website, you’ll need to add its embed code to your Ghost theme.
Open the theme files for your Ghost website. (Download a copy of your theme from your Settings page first if you need to.)
Then, locate the specific template file that contains the code for the part of your Ghost website that your Kit form is to appear in.
For example, look for post.hbs if you want your form to appear in all your Ghost posts. On the other hand, if you want to add your form to the footer of your Ghost website, then look for default.hbs.
Open that template file in a code editor, such as NotePad++ for Windows and TextEdit for Mac. Next, paste the embed code for your Kit form (JavaScript or HTML) into the part of the template file where your form should be displayed.
This exact location will depend on your Ghost theme, so we suggest reaching out to your theme developer if you aren’t sure where the code should go.
For example, in Ghost’s Casper theme, pasting your embed code in the “article-comments gh-canvas” section code in the post.hbs file will make the form appear at the bottom of every post.
Save the file, then rezip your complete set of theme files and install it. Your form should now be visible across your Ghost website!
Key Takeaways
Get your Kit form embed code from the Embed tab of the form builder.
Paste the embed code into an HTML block on a single Ghost page or post.
You can also paste the embed code into your theme files to have your form appear across your Ghost website.
For more information on integrating Kit with Ghost, check out Ghost’s guide on this subject.