Daffa R Hanya pemula yang suka bermain game dan begadang hingga pagi.

Cara Membuat Laman Contact Form di Blogspot dan WordPress

3 min read

Contact Form

Blog / Website yang menyediakan laman contact form bisa disebut website yang Profesional, sebab dengan adanya laman ini akan memudahkan pengunjung untuk berkomunikasi secara privasi melalui pesan pribadi kepada penulis.

Laman contact form memiliki sebutan yang berbeda – beda ada yang menyebutnya Contact Us, Contact Me, Hubungi Kami. di PintarMemasak saya menyebutnya laman kontak, bisa dilihat dibawah secara jelas.

Keuntungan Menggunakan Laman Contact Form

  1. Memudahkan pengunjung untuk menanyakan topik yang terkait di blog kamu, selain itu laman ini sangat berguna untuk orang yang ingin bekerja sama dengan blog kamu.
  2. Pengunjung juga dapat memberi kritik dan saran secara tidak langsung, ini akan membuat anda termotivasi untuk mengembangkan kualitas blog kedepannya.
  3. Laman contact form juga harus kalian miliki jika ingin mendaftar Google Adsense, kamu harus tau blog yang profesional akan terlihat indah dimata Google.

Setelah mengetahui keuntungannya, lantas bagaimana cara membuatnya?

Cara Membuat Laman Contact Form Website

Untuk membuat halaman ini harus teliti ya, karna blogspot agak ribet dibanding wordpress.

Cara Membuat Laman Contact Form di Blogspot

  • Masuk kehalaman Blogger >> Tata Letak >> Tambahkan widget Formulir Kontak pada sidebar
  • Untuk menyembunyikan widget Contact Form masuk ke Tema >> Edit HTML >> Masukkan kode dibawah ini tepat diatas </head>
<style type='text/css'> #ContactForm1{display:none} </style>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
/* Contact form */ #ContactForm1_contact-form-email,#ContactForm1_contact-form-name{width:70%;height:50px;margin:0;padding:10px;background:#fbfbfb;border:1px solid #ccc;color:#777;border-radius:3px;} #ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-name:focus{background:#fff;outline:0} #ContactForm1_contact-form-email-message{width:95%;height:170px;margin:0;padding:10px;background:#fbfbfb;border:1px solid #ccc;color:#777;border-radius:3px;} #ContactForm1_contact-form-submit{display:block;height:35px;float:left;color:#FFF;padding:10px;margin:0;cursor:pointer;background-color:#6e9ee6;border:1px solid #6e9ee6;border-radius:3px;} #ContactForm1_contact-form-submit:hover{background-color:#3c3c3c} #ContactForm1_contact-form-submit:active{position:relative;top:2px;} #ContactForm1_contact-form-submit:focus{outline:0} #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:15px;text-align:left}
@media screen and (max-width:768px){#ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message,#ContactForm1_contact-form-name{width:96%}} @media screen and (max-width:480px){#ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message,#ContactForm1_contact-form-name{width:94%}.post-body{margin:0 15px}}
</style>
</b:if>

Contact Form Blogspot

  • Jika sudah memasang kode diatas selanjutnya buka menu Laman >> Halaman Baru >> Beri judul Halaman, kalian bisa menamainya Contact Form, Contact Us, Hubungi Kami dan lain lain.
  • Masuk ke mode HTML lalu masukkan kode berikut
<div dir="ltr" style="text-align: justify;" > Silahkan isi pesan melalui form di bawah ini untuk menghubungi kami. Jika tidak ada halangan dan kesibukan lainnya, kami akan langsung merespon dengan cepat pesan yang Anda kirimkan. Terima kasih <br /> <form name="contact-form"> <input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><br /> <input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br /> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea><br /> <input id="ContactForm1_contact-form-submit" type="button" value="Kirim Pesan" /><br />
<div class="clear"> </div>
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
  • Selanjutnya Non-aktifkan komentar >> Publikasikan >> Cek apakah laman contactnya berfungsi atau tidak.

Cara Membuat Laman Contact Form di WordPress

Contact Form 7

  • Login ke halaman dashboard WordPress anda
  • Masuk ke Menu >> Plugin >> Cari Plugin Contact Form 7, oh iya plugin satu ini memiliki logo gunung fuji.
  • Setelah ketemu kaliam bisa langsung  “Install Now” kemudian pilih “Activate” . Jika sudah aktif, kini saatnya mengatur settingan plugin ini.
  • Kemudian kembali ke dashboard WordPress lalu scroll kebawah dan temukan menu “Contact” selanjutnya pilih “Contact Form”, disini kamu akan dihadapkan panel dari plugin contact form 7

Contact Form 7

  • Untuk memulai pembuatan laman kontak silahkan pilih “Add New“, kemudian kamu akan dihadapkan dashboard edit template form dan jangan lupa memberi judul pada “Add New Contact Form“. Saya memberikan contoh dengan judul hubungi kami, tersedia beberapa template edit yang bisa kamu sesuaikan mulai dari penambahan Text, URL,  Date, Tel, Number dan lain-lainnya.
  • Jika sudah jangan lupa klik “Save” pada bagian pojok kanan atas.

Contact Form

  • Eitss setelah itu jangan lupa setting bagian “Mail” disebelah form tersebut, pada bagian mail anda bisa mengedit beberapa menu seperti To, From, Subject, Additional Header, Message Body dan File Attachments. Jika sudah klik save
  • Kemudian kamu bisa kembali ke menu “Contact“, jika dirasa proses tadi benar nantinya akan muncul title sesuai yang kamu buat.
  • Silahkan copy shortcode, dan pastekan pada pages / post. saya mencontohkan membuat pages baru melalui menu “Pages“, kemudian pilih “Add News” lalu pastekan short-code yang sudah anda copy tadi kemudian publish
  • Silahkan cek hasilnya apakah laman contact berfungsi atau tidak.

Kesimpulan

Membuat contact form di WordPress ternyata lebih mudah dibanding di Blogspot. Jika di wordpress kalian hanya perlu menginstall plugin saja dan sudah kelar. Nah bagaimana, mudah kan?

Daffa R Hanya pemula yang suka bermain game dan begadang hingga pagi.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *