Cara Buat Form WhatsApp Blogger

cara-membuat-form-whatsapp-blogger-jasa-buat-web-murah-onlenid

Cara Buat Form WhatsApp Blogger – Aplikasi Chatting saat ini sudah sangat banyak, namun WhatsApp masih menjadi platform chat yang cukup populer.

Ditambah dengan adanya Aplikasi WhatsApp Business yang mempermudah pelaku usaha untuk berinteraksi dengan pelanggan, hingga membantu dalam proses strategi pemasaran usaha mereka.

Dengan alasan tersebut, tentu akan menjadi lebih mudah bagi blogger dan pemilik website pemula jika memiliki fitur yang bisa mengirimkan pesan pelanggan dari situs mereka ke whatsapp.

Oleh karena itu ONLEN.ID membuat Fitur Form WhatsApp yang bisa digunakan untuk
kebutuhan Website kalian yang menggunakan Platform Blogger.

A. Alasan Menggunakan Form WhatsApp Blogger

Pasti banyak yang bertanya-tanya “Kenapa Harus Menggunakan Form WhatsApp Blogger?” mengingat di luaran sana banyak berbagai layanan dan fitur form yang lebih keren dan canggih.

Berikut ini beberapa alasannya :

1. Gratis

Alasan pertama “Kenapa Harus Menggunakan Form WhatsApp Blogger?” adalah Gratis, baik pembuatan form whatsapp blogger yang gratis karena kalian hanya perlu menggunakan script tool yang sudah dibuat oleh ONLEN.ID.

Dan juga Aplikasi WhatsApp yang tidak perlu berlangganan untuk menggunakannya, cukup dengan memiliki Smartphone yang mendukung penggunaan Aplikasi WhatsApp ini.

2. Anti Ribet

Kalian tidak perlu ribet menggunakan berbagai layanan dan menghubungkannya ke website kalian, cukup copy paste script tools Form WhatsApp Blogger yang sudah kami buatkan untuk kalian. 

Bagaimana cukup mudahkan? tidak perlu menggunakan berbagai layanan form whatsapp yang menyusahkan kalian.

3. Sedikit Lebih Aman

ONLEN.ID tidak berani memberikan klaim bahwa ini 100% aman digunakan karena pasti akan ada berbagai pihak yang menyanggahnya, namun kami yakin ini 100% sedikit lebih aman dibanding kalia menggunakan Layanan Pihak ke-3.

Kenapa? karena form whatsapp blogger yang ONLEN.ID buat hanya menggunakan Fitur asli Blogger.com dengan server resmi milik Google dan fitur Wa.me dengan server resmi milik WhatsApp, tanpa menggunakan layanan penyedia formulir kontak pihak ke-3.

4. Tidak Perlu Biaya Tambahan

Kalian tidak perlu mengeluarkan biaya tambahan untuk berlanggan fitur formulir kontak, berlangganan server terpisah atau berbagai kebutuhan lainnya untuk menggunakan Form WhatsApp Blogger. Fitur ini 100% gratis dan langsung menghubungkan Website kalian ke WhatsApp kalian.

5. Tidak Terlalu Membebani Loading Web

Fitur ini tidak akan membuat loading website kalian menjadi lebih berat karena tidak perlu menggunakan script external dari penyedia layanan form kontak pihak ke-3, semua script langsung disimpan di situs web kalian.

Selain itu Form WhatsApp Blogger yang dibuat oleh ONLEN.ID sudah dioptimalkan agar lebih efisien untuk memastikan web kalian tetap fast load tanpa ada fungsi fitur yang bermasalah.

6. Lebih Familiar Digunakan Oleh Banyak Orang

Pesan akan langsung terkirim ke WhatsApp sehingga kalian akan lebih mudah mengelola dan menjawab pesan dari pelanggan. Begitu juga pelanggan dalam mengirim pesan akan lebih mudah karena semua pesan akan langsung menggunakan WhatsApp.

Broken Link adalah sebutan untuk tautan yang mati atau tidak dapat diakses dengan alasan server down atau alasan lainnya, jika kalian menggunakan penyedia form pihak-3 ada kemungkinan terdeteksi sebagai broken link ketika server dari layanan tersebut down atau alasan lainnya.

Sedangkan jika menggunakan Form WhatsApp Blogger ini, kalian dapat terhindar dari potensi tersebut karena form WA benar-benar hanya menggunakan layanan asli milik WhatsApp yang sudah pasti akan selalu aktif.

B. Cara Buat Form WhatsApp Blogger

Tanpa perlu berlama-lama, berikut ini tutorial memasang form whatsapp blogger.

1. Pasang CSS Form WhatsApp Blogger

Pertama kalian perlu memasang file CSSnya terlebih dahulu.

Berikut ini script CSSnya :

#orderForm, #contactFormCS, #testimonialForm {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #f9f9f9;
  font-family: Arial, sans-serif;
}

#orderForm label, #contactFormCS label, #testimonialForm label {
  font-size: 14px;
  font-weight: 700;
  color: #333;
  display: block;
  margin-bottom: 5px;
}

#orderForm input, #orderForm select, #orderForm textarea,
#contactFormCS input, #contactFormCS select, #contactFormCS textarea,
#testimonialForm input, #testimonialForm textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  margin-bottom: 10px;
}

#orderForm button, #contactFormCS button, #testimonialForm button {
  width: 100%;
  padding: 10px;
  background-color: #3665ff; /* Warna tombol */
  color: #fff;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

#orderForm button:hover, #contactFormCS button:hover, #testimonialForm button:hover {
  background-color: #128c7e; /* Efek hover warna hijau lebih gelap */
}

#orderForm button i, #contactFormCS button i, #testimonialForm button i {
  margin-right: 10px;
}

.ic--baseline-whatsapp {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19.05 4.91A9.82 9.82 0 0 0 12.04 2c-5.46 0-9.91 4.45-9.91 9.91c0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21c5.46 0 9.91-4.45 9.91-9.91c0-2.65-1.03-5.14-2.9-7.01m-7.01 15.24c-1.48 0-2.93-.4-4.2-1.15l-.3-.18l-3.12.82l.83-3.04l-.2-.31a8.26 8.26 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.24-8.24c2.2 0 4.27.86 5.82 2.42a8.18 8.18 0 0 1 2.41 5.83c.02 4.54-3.68 8.23-8.22 8.23m4.52-6.16c-.25-.12-1.47-.72-1.69-.81c-.23-.08-.39-.12-.56.12c-.17.25-.64.81-.78.97c-.14.17-.29.19-.54.06c-.25-.12-1.05-.39-1.99-1.23c-.74-.66-1.23-1.47-1.38-1.72c-.14-.25-.02-.38.11-.51c.11-.11.25-.29.37-.43s.17-.25.25-.41c.08-.17.04-.31-.02-.43s-.56-1.34-.76-1.84c-.2-.48-.41-.42-.56-.43h-.48c-.17 0-.43.06-.66.31c-.22.25-.86.85-.86 2.07s.89 2.4 1.01 2.56c.12.17 1.75 2.67 4.23 3.74c.59.26 1.05.41 1.41.52c.59.19 1.13.16 1.56.1c.48-.07 1.47-.6 1.67-1.18c.21-.58.21-1.07.14-1.18s-.22-.16-.47-.28'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

a. Memasang script CSS di Template Blogger Mas Sugeng

Untuk pengguna template blogger sugeng.id silahkan ikuti tutorial berikut :

  • Buka Blogger.com
  • Sign In ke Akun kalian
  • Buka menu Layout atau Tata Letak
  • Buka menu Custom CSS seperti berikut :
memasang-form-whatsapp-blogger-di-template-mas-sugeng
  • Lalu masukkan Script CSSnya seperti ini :
pasang-form-whatsapp-blogger-di-template-sugengid
  • Setelah itu klik Save

b. Memasang Script CSS di Template Blogger lainnya

  • Buka Blogger.com
  • Sign In ke Akun kalian
  • Buka menu Theme atau Tema
  • Lalu klik Edit HTML :
membuat-form-whatsapp-blogger
  • Cari kode </head>
  • Lalu masukkan script CSSnya di atas/sebelum </head>
  • Lalu klik Save

Jika sudah kalian bisa membuat  Jenis Form yaitu Form Testimonial, Form Kontak dan Form Testimonial. Silahkan ikuti tutorial di bawah ini.

2. Pasang Form WhatsApp Testimonial Blogger

Bentuk pertama adalah Form WhatsApp Testimonial Blogger, cocok untuk kalian
yang memiliki Website Jasa.

a. Script HTML Form WhatsApp Testimonial Blogger

  • Buka Blogger.com
  • Sign In ke Akun Kalian
  • Buat Halaman Baru, beri judul “Form Testimonial”
  • Lalu Ubah mode penulisan menjadi HTML
  • Lalu masukkan script HTML berikut :
<form id="testimonialForm">
    <label>Nama:</label>
    <input id="testimonialName" name="name" required="" type="text" /><br /><br />

    <label>Alamat Situs:</label>
    <input id="testimonialWebsite" name="website" placeholder="https://contoh.com" required="" type="url" /><br /><br />

    <label>Testimoni:</label><br />
    <textarea id="testimonialMessage" name="message" required=""></textarea><br /><br />

    <button id="submitButton" type="button">
        <i class="ic--baseline-whatsapp"></i> Kirim ke WhatsApp
    </button>
</form>
  • Seperti berikut ini :
html-form-whatsapp-testimonial-blogger

b. JavaScript Form WhatsApp Testimonial Blogger

  • Buka Blogger.com
  • Sign In ke Akun kalian
  • Buka menu Theme atau Tema
  • Lalu klik Edit HTML
  • Cari kode </body>
  • Lalu masukkan JavaScript berikut ini :
<script>
function sendToWhatsApp() {
    var name = document.getElementById(&quot;testimonialName&quot;).value;
    var website = document.getElementById(&quot;testimonialWebsite&quot;).value;
    var message = document.getElementById(&quot;testimonialMessage&quot;).value;

    var whatsappNumber = &quot;6281234567890&quot;; // Ganti dengan nomor WhatsApp tujuan (tanpa &quot;+&quot; atau spasi)

    // Merangkai pesan sesuai format yang diinginkan
    var formattedMessage = `

<!-- ## TESTIMONI ## -->
        
Nama: ${name}
        
Alamat Situs: ${website}
        
Testimoni: ${message}
        
<!-- ## TESTIMONI ## -->
    `;

    // Membuat URL untuk mengirim pesan WhatsApp
    var url = &quot;https://wa.me/&quot; + whatsappNumber + &quot;?text=&quot; + encodeURIComponent(formattedMessage);
    
    // Buka tautan WhatsApp
    window.open(url, &quot;_blank&quot;);
}

// Menambahkan event listener ke tombol Kirim
document.addEventListener(&quot;DOMContentLoaded&quot;, function() {
    var submitButton = document.getElementById(&quot;submitButton&quot;);
    if (submitButton) {
        submitButton.addEventListener(&quot;click&quot;, sendToWhatsApp);
    }
});
</script>
  • Ubah 6281234567890 dengan Nomor WhatsApp kalian
  • Setelah itu klik Save

3. Pasang Form WhatsApp Kontak Blogger

Bentuk kedua adalah Form WhatsApp Kontak Blogger, cocok untuk kalian yang
memiliki Website Jasa.

a. Script HTML Form WhatsApp Kontak Blogger

  • Buka Blogger.com
  • Sign In ke Akun Kalian
  • Buat Halaman Baru, beri judul “Form Kontak”
  • Lalu Ubah mode penulisan menjadi HTML
  • Lalu masukkan script HTML berikut :
<form class="formCS" id="contactFormCS">
  <label>Nama:</label>
  <input id="nameCS" name="name" required="" type="text" /><br /><br />
  <label>Tujuan:</label>
  <select id="purposeCS" name="purpose" required="">
    <option value="">-- Pilih Tujuan --</option>
    <option value="Konsultasi Gratis">Konsultasi Gratis</option>
    <option value="Pertanyaan Produk">Pertanyaan Produk</option>
    <option value="Layanan Pelanggan">Layanan Pelanggan</option>
    <option value="Lainnya">Lainnya</option></select
  ><br /><br />
  <label>Pesan:</label><br />
  <textarea id="messageCS" name="message" required=""></textarea><br /><br />
  <button id="submitButtonCS" onclick="sendToWhatsAppCS()" type="button">
    <i class="ic--baseline-whatsapp"></i> Kirim ke WhatsApp
  </button>
</form>
  • Seperti berikut ini :
html-form-whatsapp-testimonial-blogger

b. JavaScriptForm WhatsApp Kontak Blogger

  • Buka Blogger.com
  • Sign In ke Akun kalian
  • Buka menu Theme atau Tema
  • Lalu klik Edit HTML
  • Cari kode </body>
  • Lalu masukkan JavaScript berikut ini :
<script>
function sendToWhatsAppCS() {
  var name = document.getElementById(&quot;nameCS&quot;).value;
  var purpose = document.getElementById(&quot;purposeCS&quot;).value;
  var message = document.getElementById(&quot;messageCS&quot;).value;

  var whatsappNumber = &quot;6281234567890&quot;; // Ganti dengan nomor WhatsApp tujuan (tanpa &quot;+&quot; atau spasi)

  // Merangkai pesan sesuai format yang diinginkan
  var formattedMessage = `
<!-- ## PERTANYAAN ## -->

Nama: ${name}

Tujuan: ${purpose}

Testimoni: ${message}

<!-- ## PERTANYAAN ## -->
  `;

  // Membuat URL untuk mengirim pesan WhatsApp
  var url = &quot;https://wa.me/&quot; + whatsappNumber + &quot;?text=&quot; + encodeURIComponent(formattedMessage);

  // Buka tautan WhatsApp
  window.open(url, &quot;_blank&quot;);
}

// Menambahkan event listener ke tombol Kirim
document.addEventListener(&quot;DOMContentLoaded&quot;, function() {
  var submitButton = document.getElementById(&quot;submitButtonCS&quot;);
  if (submitButton) {
    submitButton.addEventListener(&quot;click&quot;, sendToWhatsAppCS);
  }
});
</script>
  • Ubah 6281234567890 dengan Nomor WhatsApp kalian
  • Setelah itu klik Save

4. Pasang Form WhatsApp Order Blogger

Bentuk ketiga adalah Form WhatsApp order Blogger, cocok untuk kalian yang
memiliki Website Jasa.

a. Script HTML Form WhatsApp Order Blogger

  • Buka Blogger.com
  • Sign In ke Akun Kalian
  • Buat Halaman Baru, beri judul “Form Order”
  • Lalu Ubah mode penulisan menjadi HTML
  • Lalu masukkan script HTML berikut :
<form class="orderForm" id="orderForm">
  <label>Nama Pemesan:</label>
  <input id="orderName" name="name" required="" type="text" /><br /><br />

  <label>Jenis Pemesanan:</label>
  <select id="orderPurpose" name="purpose" required="">
    <option value="">-- Pilih Jenis Pemesanan --</option>
    <option value="Pemesanan Produk">Pemesanan Produk</option>
    <option value="Pemesanan Produk">Pemesanan Produk</option>
    <option value="Pemesanan Produk">Pemesanan Produk</option>
  </select><br /><br />

  <!--Kolom Voucher Diskon dipindah ke atas-->
  <label>Voucher Diskon (Opsional):</label>
  <input id="orderVoucher" name="voucher" type="text" /><br /><br />

  <label>Detail Pemesanan:</label><br />
  <textarea id="orderMessage" name="message" required=""></textarea><br /><br />

  <button id="submitOrderButton" onclick="sendOrderToWhatsApp()" type="button">
    <i class="ic--baseline-whatsapp"></i> Kirim Pemesanan ke WhatsApp
  </button>
</form>
  • Seperti berikut ini :
html-form-whatsapp-blogger

b. JavaScriptForm WhatsApp Order Blogger

  • Buka Blogger.com
  • Sign In ke Akun kalian
  • Buka menu Theme atau Tema
  • Lalu klik Edit HTML
  • Cari kode </body>
  • Lalu masukkan JavaScript berikut ini :
<script>
function sendOrderToWhatsApp() {
  var name = document.getElementById(&quot;orderName&quot;).value;
  var purpose = document.getElementById(&quot;orderPurpose&quot;).value;
  var message = document.getElementById(&quot;orderMessage&quot;).value;
  var voucher = document.getElementById(&quot;orderVoucher&quot;).value; // Mengambil nilai Voucher Diskon

  var whatsappNumber = &quot;6281234567890&quot;; // Ganti dengan nomor WhatsApp tujuan (tanpa &quot;+&quot; atau spasi)

  // Merangkai pesan sesuai format yang diinginkan
  var formattedMessage = `
<!-- ## PEMESANAN ## -->

Nama Pemesan: ${name}

Jenis Pemesanan: ${purpose}

Voucher Diskon: ${voucher ? voucher : &#39;Tidak ada&#39;}

Detail Pemesanan: ${message}

<!-- ## PEMESANAN ## -->
  `;

  // Membuat URL untuk mengirim pesan WhatsApp
  var url = &quot;https://wa.me/&quot; + whatsappNumber + &quot;?text=&quot; + encodeURIComponent(formattedMessage);

  // Buka tautan WhatsApp
  window.open(url, &quot;_blank&quot;);
}

// Menambahkan event listener ke tombol Kirim
document.addEventListener(&quot;DOMContentLoaded&quot;, function() {
  var submitButton = document.getElementById(&quot;submitOrderButton&quot;);
  if (submitButton) {
    submitButton.addEventListener(&quot;click&quot;, sendOrderToWhatsApp);
  }
});
</script>
  • Ubah 6281234567890 dengan Nomor WhatsApp kalian
  • Setelah itu klik Save

C. Setting Form WhatsApp Blogger

Berikut ini panduan untuk setting Form WhatsApp Blogger, agar lebih sesuai
dengan kebutuhan di situs web kalian masing-masing.

1. Ganti Warna Button

Warna Button di Form ini secara default adalah Biru #3665ff, jika ingin
menggantinya cari kode berikut di CSS Form WhatsApp Blogger :

#orderForm button, #contactFormCS button, #testimonialForm button {
  width: 100%;
  padding: 10px;
  background-color: #3665ff; /* Warna tombol */
  color: #fff;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

Ubah kode #3665ff dengan kode warna yang kalian inginkan.

2. Ganti Nomor WhatsApp

Agar pesan dapat terkirim ke WhatsApp kalian, silahkan cari kode berikut ini
pada JavaScript Form WhatsApp Blogger yang kalian gunakan :

6281234567890

Silahkan kalian ganti dengan Nomor WhatsApp yang kalian gunakan.

3. Menghilangkan Kolom Situs di Form Testimoni

Jika jasa yang kalian miliki tidak berkaitan dengan situs ataupun alasan
lainnya yang membuat kalian tidak ingin ada “Form Situs”.

  • Silahkan hapus kode HTML berikut :
<label>Alamat Situs:</label>
<input id="testimonialWebsite" name="website" placeholder="https://contoh.com" required="" type="url" /><br /><br />
  • Lalu hapus kode JavaScript berikut :
var website = document.getElementById(&quot;testimonialWebsite&quot;).value;
  • Dan hapus kode JavaScript berikut :
Alamat Situs: ${website}

4. Mengganti Pilihan pada Kolom “Tujuan” di Form Kontak

Cari Kode HTML berikut :

<select id="purposeCS" name="purpose" required="">
    <option value="">-- Pilih Tujuan --</option>
    <option value="Konsultasi Gratis">Konsultasi Gratis</option>
    <option value="Pertanyaan Produk">Pertanyaan Produk</option>
    <option value="Layanan Pelanggan">Layanan Pelanggan</option>
    <option value="Lainnya">Lainnya</option></select>

Silahkan ganti bagian “Konsultasi Gratis” dan pilihan lainnya dengan daftar
pilihan yang ingin kalian masukkan.

Jika ingin menambah pilihan silahkan tambahkan kode berikut ini sebelum
</select> :

<option value="Nama Pilihan">Nama Pilihan</option>

Dan sesuaikan “Nama Pilihan” sesuai kebutuhan kalian.

5. Mengganti Pilihan pada Kolom “Jenis Pemesanan” di Form Order

Cari Kode HTML berikut :

<select id="orderPurpose" name="purpose" required="">
    <option value="">-- Pilih Jenis Pemesanan --</option>
    <option value="Pemesanan Produk">Pemesanan Produk</option>
    <option value="Pemesanan Produk">Pemesanan Produk</option>
    <option value="Pemesanan Produk">Pemesanan Produk</option>
  </select>

Silahkan ganti bagian “Pemesanan Produk” dan pilihan lainnya dengan daftar
pilihan yang ingin kalian masukkan.

Jika ingin menambah pilihan silahkan tambahkan kode berikut ini sebelum
</select> :

<option value="Nama Pilihan">Nama Pilihan</option>

Dan sesuaikan “Nama Pilihan” sesuai kebutuhan kalian.

Penutup

Itulah Tutorial Membuat Form WhatsApp Blogger yang bisa kalian gunakan di website kalian, mudah bukan. Jika kalian menggunakan Jasa Pembuatan Website dari ONLEN.ID form whatsapp seperti ini sudah terpasang secara otomatis loh…. Yuk Order Jasa Buat Web kami di sini => https://www.onlen.id/p/order.html

Share your love

Related Posts