Cara Membuat Contact Form di Halaman Statis Blog

Cara Membuat Contact Form di Halaman Statis Blog

oleh

Halaman contact form adalah halaman yang di gunakan untuk menghubungi si pemilik blog. Halaman ini sangat di butuhkan bagi kalian yang ingin terhubung dengan pengunjung. Untuk itu pada artikel kali ini saya akan membagikan cara membuat contact form di halaman statis blog wordpress dan blogger dengan mudah.

Contact form ini adalah salah satu halaman yang wajib di miliki setiap situs website ataupun blog.

Karena jika kita tidak memiliki contact form, kita tidak bisa di hubungi oleh pengunjung ataupun client yang ingin bekerjasama.

Tidak menggunakan contact form, sama saja kalian seperti membuang rezeki.

Karena dari pengalaman saya, saya selalu mendapatkan email kerjasama yang menguntungkan melalui contact form ini.

Selain itu contact form juga menjadi salah satu syarat untuk mendaftar menjadi Publisher Google AdSense.

Hal ini sudah saya jelaskan di artikel saya mengenai cara mendaftar Google AdSense untuk blog.

Baca juga: Cara Daftar AdSense untuk Blog

Lalu bagaimana cara kerja contact form ini?

Cara kerjanya adalah jika salah satu client mengisi formulis contact form yang di sediakan, kemudian mengirim pesan.

Maka pesan tersebut akan masuk langsung melalui email yang kalian gunakan.

Cara Membuat Contact Form di Blog Blogger

Di sini saya akan memberikan beberapa design contact form.

Jadi kalian bisa pilih sesuai keinginan kalian.

a. Cara Membuat Contact Form di Blog Blogger by Arlina Design

  1. Langkah pertama masuk ke dashboard Blogger kalian.
  2. Masuk ke menu Tata Letak.
  3. Klik + Tambahkan Gadget di sidebar blog kalian.
  4. Setelah tampil pilihan widget, scroll ke bawah kemudian cari Formulir Kontak.
  5. Jika sudah ketemu klik tombol + untuk menambahkan.Cara Mudah Membuat Contact Form Di Blogger Blogspot
  6. Setelah muncul, langsung saja klik Simpan.
  7. Kemudian kalian masuk ke menu Tema di dashboard Blogger.
  8. Klik tombol titik tiga, kemudian klik Edit HTML.
  9. Di dalam halaman HTML, cari kode </head> dengan menekan Ctrl + F pada keyboard. Jika tidak ketemu, cari kode /head saja.
    <style type='text/css'>
#ContactForm1,#ContactForm1 br{display:none}
</style>
  10. Kemudian masukan script code di bawah ini, sebelum code </head>.
  11. Jika sudah, klik tombol icon 💾 Simpan tema.
  12. Kembali ke dashboard Blogger, pilih menu Halaman » Klik tombol Halaman baru.
  13. Buat judul halaman Contact.
  14. Klik tab HTML, kemudian masukan script code di bawah ini.
    <form name="contact-form">
<div class='formcolumn1'>
<input id="ContactForm1_contact-form-name" name="name" placeholder='Name' size="30" type="text" value="" />
</div>
<div class='formcolumn2'>
<input id="ContactForm1_contact-form-email" name="email" placeholder='Email' size="30" type="text" value="" />
</div>
<div class='formcolumn3'>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder='Message' rows="7"></textarea>
</div>
<div class='formcolumn4'>
<input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" />
</div>
<div style="max-width: 100%; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

<style scoped="" type="text/css">
#ContactForm1,#comments{display:none}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-email-message{font-family:'Roboto';width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)}
#ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)}
.formcolumn4{position:relative}
.formcolumn4:before{background-image:url(https://2.bp.blogspot.com/-nkmaptT0VoA/WumFePAy9DI/AAAAAAAAGlM/8lA5aRi2E-okumpdikjQancIKDjYaGNqwCLcBGAs/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0}
#ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px}
form{color:#888}
.formcolumn1,.formcolumn2{float:left;width:50%}
.formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0}
.formcolumn2{padding:0 0 0 10px}
@media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}
</style>
  15. Setelah itu klik menu ⚙️ Pilihan, kemudian kalian bisa atur halaman sesuai keinginan atau menggunakan pengaturan sesuai gambar dari saya. Setelah itu klik Selesai.Panduan Membuat Contact Form di Blogger.com dengan Google Docs
  16. Jika sudah, klik Publikasikan.

Jika berhasil tampilannya akan seperti ini.Cara Membuat Laman Kontak pada Blogger

Sumber: https://www.arlinadzgn.com/2018/05/cara-terbaru-memasang-formulir-kontak-di-blog.html

b. Cara Membuat Contact Form Blogger by bungfrangki.com

  1. Langkah pertama masuk ke dashboard Blogger kalian.
  2. Masuk ke menu Tata Letak.
  3. Klik + Tambahkan Gadget di sidebar blog kalian.
  4. Setelah tampil pilihan widget, scroll ke bawah kemudian cari Formulir Kontak.
  5. Jika sudah ketemu klik tombol + untuk menambahkan.Cara Mudah Membuat Contact Form Di Blogger Blogspot
  6. Langsung saja klik Simpan.
  7. Kemudian kalian masuk ke menu Tema di dashboard Blogger.
  8. Klik tombol titik tiga, kemudian klik Edit HTML.
  9. Di dalam halaman HTML, cari kode </head> dengan menekan Ctrl + F pada keyboard. Jika tidak ketemu, cari kode /head saja.
    <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:auto;margin:5px auto 15px;padding:10px;background:#ebebeb;border:1px solid #ccc;color:#777;border-radius:3px;box-shadow:0 4px 0 0 #c7c5c7}
#ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-name:focus{background:#fffff7;outline:0}
#ContactForm1_contact-form-email-message{width:95%;height:170px;margin:5px auto;padding:10px;background:#ebebeb;border:1px solid #ccc;color:#777;font-family:Arial,sans-serif;border-radius:3px;box-shadow:0 4px 0 0 #c7c5c7}
#ContactForm1_contact-form-submit{display:block;height:35px;float:left;color:#FFF;padding:0 20px;margin:10px 0 5px;cursor:pointer;background-color:#f4836a;box-shadow:0 4px 0 0 #c75b45;border:1px solid #eb7d67;border-radius:3px;text-shadow:0 1px 0 #de5135}
#ContactForm1_contact-form-submit:hover{background-color:#f5785f}
#ContactForm1_contact-form-submit:active{position:relative;top:2px;box-shadow:0 2px 0 0 #c75b45}
#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>
  10. Kemudian masukan script code di bawah ini, sebelum code </head>.
  11. Jika sudah, klik tombol icon 💾 Simpan tema.
  12. Kembali ke dashboard Blogger, pilih menu Halaman » Klik tombol Halaman baru.
  13. Buat judul halaman Contact.
  14. Klik tab HTML, kemudian masukan script code di bawah ini.
    <div dir="ltr" style="text-align: left;" >
Silahkan isi form di bawah ini untuk menghubungi kami. Jika tidak ada halangan dan kesibukan lainnya, kami akan langsung merespon dengan cepat pesan yang Anda kirimkan.
<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" /><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>
  15. Setelah itu klik menu ⚙️ Pilihan, kemudian kalian bisa atur halaman sesuai keinginan atau menggunakan pengaturan sesuai gambar dari saya. Setelah itu klik Selesai.Panduan Membuat Contact Form di Blogger.com dengan Google Docs
  16. Jika sudah, klik Publikasikan.

Jika berhasil tampilannya akan seperti ini.Cara Membuat Contact Form (Contact Us) Keren di Blog

Sumber: https://www.bungfrangki.com/2015/12/membuat-contact-form.html

c. Cara Membuat Contact Form VioMagz dan VioToko

Bagi kalian yang belum memiliki template VioMagz dan VioToko, kalian bisa membelinya langsung dari Mas Sugeng di sini.

Beli Sekarang

Langsung saja, berikut ini cara membuat contact form VioMagz dan VioToko.

  1. Masuk ke dashboard Blogger kalian.
  2. Pilih menu Halaman » Klik tombol Halaman baru.
  3. Buat judul halaman Contact.
  4. Klik tab HTML, kemudian masukan script code di bawah ini.
    <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>
  5. Setelah itu klik menu ⚙️ Pilihan, kemudian kalian bisa atur halaman sesuai keinginan atau menggunakan pengaturan sesuai gambar dari saya. Setelah itu klik Selesai.Panduan Membuat Contact Form di Blogger.com dengan Google Docs
  6. Jika sudah, klik Publikasikan.

Jika berhasil tampilannya akan seperti ini.cara membuat contact form viomagz

Sumber: https://sugeng.id/docs/memasang-form-kontak-halaman-statis-viomagz/

Cara Membuat Contact Form di Blog WordPress

Di sini saya menggunakan plugin Contact Form 7.

Bagi kalian yang sangat mengkhawatirkan kecepatan website atau blog kalian.

Kalian tidak perlu takut, karena plugin ini murni tidak mengurangi kecepatan blog yang kalian miliki.

Untuk cara memasangnya, silahkan ikuti langkah berikut ini:

Cara Membuat Contact Form di WordPress

  1. Langkah pertama masuk ke dalam blog WordPress yang kalian miliki.
  2. Geser kursor ke menu Plugin, kemudian klik Tambah Baru untuk menambah plugin.
  3. Di kolom cari plugin, ketik Contact Form 7 maka akan muncul di paling atas.
  4. Setelah ketemu, klik Pasang Sekarang » kemudian langsung klik Aktifkan.
  5. Jika sudah aktif, masuk ke menu Contact.
  6. Klik tombol Add New.
  7. Silahkan kalian tambahkan judul Contact Form.
  8. Kemudian kalian bisa mulai setting di tab Form untuk membuat bentuk contact form kalian.
  9. Jika kalian bingung, kalian bisa hapus semua code yang terdapat di tab Form, kemudian ganti dengan code milik saya.
    <label> Nama (required)
    [text* your-name] </label>

<label> Email (required)
    [email* your-email] </label>

<label> Judul
    [text your-subject] </label>

<label> Pesan
    [textarea your-message] </label>

[submit "Kirim"]
  10. Jika sudah selesai, klik tombol Save di bawah tab Form.
  11. Kemudian masuk ke tab Mail.
  12. Silahkan atur sesuai keinginan kalian, jika masih bingung ikuti pengaturan berikut ini.
    • To : Silahkan isi dengan email yang kalian gunakan.
    • From : Biarkan saja.
    • Subject : Biarkan saja.
    • Additional Headers : Biarkan saja.
    • Message Body : Hapus semua, kemudian ganti dengan teks di bawah ini. (Jangan lupa rubah namablog dan namadomain)
      Dari: [your-name] <[your-email]>
Subject: [your-subject]

Pesan:
[your-message]

-- 
Pesan ini di kirim dari blog namablog (https://www.namadomain.com)
    • File Attachments : Biarkan Saja.
  13. Jika sudah selesai, kalian scroll kebawah dan klik tombol Save.
  14. Maka akan muncul code berwarna biru di paling atas layar, silahkan kalian copy code yang di berikan tersebut.[UPDATE] Cara Membuat Contact Form Blogger pada halaman statis

Jika sudah di copy, kalian bisa memasang di halaman blog kalian.

Cara Memasang Halaman Contact Form di WordPress

  1. Langkah pertama geser kursor ke menu Laman.
  2. Kemudian klik Tambah Baru.
  3. Jangan lupa buat judul halaman.
  4. Kemudian masukan code yang di berikan tadi.Cara Membuat Layanan Contact Us di Blog
  5. Jika sudah selesai, klik Terbitkan.

Untuk menampilkannya, kalian harus memasangnya di menu blog kalian.

Cara Menampilkan Halaman Contact Form di WordPress

  1. Geser kursor ke menu Appearance kemudian klik Menus.
  2. Di kolom pages, kalian klik View All.Cara Membuat Halaman Privacy Policy
  3. Kemudian ceklis halaman yang ingin kalian tampilkan, setelah itu klik Add to Menu.
  4. Link halaman akan muncul di menu, kalian tinggal klik Save Menu.Cara Sederhana Membuat Privacy Policy Untuk Blog

Jika sudah tampil, kalian bisa klik menu Contact.

Kemudian tampilannya akan seperti ini, tergantung tema yang kalian gunakan juga.Cara Membuat Contact Form Sederhana di Blogger

Penutup

Demikian artikel dari saya mengenai cara membuat contact form di halaman statis blog WordPress dan juga Blogger.

Jika ada pertanyaan mengenai artikel ini, silahkan kalian masukan ke dalam kolom komentar.

Jika ada kritik dan saran, silahkan masukan juga ke dalam kolom komentar di bawah.

Jika ada typo (salah ketik), kalian bisa melaporkan di kolom komentar atau contact saya.

Jangan lupa share artikel ini agar bermanfaat juga untuk orang lain.

Satu pemikiran pada “Cara Membuat Contact Form di Halaman Statis Blog”

Komentar ditutup.