Cara Membuat Contact Form di Blogger Menggunakan Bootstrap

Cara Membuat Contact Form di Blogger - Bagi seorang blogger halaman contact form merupakan salah satu hal yang penting.

Contact form merupakan sebuah formulir kontak yang berguna untuk mengirimkan pesan yang ingin disampaikan oleh pembaca blog. Baik itu untuk menyampaikan saran dan kritik maupun untuk keperluan bisnis.

Umumnya contact form di blogger memiliki tiga struktur.

Nama
Email
Pesan

Namun ada juga yang menambahkan struktur lainnya, namun itu semua tergantung kepada keperluan si pengelola blog.

Jika blog kamu isinya produk untuk di jual maka strukturnya saya sarankan untuk menambahkan pilihan belanja.

Seperti jenis barang yang akan dibeli, sistem pembayarn, atau yang lainnya.

Beberapa blogger senior juga mengamini jika contact form merupakan salah satu ciri bahwa blog yang dikelola memiliki keseriusan.

Sebetulnya pihak blogger.com juga telah menyediakan contact form secara default yang bisa kamu pasang di bagian widget.

Namun contact form bawaan blogger.com tidak bisa diatur dengan mudah dan bahkan memiliki tampilan yang sepertinya kurang menarik.

Sehingga kebanyakan blogger membuat costume contact form di halaman statis mereka.

Dalam artikel ini saya akan membagikan cara membuat contact form menggunakan bootstrap dan tentunya contact form ini memiliki tampilan yang menarik.

Cara Membuat Contact Form di Blogger

Caranya cukup mudah, silahkan kalian login ke dashboard blogger masing-masing.

1. Buat Halaman

Silahkan kalian buat halaman yang nantinya akan dijadikan sebagai halaman contact form.

2. Salin Kode Contact Form

Selanjutnya silahkan kalian salin kode yang telah saya siapkan dibawah ini.

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="enterblogger-logo">
<i class="material-icons md-48">verified_user</i>
</div>
<style scoped="scoped">
  .enterblogger-logo{text-align:center;}
  @font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ewrjPiaoEww8AihgqWRJAo.woff) format('woff'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5bbKic1PW3nceB3q24YFOMg.ttf) format('truetype');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: inherit;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  vertical-align:middle;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}
  .md-48{font-size: 100px;
    color: #546de5;
    padding: 10px;
    background: #dde3ff;
    border-radius: 100px;}
.enterblogger-input{float:none;position:relative;margin-bottom:45px;margin-right:10px}.enterblogger-input input,.enterblogger-input textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.enterblogger-input input:focus,.enterblogger-input textarea:focus{outline:none}.enterblogger-input label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.enterblogger-input input:focus ~ label,.enterblogger-input input:valid ~ label,.enterblogger-input textarea:focus ~ label,.enterblogger-input textarea:valid ~ label{top:-20px;font-size:14px;color:#546de5}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#546de5;transition:1.2s cubic-bezier(1, 0.12, 0.25, 1) all}.bar:before{left:50%}.bar:after{right:50%}.enterblogger-input input:focus ~ .bar:before,.enterblogger-input input:focus ~ .bar:after,.enterblogger-input textarea:focus ~ .bar:before,.enterblogger-input textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.enterblogger-input input:focus ~ .highlight,.enterblogger-input textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.enterblogger-input input:focus ~ label,.enterblogger-input input:valid ~ label,.enterblogger-input textarea:focus ~ label,.enterblogger-input textarea:valid ~ label{top:-20px;font-size:13px;color:#546de5}
input#ContactForm1_contact-form-email-message{height:150px}
input#ContactForm1_contact-form-submit{width:100%;color:#fff!important;background:#546de5;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;float:left;margin-top:15px}
input#ContactForm1_contact-form-submit:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
#ContactForm1_contact-form-error-message{float:right;background:#D32F2F;color:#fff;font-size:13px;font-weight:700;border-radius:3px}#ContactForm1_contact-form-success-message{float:right;background:#4CAF50;color:#fff;font-size:13px;font-weight:700;border-radius:3px}
</style>

<br />
<form name="contact-form">
<div class="enterblogger-input">
<input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label><i class="material-icons">
account_circle
</i> Nama Sobat</label>
</div>
<div class="enterblogger-input">
<input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label><i class="material-icons">
contact_mail
</i> Email Sobat</label>
</div>
<div class="enterblogger-input">
<textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea>
<span class="highlight"></span>
<span class="bar"></span>
<label><i class="material-icons">
message
</i> Tulis Pesan Disini</label>
</div>
<link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" rel="stylesheet"></link>
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />
<br />
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</form>
<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'] = '7784785690439060651';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d7784785690439060651','//haxerise.xyz/','7784785690439060651');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Proses...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Pesanmu telah terkirim.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">Pesan tidak bisa dikirim, coba lagi.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">A valid email address is required.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Hey! Isi semua form dong.</span>', 'title': 'Contact Form', 'blogId': '7784785690439060651', 'contactFormNameMsg': 'Nama', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Pesan', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script></div>

Lihat tulisan berwarna merah, silahkan kamu rubah dengan blog id masing-masing sehingga ketika ada seseorang yang mencoba untuk menghubungi kamu dengan contact form yang saya bagikan ini maka akan langsung masuk kedalam email yang digunakan sebagai blog yang kamu kelola.

3. Selanjutnya Kamu Tinggal Pastekan Kode Tersebut

Terakhir yaitu kamu perlu mempastekan kode yang ada diatas kedalam halaman yang nantinya akan dijadikan sebagai contact form.

Caranya cukup mudah, silahkan kamu buat halaman dan ganti mode penulisan ke penulisan html agar contact form bisa benar-benar tampil.

Sebenarnya banyak sekali cara untuk membuat sebuah halaman contact form.

Salah satunya adalah dengan membuatkannya menggunakan generator seperti 123formbuilders.

Sebenarnya tidak ada masalah dengan generator tersebut, semua struktur bekerja dengan baik bahkan sejauh ini saya belum menemukan bug dari contact form dari generator tersebut.

Namun jika saya boleh jujur, contact form yang dibuat dari 123formbuilders memiliki loading yang lumayan lama sehingga saya sendiri sedikit terganggu, dan di beberapa tampilan browser form ini malah hancur.

Mungkin karena browser tersebut tidak mengenali javascript yang di tampilkan.

Itulah cara membuat contact form di blogger, sejauh ini saya tidak menemukan bug dari contact form yang saya share ini.

Jika kamu mendapati bug yang mengganggu silahkan sampaikan di kolom komentar agar saya bisa memperbaikinya dengan tepat.