Cara Membuat Contact Form Pada Blog Dengan Tampilan Yang Menarik

SHARE:

Berikut ini cara membuat contact form pada blog dengan tampilan yang menarik menggunakan kode HTML

Kali ini saya akan berbagi ilmu mengenai cara membuat contact form pada blog yang berguna untuk memudahkan pengunjung mengajukan kritik maupun saran kepada admin blog. Cara ini sudah saya terapkan pada blog ini, silahkan kalian bisa lihat hasilnya pada halaman Contact.
Cara Membuat Contact Form Pada Blog Dengan Tampilan Yang Menarik
Contact form adalah sebuah fitur yang wajib diterapkan pada setiap blog agar ada jalinan komunikasi antara pemilik blog atau admin dengan pengunjung. Contact form juga memiliki fungsi lain yaitu sebagai salah satu syarat untuk melengkapi blog ketika akan didaftarkan pada Google Adsense.

Cara Membuat Contact Form Pada Blog

Oke langsung saja saya akan memberikan tahapan-tahapannya dalam membuat contact form yang diterapkan dalam blog.

1. Buat Widget Formulir Kontak Pada Blog
  • Caranya masuk ke akun blogger klik Tata Letak > Pada sidebar sebelah kanan klik Tambahkan Gadget > Gadget Lainnya > Formulir Kontak
Cara Membuat Contact Form Pada Blog Dengan Tampilan Yang Menarik
2. Buat Halaman Statis Baru
  • Caranya pada akun blogger kalian klik Halaman > Halaman baru
  • Pada format penulisan pilih yang HTML, jangan Compose
  • Copy kode dibawah ini pada halaman baru tersebut

<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> Name </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 Address <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</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> Content <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</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="Send" />  
<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:#fff;color:#aaa;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:#fff;background-position:0 0;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>
  • Selanjutnya klik Publikasikan untuk mempublikasikan halaman baru tersebut.
  • Silahkan cek halaman tersebut, jika berhasil tampilannya akan sama persis dengan blog ini.
Kemana Pesan Dari Contact Form Tersebut Terkirim?

Pengunjung yang mengirimkan pesan entah itu kritik maupun saran melalui contact form tersebut, isi dari pesan akan terkirim ke email kalian yag digunakan untuk membuat blog. Pesan akan terkirim secara otomatis dan singkat tanpa menunggu jeda waktu yang lama.

Sampai dengan tahapan ini kalian telah berhasil membuat contact form untuk blog. Semoga tutorial cara membuat contact form pada blog ini bermanfaat bagi kalian dalam berkarya pada dunia ngeblog.

COMMENTS

BLOGGER: 1
Loading...
Nama

Adsense,4,Blog,10,Design Blog,5,Seo,4,
ltr
item
Belajar Ngeblog: Cara Membuat Contact Form Pada Blog Dengan Tampilan Yang Menarik
Cara Membuat Contact Form Pada Blog Dengan Tampilan Yang Menarik
Berikut ini cara membuat contact form pada blog dengan tampilan yang menarik menggunakan kode HTML
https://3.bp.blogspot.com/-ueHN6EB93eI/WiKjr3hTtNI/AAAAAAAACOo/0aXWn7kl7nw1B2EPktV0KnvluwWbnAigQCLcBGAs/s640/Cara%2Bmembuat%2Bcontact%2Bform%2Bpada%2Bblog.png
https://3.bp.blogspot.com/-ueHN6EB93eI/WiKjr3hTtNI/AAAAAAAACOo/0aXWn7kl7nw1B2EPktV0KnvluwWbnAigQCLcBGAs/s72-c/Cara%2Bmembuat%2Bcontact%2Bform%2Bpada%2Bblog.png
Belajar Ngeblog
https://alimbanjar.blogspot.com/2017/12/cara-membuat-contact-form.html
https://alimbanjar.blogspot.com/
https://alimbanjar.blogspot.com/
https://alimbanjar.blogspot.com/2017/12/cara-membuat-contact-form.html
true
4087688367466372745
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy