مجله خبری هاست ایران » طراحی و توسعه » توسعه وب » ساخت فرم پرداخت با استفاده از HTML ،CSS3 و jQuery
توسعه وب طراحی و توسعه

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

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

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

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

فرم پرداخت

HTML

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

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


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


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

Body

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

Footer

  • دو عدد دکمه

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

CSS

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


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


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

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

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

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

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


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


در ادامه باید به باکس روش‌های پرداخت (payment-method) استایل مورد نظر خود را بدهیم. در پنلی که ایجاد کردیم باید دو روش برای پرداخت در نظر بگیریم؛ پرداخت از کارت‌های اعتباری و پرداخت از PayPal. برای تفکیک این دو روش، باید محیط پنل را به دو ستون مجزا تقسیم کرد و با استفاده از کد flexbox محل قرار گرفتن باکس‌ها را بدون نیاز به اعمال هیچ‌گونه تنظیماتی در جای مناسب قرار دهید. در واقع flexbox تنظیمات مناسبی را به‌طور پیش‌فرض در خود دارد و به‌محض بکار بردن آن، تنظیمات را بر روی عنصر مورد نظر ما اعمال می‌کند.

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

کم‌کم در حال  نزدیک شدن به انتهای کار هستیم. آخرین بخشی که باید به بهبود ظاهر آن بپردازیم فوتر (footer) پنل هست. در این قسمت دو دکمه با نام‌های «back-btn» برای رفتن به مرحله‌ی قبل و «next-btn» برای رفتن به مرحله‌ی بعد وجود دارند. محل قرار گرفتن این دکمه‌ها را نیز با اعمال کد «flexbox» می‌توانیم به‌درستی تنظیم کنیم.

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

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

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

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

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

اکنون کافی است کدهای تایید اعتبار جاوا اسکریپت را همانند زیر در فایل JavaScript قرار دهید:

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

ابزار بهینه سازی وب هاست ایران

افزودن دیدگاه

کلیک برای ثبت دیدگاه