Comment créer un formulaire de paiement en utilisant HTML, CSS3 et jQuery ?

Dans ce tutoriel, nous allons créer un formulaire de paiement en utilisant HTML, CSS3 et un peu de jQuery. Nous allons utiliser les polices Google Fonts pour ce tutoriel, en particulier Montserrat.

HTML

La première chose à faire est de créer notre structure HTML.

Nous avons besoin d'un conteneur pour tout envelopper, nous le nommerons "checkout-panel". À l'intérieur, nous aurons deux sections principales, un corps et un pied de page.

Corps

• Barre de progression des étapes
• Deux méthodes de paiement
• Quelques champs de saisie

Pied de page

• Deux boutons

Voici le code pour le formulaire de paiement :

<div class="checkout-panel">
  <div class="panel-body">
    <h2 class="title">Checkout</h2>
 
    <div class="progress-bar">
      <div class="step active"></div>
      <div class="step active"></div>
      <div class="step"></div>
      <div class="step"></div>
    </div>
 
    <div class="payment-method">
      <label for="card" class="method card">
        <div class="card-logos">
          <img src="img/visa_logo.png"/>
          <img src="img/mastercard_logo.png"/>
        </div>
 
        <div class="radio-input">
          <input id="card" type="radio" name="payment">
          Pay £340.00 with credit card
        </div>
      </label>
 
      <label for="paypal" class="method paypal">
        <img src="img/paypal_logo.png"/>
        <div class="radio-input">
          <input id="paypal" type="radio" name="payment">
          Pay £340.00 with PayPal
        </div>
      </label>
    </div>
 
    <div class="input-fields">
      <div class="column-1">
        <label for="cardholder">Cardholder's Name</label>
        <input type="text" id="cardholder" />
 
        <div class="small-inputs">
          <div>
            <label for="date">Valid thru</label>
            <input type="text" id="date" placeholder="MM / YY" />
          </div>
 
          <div>
            <label for="verification">CVV / CVC *</label>
            <input type="password" id="verification"/>
          </div>
        </div>
 
      </div>
      <div class="column-2">
        <label for="cardnumber">Card Number</label>
        <input type="password" id="cardnumber"/>
 
        <span class="info">* CVV or CVC is the card security code, unique three digits number on the back of your card separate from its number.</span>
      </div>
    </div>
  </div>
 
  <div class="panel-footer">
    <button class="btn back-btn">Back</button>
    <button class="btn next-btn">Next Step</button>
  </div>
</div>

CSS

Maintenant que nous en avons terminé avec le HTML, nous allons donner à notre formulaire de paiement un aspect agréable à regarder. Nous allons commencer par donner à la page un style de base et centrer notre panneau.

* {
  box-sizing: border-box;
}
 
html,
body {
  font-family: 'Montserrat', sans-serif;
  display: flex;
  width: 100%;
  height: 100%;
  background: #f4f4f4;
  justify-content: center;
  align-items: center;
}

Maintenant, donnons un style à notre classe .checkout-panel pour qu'il ait 940×766 pixels. Ajoutez-lui du style et nous sommes prêts à y aller :

.checkout-panel {
  display: flex;
  flex-direction: column;
  width: 940px;
  height: 766px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .2);
}

Bien ! Maintenant, allons plus loin et stylisons le corps et les éléments qu'il contient. Tout d'abord, ajoutez une marge intérieure au corps et donnez un style au titre :

.panel-body {
  padding: 45px 80px 0;
  flex: 1;
}
 
.title {
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 40px;
  color: #2e2e2e;
}

L'élément suivant à mettre en forme est la classe .progress-bar. Nous allons utiliser les pseudo-éléments :before et :after pour styliser la barre de progression.

.progress-bar {
  display: flex;
  margin-bottom: 50px;
  justify-content: space-between;
}
 
.step {
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  display: block;
  width: 25px;
  height: 25px;
  margin-bottom: 30px;
  border: 4px solid #fff;
  border-radius: 50%;
  background-color: #efefef;
}
 
.step:after {
  position: absolute;
  z-index: -1;
  top: 5px;
  left: 22px;
  width: 225px;
  height: 6px;
  content: '';
  background-color: #efefef;
}
 
.step:before {
  color: #2e2e2e;
  position: absolute;
  top: 40px;
}
 
.step:last-child:after {
  content: none;
}
 
.step.active {
  background-color: #f62f5e;
}
.step.active:after {
  background-color: #f62f5e;
}
.step.active:before {
  color: #f62f5e;
}
.step.active + .step {
  background-color: #f62f5e;
}
.step.active + .step:before {
  color: #f62f5e;
}
 
.step:nth-child(1):before {
  content: 'Delivery';
}
.step:nth-child(2):before {
  right: -40px;
  content: 'Confirmation';
}
.step:nth-child(3):before {
  right: -30px;
  content: 'Payment';
}
.step:nth-child(4):before {
  right: 0;
  content: 'Finish';
}

Remarquez la puissance des pseudo-éléments et comment nous les avons utilisés pour créer la barre de progression.

L'élément suivant est la classe .payment-method. Nous avons deux méthodes de paiement, une pour les cartes de crédit et une pour PayPal. Divisez l'espace en deux colonnes, et alignez-les à l'aide de flexbox.

.payment-method {
  display: flex;
  margin-bottom: 60px;
  justify-content: space-between;
}
 
.method {
  display: flex;
  flex-direction: column;
  width: 382px;
  height: 122px;
  padding-top: 20px;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 2px;
  background-color: rgb(249, 249, 249);
  justify-content: center;
  align-items: center;
}
 
.card-logos {
  display: flex;
  width: 150px;
  justify-content: space-between;
  align-items: center;
}
 
.radio-input {
  margin-top: 20px;
}
 
input[type='radio'] {
  display: inline-block;
}

Excellent ! Nous avons maintenant une section avec plusieurs champs de saisie contenant des informations sur les cartes. Nous pouvons modifier la couleur de la bordure sur :focus et ajouter une icône pour chaque balise de saisie.

.input-fields {
  display: flex;
  justify-content: space-between;
}
 
.input-fields label {
  display: block;
  margin-bottom: 10px;
  color: #b4b4b4;
}
 
.info {
  font-size: 12px;
  font-weight: 300;
  display: block;
  margin-top: 50px;
  opacity: .5;
  color: #2e2e2e;
}
 
div[class*='column'] {
  width: 382px;
}
 
input[type='text'],
input[type='password'] {
  font-size: 16px;
  width: 100%;
  height: 50px;
  padding-right: 40px;
  padding-left: 16px;
  color: rgba(46, 46, 46, .8);
  border: 1px solid rgb(225, 225, 225);
  border-radius: 4px;
  outline: none;
}
 
input[type='text']:focus,
input[type='password']:focus {
  border-color: rgb(119, 219, 119);
}
 
#date { background: url(img/icons_calendar_black.png) no-repeat 95%; }
#cardholder { background: url(img/icons_person_black.png) no-repeat 95%; }
#cardnumber { background: url(img/icons_card_black.png) no-repeat 95%; }
#verification { background: url(img/icons_lock_black.png) no-repeat 95%; }
 
.small-inputs {
  display: flex;
  margin-top: 20px;
  justify-content: space-between;
}
 
.small-inputs div {
  width: 182px;
}

Nous avons presque terminé. La dernière chose que nous devons styliser est la classe .panel-footer. Ici, nous avons deux boutons, un .back-btn et un .next-btn ; alignez-les correctement en utilisant la propriété flexbox.

.panel-footer {
  display: flex;
  width: 100%;
  height: 96px;
  padding: 0 80px;
  background-color: rgb(239, 239, 239);
  justify-content: space-between;
  align-items: center;
}

Donnez-leur des couleurs différentes et animez-les un peu, de sorte qu'il y a une action de survol qui s'étend un peu en utilisant les propriétés transform et transition.

.btn {
  font-size: 16px;
  width: 163px;
  height: 48px;
  cursor: pointer;
  transition: all .2s ease-in-out;
  letter-spacing: 1px;
  border: none;
  border-radius: 23px;
}
 
.back-btn {
  color: #f62f5e;
  background: #fff;
}
 
.next-btn {
  color: #fff;
  background: #f62f5e;
}
 
.btn:focus {
  outline: none;
}
 
.btn:hover {
  transform: scale(1.1);
}

Une dernière chose : vous avez remarqué que lorsque vous cliquez sur le mode de paiement, seul le bouton radio est coché ? Pour plus de finesse, changez la couleur de la bordure de la case lorsqu'elle est cochée. Pour ce faire, utilisez jQuery.

Tout d'abord, assurez-vous que vous incluez jQuery, puis ajoutez une classe nommée blue-border.

.blue-border {
  border: 1px solid rgb(110, 178, 251);
}

Bien ! Maintenant, dans le fichier JavaScript, ajoutez les lignes de code suivantes :

$(document).ready(function() {
 
  $('.method').on('click', function() {
    $('.method').removeClass('blue-border');
    $(this).addClass('blue-border');
  });
 
})

Validons également les champs de saisie. Si vous cliquez sur le bouton suivant et que l'une des entrées est vide, la bordure doit être rouge. Ajoutez donc un fichier css avec la classe .warning :

.warning {
  border-color: #f62f5e;
}

Et la validation JavaScript dans notre fichier JavaScript :

var $cardInput = $('.input-fields input');
 
$('.next-btn').on('click', function(e) {
 
  $cardInput.removeClass('warning');
 
  $cardInput.each(function() {    
     var $this = $(this);
     if (!$this.val()) {
       $this.addClass('warning');
     }
  })
});

Excellent ! Le tutoriel est terminé ! Jetez un coup d'œil à l'image ci-dessous pour voir à quoi ressemble notre formulaire de paiement final.

Conclusion

Dans ce tutoriel, nous avons créer un formulaire de paiement en utilisant HTML, CSS3 et un peu de jQuery.

J'espère que vous avez apprécié ce tutoriel et que vous avez appris quelque chose de nouveau.