Cara Membuat Kontak Form WhatsApp Responsive Di Blogger

Updated : Apr 28, 2019 in Blogging

Cara Membuat Kontak Form WhatsApp Responsive Di Blogger


Cara Membuat Kontak Form WhatsApp Responsive Di Blogger

1. Silahkan Login ke Blogger / Theme /Edit Theme.

2. Letak kan Script Berikut di atas </head>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

3. Terapkan script CSS ini di atas </stlye>

 div#kangniwebid {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -99;
opacity: 0;
transition:.5s;
background: rgba(0,0,0,0.5);
}
div#kangniwebid.active{
z-index: 9999;
opacity: 1;
}
div#whatsapp {
position: fixed;
top: 50%;
left: 50%;
max-width: 480px;
width: 95%;
background: #fff;
transform: translate(-50%,-50%);
z-index: -1;
opacity: 0;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.5);
transition:.5s;
}
div#whatsapp.active {
z-index: 999999;
opacity: 1;
}
p.wa-title {
margin: 0;
padding: 15px;
font-size: 16px;
text-align: center;
font-weight: bold;
background: #2ecc71;
color: #fff;
}
.wa-body {
padding: 14px;
display: flex;
flex-wrap: wrap;
width: 100%;
box-sizing: border-box;
}
.wa-input {
border: 1px solid #ddd;
border-radius: 3px;
line-height: 32px;
padding: 0 10px;
box-shadow: inset 0 0 2px rgba(0,0,0,0.1);
}
.wa-input.bagi {
width: 48%;
margin: 1%;
margin-bottom: 10px;
}
.wa-input.full {
width: 98%;
resize: none;
min-height: 150px;
margin: 0 1%;
}
a.submit {
line-height: 24px;
padding: 10px 15px;
width: 100%;
max-width: 200px;
text-align: center;
background: #2ecc71;
margin: 14px auto 0 auto;
display: block;
color: #fff;
border-radius: 3px;
cursor: pointer;
}
span.wa-x {
position: absolute;
top: 5px;
right: 5px;
height: 30px;
width: 30px;
/* background: #222; */
border: 2px solid #fff;
border-radius: 50px;
corsor:pointer;
}
a#wa-icon {
position: fixed;
bottom: 30px;
left: 30px;
line-height: 0;
border-radius: 30px;
background: #2ecc71;
padding: 0;
height: 60px;
width: 60px;
color: #fff;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
/* filter: invert(100%); */
z-index:99;
}
a#wa-icon::before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
span.wa-x::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
height: 3px;
width: 50%;
background: #fff;
transform: translate(-50%,-50%);
}
@media (max-width: 480px){
.wa-input.bagi {
width: 100%;
margin: 0;
margin-bottom: 10px;
}
a#wa-icon {bottom:10px;left:10px;}
.wa-input.full {
width: 100%;
margin: 0;
}
} 

4. Letakkan Script berikut sebelum </body>

 <a class='fa fa-whatsapp fa-3x animated infinite rubberBand' href='javascript:void(0);' id='wa-icon' onclick='openModal()'></a>
<div class='suryapero' id='suryapero'>
</div>
<div id='whatsapp'>
<span class='wa-x' onclick='closeModal()'></span>
<p class='wa-title'>Contact Form</p>
<div class='wa-body'>
<input class='tujuan' type='hidden' value='ISI NO WA KAMU'/>
<!-- No. WhatsApp -->
<input class='nama wa-input bagi' placeholder='Nama Lengkap..' type='text'/>
<input class='email wa-input bagi' placeholder='Alamat E-mail..' type='email'/>
<textarea class='pesan wa-input full' placeholder='Pesan..'></textarea>
<a class='submit'>Kirim</a>
</div>
</div> 

5. Letak kan di atas kode di atas atau sebelum code </body>

  <script type='text/javascript'>
function closeModal() {
document.getElementById('suryapero').classList.remove('active')
document.getElementById('whatsapp').classList.remove('active')
}
function openModal() {
document.getElementById('suryapero').classList.add('active')
document.getElementById('whatsapp').classList.add('active')
}

// Onclick Whatsapp Sent!
$(‘#whatsapp .submit’).click(WhatsApp);

var reg = /^([A-Za-z0-9_-.])+@([A-Za-z0-9_-.])+.([A-Za-z]{2,4})$/;
function WhatsApp() {
var ph = ”;
if ($(‘#whatsapp .nama’).val() == ”) { // Cek Nama
ph = $(‘#whatsapp .nama’).attr(‘placeholder’);
alert(‘Silahkan tulis ‘ + ph);
$(‘#whatsapp .nama’).focus();
return false;
} else if ($(‘#whatsapp .email’).val() == ”) { // Cek Email
ph = $(‘#whatsapp .email’).attr(‘placeholder’);
alert(‘Silahkan tulis ‘ + ph);
$(‘#whatsapp .email’).focus();
return false;
} else if (reg.test($(‘#whatsapp .email’).val()) == false) { // Cek Validasi Email
alert(‘Alamat E-mail tidak valid.’);
$(‘#whatsapp .email’).focus();
return false;
} else if ($(‘#whatsapp .pesan’).val() == ”) { // Cek Pesan
ph = $(‘#whatsapp .pesan’).attr(‘placeholder’);
alert(‘Silahkan tulis ‘ + ph);
$(‘#whatsapp .pesan’).focus();
return false;
} else {
if (!confirm(“Sudah menginstall WhatsApp?”)) {
window.open(“https://www.whatsapp.com/download/”);
} else {
// Check Device (Mobile/Desktop)
var url_wa = ‘https://web.whatsapp.com/send’;
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
url_wa = ‘whatsapp://send/’;
}
// Get Value
var tujuan = $(‘#whatsapp .tujuan’).val(),
via_url = location.href,
nama = $(‘#whatsapp .nama’).val(),
email = $(‘#whatsapp .email’).val(),
pesan = $(‘#whatsapp .pesan’).val();
$(this).attr(‘href’, url_wa + ‘?phone=62 ‘ + tujuan + ‘&text=Halo, saya *’ + nama + ‘* (‘ + email + ‘).. %0A%0A’ + pesan + ‘%0A%0Avia ‘ + via_url);
var w = 960,
h = 540,
left = Number((screen.width / 2) – (w / 2)),
tops = Number((screen.height / 2) – (h / 2)),
popupWindow = window.open(this.href, ”, ‘toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=1, copyhistory=no, width=’ + w + ‘, height=’ + h + ‘, top=’ + tops + ‘, left=’ + left);
popupWindow.focus();
return false;
}
}
}
</script>

Langkah terahir simpan template.
Nah, begitulah Cara Membuat Kontak Form WhatsApp Responsive Di Blogger 

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *