Cara Membuat Contact Us Di Blog Dengan Mudah

Cara Membuat Contact Us Di Blog Dengan Mudah

      Setelah Kemarin saya sempat share tentang cara membuat contact form/contact us kali ini saya akan melanjutkan untuk posting cara membuat kontak form dengan mudah di halaman statis Cara ini saya dapat dari blog BungFrangki .

Bedanya apa dengan cara yang pertama dengan yang sekarang..???

Bedanya kemarin saya menggunakan jasa pihak ketiga, kali ini bawaan blog hanya saja kita manipulasi agar bisa di letakan pada halaman statis. Untuk mempersingkat waktu langsung saja di simak baik-baik.

Baca Juga :

Membuat Kontak Form Dengan Mudah

Cara Menambah Kontak Dan Pemulihan Akun Gmail

Cara Mudah Membuat Postingan Di Blogger Lewat hp

Sebelumnya kalian harus mengaktifkan formulir kontak dulu pada menu tata letak.

Buka Dasbor > Tata Letak > Tambah Gadget > Gadget lainnya

Jika anda sudah memasang gadget ini lewati saja langkah ini.

Cari Formulir Kontak Tinggal klik tanda +

Selanjutnya letakan kode berikut pada template blog tepat di atas kode </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: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>  

Langkah terahir Buka Dasbor > Halaman / Page silahkan buat halaman atau jika sudah ada tinggal edit beri judul dan masukan kode di bawah ini jangan lupa 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">  

Edit text sesuai dengan yang agan inginkan, selamat sekarang agan sudah memiliki contact us di blog agan ..

Jangan lupa ambil url pagenya dan letakan sesuai keinginan, jika ada yang ingin di tanyakan boleh hubungi ane lewat contact boleh juga melalui komentar.

AntarezPedia

Percayalah Tidak Ada Hasil Yang Menghiyanati Usaha Dan Tidak Akan Ada Usaha Yang Berahir Sia - Sia.

Subscribe to receive free email updates: