Organize your blog, newsletter or content site with ArrayExplore

Ghost Snippets: Custom Subscribe Forms

How to add subscribe forms in your posts. Add subscription forms as CTA in your posts. Complete HTML markup and CSS for styling.

Norbert
Norbert4 min read

In content subscribe forms are ideal for prompting your readers to opt-in/subscribe to your newsletter. Creating snippets will make it easy to include the forms at the place in your posts where it makes the most sense.

These subscribe forms, can even include labels, which are useful for managing, segmenting, and keeping track of your members. Labels can be applied manually in Ghost Admin, going to a member profile and adding or removing specific labels, or automatically via a form when users sign up.

Labels can be added by using an input element with the data-members-label attribute, providing the user the ability to select from different options. (Check out my guide about segmenting members on signup).

The form markup

You will have to use the HTML card as we need a specific markup for this to work. If you don't want to use label elements you can remove them or you can add other labels. The value property will be the label that will appear in your Ghost admin. Here is the code that will be used:

<div class="subscription-box" style="--color-accent: #cc60e3;">
  <h3 class="subscription-form-title">Subscribe now</h3>
  <form class="subscription-form" data-members-form="signup">
    <p class="subscription-form-description">
      The definitive guide to the world's hidden wonders. Discover the
      unexpected with our stories. Our fascinting articles will transport and
      inspire you. Subscribe to our newsletter and never miss our articles,
      latest news etc.
    </p>

    <label class="switch">
      <input
        data-members-label
        type="checkbox"
        checked
        onChange="this.toggleAttribute('data-members-label')"
        value="Technology"
      />
      <span class="slider round"></span>
      <span class="label-description">Technology</span>
    </label>

    <label class="switch">
      <input
        data-members-label
        type="checkbox"
        checked
        onChange="this.toggleAttribute('data-members-label')"
        value="Science"
      />
      <span class="slider round"></span>
      <span class="label-description">Science</span>
    </label>

    <div class="subscribe-box">
      <input
        data-members-email
        type="email"
        placeholder="Your email address"
        required
      />
      <button class="btn" type="submit">Signup</button>
    </div>
    <div class="success-message">
      Great! Check your inbox and click the link.
    </div>
    <div class="error-message">
      Sorry, something went wrong. Please try again.
    </div>
  </form>
</div>

The form style

The below CSS will provide the styling for the form and the labels. You can add this in code injection in the Ghost Admin:

.subscription-box {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2em;
  position: relative;
  border-radius: 5px;
  background-color: transparent;
  overflow: hidden;
}

.subscription-box::after {
  background-color: var(--color-accent);
  opacity: 0.2;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

.subscription-form {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 30rem;
  --color-danger: #fc365e;
  --color-success: #48c774;
}

.subscription-form-title {
  margin-top: 0;
  font-size: 1.6rem;
}

.subscription-form-description {
  text-align: left;
  margin-bottom: 2em;
  margin-top: 0;
}

.subscription-form input,
.subscription-form button {
  padding: 10px;
  border-radius: 5px;
  box-shadow: none;
  border: 1px solid #cecece;
}

.subscription-form input {
  background-color: transparent;
}

.subscription-form button {
  text-align: center;
  text-transform: uppercase;
  background-color: var(--color-accent);
  color: #e6e6e6;
}

.subscription-form .success-message,
.subscription-form .error-message {
  display: none;
}

.subscription-form.success .success-message,
.subscription-form.error .error-message {
  display: flex;
  margin-top: 10px;
  font-weight: 500;
}

.subscription-form.success .success-message {
  color: var(--color-success);
}

.subscription-form.error .error-message {
  color: var(--color-danger);
}

.label-description {
  font-weight: 500;
  margin-left: 50px;
  white-space: nowrap;
}

.subscribe-box {
  background-color: #fff;
  display: flex;
  padding: 0.5em;
  border-radius: 5px;
}

.subscribe-box input {
  border: none;
  box-shadow: none;
  flex: 2;
  margin: 0;
  padding: 0 1em;
  outline: none;
  font-size: 15px;
}

.subscribe-box button {
  flex: 1;
  font-size: 0.8rem;
  padding: 1em;
  font-weight: 700;
}

.switch {
  position: relative;
  display: flex;
  width: 45px;
  height: 25px;
  margin-bottom: 1em;
  margin-right: 1em;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: '';
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2.5px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: var(--color-accent);
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196f3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

The result

Here is the final look of the forms:

Ghost CMS Subscribe forms
Ghost CMS Subscribe forms

You can change the color of the subscribe box, by changing the value of the --color-accent property on the first row of the HTML code. Creating a snippet out of the markup will make it easy to include it anywhere in your posts.

More in Snippets

All snippets

Ghost Snippets: Custom Stylish Tables

How to add create custom stylish tables in your Ghost theme. You can use these tables when you want to compare data or highlight information in a tabular fashion.

Ghost Snippets: Accordions

How to add create custom stylish accordions in your Ghost theme. Add collapsible customizable pieces of content using our complete tutorial including HTML markup and CSS for styling.

Ghost Snippets: Custom Alert Boxes

How to add alert boxes to your Ghost Theme. How to highlight critical information using alert boxes in your Ghost theme. Guide to add the HTML markup and style it with CSS.

Ghost Pro Hosting

Get the best managed Ghost CMS hosting and focus on bringing value to your audience.