İletişim sayfasında mail ile iletişim kurabilme olanağı sağlayanlar için alternatif olabileceği düşüncesiyle birçok web sitesinde rahatlıkla kullanabileceğiniz bir kod dizesinden bahsedeceğim. Bu kodları kopyala-yapıştır yaparak sadece ilgili yerleri (telefon numaranızı) değiştirmeniz yeterli gelecektir.
Kodları kullanacağınız yere yapıştırın. İster wordpress, ister bloggerda, ister htmli ister php, asp tarz sitede fark etmez direk kullanabilirsiniz. Kodlar responsive tasarıma göre olduğu için ister mobilde ister masaüstü sitede gayet hoş görülüyor.
Kullanıcı kullanırken mail iletişim formu gibi formu dolduruyor. Daha sonra ise gönder dediğinde aynı whatsapp web kullanır gibi telefonunu ister karekodu okutsun ister whatsapp web için giriş yapsın. hepsi bu kadar.
Bazıları diyebilir ki normal Whatsapp web kodunu direk kullansa olmaz mı? olabilir ama burada her şeyi form gibi yazıyor ve gönderiyor. Diğerinde ise tek tek yazıyor. Aradaki en büyük fark bu. Tamamen isteğe ve arzuya bağlı olarak kullanılabilir.
Sitemizde yukarıda istediğiniz gibi bakabileceğiniz WhatsApp iletişim bölümüne bakabilirsiniz.
<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/AVvXsEhrBVure7gD6aZOHvhYEp6oI0_6QL7OkSVfMIhpw0aeRTLa9ay_xNVz1AKnkQeA2VcrdqnH9WFzRIzRa7e1NMbA9r7D9IPW1UZ7cOM2HF2Ffse46Tvt_LIiuQAwV51JnV_dO6_tUxjdiNMP/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>
