Cara Menambahkan Formulir Kontak di Blog | Panduan Pemula
Formulir kontak pada suatu blog merupakan syarat yang harus ada disebuah blog karena tanpa formulir ini maka pengunjung dapat berinteraksi dengan penulis. Para pengunjung bisa sharing atau sekedar say hai ke penulis merasa terbantu dengan artikel yang diposting oleh penulis blog. Formulir kontak juga merupakan media interaksi yang dapat menjaga privasi pengunjung dalam menyampaikan pertanyaan, atau saran yang dapat membangun.
Bagi yang blognya sudah banyak pengunjungnya tidak menutup kemungkinan adanya kerjasamanya antar pihak yang ingin membayar kita dalam membuat suatu artikel atau juga bisa dengan kerjasama lain sehingga dapat membantu dalam memberikan informasi kepada para netizen.
Langkah - Langkah Dalam Membuat Formulir Kontak
Tanpa panjang lebar berikut saya akan menjelaskan tentang Bagaimana menambahkan formulir kontak di blog. Untuk kode script saya dapatkan pada web mbak Arlina, dan saya juga menggunakan formulir kontak tersebut dengan sedikit perubahan. Langkah - langkahnya sebagai berikut :
1. Login ke Blogger >> Tata Letak >> Add Gadget Pada Widget Side Bar >> Cari Formulir Kontak >> Klik Formulir Kontak >> Simpan.
2. Sekarang Edit template blog, Klik Tema >> Edit HTML >> Tambahkan kode berikut sebelum </head>.
<style type='text/css'>
#ContactForm1,#ContactForm1 br{display:none}
</style>Catatan kode tersebut dipasang untuk mencegah menampilkan formulir kontak di widget sidebar.
3. Kemudian Simpan Tema.
4. Sekarang buat halaman formulir kontak dengan Klik Halaman pada Dashboard blogger. lalu tempelkan kode html dibawah ini.
<form name="contact-form"><div class='formcolumn1'><input id="ContactForm1_contact-form-name" name="name" placeholder='Name' size="30" type="text" value="" /><br />
</div><div class='formcolumn2'><input id="ContactForm1_contact-form-email" name="email" placeholder='Email' size="30" type="text" value="" /><br />
</div><div class='formcolumn3'><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder='Message' rows="7"></textarea><br />
</div><div class='formcolumn4'><input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" /><br />
</div><div style="max-width: 100%; text-align: center; width: 100%;"><div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></div></form><br />
<style scoped="" type="text/css">
#ContactForm1,#comments{display:none}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:2px solid rgba(30, 144, 255)}
#ContactForm1_contact-form-email-message{font-family:'Roboto';width:100%;height:100px;margin:10px auto;padding:14px;background:#fff;color:#222;border:2px solid rgba(30, 144, 255)}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)}
#ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)}
.formcolumn4{position:relative}
.formcolumn4:before{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJSFpSgZ5WKvwvQr_CK1kVxAGqUA4Jf2-YkheHkpTE6fQ8UXLJpjmt636lfqHbb0tLiPDe55Y5JQGhY1xqFMdCJwk-EycQKa4iCSgA_gklmx3iSWfSJDXxRoyH5XxmCfkoX1iYM4lAAyci/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0}
#ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px}
form{color:#888}
.formcolumn1,.formcolumn2{float:left;width:50%}
.formcolumn1,.formcolumn2{margin:0 10px 0 0;padding:0 10px 0 0}
.formcolumn2{padding:0 10px 0 0;padding:0 10px 0 0}
@media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}
</style>Tempelkan kode diatas di html jangan di Compose. Kemudian klik Tekan Enter Untuk Baris Baru.
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script><br />
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '7342017194742683056';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7342017194742683056','//www.arlinadzgn.com/','7342017194742683056');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '7342017194742683056', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script> |
| Blog ID |
Penutup
Demikian sedikit postingan tentang "Tutorial Menambahkan Formulir Kontak di Blog" Jangan lupa membaca post saya yang lainnya dengan membaca DAFTAR ISI. Semoga postingan ini dapat bermanfaat.