Dapatkan diskon: Template 50% hanya bulan ini! Beli sekarang! Harga diskon Template: 50% hanya bulan ini!

Cara Membuat Tombol atau Formulir Kontak di Blogger dan Wordpress

Cara Membuat Tombol atau Formulir Kontak di Blogger dan Wordpress Images @rian_seo
12 Share
Cara Membuat Tombol atau Formulir Kontak di Blogger dan Wordpress

Tombol kontak adalah salah satu hal wajib yang perlu di perhatikan untuk melengkapi isi setiap blog atau Website. Tombol kontak ini juga sangat berpengaruh buat kamu yang sedang mengajukan permohonan ke Google AdSense, karena dengan adanya tombol kontak akan sangat berarti buat para pengunjung blog yang ingin mengirim pertanyaan atau tawaran kerja sama kepada sang pemilik blog tersebut.

Selain itu, blog yang memiliki tombol kontak ini akan terlihat lebih serius di mata Google karena blog dianggap bukan blog spam atau juga blog penipuan.


Dalam halaman ini, kami akan membagikan lagi trik membuat tombol kontak yang bisa Anda lakukan di platrom blogger (blogspot) dan WordPress (self-host). Yang mana setiap platrom blogging cara mengaplikasikan tombol kontak ini berbeda-beda.

Untuk blogspot, mungkin setiap wigdet yang ingin kita tambahkan tidak perlu bayar atau juga instal plugin kusus layaknya Wordpress, jadi jika blog kamu dari blogspot kamu hanya perlu memiliki sedikit keahlian di bidang CSS dan HTML.

Beda halnya untuk pengguna WordPress, setiap fungsi apapun memerlukan sebuah plugin yang mesti di Instal. Hanya saja WordPress lebih unggul untuk digunakan tanpa kamu harus ahli kode CSS dan HTML.

Ada beberapa perbedaan Blogspot dan Wordpress untuk dari segi keuntungannya masing-masing :

  • Blogger lebih unggul dari pada Wordpress disisi gratis, dimana setiap wigdet dan kebutuhan lainnya buat blog bisa kamu gunakan secara gratis di blogspot.
  • Tapi ada tapinya juga, kamu harus ahli berbagai macam kode script, jQuery, CSS dan HTML. Jika kamu kurang ahli masalah ini maka Wordpess yang pas buat kamu gunakan.
  • WordPress lebih unggul dari pada blogger dari sisi Penggunaan (user-frendly), dimana setiap kebutuhan yang kamu perlukan untuk blog bisa menggunakan plugin.
  • Tapi, Wordpress self-host tidak bisa digunakan secara gratis. Sebab kamu harus memiliki hosting sendiri setidaknya menggunakan shared hosting untuk biaya awal pembuatan.

Kesimpulan

  • Blogger unggul dari segi fiktur gratis yang disediakan oleh Google.
  • Wordpress unggul dari segi pemakaian yang sangat mudah tanpa harus pusing-pusing belajar kode CSS dan HTML.

Memasang Wigdet Kontak di Blog versi Blogger


Buka Blogger > Dashbor > Tema > Edit HTML

Lalu salin kode CSS dibawah ini, dan letakan di bagian kode penutup </style> atau ]]><b:skin>
/* CONTACT WIGDET */
.contact-form-widget {
}
.contact-form-success-message, .contact-form-error-message {
background: #f9edbe;
border: 0 solid #f0c36d;
font-size: 14px;
text-align: center;
max-width: 500px;
border-radius: 3px;
}
.contact-form-success-message-with-border, .contact-form-error-message-with-border {
background: #f9edbe;
border: 1px solid #f0c36d;
font-size: 14px;
text-align: center;
max-width: 600px;
border-radius: 3px;
box-sizing: border-box;
padding: 5px 10px;
}
.contact-form-cross {
height: 11px;
margin: 0 5px;
vertical-align: -8.5%;
width: 11px;
}
.contact-form-email, .contact-form-name {
color: inherit;
height: 40px;
margin-top: 5px;
max-width: 300px;
width: 100%;
padding: 0 15px;
border-radius: 3px;
border: 1px solid #cacaca;
box-sizing: border-box;
}
.contact-form-email-message {
color: inherit;
margin-top: 5px;
vertical-align: top;
max-width: 600px;
width: 100%;
border-radius: 3px;
border: 1px solid #cacaca;
padding: 15px;
}
.contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover {
outline: none;
border: 1px solid #49ACE1;
}
.contact-form-email:focus, .contact-form-name:focus, .contact-form-email-message:focus {
outline: none;
border: 1px solid #49ACE1;
}
.contact-form-name, .contact-form-email, .contact-form-email-message {
background: #f8f8f8;
}
.contact-form-button {
display: block;
font-size: 14px;
line-height: 24px;
padding: 5px 20px;
margin: 30px 0;
text-align: center;
border: none;
background: #49ACE1;
color: #fff;
border-radius: 3px;
font-weight: 500;
}
.contact-form-button:hover, .contact-form-button.hover {
cursor: pointer;
outline: none;
opacity: .85;
}
.contact-form-button.focus, .contact-form-button.right.focus, .contact-form-button.mid.focus, .contact-form-button.left.focus {
outline: none;
}
.contact-form-button-submit:focus, .contact-form-button-submit.focus {
outline: none;
opacity: .85;
}
.swajib {
font-weight: bold;
color: #e85e5e;
}
.ctitles {
font-weight: 500;
display: block;
margin: 30px 0 0;
}
Selanjutnya salin lagi kode script yang ada dibawah ini dan letakan dibagian kode penutup diatas </body>
<script>
 if (typeof(BLOG_attachCsiOnload) != &#39;undefined&#39; &amp;&amp; BLOG_attachCsiOnload != null) { window[&#39;blogger_templates_experiment_id&#39;] = &quot;templatesV1&quot;;window[&#39;blogger_blog_id&#39;] = &#39;<data:blog.blogId/>&#39;;BLOG_attachCsiOnload(&#39;&#39;); }_WidgetManager._Init(&#39;//www.blogger.com/rearrange?blogIDx3d<data:blog.blogId/>&#39;,&#39;<data:blog.homepageUrl/>&#39;,&#39;<data:blog.blogId/>&#39;);
 _WidgetManager._RegisterWidget(&#39;_ContactFormView&#39;, new _WidgetInfo(&#39;ContactForm1&#39;, &#39;footer1&#39;, null, document.getElementById(&#39;ContactForm1&#39;), {&#39;contactFormMessageSendingMsg&#39;: &#39;Sending...&#39;, &#39;contactFormMessageSentMsg&#39;: &#39;Your message has been sent.&#39;, &#39;contactFormMessageNotSentMsg&#39;: &#39;Message could not be sent. Please try again later.&#39;, &#39;contactFormInvalidEmailMsg&#39;: &#39;A valid email address is required.&#39;, &#39;contactFormEmptyMessageMsg&#39;: &#39;Message field cannot be empty.&#39;, &#39;title&#39;: &#39;Contact Form&#39;, &#39;blogId&#39;: &#39;<data:blog.blogId/>&#39;, &#39;contactFormNameMsg&#39;: &#39;Name&#39;, &#39;contactFormEmailMsg&#39;: &#39;Email&#39;, &#39;contactFormMessageMsg&#39;: &#39;Message&#39;, &#39;contactFormSendMsg&#39;: &#39;Send&#39;, &#39;submitUrl&#39;: &#39;https://www.blogger.com/contact-form.do&#39;}, &#39;displayModeFull&#39;));
 </script>
Klik " SIMPAN "

Selanjutnya buat sebuah halaman di blogger dengan cara Dashbor > Halaman > Mode HTML.

Salin kode HTML dibawah ini dan letakan di dalam postingan halaman mode HTML tadi.
<div class="contact-form-widget">
<form name="contact-form">
<span class="ctitles">Nama :</span>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" type="text" value="" />
<span class="ctitles">Alamat Email <span class="swajib">*</span> :</span>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" type="text" value="" />
<span class="ctitles">Isi Pesan <span class="swajib">*</span> :</span>
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="10"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<br />
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</form>
</div>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script> 
Terakhir klik " PUBLIKASAN "

Contoh Halaman

Tahap pembuatan kontak di blogger sudah kita miliki dengan cara gratis dan mudah.

Membuat Tombol Kontak di WordPress.org


Silahkan kamu login ke wp-admin milik kamu.

Untuk lebih cepat, https://namablogkamu/wp-admin/login

Pilih Plugin > Tambah Baru > Contact Form 7

Disini kami menggunakan plugin kontak versi gratis dan yang paling baik untuk di gunakan nama pluginnya adalah Contact Form 7

Silakan kamu lsi kotak pencarian dan isi Contact form 7, kemudian klik tombol pasang.

Cara Membuat Tombol atau Formulir Kontak di Blogger dan Wordpress

Jika sudah selesai memasang plugin, selanjutnya kamu klik tombol ' Aktifkan ' agar plugin Contact Form 7 aktif

Cara Membuat Tombol atau Formulir Kontak di Blogger dan Wordpress

Mengatur Kontak WordPress dengan Plugin Contact Form 7


Silahkan kamu pilih menu dibagian samping kiri wordpress Contact > Add New 

Buat judul formulir kontak kamu, misalnya Contact Us, Contact Me, atau Hubungi Kami.

Untuk label dalam kotak sudah terisi secara Default, tetapi kamu bisa mengaturnya sesuai dengan keinginan kamu. Mulai dari label serta form input dengan memilihnya dibagian text area.

Cara Membuat Tombol atau Formulir Kontak di Blogger dan Wordpress

Untuk panduan jelasnya, kamu bisa buka lewat halaman ini.

Apabila pengaturan sudah kamu tetapkan dibagian kontak area, tinggal kamu klik Save / Simpan.

Mengatur bagian Penerima Email


Ketika ada pengunjung yang mengirim email melalui formulir kontak, secara otomatis kamu akan mendapatkan email pemberitahuan mulai dari nama, detail kontak, serta body.

Kamu bisa melakukan pengaturan email melalui tab Mail yang tersedia. Anda dapat melakukan percobaan dengan menambahkan beberapa kode di sini.
PERINGATAN – Pastikan kamu memasukkan alamat email aktif milik kamu di form To. Fungsi ini adalah untuk menerima email pesan dari pengunjung.
Cara Membuat Tombol atau Formulir Kontak di Blogger dan Wordpress


Mengatur Tampilan Pesan


Kamu juga bisa mengatur bagian tampilan pesan sesuai dengan keinginan milik kamu, Contohnya tampilan pesan yang muncul saat ada pengunjung mengirim pesan.

Kamu bisa menampilkan notifikasi bahwa pesan telah terkirim. Begitu juga sebaliknya jika pesan tidak terkirim, Kamu dapat menampilkan notifikasi bahwa pesan tidak berhasil terkirim. Silakan kamu atur isi tulisan yang sesuai dengan keinginan kamu.

Cara Membuat Tombol atau Formulir Kontak di Blogger dan Wordpress


  • Sender's message was sent successfuly - Atur isi tulisan yang kamu inginkan, misalnya " Terima kasih telah mengirim pesan kepada kami "
  • Sender's message failed to send - Atur tulisan jika pesan gagal di kirim, contohnya " Sepertinya telah terjadi kesalahan, kami mohon maaf yang sebesar-besarnya silahkan kirim ulang "
  • Validation errors occurred - Atur juga tulisan kamu jika menggunakan Captha

Membagikan Formulir Kontak ke Halaman


Jika semua penggaturan diatas sudah selesai, tinggal kamu SIMPAN hasilnya maka shurtcode akan tampil dibagian atas. Contohnya seperti gambar dibawah ini.

Cara Membuat Tombol atau Formulir Kontak di Blogger dan Wordpress

Agar kontak formulir bisa tampil pada halaman blog Wordpress kamu, selanjutnya pilih Laman > Tambah Baru

Paste shurtcode di halaman.

Cara Membuat Tombol atau Formulir Kontak di Blogger dan Wordpress

Klik ' Publikasikan ' dan lihat hasilnya.

Contoh Halaman

Tombol atau formulir kontak sudah kita miliki di blog versi WordPress dengan cara mudah dan pastinya gratis.

Kesimpulan


Demikian tutorial yang bisa kami sampaikan tentang 2 cara membuat contact form di Blogger dan WordPress yang bisa kamu ikuti dengan mudah dan gratis. Apabila kamu masih memiliki pertanyaan, maupun bingung dengan tutorial diatas, jangan ragu untuk memberi komentar di halaman ini.
Bagaimana reaksi Anda tentang artikel ini?
Previous article
Next article

Komentar (0)

Post a Comment

Kami memiliki kebijakan dalam berkomentar di blog ini :

- Dilarang promosi suatu barang
- Dilarang memasang link aktif di komentar
- Dilarang promosi iklan yang berbau judi, pornografi dan kekerasan
- Dilarang menulis komentar yang berisi sara atau cemuhan

Kebijakan komentar yang bisa Anda temukan selengkapnya disini

Dukungan :

Jika menyukai dengan artikel blog kami, silahkan subscribe blog ini

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Subscribe now

Signup now to my exclusive newsletter