Simple Subscription Form

By Ally Reid

forms subscription newsletter

How do I use This?

A simple subscription form

HTML

<div class="simple-subscription-form">
  <form>
    <h4>Subscribe</h4>
    <p>Receive updates and latest news direct from our team. Simply enter your email below :</p>
    <div class="input-group">
      <span class="input-group-label">
        <i class="fa fa-envelope"></i>
      </span>
      <input class="input-group-field" type="email" placeholder="Email" required>
      <button class="button">Sign up now</button>
  </form>
</div>

$subscription-form-bg: darken($primary-color, 20%);
$subscription-form-color: $white;
$subscription-form-padding: rem-calc(32);


.simple-subscription-form {
  background: $subscription-form-bg;
  color: $subscription-form-color;
  padding: $subscription-form-padding;
  border-radius: $global-radius;

  .button {
    margin-bottom: 0;
    border-radius: 0 $global-radius $global-radius 0;
  }
}

.simple-subscription-form {
  background: #0c3e5f;
  color: #fefefe;
  padding: 2rem;
  border-radius: 0;
}

.simple-subscription-form .button {
  margin-bottom: 0;
  border-radius: 0 0 0 0;
}

Simple Subscription Form

By Ally Reid

Star Rating Block

Multi-step checkout form

Form Input with Show Password

Simple Subscription Form

By Ally Reid

Similar Building Blocks

Star Rating Block

Multi-step checkout form

Form Input with Show Password