Multi-step checkout form

By Kevin Ball

checkout ecommerce accordion

How do I use This?

A multi-step checkout form for e-commerce.

HTML

<div class="multi-step-checkout-process">
  <div class="multi-step-checkout-process-step">
    <ul class="accordion" data-accordion>
      <li class="accordion-item is-active" data-accordion-item>
        <a href="#" class="accordion-title">1. Shipping <span class="multi-step-checkout-step-title-subheader">Step 1 of 3</span></a>
        <div class="accordion-content" data-tab-content>
          <form class="multi-step-checkout-form">
            <div class="row">
              <div class="small-12 medium-9 column">
                <div class="shipping-address multi-step-checkout-step-section">
                  <h6 class="multi-step-checkout-step-subheader">Shipping Address</h6>
                  <p class="multi-step-checkout-step-subdesc">Please enter your shipping address. Only USPS ships to APO, FPO, or PO Boxes. <a href="#" class="text-link">Shipping Rates and Delivery Times</a></p>

                  <label>
                    <input type="text" placeholder="First Name" required >
                    <input type="text" placeholder="Last Name" required >
                    <input type="text" placeholder="Address" required >
                    <div class="row">
                      <div class="small-12 medium-7 column">
                        <input type="text" placeholder="City" required >
                      </div>
                      <div class="small-6 medium-2 column">
                        <select required >
                          <option value="state1">AL</option>
                          <option value="state2">AK</option>
                          <option value="state3">AZ</option>
                          <option value="state4">AR</option>
                          <option value="state5">CA</option>
                        </select>
                      </div>
                      <div class="small-6 medium-3 column">
                        <input type="text" placeholder="ZIP" required >
                      </div>
                    </div>

                    <div><hr class="multi-step-checkout-form-divider"></div>
                    <input type="text" placeholder="Email" required >
                    <input type="text" placeholder="Phone" required >
                  </label>
                </div>
                <div class="multi-step-checkout-shipping-options multi-step-checkout-step-section">
                  <h6 class="multi-step-checkout-step-subheader">Shipping Options</h6>

                  <div class="row multi-step-checkout-shipping-option">
                    <label>
                      <div class="small-10 column">
                        <input type="radio" name="multi-step-checkout-shipping-option" value="ups-ground-shipping" class="multi-step-checkout-shipping-option-selection" checked="checked"> <span class="multi-step-checkout-shipping-option-title">UPS Ground (4–5 business days) - Recommended</span>
                        <div class="multi-step-checkout-shipping-option-desc">Same-day shipping of in-stock items for orders placed before 3pm EST. Realtime tracking included.</div>
                      </div>
                      <div class="small-2 column multi-step-checkout-shipping-cost">
                        $25.00
                      </div>
                    </label>
                  </div>

                  <div class="row multi-step-checkout-shipping-option">
                    <label>
                      <div class="small-10 column">
                        <input type="radio" name="multi-step-checkout-shipping-option" value="usps-shipping" class="multi-step-checkout-shipping-option-selection"><span class="multi-step-checkout-shipping-option-title">USPS  (6–12 business days)</span>
                        <div class="multi-step-checkout-shipping-option-desc">Tracking is available after 48 hours.</div>
                      </div>
                      <div class="small-2 column multi-step-checkout-shipping-cost">
                        $15.00
                      </div>
                    </label>
                  </div>

                </div>
                <div class="multi-step-checkout-enews-sign-up">
                  <fieldset>
                    <input class="multi-step-checkout-enews-sign-up-checkbox" id="multi-step-checkout-enews-sign-up-checkbox" type="checkbox">
                    <label for="#multi-step-checkout-enews-sign-up-checkbox">Please add me to your eNewsletter list so I can receive special promotions and product updates.</label>
                  </fieldset>
                </div>
                <button class="primary button expanded">Continue to Payment</button>
              </div>
            </div>
          </form>
        </div>
      </li>

      <li class="accordion-item" data-accordion-item>
        <a href="#" class="accordion-title">2. Payment <span class="multi-step-checkout-step-title-subheader">Step 2 of 3</span></a>
        <div class="accordion-content" data-tab-content>
          <form class="multi-step-checkout-form">
            <div class="row">
              <div class="small-12 medium-9 column">
                <div class="multi-step-checkout-billing-address">
                  <fieldset>
                    <input class="multi-step-checkout-billing-address-checkbox" id="multi-step-checkout-billing-address-checkbox" type="checkbox" checked><label for="multi-step-checkout-billing-address-checkbox">My Billing Address is the same as my Shipping Address.</label>
                  </fieldset>
                  <ul class="multi-step-checkout-billing-address-list">
                    <li class="multi-step-checkout-billing-name">John Smith</li>
                    <li class="multi-step-checkout-billing-street">123 Market St.</li>
                    <li class="multi-step-checkout-billing-city-state">San Francisco, CA 94134</li>
                  </ul>
                </div>
                <div><hr class="multi-step-checkout-form-divider"></div>

                <div class="multi-step-checkout-credit-card-info">
                  <h6 class="multi-step-checkout-step-subheader">Credit Card</h6>
                  <ul class="multi-step-checkout-payment-icons">
                    <li><img class="multi-step-checkout-payment-icon" src="https://placehold.it/50x50"/></li>
                    <li><img class="multi-step-checkout-payment-icon" src="https://placehold.it/50x50"/></li>
                    <li><img class="multi-step-checkout-payment-icon" src="https://placehold.it/50x50"/></li>
                    <li><img class="multi-step-checkout-payment-icon" src="https://placehold.it/50x50"/></li>
                  </ul>

                  <input type="text" placeholder="Card Name" required >
                  <input type="text" placeholder="Card Number" required >
                  <div class="row">
                    <div class="small-4 column">
                      <select required >
                        <option value="january">01</option>
                        <option value="february">02</option>
                        <option value="march">03</option>
                        <option value="april">04</option>
                      </select>
                    </div>
                    <div class="small-4 column">
                      <select required >
                        <option value="year1">2019</option>
                        <option value="year2">2018</option>
                        <option value="year3">2017</option>
                        <option value="year4">2016</option>
                      </select>
                    </div>
                    <div class="small-4 column">
                      <input type="text" placeholder="CVV" required >
                    </div>
                  </div>

                  <div><hr class="multi-step-checkout-form-divider"></div>

                  <label for="apply-gift-card-code"> Gift Card <span>(optional)</span>
                    <div class="input-group gift-card">
                       <input class="input-group-field" type="text" placeholder="Code">
                         <div class="input-group-button" placeholder="$">

                          <input type="submit" class="button primary" value="Apply" id="apply-gift-card-code">
                        </div>
                    </div>
                  </label>

                  <div><hr class="multi-step-checkout-form-divider"></div>

                  <button class="primary button expanded">Continue to Review Order</button>
                </div>
              </div>
            </div>
          </form>
        </div>
      </li>

      <li class="accordion-item" data-accordion-item>
        <a href="#" class="accordion-title">3. Review Order <span class="multi-step-checkout-step-title-subheader">Step 3 of 3</span></a>
        <div class="accordion-content" data-tab-content>
         <hr class="show-for-small-only order-table-divider">
          <table class="order-table-content stack">
            <thead>
              <tr>
                <th width="120">Order</th>
                <th width="350"></th>
                <th width="80">Quantity</th>
                <th width="100">Price Each</th>
                <th width="60">Total</th>
              </tr>
            </thead>
            <tbody>
              <tr class="order-item">
                <td><img class="order-product-image" src="https://placehold.it/100x100"/></td>
                <td><span class="order-product-title">Product 1</span> <span class="order-product-vendor">Vendor 1</span>
                  <ul class="order-product-info">
                    <li>In Stock</li>
                    <li>Product SKU: 12345</li>
                    <li>A great Product</li>
                    <li>Details: You won't be sad</li>
                  </ul>
                </td>
                <td><span class="show-for-small-only">Qty:</span> 1</td>
                <td><span class="show-for-small-only">Price Each: </span><span class="order-product-price">$25.00</span>
                <span class="show-for-small-only">,</span>
                <br class="hide-for-small-only">
                <span class="order-product-price-saving">
                  You save:
                  <br class="hide-for-small-only">
                  $2.08 (5%)
                </span>
                </td>
                <td><span class="show-for-small-only">Total: </span><span class="order-product-total">$25.00</span></td>
              </tr>
              <tr class="order-item">
                <td><img class="order-product-image" src="https://placehold.it/100x100"/></td>
                <td><span class="order-product-title">Product 2</span> <span class="order-product-vendor">Vendor 1</span>
                <ul class="order-product-info">
                  <li>In Stock</li>
                  <li>Product SKU: 12345</li>
                  <li>A great Product</li>
                  <li>Details: You won't be sad</li>
                </ul>
                </td>
                <td><span class="show-for-small-only">Qty:</span> 1</td>
                <td><span class="show-for-small-only">Price Each: </span><span class="order-product-price">$25.00</span>
                <span class="show-for-small-only">,</span>
                <br class="hide-for-small-only">
                <span class="order-product-price-saving">
                  You save:
                  <br class="hide-for-small-only">
                  $2.08 (5%)
                </span>
                </td>
                <td><span class="show-for-small-only">Total: </span><span class="order-product-total">$25.00</span></td>
              </tr>
              <tr class="order-item">
                <td><img class="order-product-image" src="https://placehold.it/100x100"/></td>
                <td><span class="order-product-title">Product 3</span> <span class="order-product-vendor">Vendor 1</span>
                  <ul class="order-product-info">
                    <li>In Stock</li>
                    <li>Product SKU: 12345</li>
                    <li>A great Product</li>
                    <li>Details: You won't be sad</li>
                  </ul>
                </td>
                <td><span class="show-for-small-only">Qty:</span> 1</td>
                <td><span class="show-for-small-only">Price Each: </span><span class="order-product-price">$25.00</span>
                <span class="show-for-small-only">,</span>
                <br class="hide-for-small-only">
                <span class="order-product-price-saving">
                  You save:
                  <br class="hide-for-small-only">
                  $2.08 (5%)
                </span>
                </td>
                <td><span class="show-for-small-only">Total: </span><span class="order-product-total">$25.00</span></td>
              </tr>
            </tbody>
          </table>
          <div class="">
            <div class="row">
              <div class="small-12 medium-9 column multi-step-checkout-create-account">
                <h6 class="multi-step-checkout-step-subheader">Create an Account <span>(optional)</span></h6>
                <p class="create-account-desc">Save and review your orders in your account.</p>
                <form>
                  <div class="row">
                    <div class="small-12 medium-6 column">
                      <input type="text" placeholder="Password">
                    </div>
                    <div class="small-12 medium-6 column">
                      <input type="text" placeholder="Confirm Password">
                    </div>
                  </div>
                </form>
              </div>
            </div>

            <div><hr class="multi-step-checkout-form-divider"></div>

            <form>
              <label for="">Comments
                <textarea name="" id="" cols="30" rows="2"></textarea>
              </label>
              <button class="primary button expanded">Submit Order</button>
            </form>
          </div>

        </div>
      </li>
    </ul>
  </div>
</div>

.multi-step-checkout-process-step {
  margin-top: 20px;
  margin-bottom: 3rem;
  
  @include breakpoint(small down) {
    padding-right: 0rem;
  }
}
.multi-step-checkout-process {
  .accordion-title {
    color: darken($dark-gray,30%);
    font-size: 1.25rem;
    transition: color 0.5s ease;
    border: none;
    font-family: 'Droid serif', serif;
    
    &:hover,
    &:active,
    &:focus {
      color: darken($dark-gray,40%);
      transition: color 0.5s ease;
      background: none;
    }
  }

  :last-child:not(.is-active) > .accordion-title {
    border: none;
  }

  .accordion-item {
    border-bottom: 1px solid $light-gray;
    padding-right: 0.8rem;
    
    &:first-child() {
      border-top: 1px solid $light-gray;
    }
    
    &.is-active {
      border: 1px solid $light-gray;
      border-top: 3px solid $primary-color;
      border-radius: 3px;
      box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.1); 
    }
    
    .accordion-title {
      font-weight: 400;
    }
    
    .accordion-title::before {
      right: 0.5rem;
    }
  }

  .accordion-content {
    border: none;
    padding-left: 35px;
  }
  :last-child > .accordion-content:last-child {
    border-bottom: none;
  }
}

.multi-step-checkout-step-title-subheader {
  color: lighten($dark-gray,10%);
  font-size: 0.9rem;
  display: inline-block;
  margin-left: 10px;
  font-family: 'Open sans', serif;
}
  
.multi-step-checkout-step-subheader {
  color: darken($dark-gray,30%);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: 'Open sans', sans-serif;
}

.multi-step-checkout-step-subdesc {
  color: lighten($dark-gray,0%);
  font-size: 0.9rem;
}

.multi-step-checkout-shipping-option {
  margin-bottom: 10px;
}

.multi-step-checkout-step-section {
  border-bottom: 1px dashed $light-gray;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.multi-step-checkout-shipping-option-selection {
  position: absolute;
  margin-top: 0.2rem;
}

.multi-step-checkout-shipping-option-title {
  display: block;
  font-size: 0.9rem;
  line-height: 1.4rem;
  margin-left: 1.6rem;
  margin-bottom: 0.8rem;
}

.multi-step-checkout-shipping-option-desc {
  font-size: 0.9rem;
  color: $dark-gray;
  margin-left: 25px;
  margin-top: -10px;
}

.multi-step-checkout-shipping-cost {
  text-align: right;
}

.multi-step-checkout-form-divider {
  border-bottom: 1px dashed $light-gray;
}

.multi-step-checkout-form {
  input {
    background: lighten($light-gray,7%);
  }
}

.multi-step-checkout-enews-sign-up {
  label {
    position: relative;
    margin-left: 1.5rem;
    margin-bottom: 1.5rem;
  }
}

.multi-step-checkout-enews-sign-up-checkbox {
  position: absolute;
  margin-top: 0.4rem;
}
  

.multi-step-checkout-credit-card-info {
  label {
    span {
      color: lighten($dark-gray,10%);
    }
  }
}

.multi-step-checkout-payment-icons {
  list-style: none;
  margin-left: 0;
  margin-bottom: 1rem;
  
  li {
    display: inline;
  }
}

.multi-step-checkout-billing-address {
  .multi-step-checkout-billing-address-list {
    list-style: none;
    margin-left: 1.5rem;
    margin-top: 1rem;
    margin-bottom: 0.8rem;
    color: $dark-gray;
    font-size: 0.9rem;
  }
  
  .multi-step-checkout-billing-address-checkbox {
    position: absolute;
    margin-top: 0.4rem;
  }
  
  label {
    margin-left: 1.5rem;
  }
}

.multi-step-checkout-create-account {
  margin-top: 2rem;
  
  @include breakpoint(small down) {
    margin-top: 0.5rem;
  }
  
  .create-account-desc {
    font-size: 0.9rem;
    color: $dark-gray;
  }
}

.multi-step-checkout-logo {
  width: 118px;
  height: 38px;
}

.multi-step-checkout-arrow {
  height: 13px;
  width: 13px;
}

.multi-step-checkout-process-step {
  margin-top: 20px;
  margin-bottom: 3rem;
}

@media screen and (max-width: 39.9375em) {
  .multi-step-checkout-process-step {
    padding-right: 0rem;
  }
}

.multi-step-checkout-process .accordion-title {
  color: #3e3e3e;
  font-size: 1.25rem;
  transition: color 0.5s ease;
  border: none;
  font-family: 'Droid serif', serif;
}

.multi-step-checkout-process .accordion-title:hover, .multi-step-checkout-process .accordion-title:active, .multi-step-checkout-process .accordion-title:focus {
  color: #242424;
  transition: color 0.5s ease;
  background: none;
}

.multi-step-checkout-process :last-child:not(.is-active) > .accordion-title {
  border: none;
}

.multi-step-checkout-process .accordion-item {
  border-bottom: 1px solid #e6e6e6;
  padding-right: 0.8rem;
}

.multi-step-checkout-process .accordion-item:first-child() {
  border-top: 1px solid #e6e6e6;
}

.multi-step-checkout-process .accordion-item.is-active {
  border: 1px solid #e6e6e6;
  border-top: 3px solid #1779ba;
  border-radius: 3px;
  box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.1);
}

.multi-step-checkout-process .accordion-item .accordion-title {
  font-weight: 400;
}

.multi-step-checkout-process .accordion-item .accordion-title::before {
  right: 0.5rem;
}

.multi-step-checkout-process .accordion-content {
  border: none;
  padding-left: 35px;
}

.multi-step-checkout-process :last-child > .accordion-content:last-child {
  border-bottom: none;
}

.multi-step-checkout-step-title-subheader {
  color: #a4a4a4;
  font-size: 0.9rem;
  display: inline-block;
  margin-left: 10px;
  font-family: 'Open sans', serif;
}

.multi-step-checkout-step-subheader {
  color: #3e3e3e;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: 'Open sans', sans-serif;
}

.multi-step-checkout-step-subdesc {
  color: #8a8a8a;
  font-size: 0.9rem;
}

.multi-step-checkout-shipping-option {
  margin-bottom: 10px;
}

.multi-step-checkout-step-section {
  border-bottom: 1px dashed #e6e6e6;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.multi-step-checkout-shipping-option-selection {
  position: absolute;
  margin-top: 0.2rem;
}

.multi-step-checkout-shipping-option-title {
  display: block;
  font-size: 0.9rem;
  line-height: 1.4rem;
  margin-left: 1.6rem;
  margin-bottom: 0.8rem;
}

.multi-step-checkout-shipping-option-desc {
  font-size: 0.9rem;
  color: #8a8a8a;
  margin-left: 25px;
  margin-top: -10px;
}

.multi-step-checkout-shipping-cost {
  text-align: right;
}

.multi-step-checkout-form-divider {
  border-bottom: 1px dashed #e6e6e6;
}

.multi-step-checkout-form input {
  background: #f8f8f8;
}

.multi-step-checkout-enews-sign-up label {
  position: relative;
  margin-left: 1.5rem;
  margin-bottom: 1.5rem;
}

.multi-step-checkout-enews-sign-up-checkbox {
  position: absolute;
  margin-top: 0.4rem;
}

.multi-step-checkout-credit-card-info label span {
  color: #a4a4a4;
}

.multi-step-checkout-payment-icons {
  list-style: none;
  margin-left: 0;
  margin-bottom: 1rem;
}

.multi-step-checkout-payment-icons li {
  display: inline;
}

.multi-step-checkout-billing-address .multi-step-checkout-billing-address-list {
  list-style: none;
  margin-left: 1.5rem;
  margin-top: 1rem;
  margin-bottom: 0.8rem;
  color: #8a8a8a;
  font-size: 0.9rem;
}

.multi-step-checkout-billing-address .multi-step-checkout-billing-address-checkbox {
  position: absolute;
  margin-top: 0.4rem;
}

.multi-step-checkout-billing-address label {
  margin-left: 1.5rem;
}

.multi-step-checkout-create-account {
  margin-top: 2rem;
}

@media screen and (max-width: 39.9375em) {
  .multi-step-checkout-create-account {
    margin-top: 0.5rem;
  }
}

.multi-step-checkout-create-account .create-account-desc {
  font-size: 0.9rem;
  color: #8a8a8a;
}

.multi-step-checkout-logo {
  width: 118px;
  height: 38px;
}

.multi-step-checkout-arrow {
  height: 13px;
  width: 13px;
}

Multi-step checkout form

By Kevin Ball

Log In Form

Form Input with Show Password

Sign In Form

Multi-step checkout form

By Kevin Ball

Similar Building Blocks

Log In Form

Form Input with Show Password

Sign In Form