5 Style Cara Membuat Contact Us Keren di Blogger

cara membuat contact us di blog


Halaman Contact Us atau Contact From adalah salah satu bagian penting pada setiap blog, Dengan memberikan halaman ini pengunjung akan lebih mudah untuk menghubungi si pemilik blog, Maka dari itu Contact Us ini sangat lah berguna dan penting untuk sebuah blog.

Biasanya tujuan pengunjung untuk menghubungi si pemilik blog karena ada beberapa sebab, Seperti ingin melakukan Kerja sama, Menyampaikan Kritik dan Saran, dan Tujuan Lainnya. 

Email kalian adalah salah satu tempat untuk menampung Pesan dari pengunjung melalui Contact Us, Dengan begitu semua pesan-pesan yang di sampaikan akan terkirim otomatis ke Kontak Email kalian.


[Penting]

Sebelum kalian memasang Kumpulan Style-style di bawah ini, Terlebih dahulu kalian harus memasang widget Formulir Kontak dan kemudian akan menghapusnya, agar semua pemasangannya Work, Binggung? lebih jelasnya, baca penjelasan di bawah ini

1. Pertama masuk ke Blogger

2. Setelah itu klik Tata Letak > Tambahkan gadget pada bagian Widget Sidebar > lalu            scrol ke bawah dan cari Formulir Kontak dan klik + > kemudian klik Simpan.

3. Untuk menghilangkan Widget Contact Us pada Sidebar blog, kalian harus melakukan            pengeditan di dalam Tema.

4. Masuk ke Tema > Edit HTML > dan cari kode ContactForm1

5. Setelah di temukan, Hapus bagian kode <b:if cond='data:title != &quot;&quot;'>                (dibawah kode nomer 4) hapus sampai </div> akhir , Masih binggung lihat gambar di            bawah ini.

cara membuat contact us di blog

6. Jika tahap-tahap di atas sudah kalian lakukan, saatnya kita masuk ke pemasangan              Style

Cara Membuat Contact Us di Blogger

Untuk Blogger Pemula yang masih binggung untuk menampilkan halaman Contact Us, kalian pas banget untuk membaca artikel kali ini, Karena akan ada tutorial lengkap untuk membuat halaman contact us.

Akan ada beberapa Style Keren dan tentunya Responsive untuk kalian terapkan di dalam blog kalian, cara yag akan kalian pelajari adalah dengan menggunakan HTML, Oke langsung saja kita simak artikel berikut ini, Let's Start


Style 1


1. Pertama masuk ke Blogger, jika sudah Klik Menu Halaman.

2. Setelah itu, klik Halaman Baru. dan beri judul (misal Contact Us atau Hubungi Kami,dll)

3. Jika langkah di atas sudah, Selanjutnya adalah Masuk ke HTML jangan (compose).

4. Lalu salin semua kode di bawah ini, dan Pastekan ke kolom HTML Tersebut.


<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> Name</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</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> Message</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'] = '8989453656943288365';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d8989453656943288365','//demopm.blogspot.com/','8989453656943288365');
_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': '8989453656943288365', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script></div>

5. Ganti semua kode 8989453656943288365 dengan ID blog kalian, dan juga Ganti 
demopm.blogspot.com Dengan Alamat Blog kalian.

(?) Bagimana cara menemukan ID Blog, kalian bisa lihat gambar di bawah ini.


cara membuat contact us di blog

6. Setelah Langkah-langkah di atas di selesaikan dengan Benar, kalian tinggal klik Publikasikan


Style 2

Cara Seperti di atas Namun Kode HTML nya beda, jadi Design 2 ini akan menampilkan Tampilan yang berbeda, Langsung saja Copy kode di bawah ini dan Pastekan di Halaman Baru > HTML


DEMO



Silakan isi form di bawah ini untuk menghubungi admin. Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan.
 
<form id="kontak-arlina" name="contact-form">
 
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" />
 
<input id="ContactForm1_contact-form-email" name="email" size="30" placeholder="Email *" type="text" value="" />
 
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send Message" />  
<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">
#comments,.post_meta,#blog-pager{display:none}
form{color:#666}
form.payforpal{margin:auto;text-align:center}
#kontak-arlina{margin:auto;max-width:640px}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}
#ContactForm1_contact-form-submit{float:left;background:#1abc9c;margin:auto;vertical-align:middle;cursor:pointer;padding:16px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;border-radius:4px;color:#fff;font-weight:500;transition:all .2s ease}
#ContactForm1_contact-form-submit:hover{background:#16a085;color:#fff;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}
.contact-form-error-message-with-border{background:#f47669;border:0;box-shadow:none;color:#fff;padding:5px 0;border-radius:3px}
.contact-form-success-message{background:#4fc3f7;border:0;box-shadow:none;color:#fff;border-radius:3px}
img.contact-form-cross{line-height:40px;margin-left:5px}
.post-body input{width:initial}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>
<script type="text/javascript">
//<![CDATA[
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
//]]>
</script>
<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'] = '8989453656943288365';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d8989453656943288365','//demopm.blogspot.com/','8989453656943288365');
_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': '8989453656943288365', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

(NOTE) Ganti semua kode 8989453656943288365 dengan ID Blog kalian, dan juga ganti demopm.blogspot.com dengan Alamat Blog kalian, Paham..?

Style 3

Langsung saja terapkan Style 3 ini dalam blog kalian, Tampilan style satu ini cukup Bagus dan Keren,ada 4 kolom di kontak pengisiannya, yaitu Nama, Email, Subjek, dan juga Pesan, Lengkap kan, Langsung saja Copy dan Paste kan kode di bawah ini dan terapkan di blog kalian.



<pre><code>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="container">
<h2>
Contact me</h2>
<form action="#" id="contact" method="post">
<div class="left">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" required="required" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" required="required" size="30" type="text" value="" />
<input placeholder="Subject" required="required" type="text" />
    </div>
<div class="right">
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>
    </div>
<div class="send-button cl">
<div class="send-button cl">
<button id="ContactForm1_contact-form-submit" type="submit">Send</button>
    </div>
<br />
<div style="text-align: center; width: 100%;">
<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>
</div>
</div>
</form>
<style scoped="" type="text/css">
/*Contact Us */
*{
 margin: 0;
 padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
::-webkit-input-placeholder{color: #777;}
:-moz-placeholder { /* Firefox 18- */ color: #777;}
::-moz-placeholder {  /* Firefox 19+ */ color: #777;}
:-ms-input-placeholder {color: #777;}

.container{
  position: relative;
  width: 100%;
 padding: 1em;
 margin: auto;
}

.container h2{
 text-align: center;
 text-transform: uppercase;
 color: #f55;
}

#contact input[type="text"],#contact input[type="email"], #contact textarea{
 display: block;
 padding: 10px;
 margin: 10px auto;
 width: 100%;
 font-size: 18px;
 color: #777;
  border: 1px solid #ccc;
}

#contact textarea{
 font-size: 16px;
}

#contact input:hover, #contact textarea:hover{
 border: 1px solid #888;
}
#contact input:focus, #contact textarea:focus{
 border: 1px solid #777;
}


#contact textarea{
 max-width: 100%;
 min-width: 100%;
 max-height: 180px;
 min-height: 180px;
  resize: none;
}

#contact .send-button{
 text-align: center;
}

#contact .send-button button[type="submit"]{
 color: #fff;
  background: #e74c3c;
  border: none;
 width: 100%;
 padding: 10px 0;
 font-size: 20px;
 text-transform: uppercase;
 transition: .5s all ease;
  cursor: pointer;
}

#contact .send-button button[type="submit"]:hover{
 background: #c0392b;
}

#contact .send-button button[type="submit"]:focus{
 position: relative;
 top: 2px;
}


/* Contact US Responsive*/

@media screen and (min-width: 640px){
 .container{
  width: 600px;
 }
  
  #contact textarea{
    max-width: 98%;
    min-width: 98%;
    min-height: 152px;
    margin-right: 0;
  }

 #contact .right,#contact .left{
  display: block;
 }

 #contact .right{
  float: right;
  width: 50%;
 }
  
 #contact .left{
  float: left;
  width: 50%;
 }
 .cl{
    clear: both;
  }
}
</style> </div>
</div>

</code></pre>

Style 4

Pada style 4 ini, tampilannya lebih wah, dan juga di beri efek dropdown yang pastinya akan membuat pengunjung kalian tertarik untuk melihatnya, Dengan tampilan yang begitu Elegan dan unik untuk di lihat, Style 4 ini menerapkan Dropdown jika kalian menekan Gambar Pesan.




<div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div>
<br />
<section id="contact">
 <div class="sectionheader">
<h1>
CONTACT</h1>
</div>
<article>
 Silahkan contact kami jika Anda ingin memberikan kritik, saran, serta motivasi terhadap blog ini, dan kami berharap sekali atas dukungan Anda yang membangun tersebut.<br />

  
   <label class="contactbutton" for="checkcontact"><div class="mail">
</div>
</label><input id="checkcontact" type="checkbox" />
   <form class="contactform" name="contact-form">
<div class="input_wrapper">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><label for="contact_nom">NAME</label></div>
<div class="input_wrapper">
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><label for="contact_email">EMAIL</label></div>
<div class="input_wrapper">
<input id="contact_sujet" name="contact_sujet" type="text" value="" /><label for="contact_sujet">SUBJECT</label></div>
<div class="textarea_wrapper">
<textarea id="ContactForm1_contact-form-email-message" name="contact_message"></textarea></div>
<div class="submit_wrapper">
<input id="ContactForm1_contact-form-submit" type="submit" value="Kirim" />   
</div>
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</form>
</article>
</section>



<style scoped="" type="text/css">
/* Contact Us By Lk21.news */
#contact {
width: 600px;
margin:2em auto;
background:white;
position: relative;
}
#contact::after {
content: "";
display: block;
height: 30px;
width: 100%;
left: 5%;
bottom: 0;
position: absolute;
-webkit-box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.19);
box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.19);
border-radius: 100%;
z-index: -1;
}
#contact article {
  padding: 1em;
}
#contact h1 {
background: #27dbd2;
font-family: Oswald ,sans-serif;
font-size: 1.75em;
padding: 0.6em 0 0.6em 0.4em;
color: white;
text-shadow: 0 0.06em 0 #424242;
position: relative;
}
.contactbutton {
background: #27dbd2;
-webkit-box-shadow: 1px 1px 0 0 #1f7a82,2px 2px 0 0 #1f7a82,3px 3px 0 0 #1f7a82;
box-shadow: 1px 1px 0 0 #1f7a82,2px 2px 0 0 #1f7a82,3px 3px 0 0 #1f7a82;
text-align: center;
display: block;
width: 100%;
height: 50px;
margin-top: 20px;
margin-bottom: 2px;
cursor: pointer;
}
.contactbutton:hover {
-webkit-box-shadow: 1px 1px 0 0 #1f7a82,0px 0px 0 0 #1f7a82,0px 0px 0 0 #1f7a82;
box-shadow: 1px 1px 0 0 #1f7a82,0px 0px 0 0 #1f7a82,0px 0px 0 0 #1f7a82;
margin-top: 22px;
margin-left: 2px;
margin-bottom: 0px;
}
.mail {
margin-top: 11px;
font-size: 15px;
display: inline-block;
border-top: 2em solid transparent;
border-left: 2.6em solid #fff;
height: 0;
width: 0;
position: relative;
}
.mail:before {
content: '';
top: -2.5em;
left: -2.95em;
display: block;
position: absolute;
border-top: 1.2em solid #fff;
border-left: 1.6em solid transparent;
border-right: 1.6em solid transparent;
border-bottom: 1em solid transparent;
font-size: 0.8em;
}
.mail::after {
display: block;
content: "";
position: absolute;
border-top: 2em solid transparent;
border-right: 2.6em solid #fff;
height: 0;
width: 0;
left: -2.18em;
bottom: 0;
}
#checkcontact{
position: absolute;
left: -99999px;
}
.contactform {
overflow: hidden;
max-height: 0px;
-webkit-transition: all linear 1s;
-moz-transition: all linear 1s;
-o-transition: all linear 1s;
-ms-transition: all linear 1s;
transition: all linear 1s;
}
#checkcontact:checked + .contactform {
max-height: 1000px;
}
.input_wrapper {
position: relative;
}
.textarea_wrapper textarea {
margin-top: 20px;
display: block;
width: 100%;
background: white;
border: 1px solid #DADADA;
box-shadow: 0 0 1px 0 #E4E4E4;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 1em;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-ms-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
color: #5E5E5E;
}
.input_wrapper input[type="text"] {
margin-top: 1em;
display: block;
width: 100%;
background: white;
border: 1px solid #DADADA;
box-shadow: 0 0 1px 0 #E4E4E4;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 1em;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-ms-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
color: #5E5E5E;
text-indent: 15%;
}
.input_wrapper input[type="text"]:focus {
background: rgba(242, 56, 90, 0.05);
box-shadow: inset 2px 2px 5px 0 #DADADA;
outline: none;
text-indent: 0;
}
.input_wrapper label {
position: absolute;
left: 0;
top: 0;
height: 100%;
background: #27dbd2;
color: white;
font-family: Oswald ,sans-serif;
box-sizing: border-box;
width: 15%;
text-align: center;
line-height: 2.8em;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-ms-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
}
.input_wrapper input[type="text"]:focus + label {
left: 85%;
}
.textarea_wrapper textarea {
margin-top: 20px;
display: block;
width: 100%;
  min-height:150px;
background: white;
border: 1px solid #DADADA;
box-shadow: 0 0 1px 0 #E4E4E4;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 1em;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-ms-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
color: #5E5E5E;
}
.textarea_wrapper textarea:focus {
background: rgba(242, 56, 90, 0.05);
box-shadow: inset 2px 2px 5px 0 #DADADA;
outline: none;
}
.submit_wrapper {
text-align: center;
}
.submit_wrapper input {
text-align: center;
display: inline-block;
width: 40%;
height: 50px;
margin-top: 1em;
margin-bottom: 6px;
cursor: pointer;
background: #27dbd2;
color: white;
font-family: Oswald ,sans-serif;
font-size: 1em;
border: none;
-webkit-box-shadow: 1px 1px 0 0 #1f7a82,2px 2px 0 0 #1f7a82,3px 3px 0 0 #1f7a82;
box-shadow: 1px 1px 0 0 #1f7a82,2px 2px 0 0 #1f7a82,3px 3px 0 0 #1f7a82;
-webkit-appearance: none;
  -webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-ms-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
}
.submit_wrapper input:hover {
-webkit-box-shadow: 1px 1px 0 0 #1f7a82,0px 0px 0 0 #1f7a82,0px 0px 0 0 #1f7a82;
box-shadow: 1px 1px 0 0 #1f7a82,0px 0px 0 0 #1f7a82,0px 0px 0 0 #1f7a82;
margin-top: 22px;
margin-left: 2px;
margin-bottom: 0px;
}

@media (max-width: 500px){
#contact {
width: 100%;
}
  .input_wrapper label {
line-height: 3.5em;
font-size: 0.8em;
}
}
</style></div>

Style 5

Style yang terakhir adalah Style Contact Us yang sederhana namun tetap menarik untuk di lihat, Ada tiga kolom yaitu Nama, Email, dan juga Pesan, Untuk tombol Mengirim nya pun sangat simple seperti Style 2, tapi yang ini lebih kecil.


<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
.contact-form {
  width: 600px;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
  padding: 0;
  color: #000;
}
.contactf-name {
  float: left;
  width: 45%;
}
.contactf-email {
  float: right;
  width: 45%;
}
.contact-form-name, .contact-form-email, .contact-form-email-message {
  width: 100%;
  max-width: 100%;
  padding: 20px 15px;
  margin: 20px 0 30px 0;
}
.contact-form-button, .contact-form-button-submit {
  width: 20%;
  max-width: 20%;
  height: 40px;
  color: #fff;
  background: #097b84;
  font-size: 0.875em;
  border-radius: 5px;
}
.contact-form-button-submit {
  -webkit-transition: background-color 100ms ease-out 100ms;
  -moz-transition: background-color 100ms ease-out 100ms;
  -o-transition: background-color 100ms ease-out 100ms;
  transition: background-color 100ms ease-out 100ms;
}
.contact-form-button-submit:hover {
  background: #076269;
}
</style>



 


<script>
var blogId = '8989453656943288365';//gunakan nomor ID blog kamu
//Kamu juga bisa mengedit pesan di bawah ini, jangan lupa tanda kutipnya
var contactFormMessageSendingMsg ='Mengirim...';
var contactFormMessageSentMsg = 'Pesan sudah terkirim.';
var contactFormMessageNotSentMsg = 'Pesan tidak dapat terkirim, coba beberapa saat lagi.';
var contactFormEmptyMessageMsg ='Harap isi kotak pesan.';
var contactFormInvalidEmailMsg = 'Harap isi alamat email yang valid.'
var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
widgetLoaded=true;
document.getElementById('ContactForm1_contact-form-submit').click();
}
return true;
}
</script>
<div class="contact-form">
<form name="contact-form">
<div class="contactf-name">
Nama : <br/>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" placeholder="Nama..."/></div>
<div class="contactf-email">
Email: <em>(harap diisi)</em><br/>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" placeholder="Email..."/></div>
  
<div style="clear:both"></div>
<div class="contactf-message">
Pesan: <em>(harap diisi)</em><br/>
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="7" style="height: 149px; margin: 0px;" placeholder="Pesan..."></textarea></div>
<br />
    
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Kirim" />
<div style="max-width: 450px; text-align: center; width: 100%;">
<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>
</div>
</form>
</div>

(!) Jangan lupa ganti 8989453656943288365 dengan ID Blog kalian

Kesimpulan

Bagimana kalian tertarik untuk menerapkan Halaman Contact Us di Blog kalian, Peran dari Halaman ini sangatlah penting dan jangan sampai kalian melewatkan Halaman ini, agar pengunjung kalian bisa menghubungi kalian.

Baca Juga :

> Cara Mudah membuat Tombol Download Keren di Postingan Blog
> Cara Memasang Tag Label Keren Di Bawah Postingan Blog
> 7 Tahapan Awal Menjadi Seorang Blogger Profesional

NOTE : Semua Style 1-5 di atas sudah saya Uji Coba dan terbukti Work dan tidak ada masalah satu pun, Pesan yang di layangkan si pengunjung ke Contact Us pun sampai dengan selamat ke email kalian.

Sudah saya cek Contact Us di atas semuanya Responsive, Namun jika ada kesalahaan atau tidak Work kalian bisa Berkomentar di bawah.

Sekian dalam artikel Blogger kali ini, Semoga bisa membantu kalian yang belum mengetahuiya, Saya disini hanya ingin berbagi saja, jika ada salah-salah kata mohon di maafkan, Terimaksih sudah berkunjung [putarmuter]
Show comments
Hide comments

6 Responses to "5 Style Cara Membuat Contact Us Keren di Blogger"

  1. Mantapp kak artikelnya sangat bermanfaat bagi saya yang masih pemula. Terima kasih kak informasinya, nanti pasti q coba.

    www calonseo com

    ReplyDelete
    Replies
    1. Terimaksih sekali kak, itulah tugas kami, berusaha memberikan manfaat bagi banyak orang,

      sekali lagi terimakasih sudah berkunjung, Sukses buat kedepannya


      Delete
  2. Wah makin keren neh blog nya, hehehehe jadi pengen ganti contact US nya.


    www.jagoantekno.com

    ReplyDelete
    Replies
    1. haduh,, makasih sekali gan :).. Silahkan aja pasang Style-style di atas di blog agan, agar makin joosss tampilannya..

      Semoga sukses terus kedepannya...

      Delete
  3. Bagus, saya suka dg stylenya, terutama yang pertama. kekinian banget

    ReplyDelete
    Replies
    1. Terimakasih Komentarnya kak :)

      Iyha dong kak, Style yang nomer satu memang memberikan tampilan dan desain yang Elegan dan Keren, Kalau suka bisa di coba kak.

      Delete

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel