Tutorial Membuat Contact Form WA tanpa Plugin

Tutsilo - Keep Blogging

Mungkin untuk beberapa orang ada yang sudah tau cara membuat contact form WA tanpa plugin, tapi kali ini saya akan membuatkan tutorial yang mudah untuk membuat contact form wa tanpa plugin dengan hanya menggunakan kode php, html, css dan javascript lalu di gabungkan.





Contact Form WA tanpa Plugin




Jika anda menggunakan website berbasis CMS Wordpress untuk membuat contact formnya, caranya itu sangat mudah, ada banyak plugin contact form yang sudah di sediakan dalam bentuk plugin, misal seperti Contact Form 7, WPForms, Ninja Form, itulah plguin contact form yang paling banyak di gunakan oleh pengguna wordpress. Kali ini saya akan membuat contact form wa tanpa plguin.





Berikut cara membuat contact form WA tanpa plugin





Buka File Manager di cPanel









Lalu pilih public_html, jika anda menggunakan subdomain pilih di domainanda.com.









Setelah anda pilih public_html akan banyak folder dan file di dalam public_html tersebut, silahkan anda pilih wp-content.









Jika wp-content sudah di pilih, langkah selanjutnya pilih themes.









Selanjutnya anda pilih themes yang anda gunakan.





Jika sudah berada di dalam themes anda, silahkan anda buat file baru.









Untuk nama file saya buat contact.php agar mudah di ingat, anda bisa mengganti nama contactnya yang penting extensinya tetep .php .









Jika sudah membuat file contact.php silahkan anda edit dengan klik kanan di file bernama contact.php yang anda tadi buat, lalu klik edit.





Silahkan copy paste code berikut, untuk di simpan ke contact.php yang telah anda buat.





<?php get_header(); ?>
<div class="section-title">
<h1 class="page-headline spanborder h3"><span><?php the_title();?></span> </h1> 
</div><?php
?>
<?php
 /* Template Name: Form Kontak */
?>
<style type="text/css">
body{font-family:'Roboto',Arial,sans-serif}.none{display:none}
.datainput{position:relative;margin:5px 0 20px}.datainput p{font-size:12px;background:#eee;display:inline-block;padding:5px 15px;border-radius:.5rem}.whatsapp-form textarea{min-height:120px}.datainput select{padding:12px 0;color:#555;font-size:14px;width:100%;border:0;border-bottom:1px solid #ddd;outline:none;background:#fff}.datainput input,.datainput textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.datainput input:focus,.datainput textarea:focus{outline:none}.datainput label{color:#999;font-size:14px;font-weight:400;position:absolute;pointer-events:none;left:0;top:18px;transition:.2s ease all}.datainput input:focus~label,.datainput input:valid~label,.datainput textarea:focus~label,.datainput textarea:valid~label{top:-10px;font-size:14px;color:#21a51f}#notif-license span{font-size:40px}#notif-license{display:none;position:fixed}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#21a51f;transition:.2s ease all}.bar:before{left:50%}.bar:after{right:50%}.datainput input:focus~.bar:before,.datainput input:focus~.bar:after,.datainput textarea:focus~.bar:before,.datainput textarea:focus~.bar:after{width:50%}.indigox{background:#3f51b5}.orangex{background:#ff9800}.pinkx{background:#e91e63}.bluex{background:#2196F3}.purplex{background:#9c27b0}.redx{background:#F44336}.greenx{background:#4CAF50}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.datainput input:focus~.highlight,.datainput textarea:focus~.highlight{animation:inputHighlighter .3s ease}.datainput input:focus~label,.datainput input:valid~label,.datainput textarea:focus~label,.datainput textarea:valid~label{top:-10px;font-size:13px;color:#21a51f}
form.whatsapp-form {
    box-shadow: 0 1px 6px rgba(32,33,36,.28);
    border-radius: .5rem;
    padding: 20px;
    box-sizing: border-box;
    color: #444;
    font-size: 14px;
    line-height: 1.5;
}
 .whatsapp-form a.send_form {
    color: #fff;
    background: #21a51f;
    text-decoration: none;
    display: inline-block;
    padding: 10px 25px;
    border-radius: .3rem;
    font-weight: 700;
    letter-spacing: .5px;
    font-size: 15px;
}
#text-info span {
    display: block;
    padding: 10px 15px;
    text-align: center;
    font-weight: 700;
    margin: 15px 0;
    border-radius: .5rem;
}
#text-info span.yes {
    background: #c6ffc5;
    color: #0ea904;
}
#text-info span.no {
    background: #ffc5c5;
    color: #ce0404;
}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"/>
</head>
<body>
<form class="whatsapp-form">
<div class="datainput">
<input class="validate" id="wa_name" name="name" required="" type="text" value=''/>
<span class="highlight"></span><span class="bar"></span>
<label>Your Name</label>
</div>
<div class="datainput">
<input class="validate" id="wa_email" name="email" required="" type="email" value=''/>
<span class="highlight"></span><span class="bar"></span>
<label>Email Address</label>
</div>
<div class="datainput">
<select id="wa_select">
  <option hidden='hidden' selected='selected' value='default'>Select Option</option>
  <option value="1">Kerjasama</option>
  <option value="2">Pasang iklan</option>
  <option value="3">lainnya</option>
</select>
</div>
<div class="datainput">
<textarea id='wa_textarea' placeholder='' maxlength='5000' row='1' required=""></textarea>
<span class="highlight"></span><span class="bar"></span>
<label>Description</label>
</div>
<a class="send_form" href="javascript:void" type="submit" title="Send to Whatsapp">Kirim</a>
<div id="text-info"></div>
</form>
<script type="text/javascript">
//<![CDATA[
$(document).on('click','.send_form', function(){
var input_blanter = document.getElementById('wa_email');
/* Whatsapp Settings */
var walink = 'https://web.whatsapp.com/send',
    phone = '6285155455088',
    walink2 = 'Halo tutsilo.com',
    text_yes = 'Terkirim.',
    text_no = 'Isi semua Formulir lalu klik Send.';
/* Smartphone Support */
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
var walink = 'whatsapp://send';
}
if("" != input_blanter.value){
 /* Call Input Form */
var input_select1 = $("#wa_select :selected").text(),
    input_name1 = $("#wa_name").val(),
    input_email1 = $("#wa_email").val(),
    input_number1 = $("#wa_number").val(),
    input_url1 = $("#wa_url").val(),
    input_textarea1 = $("#wa_textarea").val();
/* Final Whatsapp URL */
var blanter_whatsapp = walink + '?phone=' + phone + '&text=' + walink2 + '%0A%0A' +
    '*Name* : ' + input_name1 + '%0A' +
    '*Email Address* : ' + input_email1 + '%0A' +
    '*Select Option* : ' + input_select1 + '%0A' +
    '*Input Number* : ' + input_number1 + '%0A' +
    '*URL/Link* : ' + input_url1 + '%0A' +
    '*Description* : ' + input_textarea1 + '%0A';
/* Whatsapp Window Open */
window.open(blanter_whatsapp,'_blank');
document.getElementById("text-info").innerHTML = '<span class="yes">'+text_yes+'</span>';
} else {
document.getElementById("text-info").innerHTML = '<span class="no">'+text_no+'</span>';
}
});
//]]>
</script>
</body>
<?php get_footer(); ?>




jangan lupa untuk mengganti nomornya, ada di bagian script seprti ini.





/* Whatsapp Settings */
var walink = 'https://web.whatsapp.com/send',
    phone = '6285155455088',
    walink2 = 'Halo Sosialy.com',
    text_yes = 'Terkirim.',
    text_no = 'Isi semua Formulir lalu klik Send.';




Anda juga bisa mengubah pilihan ini









 <select id="wa_select">
  <option hidden='hidden' selected='selected' value='default'>Select Option</option>
  <option value="1">Kerjasama</option>
  <option value="2">Pasang iklan</option>
  <option value="3">lainnya</option>
</select>




Nah itu baru selesai membuat file dan memasukan code ke dalam file contact.php.





Selanjutnya anda buat laman baru, buka website atau blog anda dan masuk ke dashboard wordpress.





Silahkan anda pilih Laman, lalu klik Tambah baru









Jika sudah masuk ke Laman baru yang anda buat cari nama Artibut laman, pilih Templet, lalu pilih form kontak, ( nama Form kontak itu ada di code yang anda masukan ke dalam contact.php ) klik menerbitkan.









Itulah tutorial cara membuat contact form WA tanpa plugin, mugkin aga panjang tutorialnya karena takutnya ada yang belum paham sama sekali jadi saya buatkan selengkap mungkin.