Beranda  ›  JavaScript
Pada kesempatan kali ini Panduan Code akan berbagi script form order whatsaap dengan contoh untuk implementasi ke web travel. Script ini ada...

Script Form Order Whatsapp Studi kasus Web Travel

Author Senin, November 13, 2023
Daftar Isi [Tampil]

    Pada kesempatan kali ini Panduan Code akan berbagi script form order whatsaap dengan contoh untuk implementasi ke web travel.

    Script ini adalah sebuah form dengan beberapa kolom input yang disesuaikan dengan jasa travel, kemudian form ini akan mengirim data tersebut ke nomor whatsapp admin yang telah ditentukan.

    Dan perlu Anda pahami juga bahwa script order wa ini dapat Anda ubah-ubah lagi menjadi script yang Anda inginkan.

    Cara Membuat Script Form Order Whatsapp

    Script From Order Whatsapp Studi kasus Web Travel

    Panduan Code akan membuat contoh script sederhana nya dalam satu halaman html, yang mana nantinya bisa Anda rubah sendiri dan pasang ke web yang Anda inginkan.

    Baik langsung saja Anda copy paste script tersebut dan coba jalankan di browser Anda terlebih dahulu.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Custom Form Order Whatsapp</title>
        <style>
            body {
                font-family: 'Roboto', Arial, sans-serif
            }
            .none {
                display: none
            }
            /* Input Field CSS */
            .kolominput {
                position: relative;
                margin: 5px 0 20px
            }
            .kolominput p {
                font-size: 12px;
                background: #eee;
                display: inline-block;
                padding: 5px 15px;
                border-radius: .5rem
            }
            .form-wa textarea {
                min-height: 120px
            }
            .kolominput select {
                padding: 12px 0;
                color: #555;
                font-size: 14px;
                width: 100%;
                border: 0;
                border-bottom: 1px solid #ddd;
                outline: none;
                background: #fff
            }
            .kolominput input,
            .kolominput textarea {
                font-size: 15px;
                padding: 15px 0;
                display: block;
                width: 100%;
                border: none;
                border-bottom: 1px solid #ddd
            }
            .kolominput input:focus,
            .kolominput textarea:focus {
                outline: none
            }
            .kolominput label {
                color: #999;
                font-size: 14px;
                font-weight: 400;
                position: absolute;
                pointer-events: none;
                left: 0;
                top: 0px;
                transition: .2s ease all
            }
            .kolominput input:focus~label,
            .kolominput input:valid~label,
            .kolominput textarea:focus~label,
            .kolominput textarea:valid~label {
                top: -10px;
                font-size: 14px;
                color: #21a51f
            }
            .bar {
                position: relative;
                display: block;
                width: 100%
            }
            .bar:before,
            .bar:after {
                content: '';
                height: 2px;
                width: 0;
                bottom: 1px;
                position: absolute;
                background: #21a51f;
                transition: .2s ease all
            }
            .bar:before {
                left: 50%
            }
            .bar:after {
                right: 50%
            }
            .kolominput input:focus~.bar:before,
            .kolominput input:focus~.bar:after,
            .kolominput textarea:focus~.bar:before,
            .kolominput textarea:focus~.bar:after {
                width: 50%
            }
            .indigox {
                background: #3f51b5
            }
            .orangex {
                background: #ff9800
            }
            .pinkx {
                background: #e91e63
            }
            .bluex {
                background: #2196F3
            }
            .purplex {
                background: #9c27b0
            }
            .redx {
                background: #F44336
            }
            .greenx {
                background: #4CAF50
            }
            .highlight {
                position: absolute;
                height: 50%;
                width: 100px;
                top: 25%;
                left: 0;
                pointer-events: none;
                opacity: .5
            }
            .kolominput input:focus~.highlight,
            .kolominput textarea:focus~.highlight {
                animation: inputHighlighter .3s ease
            }
            .kolominput input:focus~label,
            .kolominput input:valid~label,
            .kolominput textarea:focus~label,
            .kolominput textarea:valid~label {
                top: -10px;
                font-size: 13px;
                color: #21a51f
            }
            form.form-wa {
                box-shadow: 0 1px 6px rgba(32, 33, 36, .28);
                border-radius: .5rem;
                padding: 20px;
                box-sizing: border-box;
                color: #444;
                font-size: 14px;
                line-height: 1.5;
            }
            .form-wa a.send_form {
                color: #fff;
                background: #21a51f;
                text-decoration: none;
                display: inline-block;
                padding: 10px 25px;
                border-radius: .3rem;
                font-weight: 700;
                letter-spacing: .5px;
                font-size: 15px;
            }
            #text-info span {
                display: block;
                padding: 10px 15px;
                text-align: center;
                font-weight: 700;
                margin: 15px 0;
                border-radius: .5rem;
            }
            #text-info span.yes {
                background: #c6ffc5;
                color: #0ea904;
            }
            #text-info span.no {
                background: #ffc5c5;
                color: #ce0404;
            }
            .form-wa {
                width: 100%;
                max-width: 700px;
                margin: 0 auto;
                box-sizing: border-box;
            }
        </style>
        <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
    </head>
    <body>
        <form class="form-wa">
            <div class="kolominput">
                <input class="validate" id="wa_name" name="name" required="" type="text" value='' />
                <span class="highlight"></span><span class="bar"></span>
                <label>Nama Lengkap:</label>
            </div>
            <div class="kolominput">
                <input class="validate" id="wa_email" name="email" required="" type="email" value='' />
                <span class="highlight"></span><span class="bar"></span>
                <label>Alamat Email:</label>
            </div>
            <div class="kolominput">
                <textarea id='wa_address_pickup' placeholder='' maxlength='5000' row='1' required=""></textarea>
                <span class="highlight"></span><span class="bar"></span>
                <label>Alamat Penjemputan:</label>
            </div>
            <div class="kolominput">
                <textarea id='wa_address_destination' placeholder='' maxlength='5000' row='1' required=""></textarea>
                <span class="highlight"></span><span class="bar"></span>
                <label>Alamat Tujuan:</label>
            </div>
            <div class="kolominput">
                <input class="validate" id="wa_datetime" name="datetime" required="" type="datetime-local" value='' />
                <span class="highlight"></span><span class="bar"></span>
                <label>Tanggal & Jam Penjemputan:</label>
            </div>
            <div class="kolominput">
                <input class="validate" id="wa_passengers" name="passengers" required="" type="number" value='' />
                <span class="highlight"></span><span class="bar"></span>
                <label>Jumlah Penumpang:</label>
            </div>
            <div class="kolominput">
                <input class="validate" id="wa_phone" name="phone" required="" type="tel" value='' />
                <span class="highlight"></span><span class="bar"></span>
                <label>No. Telpon:</label>
            </div>
            <div class="kolominput">
                <textarea id='wa_items' placeholder='' maxlength='5000' row='1' required=""></textarea>
                <span class="highlight"></span><span class="bar"></span>
                <label>Barang yang Dibawa:</label>
            </div>
            <a class="send_form" href="javascript:void" type="submit" title="Send to Whatsapp">Send to Whatsapp</a>
            <div id="text-info"></div>
        </form>
        <script>//<![CDATA[
            $(document).on('click', '.send_form', function () {
                var input_email = document.getElementById('wa_email');
                // Whatsapp Settings
                var walink = 'https://wa.me',
                    phone = '6285972737000',
                    walink2 = '🌏INFO PNP GANI TRAVEL🌏',
                    text_yes = 'Terkirim.',
                    text_no = 'Isi semua Formulir lalu klik Send.';
                // Smartphone Support
                if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
                    walink = 'whatsapp://send';
                }
                if (input_email.value !== "") {
                    // Get input values
                    var input_name = $("#wa_name").val(),
                        input_email = $("#wa_email").val(),
                        input_address_pickup = $("#wa_address_pickup").val(),
                        input_address_destination = $("#wa_address_destination").val(),
                        input_datetime = $("#wa_datetime").val(),
                        input_passengers = $("#wa_passengers").val(),
                        input_phone = $("#wa_phone").val(),
                        input_items = $("#wa_items").val();
                    // Validate Date and Time
                    var isValidDatetime = /^(\d{4}-\d{2}-\d{2}T\d{2}:\d{2})$/.test(input_datetime);
                    if (!isValidDatetime) {
                        alert("Invalid Date and Time format. Please use the correct format.");
                        return;
                    }
                    // Validate Number of Passengers
                    if (isNaN(input_passengers) || input_passengers <= 0) {
                        alert("Invalid number of passengers. Please enter a valid number.");
                        return;
                    }
                    // Construct Whatsapp Message
                    var message = `${walink2}%0A%0A*Nama* : ${input_name}%0A*Email Address* : ${input_email}%0A*Alamat Penjemputan* : ${input_address_pickup}%0A*Alamat Tujuan* : ${input_address_destination}%0A*Tanggal & Jam Penjemputan* : ${input_datetime}%0A*Jumlah Penumpang* : ${input_passengers}%0A*No Telp* : ${input_phone}%0A*Barang yang Dibawa* : ${input_items}%0A`;
                    // Construct Whatsapp URL
                    var pesan_order = walink + '?phone=' + phone + '&text=' + walink2 +
                         '%0A%0A' + '👤 Nama Lengkap: ' + input_name +
                         '%0A%0A' + '📧 Email Address: ' + input_email +
                         '%0A%0A' + '📍 Alamat Penjemputan: ' + input_address_pickup +
                         '%0A%0A' + '📍 Alamat Tujuan: ' + input_address_destination +
                         '%0A%0A' + '📅 Tanggal dan Jam Penjemputan: ' + input_datetime +
                         '%0A%0A' + '👥 Jumlah Pengumpang: ' + input_passengers +
                         '%0A%0A' + '☎️ No. Telp: ' + input_phone +
                         '%0A%0A' + '📦 Barang Yang Dibawa: ' + input_items + '%0A';
                    // Open Whatsapp Window
                    window.open(pesan_order, '_blank');
                    $("#text-info").html('<span class="yes">' + text_yes + '</span>');
                } else {
                    $("#text-info").html('<span class="no">' + text_no + '</span>');
                }
            }); 
          //]]>
          </script>
    </body>
    </html>

    Penjelasan Script Form Order Whastaap

    Perlu Anda pahami terlebih dahulu bahwa script custom pesanan lewat whatsapp tersebut memerlukan library jquery. Jika pada website atau script Anda tidak terdapat library jquery maka script ini tidak akan berfungsi, oleh sebab itu pada contoh kali ini panduan code menyertakan library jquerty tersebut sebagai script eksternal.

    Kemudian pastikan kode css dari script tersebut Anda masukan kedalam file css website Anda dan di undang/include pada halaman yang terdapat form order whatsaap nya.

    Lalu perhatikan pada bagian setiap kolom input pada form tersebut memiliki id yang berbeda-beda tujuan nya adalah untuk memanggil fungsi tertentu yang akan di jalankan oleh javascript pada script tersebut.

    Anda dapat merubah setiap kolom input yang ada menjadi yang Anda inginkan, namun perhatikan bahwa Anda juga perlu mengubah id pada javascript yang terdapat pada script tersebut, id yang terdapat pada kolom input haruslah sama dengan id yang terdapat pada javascript di script tersebut.

    Dan perlu Anda ketahui juga bahwa pada script tersebut format pesan whatsaap yang disetting memiliki icon atau emoji tertentu, nah emoji tersebut hanya akan tampil dan berjalan dengan normal ketika dibuka menggunakan perangkap mobile/hp. Sedangkan jika dibuka melalui perangkat desktop maka emoji nya tidak akan tampil dan hanya akan menjadi icon x atau tidak terdefinisi. Namun pesan whatsapp nya akan tetap bisa terkirim.

    Untuk lebih lanjutnya silahkan Anda eksplorasi sendiri dan coba langsung script tersebut agar Anda bisa lebih paham.
    Coba cari lagi apa yang ada inginkan pada kolom berikut:
    DMCA.com Protection Status
    Donasi
    Bantu Apresiasi Bantu berikan apresiasi jika artikelnya dirasa bermanfaat agar penulis lebih semangat lagi membuat artikel bermanfaat lainnya. Terima kasih.
    Donasi
    Hallo sobat panduan code, Anda dapat memberikan suport kepada kami agar lebih semangat dengan cara dibawah ini.

    Dana : 085972737000
    PAYPAL : Panduan Code
    Done
    Color Picker
    Silahkan gunakan tools color picker berikut gratis untuk Anda, salam Admin Panduan Code.

    Pilih Warna

    Dapatkan Kode Warna

    Done