Xivanki Share !!: Cara Membuat Contact Form di Blog

Cara Membuat Contact Form di Blog - Selamat datang di situs media global terbaru Xivanki, Pada halaman ini kami menyajikan informasi tentang Cara Membuat Contact Form di Blog !! Semoga tulisan dengan kategori Tutorial Blogger !! ini bermanfaat bagi anda. Silahkan sebarluaskan postingan Cara Membuat Contact Form di Blog ini ke social media anda, Semoga rezeki berlimpah ikut dimudahkan Allah bagi anda, Lebih jelas infonya lansung dibawah -->

Contact Form merupakan halaman yang wajib dimiliki oleh setiap Blog.

Mengapa ? Karena halaman ini memiliki fungsi yang sangat penting. Fungsinya yaitu agar pengunjung dapat menghubungi kita sebagai admin blog melalui Email mereka. Jadi blog sobat harus juga punya halaman Contact Form.

Banyak sekali manfaat dari halaman Contact Form ini, salah satunya adalah menjaga privasi antara pengunjung dan admin blog karena berfungsi untuk menghindari spam yang di kirim melalui email.

Kalau berbicara mengenai Contact Form atau Formulir kontak, sebenarnya pihak Blogger sendiri sudah menyediakan Contact Form yang siap di pakai. Tetapi, ada satu kekurangan, yaitu Contact Form yang disediakan oleh Blogger hanya dapat dipasang berupa Widget saja.

Tapi, kita dapat memasangnya pada halaman blog. Namun untuk memasangnya pada halaman blog, mungkin agak sedikit sulit dilakukan bagi blogger pemula. Oleh karena itulah pada postingan kali ini saya akan membagikan cara membuat contact form di Blogger dengan dua cara.

Dan kedua cara ini pun sangat mudah dilakukan oleh Blogger pemula sekalipun. Karena tidak perlu menghapus atau mengedit Kode-kode yang membingungkan.

Berikut ini langkah-langkah membuat contact form di Blog.

Cara yang pertama

1. Kunjungi situs 123 Contact From. Lalu klik Sign Up > Basic

2. Lalu akan muncul form pendaftaran. Silahkan sobat isi semua data yang diminta form tersebut, jika sudah selesai, langsung saja klik Create

3. Pada halaman selanjutnya, pilih Contact & Lead Form, agar lebih jelas silahkan lihat gambar dibawah ini.

4. Setelah itu isikan judul dengan Contact Us atau sesuai keinginan sobat

5. Selanjutnya, sobat akan di beri waktu untuk mengedit tampilan dari Contact Form nya.

6. Jika sudah selesai mengedit, silahkan sobat klik My Form > Get Code & Publish

7. Kemudian sobat klik saja Blogger di sebelah kiri dan copy semua Script nya

8. Selesai

Setelah selesai membuat Contact Form nya, sekarang kita hanya tinggal memasangnya pada halaman Blog. Untuk memasangnya silahkan sobat ikuti langkah-langkahnya berikut ini :

1. Masuk ke Blogger dan pilih Blog sobat

2. Lalu pilih menu Laman > Laman Baru > HTML. Dan Paste script yang sudah sobat copy tadi ke dalam nya.

3. Beri judul halaman sesuai keinginan sobat. Misalnya Contact Us, Kontak, Contact Me.

4. Terakhir Klik Publikasikan / Publish. Dan Selesai

Itu cara yang pertama, dan mungkin terlalu ribet dan panjang. Mungkin cara yang kedua akan lebih mudah untuk sobat lakukan.

Cara yang kedua

1. Masuk ke Blogger, pilih Blog sobat

2. Lalu klik Laman > Laman Baru

3. Letakkan kode berikut di mode HTML bukan Compose

<form name="contact-form">
<span style="color: #666666; font-family: "open sans" , "arial" , "helvetica" , sans-serif; font-weight: 700;"><i class="fa fa-user"></i> Nama </span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />

<span style="color: #666666; font-family: "open sans" , "arial" , "helvetica" , sans-serif; font-weight: 700;"><i class="fa fa-envelope"></i> Email Anda <span style="color: #f56954; font-size: x-small; font-weight: bold;">*</span></span>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />

<span style="color: #666666; font-family: "open sans" , "arial" , "helvetica" , sans-serif; font-weight: 700;"><i class="fa fa-pencil-square-o"></i> Isi Pesan <span style="color: #f56954; font-size: x-small; font-weight: bold;">*</span></span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<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>

<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager {display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width:100%;height:auto;margin:5px auto;padding:10px;background:#fff;color:#444;border:1px solid #ddd;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fff;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ddd;border-radius:3px;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit {width:100%;font-family:'Open Sans';float:left;background:#333;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;background-image: linear-gradient(110deg, #7986cb 0%, #7986cb 50%, transparent 50%, transparent 100%);background-size:200%;background-position:120% 0;background-repeat:no-repeat;border:1px solid #ddd;transition:all .8s ease, background-position .8s ease, color .8s ease;}
#ContactForm1_contact-form-submit:hover {color:#222;background:#fff;border-color:#7986cb;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:#f36c60;border:none;box-shadow:none;color:#fff;padding:5px 0;}
.contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
img.contact-form-cross {line-height:40px;margin-left:5px;}
</style>

4. Isikan judul sesuai dengan keinginan sobat

5. Terakhir klik Publikasikan / Publish

Bagaimana ? Mudah bukan cara yang kedua dibandingkan cara yang pertama. Jika sudah membuat halaman contact form, maka langkah selanjutnya adalah menampilkannya pada Blog.

Berikut ini langkah-langkah untuk menampilkannya pada Blog.

1. Masuk ke Blogger

2. Klik menu Tata Letak > add gadget > Laman

3. Lalu centang pada bagian Contact Form

4. Klik Simpan

Cara diatas hanya berlaku jika sobat menggunakan Template bawaan dari Blogger. Namun, jika sobat menggunakan template pihak ketiga atau bukan dari Blogger, maka caranya agak sedikit berbeda. Berikut ini caranya.

1. Masuk ke Blogger, pilih Blog sobat

2. Klik menu Template > Edit HTML

3. Biasanya template dari luar sudah dilengkapi dengan menu navigasi, jadi silahkan sobat cari kode menu navigasinya. Kira-kira seperti dibawah ini.

<li><a href='#'>Home</a></li>
<li><a href='#'>Menu 1</a>
<ul>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>

Keterangan :

• Tanda Pagar silahkan sobat ganti dengan link dari halaman contact form yang telah sobat buat tadi. Untuk mengetahui link nya, klik saja lihat pada halaman contact form.

• Menu 1, silahkan di ganti dengan judul halaman contact form sobat.

4. Setelah itu klik Simpan Template


Itulah dua cara yang dapat sobat lakukan untuk membuat halaman contact form di blog sobat. Sekian dulu postingan saya kali ini tentang cara membuat contact form di Blog, semoga bermanfaat.