Skip to main content

Cara Membuat Formulir Contact Melalui Halaman Blogger

Cara Membuat Formulir Contact - Hallo sahabat blogger masbisor.com, apa kabarnya? selalu sehat kan? Kali ini admin akan membahas suatu informasi yang sangat penting sekali yaitu Cara Membuat Formulir Contact Melalui Halaman Blogger. Tips ini tujukan untuk para pemula blogger yang sanggat ini masih kesulitan dalam membuat formulir contact us di blog maupun website.
Cara Membuat Formulir Contact Melalui Halaman Blogger


Fungsi Dan Tujuan Dari Formulir Contact

Anda pasti sudah mengetahui dari formulir contact, formulir contact berfungsi sebagai memberikan kemudahan bagi seseorang untuk menghubungi anda melalui sebuah email. Sehingga anda tahu bahwa tujuannya adalah mempermudahkan dalam menghubungi ke pada si admin blog. Memang tidak semua yang tahu bahwa itu sangat penting karena memberikan kelancaran informasi.

Baca juga : Cara Mengatasi Gambar Postingan Error Saat Membagikan di Facebook

Ada 2 Cara Paling Mudah Membuat Formulir Contact

Membuat kontak formulir ada 2 cara yang sering digunakan oleh seorang blogger yaitu membuat kontak formulir melalui tema template dan melalui halaman blogger. Nah fokus admin akan memberikan tutorial melalui halaman blog sehingga anda tidak perlu lagi binggung atau sulit membuatnya. Namun biasanya setiap template blogger selalu ada kontak formulir secara automatis.

Apakah membuat formulir kontak ini wajib buat dalam blogger

Untuk menentukan wajib atau tidaknya itu tergantung dari diri anda sendiri. Apakah itu penting atau tidak penting sama sekali untuk blog anda. Tetapi dengan adanya formulir contact akan memberikan kemudahaan bagi seorang yang ingin menghubungi anda. Jika kontak tersebut tidak ada, tentunya akan memberikan kesulitaan bagi si pengubungi tersebut.

Baca juga : Cara Mempercepat Loading Blog dengan Lazy Load Iklan Adsense di Blogger

Dari segi perkembangan, Google sudah sering mengembangkan Material design, dikarenakan banyak para blogger mulai memahami kemauan si mbah Google. Tujuan tersebut, memberikan mudahan oleh para blogger untuk mempelajari desain bawaan Google terbaru ini, hasil dari formulir contact tersebut  lebih elegant pastinya dan ramah SEO pada blog website anda.

Berikut Cara Membuat Formulir Contact Melalui Halaman Blogger

1. Login ke akun blogger anda
2. Selanjut pilih halaman blogger pilih contact us lama atau buat baru juga bisa
3. Kemudian pilih edit, lalu pilih HTML paste kan kode bawah ini

 <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'] = '1805973303788855929';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1805973303788855929','//masbisor.com/','1805973303788855929');
_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': '1805973303788855929', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script> 
Catatan : 
a. Silahkan ganti URL //masbisor.com dengan URL blog anda
b. Berikutnya silahkan ganti 1805973303788855929 dengan ID BLOG anda.
4. Jika selesai pilih PUBLIKASIKAN

Contoh Kontak Formulir



Penutup

Bagaimana sangat mudah bukan Cara Membuat Formulir Contact Melalui Halaman Blogger. Tips ini hanya bisa ditemukan diblog tertentu saja. Karena itu, jika anda mengalami masalah dalam memasang kode formulir contact ini, silahkan tinggalkan komentar dibawah ini. Terimakasih
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar