√ Cara Terbaru Membuat Contact Form Keren di Blog Blogger - AdityaTekno

Social Items

Cara Terbaru Membuat Kontak Form Keren di Blogger
AdityaTekno.com - Dipostingan kali ini saya akan membagikan tutorial Cara Memasang Widget Formulir Kontak pada Halaman Statis seperti pada blog ini.

Perlu anda ketahui, Formulir Kontak atau Contact Form biasa digunakan pengunjung sebagai sarana untuk berkomunikasi  kepada admin blog secara pribadi lewat email.

Secara umum formulir kontak terdiri dari beberapa kolom isian seperti nama, email, dan pesan yang ingin disampaikan. Contact Form biasanya memiliki beberapa nama yang cukup populer dikalangan para blogger, ada yang mengatakan 'Contact Us',  'Contact Me', 'Kotak Saran' atau 'Hubungi Kami'.

Semua nama tersebut intinya sama yaitu sebagai sarana untuk menghubungi admin blog. Keberadaan Contact form pada sebuah blog/web bisa dijadikan sebagai indikator bahwa blog/web tersebut memiliki keseriusan dalam pengelolaan, sehingga dapat meningkatkan kepercayaan pengguna terhadap apa yang ada di dalamnya.

Sebetulnya Blogger sudah menyediakan fitur/layanan formulir kontak gratis yang bisa dipasang sebagai widget contact form di blogspot. Namun, sepertinya jarang sekali saya menjumpai blog yang menggunakan widget formulir kontak bawaan. 

Mereka lebih memilih untuk membuat contact form pada halaman statis, meskipun harus menggunakan layanan contact form dari pihak ketiga.

Cara Terbaru Menambahkan Formulir Kontak di Blog


Langkah pertama, buka Dashboard Blogger, kemudian pilih Menu Tata Letak >> Tambahkan Widget >> gulir kebawah lalu pilih Formulir Kontak dan klik simpan.

Jika anda sudah menambahkan widget Kontak Formulir, silahkan lewati langkah ini.

Langkah kedua, silahkan buka Menu Halaman >> klik tombol Halaman baru dan copas kode di bawah ini di tab HTML post, ingat! jangan di tab Compose ya. Edit juga Setelan Halaman pada meu Pilihan >> Baris baru >> Tekan "Enter" untuk baris baru.
<form name="contact-form">
<div class='formcolumn1'>
<input id="ContactForm1_contact-form-name" name="name" placeholder='Name' size="30" type="text" value="" />
</div>
<div class='formcolumn2'>
<input id="ContactForm1_contact-form-email" name="email" placeholder='Email' size="30" type="text" value="" />
</div>
<div class='formcolumn3'>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder='Message' rows="7"></textarea>
</div>
<div class='formcolumn4'>
<input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" />
</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>

<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:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-email-message{font-family:'Roboto';width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#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://2.bp.blogspot.com/-nkmaptT0VoA/WumFePAy9DI/AAAAAAAAGlM/8lA5aRi2E-okumpdikjQancIKDjYaGNqwCLcBGAs/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 0 10px 0;padding:0 10px 0 0}
.formcolumn2{padding:0 0 0 10px}
@media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}
</style>

Bagi yang mengoptimasi blog nya dengan menyembunyikan CSS dan JS Blogger, tambahkan kode dibawah ini tepat dibawah kode tadi pada langkah sebelumnya.
<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'] = '8500593521816026329';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d8500593521816026329','//www.adityatekno.com/','8500593521816026329');
_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': '8500593521816026329', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

Ganti semua kode yang ditandai dengan URL dan ID blog anda. ID blog bisa didapatkan saat kita membuka salah satu blog di Blogger dan akan tampil pada tab browser.

Jika sudah ditambahkan semua, silahkan di Publish. Sebenarnya dilangkah ini sudah jadi, tapi nanti widget kontak formulirnya akan muncul di sidebar.

Dan untuk menyembunyikan widget kontak formulir, silahkan ikuti langkah berikut:
Pertama, klik Menu Tema >> Edit HTML >> tambahkan kode CSS di bawah ini sebelum kode </head>.
<style type='text/css'>
#ContactForm1,#ContactForm1 br{display:none}
</style>

Kemudian klik Simpan.

Jika ingin melihat contoh tampilannya, bisa klik tombol dibawah.

Demikian Cara Terbaru Membuat Contact Form Keren di Blogger. Semoga tutorial yang buat buat ini bisa bermanfaat untuk anda. Sampai jumpa dipsotingan selanjutya. Salam AdityaTekno.com.

Cara Terbaru Membuat Contact Form Keren di Blog Blogger

Cara Terbaru Membuat Kontak Form Keren di Blogger
AdityaTekno.com - Dipostingan kali ini saya akan membagikan tutorial Cara Memasang Widget Formulir Kontak pada Halaman Statis seperti pada blog ini.

Perlu anda ketahui, Formulir Kontak atau Contact Form biasa digunakan pengunjung sebagai sarana untuk berkomunikasi  kepada admin blog secara pribadi lewat email.

Secara umum formulir kontak terdiri dari beberapa kolom isian seperti nama, email, dan pesan yang ingin disampaikan. Contact Form biasanya memiliki beberapa nama yang cukup populer dikalangan para blogger, ada yang mengatakan 'Contact Us',  'Contact Me', 'Kotak Saran' atau 'Hubungi Kami'.

Semua nama tersebut intinya sama yaitu sebagai sarana untuk menghubungi admin blog. Keberadaan Contact form pada sebuah blog/web bisa dijadikan sebagai indikator bahwa blog/web tersebut memiliki keseriusan dalam pengelolaan, sehingga dapat meningkatkan kepercayaan pengguna terhadap apa yang ada di dalamnya.

Sebetulnya Blogger sudah menyediakan fitur/layanan formulir kontak gratis yang bisa dipasang sebagai widget contact form di blogspot. Namun, sepertinya jarang sekali saya menjumpai blog yang menggunakan widget formulir kontak bawaan. 

Mereka lebih memilih untuk membuat contact form pada halaman statis, meskipun harus menggunakan layanan contact form dari pihak ketiga.

Cara Terbaru Menambahkan Formulir Kontak di Blog


Langkah pertama, buka Dashboard Blogger, kemudian pilih Menu Tata Letak >> Tambahkan Widget >> gulir kebawah lalu pilih Formulir Kontak dan klik simpan.

Jika anda sudah menambahkan widget Kontak Formulir, silahkan lewati langkah ini.

Langkah kedua, silahkan buka Menu Halaman >> klik tombol Halaman baru dan copas kode di bawah ini di tab HTML post, ingat! jangan di tab Compose ya. Edit juga Setelan Halaman pada meu Pilihan >> Baris baru >> Tekan "Enter" untuk baris baru.
<form name="contact-form">
<div class='formcolumn1'>
<input id="ContactForm1_contact-form-name" name="name" placeholder='Name' size="30" type="text" value="" />
</div>
<div class='formcolumn2'>
<input id="ContactForm1_contact-form-email" name="email" placeholder='Email' size="30" type="text" value="" />
</div>
<div class='formcolumn3'>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder='Message' rows="7"></textarea>
</div>
<div class='formcolumn4'>
<input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" />
</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>

<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:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-email-message{font-family:'Roboto';width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#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://2.bp.blogspot.com/-nkmaptT0VoA/WumFePAy9DI/AAAAAAAAGlM/8lA5aRi2E-okumpdikjQancIKDjYaGNqwCLcBGAs/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 0 10px 0;padding:0 10px 0 0}
.formcolumn2{padding:0 0 0 10px}
@media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}
</style>

Bagi yang mengoptimasi blog nya dengan menyembunyikan CSS dan JS Blogger, tambahkan kode dibawah ini tepat dibawah kode tadi pada langkah sebelumnya.
<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'] = '8500593521816026329';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d8500593521816026329','//www.adityatekno.com/','8500593521816026329');
_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': '8500593521816026329', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

Ganti semua kode yang ditandai dengan URL dan ID blog anda. ID blog bisa didapatkan saat kita membuka salah satu blog di Blogger dan akan tampil pada tab browser.

Jika sudah ditambahkan semua, silahkan di Publish. Sebenarnya dilangkah ini sudah jadi, tapi nanti widget kontak formulirnya akan muncul di sidebar.

Dan untuk menyembunyikan widget kontak formulir, silahkan ikuti langkah berikut:
Pertama, klik Menu Tema >> Edit HTML >> tambahkan kode CSS di bawah ini sebelum kode </head>.
<style type='text/css'>
#ContactForm1,#ContactForm1 br{display:none}
</style>

Kemudian klik Simpan.

Jika ingin melihat contoh tampilannya, bisa klik tombol dibawah.

Demikian Cara Terbaru Membuat Contact Form Keren di Blogger. Semoga tutorial yang buat buat ini bisa bermanfaat untuk anda. Sampai jumpa dipsotingan selanjutya. Salam AdityaTekno.com.
Load Comments

Dapatkan Artikel Tips AdSense, Blogging, SEO setiap harinya.

Notifications

Disqus Logo