How To Add A Custom Drip Email Optin Form To Your Ghost Blog Theme

2019-01-17

Blogging with Ghost is awesome and it does have built in email list building functionality so you can build an email list from your blog. The problem is that if you want those subscribers automatically sent to your favorite marketing automation software like Drip or ConvertKit you’ll need to use Zapier. This presents an added cost for each subscriber that opts in.

This can easily be avoided by adding your own Drip form directly to your Ghost theme. The form will look very much like the one at the bottom of this page!

Adding the form to your Ghost blog theme will require you to edit the code a bit but don’t worry, I’m going to walk you through this!

The theme I was using to make this edit was the Atilla theme. If you have a different theme it shouldn’t be that different but if it is feel free to contact me for help. This short guide is assuming you already have the basic Drip JavaScript Snippet already installed on your website.

Step One

You need to create a new Drip form because we’ll need to snag the form number to embed in our code.

When you create the Drip form go ahead and disable the widget, we won’t be needing it. The number you want to snag is right here, you don’t even need the rest of the code, just the number:

Step Two

Add this code to your assets/css/style.css file:

assets/css/style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/* Web Form */

*:focus {
outline: none;
}

#subscribe-cta {
margin: 20px 0 0 0;
}

input, #cta-btn {
font: inherit;
border: 1px solid #33adcc;
&:focus {
outline: none;
}
}

form {
display: flex;
grid-column: 2;
justify-content: center;
margin: 10px 0 0 0;
}

input {
padding: 0.5em 0.75em;
width: 200px;
}

#cta-btn {
padding: 0.5em 0.75em;
color: #ffffff;
cursor: pointer;
background-color: #33adcc;
width: 120px;
&:hover {
background-color: #034b5b
}
}

Step Three

Add the web form on the homepage and anywhere else you want it! For example, I put it in my index.hbs file and post.hbs. Replace the X’s with your Drip form number we snagged in Step One above:

1
2
3
4
5
6
<div id="subscribe-cta">
<form action="https://www.getdrip.com/forms/XXXXXXXX/submissions" method="post" data-drip-embedded-form="XXXXXXXX">
<input type="email" id="drip-email" name="fields[email]" value="" placeholder="Enter your email..."/>
<button id="cta-btn" type="submit" data-drip-attribute="sign-up-button">SUBMIT</button>
</form>
</div>

Check out my exact changes to exact files in my Github commit here.