Tutorial: Cara Membuat Formulir Kontak Minimalis, Responsive & Keren di Blogger

Salah satu pengguna SEO Kraken Blogger Theme bertanya tentang bagaimana cara membuat dan memasang widget Contact Us di Blogspot sebagaimana tampilan yang digunakan SEO Killer Tips saat ini.

Berawal dari pertanyaan tersebut; maka dari itu — melalui tulisan ini, penulis ingin menjelaskan bagaimana cara membuatnya.

Kebetulan karena SEO Kraken merupakan template blogger yang sudah valid HTML5 — dalam artian, ada beberapa kode default bawaan Blogger yang memang sengaja dihapus karena memang memberatkan kecepatan loading situs web — otomatis ada perlakuan khusus terkait cara memasangnya.

Cara Membuat Formulir Kontak Minimalis, Responsive & Keren di Blogger

Pada langkah pertama ini, apabila sobat belum membuat halaman statis (Static Page) di blognya, praktekkan cara membuatnya.

• Buka Blogger sebagaimana mestinya
• Pilih salah satu Blog, ketuk tombol Page atau Halaman
• Ketuk tombol New Page atau Halaman Baru
• Isi judul laman statis terlebih dahulu, kemudian tekan tombol Simpan (Save) – bukan dipublikasikan

Note: Tujuan dan/atau alasan kenapa halaman statis terbaru ini jangan langsung dipublikasikan, agar judul artikelnya tersesuaikan dengan URL dari Static Page tersebut.

Contohnya… Nama laman statis tersebut berjudulkan “Kontak”, maka URL yang dihasilkan nantinya akan seperti ini: https://tipsseokiller.blogspot.com/p/kontak.html — bukan URL rusak seperti https://tipsseokiller.blogspot.com/p/blog-page.html atau https://tipsseokiller.blogspot.com/p/blog-page-17.html seperti yang sering kita temukan.

Oke, sudah? Selanjutnya silakan Copas secara mentah-mentah kode di bawah ini pada laman statis yang dimaksud; dengan tata langkah sebagai berikut:

1. Masih di halaman statis tersebut
2. Masuk ke mode tulisan HTML — bukan Compose…
3. Copas kode dibawah ini:

<style>
.tb-contact-form-widget{color:#000;padding:0}
.srbtn{display:inline-block;}
.cform-button, .btn-reset{background-color:#f1f1f1;padding:5px 30px;}
.cform-button:hover {background-color: #2980b9;color: #fff;}
.btn-reset:hover {background-color: red;color: #fff;}
.c-form-name, .c-form-email { width: 50%; max-width: 50%; margin-bottom: 10px;padding: 10px;border: 1px solid #CCC;border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;
box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;}
.c-form-email-message {width: 95%; max-width: 95%; margin-bottom: 10px;padding: 10px;border: 1px solid #CCC;-webkit-border-radius: 5px;-moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;-webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF}
.c-form-name, .c-form-email, .c-form-email-message input:focus{border-color: #E8C291;margin: 5px 0 15px}
.b-social-buttons{list-style-type:none;text-align:center}
.b-social-buttons li{display:inline-block;padding:15px;background-color:#f5f5f5;border-radius:5px}
.b-social-buttons li a{color:#333;text-decoration:none}
#ContactForm1_contact-form-success-message, #ContactForm1_contact-form-error-message{width:100%;margin-top:35px;}
</style>
<div class="tb-contact-form-widget">
<form name="contact-form">
<div class="form-name">
<span><i class="fa fa-pencil-square-o"></i> Your Name: </span>
<input class="c-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div>
<div class="form-email">
<span><i class="fa fa-envelope-o"></i> E-mail Address *: </span>
<input class="c-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div>
<div style="clear: both;">
</div>
<div class="form-message">
<span><i class="fa fa-keyboard-o"></i> Message *:</span>
<textarea class="c-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><div class="srbtn">
<input class="cform-button" id="ContactForm1_contact-form-submit" type="button" value="Submit" /><input type="reset" class="btn-reset" value="Clear" /></div>
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
<ul class="b-social-buttons">
<li><a href="https://www.twitter.com/ariefghozaly" rel="nofollow" target="_blank" class="btn-lg"><i class="fa fa-twitter"> <span class="network-name">Twitter</span></i></a></li>
<li><a href="https://www.facebook.com/ariefghozaly24" rel="nofollow" target="_blank" class="btn-lg"><i class="fa fa-facebook"> <span class="network-name">Facebook</span></i></a></li>
<li><a href="https://www.youtube.com/channel/UCFxERGJj0e_UuW6WaW3ts0w" rel="nofollow" target="_blank" class="btn-lg"><i class="fa fa-youtube-play"> <span class="network-name">Youtube</span></i></a></li>
</ul>
</div>
</form>
</div>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = 'BlogID-Milik-Sobat';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDxBlogID-Milik-Sobat','//https://tipsseokiller.blogspot.com/','BlogID-Milik-Sobat');
_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': 'BlogID-Milik-Sobat', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

4. Simpan halaman statis tersebut, kemudian cek kembali

Cek kembali kode HTML, CSS, dan JavaScript diatas apabila ingin memodifikasinya. Ada juga beberapa kode diatas yang telah saya tandai untuk diganti (diubah) dengan kepemilikan situs web sobat.

Pastikan FontAwesome yang sobat gunakan merupakan FontAwesome versi terbaru yakni 4.7.0.

Salah satu kode yang sudah ditandai adalah BlogID-Milik-Sobat. Silakan ganti tulisan tersebut dengan BlogID milik sobat. BlogID ini sederatan angka yang ditampilkan pada URL pada Address Bar sobat ketika Blog tersebut di buka.

Nah itu dia tutorial bagaimana cara membuat dan memasang formulir kontak (Contact Form/Contact Us) simple, minimalis, responsive dan keren di Blogger.*