Skip to content

Instantly share code, notes, and snippets.

@joglomedia

joglomedia/form.html

Created November 7, 2024 10:58
Show Gist options
  • Save joglomedia/77851206d7dc6344f589d5f38903be04 to your computer and use it in GitHub Desktop.
Save joglomedia/77851206d7dc6344f589d5f38903be04 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
form.html
<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>
Raw
script.js
/** 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");
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment