Adding a Ghost subscribers form in bootstrap

My blog theme was, I've since switched to a modified version of casper, written in Twitter's bootstrap framework. As someone who knows nothing but the basics of CSS and doesn't have a single artistic bone in their body, bootstrap is a life saver.

Ghost released a subscribers feature in version 0.8.0 which allows you to put a form on your website to collect subscribers email addresses (they're working on sending the actual email at the moment). Turns out doing this in bootstrap was extremly simple!

So, without further ado, here's how to implement the aforementioned form in bootstrap.

{{#if @labs.subscribers}}
<div class="panel panel-default">  
    <div class="panel-heading">
        <h3 class="panel-title">Subscribe to [email protected]}}</h3>
    </div>
    <div class="panel-body">
        <h4 class="text-center">Get the latest posts delivered right to your inbox.</h4>
        <div class="well well-sm">
            {{subscribe_form form_class="form-inline text-center" input_class="form-control" button_class="btn btn-primary" placeholder="Your email address"}}
        </div>
    </div>
</div>  
{{/if}}

The above uses the subscribe_form helper to output the form. You can checkout the docs here.

James Loh

I'm a Sysadmin for a web solutions company deploying clouds across the globe. I learn new things every day.

Subscribe to jloh.co

Get the latest posts delivered right to your inbox weekly. No spam, I promise!


or subscribe via RSS with Feedly!