Sosyal medyanın günümüz yaşamına hakim olduğu çağımzda iletişim herşeyin başında geliyor. Sosyal ekileşim çağında hız özellikle internette hız çok önemli bir yer kaplıyor. Eğer bir site ya da bir blog sahibi iseniz kullanıcılarınızın size ulaşabilmelerini sağlamak için bir iletişim formuna ihtiyaç duyabiirsiniz.
Klasik e posta destekli formlar artık geride kaldı. Bu yazımda bahsedeceğim whatsapp tabanlı iletişim formunu sitenize ve ya blogunuza kurarark etkiliyeci ve hızlı bir şekilde kullanıcılarınızla etkileşime girebilirsiniz. Kurulumu odukça basit olan Whatsapp İletişim Formu responsive tasrımı sayasinde hem mobilde hemde masaüstü bilgisayarlarda görünüm olarak şık duruyor. Eğer sizde Whatsapp İletişim Formun kullanmak istiyorsanız aşağıda verdiğim kodları bloggerda yeni bir sayfa oluşturun ve Html kod olarak yapıştırın. ve kırmızı ile renkelendirdiğim value değerine telefon numaranızı başında sıfır olmadan yazınız
<input class="telefonno" type="hidden" value="123456789" />
<style>
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
outline:none;
margin:0;
padding:0;
}
.whatsapp-btn {
cursor:pointer;
position:fixed;
bottom:90px;
right:90px;
display:block;
width:50%;
height:50%;
border-radius:90px;
text-indent:-9999px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh08fn0hmfTROnpjWTS0y41JSbLtUgQHTNDqmCzYWfjU1SwTDHIy-SE-rUDD8NNrrQRgzF3yMqf_AUfJf3A5J6-DOxAg0IWpzzEyje7ZqKIqWmBmGgDncPo8EZ8JW_FL5c2_MCB_zsN-Bo_/s300/Whatsapp.png) no-repeat center center;
background-size:50% auto;
box-shadow:0 20px 25px rgba(0,0,0,.05);
transition:.2s;
}
.whatsapp-btn:active {
bottom:35px;
}
#whatsapp {
position:fixed;
z-index:+100;
bottom:0px;
right:0px;
display:block;
background:#fff;
box-shadow:0 20px 25px rgba(000);
max-width:-webkit-fill-available;
font-family:Helvetica, sans-serif;
font-size:90%;
border-radius:4px;
visibility:hidden;
opacity:0;
transition:.3s;
}
#whatsapp.toggle {
font-size: 100%;
padding: 1px;
position: relative;
visibility: initial;
opacity: unset;
}
@media(max-width:320px) {
.whatsapp-btn {
bottom:10px;
right:10px;
}
#whatsapp.toggle {
bottom:80px;
right:10px;
visibility:visible;
opacity:1;
}
}
#whatsapp label,
#whatsapp a {
display:block;
margin:15px;
text-decoration:none;
}
#whatsapp input,
#whatsapp textarea {
display:block;
border:1px solid #07acec;
box-shadow:inset 0 2px 5px #ffffff00;
width:50%;
padding:15px;
border-radius:2px;
}
#whatsapp input.ad {
text-transform:capitalize;
}
#whatsapp input:focus,
#whatsapp textarea:focus {
border:1px solid #ddd;
}
#whatsapp textarea {
min-height:80px;
resize: none;
}
#whatsapp a {
cursor:pointer;
display:block;
padding:10px;
font-weight:bold;
text-align:center;
background:#25D366;
color:white;
width:50%;
border-radius:2px;
}
#whatsapp a:hover {
background:#20b558;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="whatsapp" class="toggle">
<input class="telefonno" type="hidden" value="123456789" /> <!-- No. WhatsApp -->
<label>Adınız:
<input class="ad" type="text" placeholder="Adınızı giriniz." />
</label>
<label>Soyadınız :
<input class="soyad" type="soyad" placeholder="Soyadınızı giriniz." />
</label>
<label>Tel :
<input class="numara" type="numara" placeholder="(532)-12-34" />
</label>
<label>Mesajınız :
<textarea class="mesaj" placeholder="Mesajınız."></textarea>
</label>
<a class="submit"> Gönder</a>
</div>
<script>
$('.whatsapp-btn').click(function(){
$('#whatsapp').toggleClass('toggle');
});
// Onclick Whatsapp Sent!
$('#whatsapp .submit').click(WhatsApp);
$("#whatsapp input, #whatsapp textarea").keypress(function() {
if (event.which == 13) WhatsApp();
});
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
function WhatsApp() {
var ph = '';
if ($('#whatsapp .ad').val() == '') { // Cek ad
ph = $('#whatsapp .ad').attr('placeholder');
alert('Hata: ' + ph);
$('#whatsapp .ad').focus();
return false;
} else if ($('#whatsapp .soyad').val() == '') { // Cek soyad
ph = $('#whatsapp .soyad').attr('placeholder');
alert('Hata: ' + ph);
$('#whatsapp .soyad').focus();
return false;
} else if ($('#whatsapp .numara').val() == '') { // Cek numara
ph = $('#whatsapp .numara').attr('placeholder');
alert('Hata: Yanlış Numara ' + ph);
$('#whatsapp .numara').focus();
return false;
} else if ($('#whatsapp .mesaj').val() == '') { // Cek mesaj
ph = $('#whatsapp .mesaj').attr('placeholder');
alert('Hata: ' + ph);
$('#whatsapp .mesaj').focus();
return false;
} else {
if (!confirm("Mesaj Gönderilsin Mi?")) {
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 telefonno = $('#whatsapp .telefonno').val(),
via_url = location.href,
ad = $('#whatsapp .ad').val(),
soyad = $('#whatsapp .soyad').val(),
numara = $('#whatsapp .numara').val(),
mesaj = $('#whatsapp .mesaj').val();
$(this).attr('href', url_wa + '?phone=90 ' + telefonno + '&text=Merhaba ' + ad + ' %0A%0ASoyad:%20' + soyad +' %0A%0Aİletisim:%20'+ numara + ' %0A%0AMesaj:%20' + mesaj + '%0A%0AMesaj Bitti');
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>
Diğer Yayınlar