Skip to content

Instantly share code, notes, and snippets.

@joglomedia

joglomedia/form.html

Created November 7, 2024 10:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save joglomedia/77851206d7dc6344f589d5f38903be04 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save joglomedia/77851206d7dc6344f589d5f38903be04 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. joglomedia created this gist Nov 7, 2024.
    180 changes: 180 additions & 0 deletions form.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,180 @@
    <style type="text/css">
    .kontak-form .row .kontak-info {
    color: #fff;
    background-color: #3498db;
    }
    .kontak-form .row .kontak-pesan {
    background-color: #c1ebe7;
    }
    .kontak-form .kontak-content {
    margin-bottom: 1.5rem;
    }
    .kontak-form figure {
    text-align: center;
    }
    .kontak-form figure img {
    max-width: 100%;
    height: auto;
    border: none;
    -webkit-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    }
    .kontak-form figure figcaption {
    padding: 0;
    margin: 10px 0;
    text-align: center;
    }
    .kontak-form figure figcaption span {
    color: #7a7a7a;
    font-size: 1.2em;
    }
    .kontak-form figure figcaption span {
    color: #7a7a7a;
    font-size: 1.2em;
    }
    .kontak-form h2.kontak-title {
    margin-bottom: 1rem !important;
    }
    .kontak-form .row.popular {
    border-style: solid;
    border-width: 0 0 4px 0;
    border-color: rgba(251,197,49,1);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    }
    .kontak-info h4 {
    color: #fff;
    }
    span.text-required {
    color: #ff0000;
    }
    #kontak-form label {
    margin-bottom: 0.5rem;
    font-size: 1.2em;
    font-weight: 700;
    }
    #kontak-form textarea {
    height: 160px;
    }
    .kontak-lokasi-map {
    height: 100%;
    width: 100%;
    }
    </style>
    <div class="kontak-form container">
    <!--<div class="row">
    <div class="col-lg-12">
    <div class="isotope-wrapper">-->
    <div class="row popular my-5">
    <div class="col-md-6 kontak-info py-5 px-5">
    <!-- <div class="box_grid"> -->
    <div class="wrapper">
    <div class="kontak-content">
    <h4>Muhibbin Baitullah | Agen Travel Umroh & Haji Furoda Amanah Terpercaya</h4>
    <p>Jl. Muara Angke Blok Ambalat No.51, RT.9/RW.021, Pluit, Kec. Penjaringan, Jkt Utara, Daerah Khusus Ibukota Jakarta 14450</p>
    </div>
    <div class="kontak-content">
    <h4>Jam Operasional</h4>
    <p>
    Senin – Jum’at : 08.30 – 16.30<br/>
    Sabtu : 09.00 – 14.00
    </p>
    </div>
    <div class="kontak-content">
    <h4>Info Kontak</h4>
    <ul>
    <li>Telp. 021 – 00 00 000</li>
    <li>HP. 0000 000 000</li>
    <li>email. emailsaya@domainsaya</li>
    </ul>
    </div>
    <div class="kontak-content">
    <h4>Cabang Solo</h4>
    <p>-</p>
    <ul>
    <li>Telp. 021 – 00 000 00</li>
    <li>Hp. 000 000 000</li>
    </ul>
    </div>
    </div>
    <!-- </div> -->
    </div>

    <div class="col-md-6 kontak-pesan py-5 px-5">
    <!-- <div class="box_grid"> -->
    <div class="wrapper">
    <div id="kontak-form">
    <h2 class="kontak-title">Kirimkan Pesan</h2>
    <p>Fields marked with an <span class="text-required">*</span> are required</p>
    <form action="#" method="post" id="contactform" class="contactform">
    <div class="row">
    <div class="col-md-12">
    <div class="form-group">
    <label for="name">Nama Lengkap <span class="text-required">*</span></label>
    <input type="text" name="name" id="name" class="form-control" placeholder="Nama Lengkap" required="">
    </div>
    </div>
    </div>
    <div class="row">
    <div class="col-md-12">
    <div class="form-group">
    <label for="phone">Nomor HP/WA <span class="text-required">*</span></label>
    <input type="text" name="phone" id="phone" class="form-control" placeholder="Nomor HP/WA" required="">
    </div>
    </div>
    </div>
    <div class="row">
    <div class="col-md-12">
    <div class="form-group">
    <label for="email">Email <span class="text-required">*</span></label>
    <input type="email" name="email" id="email" class="form-control" placeholder="Email" required="">
    </div>
    </div>
    </div>
    <div class="row">
    <div class="col-md-12">
    <div class="form-group">
    <label for="message">Pesan <span class="text-required">*</span></label>
    <textarea name="message" id="message" class="form-control" placeholder="Pesan" required=""></textarea>
    </div>
    </div>
    </div>
    <div class="row">
    <div class="col-md-12">
    <div class="form-group">
    <input type="hidden" name="cswa-number" id="cswa-number" class="cswa-number" value="+6281268881031">
    <button type="submit" id="kirim-form" class="btn btn-primary">Kirim Pesan</button>
    </div>
    </div>
    </div>
    </form>
    </div>
    </div>
    <!-- </div> -->
    </div>
    </div>

    <div class="row py-3">
    <div class="col-lg-12">
    <div class="wrapper">
    <h2 class="lokasi-title">Kantor Pusat Kami</h2>
    </div>
    </div>
    </div>
    <div class="row py-3">
    <div class="col-lg-12 kontak-lokasi-map">
    <!-- <div class="box_grid"> -->
    <div class="wrapper">
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15868.624844509699!2d106.7710366!3d-6.1096596!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e6a1d64d9bc680d%3A0xf67d7e15a9f00b44!2sMuhibbin%20Baitullah%20%7C%20Agen%20Travel%20Umroh%20%26%20Haji%20Furoda%20Amanah%20Terpercaya!5e0!3m2!1sen!2sid!4v1730976925678!5m2!1sen!2sid" width="auto" height="auto" style="border:10px;height:auto;min-height:360px !important;" allowfullscreen="" loading="lazy"></iframe>
    </div>
    <!-- </div> -->
    </div>
    </div>
    <!--</div>
    </div>
    </div>-->
    </div>
    29 changes: 29 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    /** Contact Form Kirim Pesan WA */
    $("#kirim-form").keydown(function(e){
    if (e.which===13) { e.preventDefault(); }
    });

    $(document).on("click", "#kirim-form", function () {
    var name = document.getElementById("name").value,
    email = document.getElementById("email").value,
    phone = document.getElementById("phone").value,
    message = document.getElementById("message").value,
    wa_text = encodeURI("Halo, saya ingin bertanya tentang: ") + "%0A%0A##########%0A" +
    encodeURI(message) + "%0A##########%0A%0A" + encodeURI("Nama: ") + name + "%0A" +
    encodeURI("Nomor HP/WA: ") + phone + "%0A" + encodeURI("Email: ") + email + "%0A%0A" + encodeURI("Terimakasih.");

    if (name == "" || email == "" || phone == "" || message == "") {
    console.log("Please fill all the fields");
    } else {
    var b = document.getElementById("cswa-number").value,
    c = wa_text,
    d = "https://web.whatsapp.com/send",
    e = b,
    f = "&text=" + c;
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    var d = "whatsapp://send";
    }
    var g = d + "?phone=" + e + f;
    window.open(g, "_blank");
    }
    });