Cara Membuat Platform Contact Us Pada Blog

Hallo sobat blogger pada kesempatan kali ini saya akan mebuat sebuah tutorial cara mambuat contact US, sebuah Platform dimana dalam semua blogger itu sangat dibutuhkan agar ketika, si pembaca kebingunagan ketika, membaca tutirial mereka bisa mengirip pesan terhadap yang punya website lalu, bagaimana kah cara membuatnya ? menurut saya ini sangatlah mudah anda tinggal mengikuti alur Tutorial di bawah ini.

Selain itu kita ketahui Platform nini sangat lah wajib di pasang di setip, amsing masing blogger anda halaman ini semacam hal prasarana, untuk blog itu sendiri. Entah itu mulai dari saran , kritik bahkan berguna untuk menanyakan sesuatuhal yang tidak mengerti, dalam postingan kita. Nah makanya dari itu saya akan membuat suatu artikel yang bermanfaat untuk anda oke langsung saja kita sibat berikut cara membuanya.

Anda bisa lihat contoh Platfrom Contact Us Pada gambar di bawah ini di bawah ini.

1. Tahap pertama anda masuk ke blogger anda klik dasahboard TaTa letak, lalu anda buat gadget baru lallu anda klik Gadget lainya >> lalu anda klik Formulir kontak. lihat gambar di bawah ini .

2. Lalu anda perharikan lagi dashboard klik >> Tema >> Edit HMTL lalu anda cari </head> cari agar lebih cepat menggunakan   Ctrl + F saja letakan kode di bawah yang saya sediakan di atas </head> Lalu klik simpan.

<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>

3. Selanjutnya anda buka kedashboard lagi perharikan pada Laman >> buat Laman baru >> jika sudah anda klik saja melalui HMTL jangan menggunakan Compose lalu copy kode yang telah saya sediakan di bawah ini. jika sudah anda klik simpan.

<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>

Nah demikianlah Cara Membuat Platform Contact Us Pada Blog mudah bukan ikuti langkah langkahnya pasti anda berhasil demikinalah cukup sekin dari saya dan teriamaksih semogga ini bermanffat untuk kalian.

Share this post