Membuat Contact Form Material Design di Halaman Statis

Membuat Contact Form Material Design di Halaman Statis

Pentingnya bagi setiap website memiliki yang namanya Halaman Kontak agar pengunjung atau pengiklan dapat mengirimkan pesan kepada pemilik website. Selain itu adanya fitur ini juga akan menambah kelengkapan dari sebuah website agar terlihat lebih professional.

Meskipun sebenarnya Contact Form bisa diganti hanya dengan menuliskan alamat email saja, tetapi semua ini bertujuan agar pengunjung atau pengiklan lebih mudah dalam menghubungi pemilik website. Bagi kalian yang ingin mendaftar Google Adsense, penting sekali untuk menambahkan halaman ini ke dalam website menurut beberapa artikel yang pernah kami baca.

Menurut admin, benar juga adanya pendapat demikian. Karena dengan adanya halaman Contact Form ini tentu akan meyakinkan para pihak advertiser bahwa website yang kita kelola memiliki keseriusan. Tidak percaya? coba kalian perhatikan beberapa website besar, pasti mereka menyediakan halaman ini. Terlebih lagi jika kalian saat ini sedang mengelola website toko online.

Contact Form ini sebenarnya tidak harus diletakkan pada halaman web, tapi pada sidebar, ataupun dibawah artikel juga bisa. Akan tetapi untuk meringankan loading sebuah website sebaiknya diletakkan pada halaman statis, yang nantinya tidak akan membuat halaman awal atau artikel menjadi lama untuk ditampilkan.

Berikut ini adalah tutorial yang bisa kami berikan untuk Membuat Contact Form Material Design di Halaman Statis Blogger


Tutorial Pemasangan

Langkah 1
Pastikan sudah login ke Blogger, pada menu dashboard pilih Halaman > Halaman Baru > kemudian pilih tab penulisan HTML bukan Compose
Jika sudah memiliki halaman kontak, kalian hanya perlu mengedit halaman yang sudah ada.
Langkah 2
Masukkan kode berikut ini pada kotak yang disediakan (mode HTML).
<style scoped="scoped">
.blanterinput{float:none;position:relative;margin-bottom:45px;margin-right:10px}.blanterinput input,.blanterinput textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.blanterinput input:focus,.blanterinput textarea:focus{outline:none}.blanterinput label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.blanterinput input:focus ~ label,.blanterinput input:valid ~ label,.blanterinput textarea:focus ~ label,.blanterinput textarea:valid ~ label{top:-20px;font-size:14px;color:#07ACEC}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#07ACEC;transition:.2s ease all}.bar:before{left:50%}.bar:after{right:50%}.blanterinput input:focus ~ .bar:before,.blanterinput input:focus ~ .bar:after,.blanterinput textarea:focus ~ .bar:before,.blanterinput textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.blanterinput input:focus ~ .highlight,.blanterinput textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.blanterinput input:focus ~ label,.blanterinput input:valid ~ label,.blanterinput textarea:focus ~ label,.blanterinput textarea:valid ~ label{top:-20px;font-size:13px;color:#07ACEC}
input#ContactForm1_contact-form-email-message{height:150px}
input#ContactForm1_contact-form-submit{color:#fff!important;background:#07ACEC;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>
<form name="contact-form">
<div class="blanterinput">
<input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label>Name</label>
</div>
<div class="blanterinput">
<input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label>Email</label>
</div>
<div class="blanterinput">
<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>Message</label>
</div>
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />
<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'] = '8899800899420715293';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d8899800899420715293','//sempetin.my.id/','8899800899420715293');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Sending...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Your message has been sent.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">Message could not be sent. Please try again later.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">A valid email address is required.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': '8866800899420715293', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
Ganti tulisan yang di mark Merah dengan URL Blog anda.
Ganti tulisan yang di mark Hijau dengan ID Blog kalian.
Langkah 3
Publikasikan halaman yang sudah dibuat.
Mudah kan? itu dia cara pemasangan Contact Form pada halaman statis blogger, jika kalian memiliki pertanyaan seputar Contact Form silahkan tanyakan melalui kolom komentar dibawah artikel ini. Kami siap membantu anda selama bisa dan tidak terhalang kesibukan.

Sekian dulu artikel yang bisa kami berikan, semoga dengan adanya artikel ini bisa menambah pengetahuan anda seputar dunia blogging, dan semoga bermanfaat.
Terima kasih

Fernand
Fernand Kecanduan berbagi ilmu!

4 komentar

  1. ID blog itu yang mana ya mas?
    Sama nanti kalau ada yang ngirim masuk nya ke mana ya mas collecter nya?

    BalasHapus
    Balasan
    1. ID blog bisa didapatkan dari url/link pada dashboard blogger.

      Kalau ada yang kirim pesan nanti masuknya ke email yang terintegrasi sama blogger.

      Kunjungi blog utama ya mas Fernn.id

      Hapus
  2. Oke mas, terima kasih...
    Izin pasang di blog saya mas dan saya juga udah mengunjungi Fernn.id blog yg menjadi inspirasi saya mas...

    BalasHapus

Posting Komentar