Unable to load the content

Please attempt to reload the page or alternatively, try accessing it using a different browser.

Build a Modern Credit Card form with Preview using HTML CSS and JS

bySmart UI Studio Published:

In this tutorial, we'll walk through the process of building a visually appealing and responsive credit card preview using HTML and CSS. Enhance your web development skills by exploring the intricacies of card design, from the card number to the CVV, and create an engaging user interface.

Read More: Exceptional Login Form using HTML, CSS and JS | See Magic on Hover

Build-a-Modern-Credit-Card-form-with-Preview-using-HTML-CSS-and-JS
<div class="main-container flex-c">
        <div class="content-box flex-c">
            <div class="preview">
                <div class="card">
                    <div class="front">
                        <div class="title">CREDIT CARD</div>
                        <div id="chip" class="flex-c">
                            <span></span><span></span><span></span><span></span><span></span>
                        </div>
                        <div class="card-number">0000 0000 0000 0000</div>
                        <div class="card-name">Name Surname</div>
                        <div class="validity-box flex-c">
                            <span>VALID THRU</span>
                            <div class="card-validity">00/00</div>
                        </div>
                        <div class="logo flex-c">MasterCard</div>
                    </div>

                    <div class="back">
                        <div class="top-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
                        <div class="strip"></div>
                        <div class="box flex-c">
                            <div class="signature"></div>
                            <div class="card-cvv">000</div>
                        </div>
                        <div class="text">
                            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid perferendis illum vero,
                                porro totam iure cupiditate ipsum placeat nihil, quibusdam architecto beatae atque ipsam
                                corrupti laudantium? Vel cupiditate laborum id, perspiciatis cumque, eaque inventore
                                molestiae eos a, officia maxime nihil mollitia aut hic quia provident!</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quod accusamus delectus
                                eius rerum cum officiis quisquam impedit placeat temporibus!</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-container">
                <form>
                    <div class="field">
                        <label for="number">Card Number</label>
                        <input type="text" id="number" oninput="UpdateAccountNumber(this);" maxlength="19">
                    </div>
    
                    <div class="field">
                        <label for="name">Card Holder</label>
                        <input type="text" id="name" oninput="updateCardHolder(this);" maxlength="25">
                    </div>
                    <section>
                        <div class="field">
                            <label for="validity">Valid upto (MM/YY)</label>
                            <input type="text" id="validity" oninput="updateValidity(this)" maxlength="5">
                        </div>
                        <div class="field">
                            <label for="cvv">CVV</label>
                            <input type="text" id="cvv" oninput="updateCardCvv(this)" maxlength="3">
                        </div>
                    </section>
                </form>
            </div>
        </div>
</div>

Understanding the Card Structure

  • Our credit card preview consists of two sides: the front and the back. The front side includes essential details such as the card title, chip, card number, cardholder name, and card validity. The back side provides additional information like a top text snippet, a signature box, and the CVV.

HTML Structure

  • We've structured the HTML with a main container holding a content box that houses both the card preview and an input form. The card preview is encapsulated within a card element, featuring separate front and back faces.
  • The form includes input fields for the card number, cardholder name, validity, and CVV. Each input field is associated with a label, creating an accessible and user-friendly form.

Form Interactivity

  • To enhance user experience, we've added input validation and formatting functions for the card number, cardholder name, validity, and CVV. These functions update the corresponding sections of the card preview in real-time as the user enters information.
:root {
    --card-height: 180px;
}

.flex-c {
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-container {
    min-height: 100vh;
    min-width: 450px;
}

.content-box {
    position: relative;
    color: #ffffff;
    height: 605px;
    font-family: 'Calibri';
    align-items: flex-end;
}

.preview {
    perspective: 1000px;
    position: absolute;
    top: 15px;
}

.card {
    width: 350px;
    height: var(--card-height);
    transition: transform 1s;
    transform-style: preserve-3d;
    border-radius: 8px;
}

.flipped,
.preview:hover .card {
    transform: rotateY(-180deg);
}

.front,
.back {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #2c2c2c;
    backface-visibility: hidden;
    border-radius: 8px;
    overflow: hidden;
    color: white;
}

.front::after,
.back::after,
.front::before,
.back::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.5;
}

.front::after {
    background: #1a1a1a;
    border-radius: 0% 0% 0 160px;
    transform: translate(50%, -30%);
    top: 0;
}

.front::before {
    background: #3d3d3d;
    border-radius: 0 160px 0 0;
    transform: translate(-50%, 50%);
}

.title {
    position: absolute;
    right: 0;
    z-index: 1;
    letter-spacing: 1.5px;
    padding: 1rem;
}

#chip {
    top: 10%;
    position: absolute;
    background: #e0ab89;
    width: 15%;
    height: 18%;
    border-radius: 5px;
    margin-left: 15px;
}

#chip span {
    position: absolute;
    background: #e0ab89;
    border: 1px solid black;
}

#chip span:nth-child(1) {
    height: 100%;
    width: 40%;
    border-top: none;
    border-bottom: none;
}

#chip span:nth-child(2) {
    height: 60%;
    width: 40%;
    left: 0;
    border-left: none;
    border-radius: 0 5px 5px 0;
}

#chip span:nth-child(3) {
    height: 60%;
    width: 40%;
    border-right: none;
    border-radius: 5px 0 0 5px;
    right: 0;
}

#chip span:nth-child(4) {
    width: 100%;
    border: none;
    border-bottom: 1px solid black;
}

#chip span:nth-child(5) {
    aspect-ratio: 1/1;
    width: 25%;
    border-radius: 2px;
}

.card-number,
.card-name,
.validity-box {
    position: absolute;
    margin-left: 15px;
}

.card-number {
    top: 42%;
    letter-spacing: 2px;
    font-size: 18px;
    z-index: 1;
}

.card-name {
    bottom: 8%;
    font-size: 14px;
    letter-spacing: 2px;
}

.validity-box {
    left: 40%;
    bottom: 25%;
    width: max-content;
    font-size: 16px;
    z-index: 1;
    letter-spacing: 2px;
}

.validity-box span{
    font-size: 6px;
    letter-spacing: 2px;
    color: #ffffffba;
    width: min-content;
}

.validity-box span::after{
    margin: 0 2px;
    content: '►';
}

.logo {
    position: absolute;
    font-size: 8px;
    width: 20%;
    height: 20%;
    font-weight: bold;
    letter-spacing: 1px;
    bottom: 4%;
    right: 0%;
}

.logo::before,
.logo::after {
    content: '';
    position: absolute;
    width: 50%;
    aspect-ratio: 1/1;
    border-radius: 50%;
}

.logo::before {
    background: rgba(255, 0, 0, 0.525);
    left: 10%
}

.logo::after {
    background: rgba(255, 213, 0, 0.584);
    right: 10%;
}

.back {
    transform: rotateY(-180deg);
    z-index:1;
}

.top-text {
    font-size: 5px;
    padding: 5px 0 1px 5px;
    color: #ffffff99;
}

.strip {
    width: 100%;
    height: 20%;
    background: black;
    position: relative;
    z-index: 1;
}

.box {
    width: 90%;
    height: 20%;
    position: relative;
    background: white;
    margin: 10px auto;
    border-radius: 2px;
    overflow: hidden;
    z-index: 1;
}

.signature {
    width: 85%;
    height: 100%;
    background: repeating-linear-gradient(300deg, #e7e7e7 -2px, #e7e7e7 3px, #cccccc 0px, #cccccc 8px);
}

.card-cvv {
    width: 15%;
    color: black;
    letter-spacing: 2px;
    text-align: center;
}

.text {
    font-size: 6px;
    z-index: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    grid-gap: 10px;
    color: #ffffff99;
    padding: 10px;
}

.form-container {
    width: 400px;
    height: 500px;
    border: 1px solid #1e1e1e;
    padding: 20px;
    background: linear-gradient(45deg, #000000, #0a121f);
    border-radius: 10px;
}

form {
    display: flex;
    flex-direction: column;
    width: 100%;
    transform: translateY(calc(var(--card-height) / 2 + 15px));
    gap: 30px;
}

form section {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.field {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    font-size: 12px;
}

input {
    font-size: 16px;
    width: 100%;
    border: none;
    border-bottom: 1px solid #ffffff42;
    padding: 10px 0 4px;
    background: transparent;
    color: #ffffffb8;
    caret-color: white;
}

input:focus {
    outline: none;
}

Our styling focuses on creating a sleek and modern look for the credit card. We've utilized CSS to design the card faces, incorporate a realistic chip, style the card number, and display the cardholder's name and validity information. The back face includes additional styling for the top text, signature box, and CVV.

Read More: Enhance Your Website's Aesthetics with Stylish Login Signup Form

  • Stylish content box with a border, gradient background, and border-radius.
  • Credit card preview with a flip animation effect on hover.
  • Realistic chip design with five segments using spans.
  • Dynamic positioning of card details such as number, name, and validity.
  • Eye-catching logo with a gradient effect and circular elements.
  • Back face with a top text, signature, and CVV box.
  • Input form styled with a grid layout, custom fields, and minimalistic design.
  • Input fields with subtle animations on focus and a transparent background.
  • Carefully chosen color scheme for text and background to ensure readability.
  • Overall, a visually appealing and modern design for a credit card preview form.
const card = document.querySelector('.card')
const cardNumber = document.querySelector('.card-number')
const cardHolder = document.querySelector('.card-name')
const cardValidity = document.querySelector('.card-validity')
const cardCvv = document.querySelector('.card-cvv')
const inputElement = document.querySelectorAll('input')
const cvvInput = document.querySelector('#cvv');

const dummy = {
    number: '0000 0000 0000 0000',
    name: 'Name Surname',
    validity: '00/00',
    cvv: '000'
}

inputElement.forEach((elem) => {
    elem.addEventListener('input', () => {
        if (elem.value.trim() === '') {
            const key = elem.getAttribute('id');
            const className = 'card-' + key;
            document.querySelector(`.${className}`).innerText = dummy[key]
        }
    })
})

function UpdateAccountNumber(input) {

    let inputValue = input.value.replace(/\D/g, '');
    let formattedValue = '';
    for (let i = 0; i < inputValue.length; i++) {
        if (i > 0 && i % 4 === 0) {
            formattedValue += '\u00A0';
        }
        formattedValue += inputValue[i];
    }
    input.value = formattedValue;
    cardNumber.innerText = formattedValue
}

function updateCardHolder(input) {
    let inputValue = input.value.replace(/[^A-Z a-z]/g, '');
    input.value = inputValue;
    cardHolder.innerText = inputValue
}

function updateValidity(input) {
    let inputValue = input.value.replace(/\D/g, '');
    let formattedValue = '';

    for (let i = 0; i < inputValue.length; i++) {
        const digit = parseInt(inputValue[i]);

        if ((i === 0 && digit > 1) || (i === 1 && digit > 2 && parseInt(inputValue[0]) != 0)) {
            break;
        }
        else if (i === 2) {
            formattedValue += '/';
        }
        formattedValue += digit;
    }
    input.value = formattedValue;
    cardValidity.innerText = formattedValue
}

function updateCardCvv(input) {
    let inputValue = input.value.replace(/\D/g, '');
    input.value = inputValue;
    cardCvv.innerText = inputValue
}

cvvInput.addEventListener('focus', () => card.classList.add('flipped'))
cvvInput.addEventListener('blur', () => card.classList.remove('flipped'))

Variable Declarations

  • card: Selects the DOM element with the class 'card'.
  • cardNumber, cardHolder, cardValidity, cardCvv: Select specific elements within the card for updating.
  • inputElement: Selects all input elements on the page.
  • cvvInput: Selects the input element with the id 'cvv'.
  • dummy: Object containing dummy data for the card.

Event Listeners

  • The code uses event delegation to listen for 'input' events on all input elements.
  • When an input event occurs, it checks if the input value is empty. If it is, it updates the corresponding card element with the dummy data.

Functions

  • UpdateAccountNumber(input): Formats the card number by adding spaces after every four digits.
  • updateCardHolder(input): Allows only alphabetical characters for the cardholder's name.
  • updateValidity(input): Formats the input as MM/YY and ensures valid month and year combinations.
  • updateCardCvv(input): Allows only numeric characters for the CVV.

CVV Animation

  • Event listeners for focus and blur on the CVV input toggle the 'flipped' class on the card element, providing a visual flip effect when entering the CVV.

By following this tutorial, you'll gain insights into creating an interactive and visually appealing credit card preview using HTML and CSS. Elevate your web development skills as you explore the balance between design aesthetics and functionality, making your projects stand out. Dive into the world of UI design and form interactivity to create a seamless user experience.

Start building your own credit card preview today and bring a touch of sophistication to your web applications!

Download
Tags:

You might like

Previous Post Next Post
Share to other apps
Copy Post Link