ساخت فرم پرداخت با استفاده از HTML ،CSS3 و jQuery

اگر قصد راه‌اندازی و طراحی وب‌سایت فروشگاهی دارید، مسلماً می‌دانید که علاوه بر قرار دادن محصولات‌تان در وب‌سایت، باید فرم پرداخت یا پنل پرداخت را نیز برای انجام خرید، طراحی کنید. با استفاده از این فرم، مشتریان قادر به خرید خواهند بود.

در این مقاله قصد داریم چگونگی ساخت فرم پرداخت اینترنتی را با استفاده از HTML ،CSS3 و البته اندکی jQuery بررسی کنیم.

فرم پرداخت

HTML

اولین مرحله برای شروع این پروژه، ایجاد ساختاری از کدهای HTML هست.

درواقع ما به یک container برای قرار دادن همه‌چیز در کنار هم نیاز داریم که آن را «checkout-panel» یا «پنل پرداخت» می‌نامیم. این container از دو بخش اصلی بادی (Body) و فوتر (footer) تشکیل می‌شود.

مقاله مرتبط: پنج ویژگی زبان HTML که احتمالا نمی‎دانستید

محتویات این دو بخش را در زیر مشاهده می‌کنید:

Body

نوار پیشرفت (progress bar)
دو روش برای پرداخت
چندین فیلد input برای ورود اطلاعات

Footer

دو عدد دکمه

در زیر فرآیند کدنویسی را برای ساخت پنل پرداخت مشاهده می‌‌کنید:

<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 £۳۴۰.۰۰ 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 £۳۴۰.۰۰ 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>

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

۳۵

۳۶

۳۷

۳۸

۳۹

۴۰

۴۱

۴۲

۴۳

۴۴

۴۵

۴۶

۴۷

۴۸

۴۹

۵۰

۵۱

۵۲

۵۳

۵۴

۵۵

۵۶

۵۷

۵۸

۵۹

۶۰

۶۱

۶۲

۶۳

۶۴

۶۵

<h2 class="title">Checkout</h2>

</div>

</div>

Pay £۳۴۰.۰۰ with credit card

</div>

</label>

Pay £۳۴۰.۰۰ with PayPal

</div>

</label>

</div>

<label for="cardholder">Cardholder's Name</label>

<div>

<label for="date">Valid thru</label>

</div>

<div>

</div>

<label for="cardnumber">Card Number</label>

<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>

CSS

تا اینجای کار زیرساخت پنل خود را با کدهای HTML ساخته‌ایم ولی کارمان هنوز تمام نشده است. اهمیت ظاهر کار کمتر از باطن آن نیست، پس در این زمان باید تلاش خود را بر روی زیباسازی ظاهر پنل پرداخت بگذاریم. که البته این کار، بر عهده‌ی کدهای CSS خواهد بود.

مقاله مرتبط: روش های کاهش حجم کدهای CSS

برای شروع از کدهای زیر استفاده می‌کنیم:

* {
  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;
}

۱۰

۱۱

۱۲

۱۳

۱۴

* {

box-sizing: border-box;

}

html,

body {

font-family: 'Montserrat', sans-serif;

display: flex;

width: ۱۰۰%;

height: ۱۰۰%;

background: #f4f4f4;

justify-content: center;

align-items: center;

}

حالا می‌خواهیم کمی زیبایی به پنل خود بخشیده و آن را با کیفیت ۹۴۰ در ۷۶۶ پیکسل بسازیم. برای انجام این کار، کدهای زیر به ما کمک خواهند کرد.

.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);
}

.checkout-panel {

display: flex;

flex-direction: column;

width: ۹۴۰px;

height: ۷۶۶px;

background-color: rgb(۲۵۵, ۲۵۵, ۲۵۵);

box-shadow: ۰ ۱px ۱px ۰ rgba(۰, ۰, ۰, .۲);

}

اکنون وقت آن رسیده که پیشرفت بیشتری داشته باشیم و استایل مورد نظر خود را بر بخش Body و عناصر موجود در آن اعمال کنیم. در ابتدا فاصله‌ی عناصر از کادر اطراف را با انتخاب Padding مناسب تعیین می‌کنیم و به‌عنوان (title)، استایل می‌دهیم:

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

۱۰

۱۱

.panel-body {

padding: ۴۵px ۸۰px ۰;

flex: ۱;

}

.title {

font-weight: ۷۰۰;

margin-top: ۰;

margin-bottom: ۴۰px;

color: #۲e2e2e;

}

مرحله‌ی بعدی، کار بر روی ظاهر نوار پیشرفت (progress bar) هست. با استفاده از Pseudo elements یا «شبه کد»ها از جمله «:before» و «:after» می‌توان استایل خاصی به نوار پیشرفت داد.

.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';
}

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

۳۵

۳۶

۳۷

۳۸

۳۹

۴۰

۴۱

۴۲

۴۳

۴۴

۴۵

۴۶

۴۷

۴۸

۴۹

۵۰

۵۱

۵۲

۵۳

۵۴

۵۵

۵۶

۵۷

۵۸

۵۹

۶۰

۶۱

۶۲

۶۳

۶۴

۶۵

۶۶

۶۷

۶۸

۶۹

۷۰

۷۱

.progress-bar {

display: flex;

margin-bottom: ۵۰px;

justify-content: space-between;

}

.step {

box-sizing: border-box;

position: relative;

z-index: ۱;

display: block;

width: ۲۵px;

height: ۲۵px;

margin-bottom: ۳۰px;

border: ۴px solid #fff;

border-radius: ۵۰%;

background-color: #efefef;

}

.step:after {

position: absolute;

z-index: -۱;

top: ۵px;

left: ۲۲px;

width: ۲۲۵px;

height: ۶px;

content: '';

background-color: #efefef;

}

.step:before {

color: #۲e2e2e;

position: absolute;

top: ۴۰px;

}

.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(۱):before {

content: 'Delivery';

}

.step:nth-child(۲):before {

right: -۴۰px;

content: 'Confirmation';

}

.step:nth-child(۳):before {

right: -۳۰px;

content: 'Payment';

}

.step:nth-child(۴):before {

right: ۰;

content: 'Finish';

}

با بررسی شبه کدهای بکار رفته برای ایجاد نوار پیشرفت و نحوه‌ی استفاده از آن‌ها، متوجه قدرتشان خواهید شد.

مقاله مرتبط: معرفی ١٤ فرم ساز آنلاین رایگان

در ادامه باید به باکس روش‌های پرداخت (payment-method) استایل مورد نظر خود را بدهیم. در پنلی که ایجاد کردیم باید دو روش برای پرداخت در نظر بگیریم؛ پرداخت از کارت‌های اعتباری و پرداخت از PayPal. برای تفکیک این دو روش، باید محیط پنل را به دو ستون مجزا تقسیم کرد و با استفاده از کد flexbox محل قرار گرفتن باکس‌ها را بدون نیاز به اعمال هیچ‌گونه تنظیماتی در جای مناسب قرار دهید. در واقع 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;
}

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

.payment-method {

display: flex;

margin-bottom: ۶۰px;

justify-content: space-between;

}

.method {

display: flex;

flex-direction: column;

width: ۳۸۲px;

height: ۱۲۲px;

padding-top: ۲۰px;

cursor: pointer;

border: ۱px solid transparent;

border-radius: ۲px;

background-color: rgb(۲۴۹, ۲۴۹, ۲۴۹);

justify-content: center;

align-items: center;

}

.card-logos {

display: flex;

width: ۱۵۰px;

justify-content: space-between;

align-items: center;

}

.radio-input {

margin-top: ۲۰px;

}

input[type='radio'] {

display: inline-block;

}

تا این‌جای کار را بسیار خوب پیش رفتیم. اکنون به بخشی با چندین فیلد input برای ورود اطلاعات کاربران و کارت ‌بانکی آن‌ها می‌رسیم. در این مرحله می‌توانیم رنگ کادر هر فیلد را با استفاده از سلکتور «:focus» تغییر دهیم و برای هر تگ input یک آیکون انتخاب کنیم.

.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;
}

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

۳۵

۳۶

۳۷

۳۸

۳۹

۴۰

۴۱

۴۲

۴۳

۴۴

۴۵

۴۶

۴۷

۴۸

۴۹

۵۰

۵۱

۵۲

۵۳

۵۴

۵۵

۵۶

.input-fields {

display: flex;

justify-content: space-between;

}

.input-fields label {

display: block;

margin-bottom: ۱۰px;

color: #b4b4b4;

}

.info {

font-size: ۱۲px;

font-weight: ۳۰۰;

display: block;

margin-top: ۵۰px;

opacity: .۵;

color: #۲e2e2e;

}

div[class*='column'] {

width: ۳۸۲px;

}

input[type='text'],

input[type='password'] {

font-size: ۱۶px;

width: ۱۰۰%;

height: ۵۰px;

padding-right: ۴۰px;

padding-left: ۱۶px;

color: rgba(۴۶, ۴۶, ۴۶, .۸);

border: ۱px solid rgb(۲۲۵, ۲۲۵, ۲۲۵);

border-radius: ۴px;

outline: none;

}

input[type='text']:focus,

input[type='password']:focus {

border-color: rgb(۱۱۹, ۲۱۹, ۱۱۹);

}

#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: ۲۰px;

justify-content: space-between;

}

.small-inputs div {

width: ۱۸۲px;

}

کم‌کم در حال نزدیک شدن به انتهای کار هستیم. آخرین بخشی که باید به بهبود ظاهر آن بپردازیم فوتر (footer) پنل هست. در این قسمت دو دکمه با نام‌های «back-btn» برای رفتن به مرحله‌ی قبل و «next-btn» برای رفتن به مرحله‌ی بعد وجود دارند. محل قرار گرفتن این دکمه‌ها را نیز با اعمال کد «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;
}

.panel-footer {

display: flex;

width: ۱۰۰%;

height: ۹۶px;

padding: ۰ ۸۰px;

background-color: rgb(۲۳۹, ۲۳۹, ۲۳۹);

justify-content: space-between;

align-items: center;

}

برای دکمه‌ها، رنگ‌های متفاوتی در نظر بگیرید و البته کمی انیمیشن به آن‌ها اضافه کنید. پس زمانی که دکمه در حالت «hover» (قرار دادن نشان‌گر موس بر روی دکمه) قرار می‌گیرد، افکت‌هایی مثل تغییر حالت، تغییر رنگ و … بر روی آن اجرا و البته باعث جذب بیشتر مشتریان خواهد شد.

.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);
}

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

.btn {

font-size: ۱۶px;

width: ۱۶۳px;

height: ۴۸px;

cursor: pointer;

transition: all .۲s ease-in-out;

letter-spacing: ۱px;

border: none;

border-radius: ۲۳px;

}

.back-btn {

color: #f62f5e;

background: #fff;

}

.next-btn {

color: #fff;

background: #f62f5e;

}

.btn:focus {

outline: none;

}

.btn:hover {

transform: scale(۱.۱);

}

به‌عنوان مورد آخر، به نحوه‌ی انتخاب شدن روش پرداخت توجه کنید. با انتخاب روش مورد نظر، تنها کافی نیست که چک باکس آن در حالت «انتخاب‌شده» قرار بگیرد بلکه برای داشتن تجربه‌ی کاربری (UX) جذاب‌تر، بهتر هست با انتخاب روش پرداخت، رنگ کادر باکس آن نیز تغییر کند. این کار را می‌توانید با استفاده از jQuery انجام دهید. پس مراحل زیر را دنبال کنید.

ابتدا باید از خوانده شدن کدهای jQuery خود اطمینان حاصل کرده، سپس همانند کدهای زیر، کلاسی را با نام «blue-border» و یا هر رنگ دیگری به‌جای blue ایجاد کنید.

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

.blue-border {

border: ۱px solid rgb(۱۱۰, ۱۷۸, ۲۵۱);

}

اکنون در فایل جاوا اسکریپت (JavaScript)، کدهای زیر را وارد کنید:

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

$(document).ready(function() {

$('.method').on('click', function() {

$('.method').removeClass('blue-border');

$(this).addClass('blue-border');

});

})

نکته‌ی مهم دیگر این هست که به فیلدهای input، قابلیت تایید اعتبار (Validation) دهید. به این معنا که اگر کاربری بدون تکمیل تمام فیلدها، بر روی دکمه‌ی «بعدی» کلیک کرد با رنگ قرمز کادر فیلد مواجه شود. کاربر با این هشدار متوجه می‌شود که باید فیلد جامانده را نیز پُر کند. برای رسیدن به این هدف، کلاسی با نام warning و ویژگی‌هایی که در زیر مشاهده می‌کنید به فایل CSS خود اضافه کنید.

.warning {
  border-color: #f62f5e;
}

.warning {

border-color: #f62f5e;

}

اکنون کافی است کدهای تایید اعتبار جاوا اسکریپت را همانند زیر در فایل 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');
     }
  })
});

۱۰

۱۱

۱۲

۱۳

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');

}

})

});

با رعایت نکات گفته شده در این مقاله می‌توانید پنل پرداخت مناسبی را برای وب‌سایت خود طراحی کنید. چرا که مشتریان باید از تمام لحظات حضور در سایت‌تان به‌خصوص هنگام خرید، لذت ببرند.

منبع designmodo.com