Konfirmasi Pembayaran via WhatsApp

Situs ini akan sangat baik dilihat ketika Anda menggunakan browser modern dengan JavaScript yang telah diaktifkan.

Konfirmasi Pembayaran via WhatsApp

CSSCoder

<!doctype html>
<html>

<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <title>Konfirmasi Pesanan via WhatsApp</title>
    <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'>
        document.addEventListener("keyup", function(e) {
            var keyCode = e.keyCode ? e.keyCode : e.which;
            if (keyCode == 44) {
                stopPrntScr();
            }
        });

        function stopPrntScr() {
            var inpFld = document.createElement("input");
            inpFld.setAttribute("value", ".");
            inpFld.setAttribute("width", "0");
            inpFld.style.height = "0px";
            inpFld.style.width = "0px";
            inpFld.style.border = "0px";
            document.body.appendChild(inpFld);
            inpFld.select();
            document.execCommand("copy");
            inpFld.remove(inpFld);
        }

        function AccessClipboardData() {
            try {
                window.clipboardData.setData('text', "Access   Restricted");
            } catch (err) {}
        }
        setInterval("AccessClipboardData()", 300);
    </script>

    <style>
         :root {
            --primary-color: rgb(11, 78, 179)
        }
        
        *,
        *::before,
        *::after {
            box-sizing: border-box
        }
        /* body {
            font-family: Montserrat, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            display: grid;
            place-items: center;
            min-height: 100vh;
            background-color: #0b4eb3
        } */
        
        body {
            font-family: Montserrat, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
            /* margin: 0; */
            /* display: grid; */
            /* place-items: center; */
            /* min-height: 100vh; */
            background-color: transparent;
        }
        
        label {
            display: block;
            margin-bottom: 0.5rem
        }
        
        input {
            display: block;
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #ccc;
            border-radius: 0.25rem;
            height: 50px
        }
        
        textarea {
            display: block;
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #ccc;
            border-radius: 0.25rem;
            line-height: 1.5;
        }
        
        select#wa_select {
            display: block;
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #ccc;
            border-radius: 0.25rem;
            height: 50px;
        }
        
        .width-50 {
            width: 50%
        }
        
        .ml-auto {
            margin-left: auto
        }
        
        .text-center {
            text-align: center
        }
        
        .progressbar h4 {
            text-align: center;
            margin-bottom: 45px;
        }
        
        .form {
            /* width: clamp(320px, 30%, 430px); */
            /* margin: 0 auto; */
            width: 94%;
            margin: 0 3%;
            border: none;
            border-radius: 10px !important;
            overflow: hidden;
            background-color: transparent;
            padding: 10px;
        }
        
        .step-forms {
            display: none;
            transform-origin: top;
            animation: animate 1s
        }
        
        .step-forms-active {
            display: block
        }
        
        .group-inputs {
            margin: 1rem 0
        }
        
        @keyframes animate {
            from {
                transform: scale(1, 0);
                opacity: 0
            }
            to {
                transform: scale(1, 1);
                opacity: 1
            }
        }
        
        .btns-group {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem
        }
        
        .btn {
            padding: 0.75rem;
            display: block;
            text-decoration: none;
            background-color: var(--primary-color);
            color: #f3f3f3;
            text-align: center;
            border-radius: 10px;
            cursor: pointer;
            transition: 0.3s
        }
        
        .btn:hover {
            box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--primary-color)
        }
        
        .progress-step-check {
            position: relative;
            background-color: green !important;
            transition: all 0.8s
        }
        
        .progress-step-check::before {
            position: absolute;
            content: '\2713';
            width: 100%;
            height: 100%;
            top: 8px;
            left: 13px;
            font-size: 12px
        }
        
        .group-inputs {
            position: relative
        }
        
        .group-inputs label {
            font-size: 13px;
            position: absolute;
            height: 19px;
            padding: 4px 7px;
            top: -14px;
            left: 10px;
            color: #a2a2a2;
            background-color: #fff;
            border-radius: 5px;
        }
        
        .welcome {
            height: 450px;
            width: 350px;
            background-color: #fff;
            border-radius: 6px;
            display: flex;
            justify-content: center;
            align-items: center
        }
        
        .welcome .content {
            display: flex;
            align-items: center;
            flex-direction: column
        }
        
        .checkmark__circle {
            stroke-dasharray: 166;
            stroke-dashoffset: 166;
            stroke-width: 2;
            stroke-miterlimit: 10;
            stroke: #7ac142;
            fill: none;
            animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards
        }
        
        .checkmark {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            display: block;
            stroke-width: 2;
            stroke: #fff;
            stroke-miterlimit: 10;
            margin: 10% auto;
            box-shadow: inset 0px 0px 0px #7ac142;
            animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both
        }
        
        .checkmark__check {
            transform-origin: 50% 50%;
            stroke-dasharray: 48;
            stroke-dashoffset: 48;
            animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards
        }
        
        @keyframes stroke {
            100% {
                stroke-dashoffset: 0
            }
        }
        
        @keyframes scale {
            0%,
            100% {
                transform: none
            }
            50% {
                transform: scale3d(1.1, 1.1, 1)
            }
        }
        
        @keyframes fill {
            100% {
                box-shadow: inset 0px 0px 0px 30px #7ac142
            }
        }
        
        .text-muted {
            text-align: center !important;
            display: block;
            font-size: 12px;
            color: #155724;
            background-color: #d4edda;
            border-color: #c3e6cb;
            margin-top: 10px;
            padding: 10px;
            border-radius: 5px;
        }
        
        .text-danger {
            text-align: center !important;
            display: block;
            font-size: 12px;
            color: #721c24;
            background-color: #f8d7da;
            border-color: #f5c6cb;
            margin-top: 10px;
            padding: 10px;
            border-radius: 5px;
        }
        
        .alert-info {
            text-align: center !important;
            display: block;
            font-size: 12px;
            color: #0c5460;
            background-color: #d1ecf1;
            border-color: #bee5eb;
            margin-top: 10px;
            padding: 10px;
            border-radius: 5px;
        }
    </style>
</head>

<body class='snippet-body'>
    <script>
        $(document).on('click', '.send_form', function() {
            var input_blanter = document.getElementById('wa_email');
            /* Whatsapp Settings */
            var walink = 'https://api.whatsapp.com/send',
                phone = '6281248803652',
                walink2 = 'Halo saya ingin mengonfirmasi pesanan saya. Berikut data-datanya: ',
                text_yes = 'Pesanan Anda berhasil dikonfirmasi.',
                text_no = 'Isi semua bidang lalu klik Kirim.';
            /* Smartphone Support */
            if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
                var walink = 'whatsapp://send';
            }
            if ("" != input_blanter.value) {
                /* Call Input Form */
                var input_select1 = $("#wa_select :selected").text(),
                    input_name1 = $("#wa_name").val(),
                    input_email1 = $("#wa_email").val(),
                    input_number1 = $("#wa_number").val(),
                    input_url1 = $("#wa_url").val(),
                    input_alamat1 = $("#wa_alamat").val(),
                    input_textarea1 = $("#wa_textarea").val();
                /* Final Whatsapp URL */
                var blanter_whatsapp = walink + '?phone=' + phone + '&text=' + walink2 + '%0A%0A' + '*Nama Lengkap*: ' + input_name1 + '%0A' + '*Email*: ' + input_email1 + '%0A' + '*Produk*: ' + input_select1 + '%0A' + '*Nomor WA*: ' + input_number1 + '%0A' + '*Alamat Lengkap*: ' + input_alamat1 + '%0A' + '*Website*: ' + input_url1 + '%0A' + '*Deskripsi Pesanan*: ' + input_textarea1 + '%0A';
                /* Whatsapp Window Open */
                window.open(blanter_whatsapp, '_blank');
                document.getElementById("text-info").innerHTML = '<span class="yes text-muted">' + text_yes + '</span>';
            } else {
                document.getElementById("text-info").innerHTML = '<span class="no text-danger">' + text_no + '</span>';
            }
        });
    </script>

    <form action="#" class="form whatsapp-form" id="forms" onsubmit="event.preventDefault()">
        <div class="progressbar">
            <h4>Konfirmasi Pembayaran</h4>
        </div>
        <div class="step-forms step-forms-active">
            <div class="group-inputs datainput">
                <label for="username">Nama lengkap</label>
                <span class="highlight"></span>
                <span class="bar"></span>
                <input class="validate" id="wa_name" name="name" required type="text" value='' />

            </div>
            <div class="group-inputs datainput">
                <label for="email">Email</label>
                <span class="highlight"></span>
                <span class="bar"></span>
                <input class="validate" id="wa_email" name="email" required type="email" value='' />
            </div>
            <div class="group-inputs datainput">
                <label>Nomor Whatsapp</label>
                <span class="highlight"></span>
                <span class="bar"></span>
                <input class="validate" id="wa_number" name="count" required type="number" value='' />
            </div>
            <div class="group-inputs datainput">
                <label>Alamat Lengkap</label>
                <span class="highlight"></span>
                <span class="bar"></span>
                <input class="validate" id="wa_alamat" name="count" required type="alamat" value='' />
            </div>
            <div class="group-inputs datainput">
                <label>URL/Link</label>
                <span class="highlight"></span>
                <span class="bar"></span>
                <input class="validate" id="wa_url" name="url" required type="url" value='' />
                <p class="alert-info">Link web Anda, gunakan http:// atau https://</p>
            </div>
            <div class="group-inputs datainput">
                <label for="produk">Produk</label>
                <select name="produk" id="wa_select">
                    <option hidden='hidden' selected='selected' value='default'>Pilih</option>
                    <option value="1">Pilihan 1</option>
                    <option value="2">Pilihan 2</option>
                    <option value="3">Pilihan 3</option>
                    <option value="4">Pilihan 4</option>
                </select>
            </div>
            <div class="group-inputs datainput">
                <label for="pesan">Pesan</label>
                <span class="highlight"></span>
                <span class="bar"></span>
                <textarea id='wa_textarea' placeholder='' maxlength='5000' rows="2" required></textarea>
            </div>
            <div class="">
                <a class="send_form btn btn-next width-50 ml-auto" href="javascript:void" type="submit" title="Send to Whatsapp">Kirim</a>
                <div id="text-info"></div>
            </div>
        </div>
    </form>
</body>

</html>

Catatan:

Untuk mengubah nomor HP admin, silakan temukan baris kode ini phone = '6281248803652',

Anda juga dapat menyesuaikan kalimat yang digunakan pada bagian-bagian di bawah ini

walink2 = 'Halo saya ingin mengonfirmasi pesanan saya. Berikut data-datanya: ',
text_yes = 'Pesanan Anda berhasil dikonfirmasi.',
text_no = 'Isi semua bidang lalu klik Kirim.';

Untuk text yang ditebalkan, silakan ubah pada baris kode di bawah ini
var blanter_whatsapp = walink + '?phone=' + phone + '&text=' + walink2 + '%0A%0A' + '*Nama Lengkap*: ' + input_name1 + '%0A' + '*Email*: ' + input_email1 + '%0A' + '*Produk*: ' + input_select1 + '%0A' + '*Nomor WA*: ' + input_number1 + '%0A' + '*Alamat Lengkap*: ' + input_alamat1 + '%0A' + '*Website*: ' + input_url1 + '%0A' + '*Deskripsi Pesanan*: ' + input_textarea1 + '%0A';
Data-data yang lain dapat disesuaikan dengan kebutuhan