How to add an inline signup form to Ghost

How to add an inline signup form to Ghost

Ghost's default Casper theme comes with a signup flow like this:

A separate popup window opens up for a sign up. This creates a ton of friction and user drop off.

An inline sign up form is much more inviting and exactly a user would expect. Look how smooth this feels.

Let's see how we can build this.

  1. Sign up for getform.io and create a new form.
  2. Create a new file signup-form.hbs in /content/themes/casper/partials
{{#unless @member}}
  <section class="footer-cta">
    <div class="inner">
      <h2>Sign up for more like this.</h2>
      <form
        class="footer-cta-button"
        action="https://getform.io/f/xyz"
        method="POST"
      >
        <input
          type="email"
          required
          placeholder="Enter your email address"
          name="email"
          style="border:none;"
        />
        <button
          type="submit"
          style="display: inline-block; padding: 10px 20px; olor: #fff; ont-weight: 500; ackground: var(--ghost-accent-color); bder-radius: 5px;"
        >Subscribe</button>
      </form>
    </div>
  </section>
{{/unless}}

4. Use with {{> "signup-form"}} anywhere in your .hbs files

Didn't find this guide useful? Let me know