Membuat Contact Form Di Blog Dengan Mudah

Membuat Contact Form di Blog Dengan Mudah - Halaman statis Contact Form hampir atau bahkan semua blog ada. Memang setiap blogger niscaya menciptakan atau memasang Formulir Kontak pada blognya semoga memudahkan pengunjung untuk berinteraksi dengan pemilik blog selain lewat kolom komentar. Bayangkan jikalau Blogmu tidak mempunyai contact form atau apapun yang bida dihubungi, niscaya orang akan resah jikalau ada perlu denganmu. Oke, jikalau seseorang itu sudah kenal denganmu dapat menghubungi via telepon atau medsos. Tetapi bagi orang yang belum kenal dan hanya menjadi pembaca bahkan hanya tidak sengaja membaca niscaya resah jikalau tidak ditinggalkan jejak untuk menghubungi sekiranya ada hal yang memang perlu disampaikan.

Tujuan dibentuk alasannya ingin membantu pengunjung untuk menghubungi author yang sekiranya memang perlu atau penting. Tetapi terkadang dapat juga hanya "say Hello" saja. Penamaan widgetnya pun berbeda-beda masing-masing blog. Ada yang memberi nama "Hubungi Kami, Contact me, Contact us". Penyebutan itu tergantung maunya pembuat blog. Mereka punya alasan tersendiri.

Manfaat memasang contact form di blog

1. Pengunjung dapat bertanya mengenai topik diluar artikel yang dibahas
2. Dapat menanyakan isi artikel yang kurang jelas
3. Berdiskusi mengenai suatu topik tertentu
4. Seseorang dapat mengatakan kerjasama lewat form ini
5. Menjalin kekerabatan lebih bersahabat antara visitor dan admin

Mengenai nama tak usah dipermasalahkan. Yang penting kita dapat menciptakan kontak form untuk blog dan menerapkannya di blog masing-masing. Bagiamana cara menciptakan contact us semoga kelihatan elegan tetapi sederhana? Berikut panduannya. Panduan ini mengapdosi milik arlina design dan template kerensive.

1. Pasang font awesome di template Kamu sempurna di atas arahan </head> 

 <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

2. Buka template blog > edit html >  pasang arahan di bawah ini sebelum </style> atau ]]></b:skin> dan simpan template.

#ContactForm1 {     display: none; }  #ContactForm1_contact-form-name, #ContactForm1_contact-form-email {     width: 600px;     height: auto;     margin: 10px auto;     padding: 10px;     background: #fdfdfd;     color: #666;     border: 1px dashed #ddd;     transition: all 0.5s ease-in-out; }  #ContactForm1_contact-form-email-message {     width: 600px;     height: 175px;     margin: 10px auto;     padding: 10px;     background: #fdfdfd;     color: #666;     font-family: 'Roboto',sans-serif;     border: 1px dashed #ddd;     transition: all 0.5s ease-in-out; }  #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {     background: #fff;     outline: none;     border: 1px dashed #f8a82a; }  #ContactForm1_contact-form-submit {     font-family: 'Roboto';     font-size: 15px;     width: 101px;     height: 35px;     float: left;     color: #fff;     padding: 0;     margin: 10px 0 3px 0;     cursor: pointer;     background: #aaa;     border: none;     border-radius: 2px;     transition: background 0.4s linear; }  #ContactForm1_contact-form-submit:hover {     background: #f8a82a; }  #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message {     width: 450px;     margin-top: 35px; }

3. Buat halaman baru, copy paste arahan di bawah ini pada tab HTML.

<div class='post-body entry-content' id='post-body-2699414411090996206'> <p><div class="separator" style="clear: both; text-align: center;"> <a href="#contact" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Contact Form di Blog Dengan Praktis Membuat Contact Form di Blog Dengan Mudah" border="0" data-original-height="600" data-original-width="800" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-K9EzY9xbaFOT6ZHrFQ_gK3HVa5lpFDZU44x8XcKFM5uXfezItS5QY0x8aTLPvtz1D05NiPOkvv3RQqaw9mFjwJLtCph3uMVXv04u2pBAay-TvzItrlv_gr5d_NBDNaTFfQEXS9S-CRzP/s640/short_mailbox.gif" title="Membuat Contact Form di Blog Dengan Mudah" width="640" /></a></div> <br /> We love being a web designer and we&#8217;re incredibly thankful that we decided to join this industry many years ago. Contact us so we can help free . I&#8217;m usually available from 24 hour. I do also custom copywriting, storiewriting etc. I am currently accepting new freelance projects, and always excited to hear interesting proposals. <br /> <div id="contact"></div> <form name="contact-form"> <span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-user"></i> Nama</span> <input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />    <span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-envelope"></i> Alamat Email <span style="color: red; font-weight: bolder;">*</span></span>  <input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />    <span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-pencil"></i> Isi Pesan <span style="color: red; font-weight: bolder;">*</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>

4. Kemudian lihat di bab setelan entri > pilihan > pilih nonaktifkan komentar pembaca dan gunakan tekan "enter" untuk baris gres semoga terlihat rapi.

Alangkah baiknya pratinjau terlebih dahulu untuk melihat Widget Contact Form, jikalau dirasa sudah manis dan benar tinggal dipublikasikan kontak formnya. Kamu juga dapat mengubah jenis, ukuran teks, atau tampilannya sekreatif mungkin.

Demo