Credit Card Form With Cool Interactions

A cool, interactive, user-friendly credit card form UI designed for e-commerce websites & online stores.

Built with JavaScript (jQuery) and CSS/CSS3. Comes with a smooth flip animation when switching between number & CVV input.

More Features:

• Auto formats credit card numbers while typing.
• Auto highlights part of the credit card based on the input field in which you're typing.
• User-friendly date (month/year) dropdown selectors.

Dependencies:

• jQuery library
• Bootstrap framework
• jQuery Flip.js plugin
• jQuery Mask plugin
• Animate.css

How to use it:

1. Load the following Scripts and Stylesheets in the document.

<!-- Bootstrap -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css">
<!-- Animate.css -->
<link rel="stylesheet" href="/path/to/cdn/animate.min.css" />
<!-- Core Stylesheet -->
<link rel="stylesheet" href="./assets/main.css" />
<!-- Responsive Util -->
<link rel="stylesheet" href="./assets/responsive.css" />

<!-- jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="/path/to/cdn/popper.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>
<!-- Flip.js plugin -->
<script src="/path/to/cdn/flipper.min.js" type="text/javascript"></script>
<!-- Input Mask Plugin -->
<script src="/path/to/cdn/jquery.inputmask.min.js"></script>
<!-- Core JavaScript -->
<script src="./assets/main.js" type="text/javascript"></script>

2. Create the HTML for the interactive credit card form.

<div class="row content-parent justify-content-center align-items-center">
  <div class="col-md-6">
    <div class="col-md-10 m-auto">
      <div class="card willFlip" id="willFlip">
        <div class="front">
          <div class="card-body">
            <div class="d-flex justify-content-between">
              <img src="./assets/card_bank.png" width="50" style="filter: contrast(0)" height="50" alt="">
              <img src="./assets/visa.png" width="50" height="50" alt="">
            </div>
            <div class="col-md-12 mt-1">
              <div class="form-group">
                <label for="cardNumber"></label>
                <input type="text" class="form-control animate__animated animate__bounce animate__duration-2s" disabled readonly id="cardNumber">
              </div>
            </div>
            <div class="d-flex justify-content-between bd-highlight mb-3">
              <div class="col-md-6 card-holder-content">
                <div class="form-group">
                  <label for="cardHolderValue">Card Holder</label>
                  <input type="text" placeholder="FULL NAME" disabled class="cardHolder form-control animate__animated animate__bounce animate__duration-2s" id="cardHolderValue">
                </div>
              </div>
              <div class="col-md-3 card-expires-content">
                <div class="input-date">
                  <label for="expiredMonth" class="text-right d-block">Expires</label>
                  <div class="row content-date-input justify-content-end animate__animated animate__duration-2s animate__bounce">
                    <input type="text" disabled class="cardHolder col-4 form-control" id="expiredMonth">
                    <h4 class="mt-1 p-2 slash-text"> / </h4>
                    <input type="text" disabled class="cardHolder col-4 form-control" id="expiredYear">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="back">
          <div class="card-bar"></div>
          <div class="card-body">
            <div class="col-md-12  back-middle">
              <div class="form-group">
                <label for="cardCcv" class="text-right d-block">CW</label>
                <input type="password" disabled class="form-control" id="cardCcv">
              </div>
              <img src="./assets/visa.png" class="float-right" width="50" height="50" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-body mt-5">
        <div class="form-group">
          <label for="cardInput">Cards Number</label>
          <input required class="input card-input_field form-control" id="cardInput">
        </div>
        <div class="form-group">
          <label for="cardHolder">Cards Holders</label>
          <input required class="card-input_field form-control" id="cardHolder">
        </div>
        <div class="row">
          <div class="col-md-4">
            <div class="form-group">
              <label for="monthInput">Expiration Date</label>
              <select required name="" class="form-control card-input_field" id="monthInput">
                <option class="disabled" readonly>Month</option>
              </select>
            </div>
          </div>
          <div class="col-md-4">
            <div class="form-group">
              <label for="yearInput"></label>
              <select required name="" class="form-control card-input_field mt-2" id="yearInput">
                <option class="disabled" readonly>Year</option>
              </select>
            </div>
          </div>
          <div class="col-md-4">
            <div class="form-group">
              <label for="cwInput">CVV</label>
              <input required type="text" class="form-control card-input_field" id="cwInput">
            </div>
          </div>
        </div>
        <div class="btn btn-primary d-block card-input_button w-100">Submit</div>
      </div>
    </div>
  </div>
</div>

---

This awesome jQuery plugin is developed by julkwel. For more Advanced Usages, please check the demo page or visit the official website.