7 Cara Membuat Contact Form (Contact Us) Keren di Blog

Contact Us atau Contact Form adalah sebuah halaman yang bertujuan untuk membangun serta mengembangkan blog atau situs web dari sang pemilik, karna disini kontak pesan akan memudahkan pengunjung saat ingin menyampaikan pendapat, kritik, pesan singkat, pujian, opini, ide, gagasan dan lainnya kepada admin dan juga berfungsi sebagai upaya untuk meningkatkan kualitas dan kinerja dari pada website tersebut. Oleh karena itu Contact Me sangat di butuhkan atau termasuk ke dalam salah satu hal terpenting dari situs atau website. Sebelumnya saya sudah pernah menulis artikel membuat Contact Us keren di blog, namun kali ini saya akan membuat lebih banyak lagi contact form di mulai dari yang sederhana, responsive, SEO, keren, menarik, dan lain-lain. Sebagai upaya untuk meningkatkan SEO baik di mata pengunjung ataupun dari search Engine itu sendiri, tentu pemasangan Formulir kontak pesan ini sangat wajib atau paling disarankan, jadi jangan sampai terlewatkan dalam membangun blog Anda. Lalu bagaimana cara pemasangannya simak aja tutorialnya berikut.

A. Cara Membuat Widget Contact Form di Blogger
1. Langkah awal silahkan Anda login terlebih dahulu ke Blogger
2. Kemudian masuk Ke "Tata Letak atau Layout"  lalu pilih Add a Gadget/ Tambahkan Gadget.
3.  Setelah itu klik Gadget Lainnya lalu pilih  Formulir Contact atau Contact Form 

Contact Form

4.  Jika sudah, silahkan Anda Simpan, dan untuk sementara biarkan saja dia muncul di sidebar atau lainnya sesuai di mana letak Anda membuatnya.

Contact Form

B. Menyembunyikan Contact Form bawaan Blogger
1. Pada Dasbor Blogger pilih Template → Edit HTML
2. Lalu cari kode "ContactForm1" atau langsung Lompat Ke Widget Contact Form 1 biar lebih mudah mencarinya.
3. Kemudian hapus kode di mulai dari  <b:if cond='data:title != &quot;&quot;'> sampai kode penutup </div> yang berada di atas kode <b:include name='quickedit'/> Seperti gambar dibawah ini.



4. Sehingga hasilnya akan seperti ini

 <b:widget id='ContactForm1' locked='false' title='Formulir Kontak' type='ContactForm'>
          <b:includable id='main'>

  <b:include name='quickedit'/> 

5. Setelah itu Simpan Tema

C. Cara memasang Contact Form Keren, Responsive, Menarik di Blog
Nah disini saya menyediakan 7 style contact form yang menarik untuk di pasang di blog Anda, silahkan Anda pilih sesuai keinginan Anda. Dengan syarat semua langkah diatas sudah Anda penuhi, karna jika salah maka contact Us tidak akan berfungsi. Baik kita langsung saja ke pembuatannya.

1. Pada Dasbor Blogger silahkan Anda pergi ke Laman atau Pages lalu pilih Laman baru/ Newpage

Blogger

2. Setelah itu pada halaman posting pilih Mode HTML

Cara Membuat Sitemap Keren dan SEO Friendly di Blog

3. Lalu Copy kode dibawah ini dan Paste dalam Mode HTML bukan Compose

4. Dan jangan lupa beri Judul dan Publikasikan apabila kode sudah dipasang, dan silahkan lihat hasilnya.

Style 1

 <div class="contact-form">
<div class="contact section" id="contact" style="display: block;">
<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
                                <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
                                <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>
                                <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />
                                <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>
</form>
</div>
</div>
</div>
</div>
</div>

<style scoped="" type="text/css">
/* contact us */
#contact{background-color:#fff;margin:30px 0 !important}#contact .contact-form-widget{max-width:100% !important}
#contact .contact-form-name,#contact .contact-form-email,
#contact .contact-form-email-message{background-color:#FFF;border:1px solid #eee;border-radius:3px;padding:10px;margin-bottom:10px !important;max-width:100% !important}
#contact .contact-form-name{width:47.7%;height:50px}
#contact .contact-form-email{width:49.7%;height:50px}
#contact .contact-form-email-message{height:150px}#contact .contact-form-button-submit{max-width:100%;width:100%;z-index:0;margin:4px 0 0;padding:10px !important;text-align:center;cursor:pointer;background:#27ae60;border:0;height:auto;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;border-radius:2px;text-transform:uppercase;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;-ms-transition:all .2s ease-out;transition:all .2s ease-out;color:#FFF}
#contact .contact-form-button-submit:hover{background:#2c3e50}#contact .contact-form-email:focus,#contact .contact-form-name:focus,#contact .contact-form-email-message:focus{box-shadow:none !important}.alert-message{position:relative;display:block;background-color:#FAFAFA;padding:20px;margin:20px 0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;color:#2f3239;border:1px solid}
</style> 


Style 2

 <div class="head1">
        <h2><i class="fas fa-space-shuttle"></i> Silahkan Kontak Kami !!!</h2>
    </div>
<div class="contact-form">
<div class="contact section" id="contact" style="display: block;">
<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<input class="feedback-input" id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
                                <input class="feedback-input"  id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
                                <textarea class="feedback-input"  cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>
                                <input class="feedback-input"  id="ContactForm1_contact-form-submit" type="submit"  value="Kirim" />
                                <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>
</form>
</div>
</div>
</div>
</div>
</div>

<style scoped="" type="text/css">
/* contact us */
.head1 {
  -webkit-border-radius:6px 6px 0px 0px;
  -moz-border-radius:6px 6px 0px 0px;
  border-radius:6px 6px 0px 0px;
  background-color:#CC6666;
  color:white;
}
h2 {
  text-align:center;
  padding:18px 0 18px 0;
  font-size: 1.4em;}

form { max-width:700px; margin:50px auto; }

.feedback-input {
  color:#000000;
  font-family: Helvetica, Arial, sans-serif;
  font-weight:500;
  font-size: 18px;
  border-radius: 5px;
  line-height: 22px;
  background-color: transparent;
  border:2px solid #CC6666;
  transition: all 0.3s;
  padding: 13px;
  margin-bottom: 15px;
  width:700px;
  box-sizing: border-box;
  outline:0;
}

.feedback-input:focus { border:2px solid #CC4949; }

textarea {
  height: 150px;
  line-height: 150%;
  resize:vertical;
}

[type="submit"] {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  width: 700px;
  background:#CC6666;
  border-radius:5px;
  border:0;
  cursor:pointer;
  color:white;
  font-size:24px;
  padding-top:10px;
  padding-bottom:10px;
  transition: all 0.3s;
  margin-top:-4px;
  font-weight:700;
}
[type="submit"]:hover { background:#48afcc; }
</style>


Style 3

 <section id="contact">
 <div class="sectionheader"> <h1>CONTACT</h1></div>
 <article>
 <p>Silahkan contact kami jika Anda ingin memberikan kritik, saran, serta motivasi terhadap blog ini, dan kami berharap sekali atas dukungan Anda yang membangun tersebut.</p>
  
   <label for="checkcontact" class="contactbutton"><div class="mail"></div></label><input id="checkcontact" type="checkbox">
   <form name="contact-form" class="contactform">
    <p class="input_wrapper">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><label for="contact_nom">NAME</label></p>
    <p class="input_wrapper">
 <input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value=""><label for="contact_email">EMAIL</label></p>
    <p class="input_wrapper">
<input type="text" name="contact_sujet" value=""  id ="contact_sujet"><label for="contact_sujet">SUBJECT</label></p>
    <p class="textarea_wrapper"><textarea name="contact_message" id="ContactForm1_contact-form-email-message""></textarea></p>
    <p class="submit_wrapper">
 <input id="ContactForm1_contact-form-submit" type="submit" value="Kirim" />   
<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>


Style 4

 <div class = "frame">
<div id = "button_open_envelope">
    Email me
   </div>
   <div class = "message">
<form name="contact-form">
     <input id="ContactForm1_contact-form-name" type="text" name="name" class="name" placeholder=" Name* " required>
   
     <input  id="ContactForm1_contact-form-email" type="email" name="email" class="email" placeholder=" Email* " required pattern="^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$">
    
     <input type="text" name="phone" class="phone" placeholder=" Phone (optional)" autofocus> 
    
     <textarea id="ContactForm1_contact-form-email-message" name="message" class="messarea" placeholder=" Message* " required></textarea>
   
     <input id="ContactForm1_contact-form-email-message" type="text" name="address" class="address" style="display: none;">
     <input id="ContactForm1_contact-form-submit" type="submit" value="Send" class="send">
        <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>  
</form>
   </div>
   <div class = "bottom"></div>   
   <div class = "left"></div>
   <div class = "right"></div>
   <div class = "top"></div>
   <script src="js/script.js"></script>
  </div>

  
  
  
<style scoped="" type="text/css">  
/* Contact US */  
.frame{
 width: 600px;
 height: 350px;
 margin: 250px auto 0;
 position: relative;
 background: #435d77;
 border-radius:0 0 40px 40px; 
}
#button_open_envelope{
 width: 180px;
 height: 30px;
 position: absolute;
 z-index: 311;
 top: 250px;
 left: 208px;
 border-radius: 10px;
 color: #fff;
 font-size: 26px;
 padding:15px 0; 
 border: 2px solid #fff;
 transition:.3s;
}
#button_open_envelope:hover{
 background: #FFf;
 color: #2b67cb;
 transform:scale(1.1);
 transition:background .25s, transform .5s,ease-in;
 cursor: pointer;
}
.message{
 position: relative;
 width: 580px;
 min-height:300px;
 height: auto;
 background: #fff;
 margin: 0 auto;
 top: 30px;
 box-shadow: 0 0 5px 2px #333;
 transition:2s ease-in-out;
 transition-delay:1.5s;
 z-index: 300;
}
.left,.right,.top{width: 0; height: 0;position:absolute;top:0;z-index: 310;}
.left{ 
 border-left: 300px solid #337efc;
 border-top: 160px solid transparent;
 border-bottom: 160px solid transparent;
}
.right{ 
 border-right: 300px solid #337efc;
 border-top: 160px solid transparent;
 border-bottom: 160px solid transparent;;
 left:300px;
}
.top{ 
 border-right: 300px solid transparent;
 border-top: 200px solid #03A9F4;
 border-left: 300px solid transparent;
 transition:transform 1s,border 1s, ease-in-out;
 transform-origin:top;
 transform:rotateX(0deg);
 z-index: 500;
}
.bottom{
 width: 600px;
 height: 190px;
 position: absolute;
 background: #2b67cb;
 top: 160px;
 border-radius:0 0 30px 30px;
 z-index: 310; 
}

.open{
 transform-origin:top;
 transform:rotateX(180deg);
 transition:transform .7s,border .7s,z-index .7s ease-in-out;
 border-top: 200px solid #2c3e50;
 z-index: 200;
}
.pull{
 -webkit-animation:message_animation 2s 1 ease-in-out;
 animation:message_animation 2s 1 ease-in-out;
 -webkit-animation-delay:.9s;
 animation-delay:.45s;
 transition:1.5s;
 transition-delay:1s;
 z-index: 350;
}
.name,.email,.phone,.messarea,.send{
 margin: 0;
 padding: 0 0 0 10px;
 width: 570px;
 height:40px;
 float: left;
 display: block;
 font-size: 18px;
 color: #2b67cb;
 border:none;
 border-bottom:1px solid #bdbdbd;
 letter-spacing: normal;
}
.messarea{
 height: 117px;
 width: 560px;
 overflow: auto;
 border:none;
 padding: 10px;
}
.send{ 
 width:   580px;
 padding: 0; 
 border:  none;
 cursor:  pointer;
 background: #7CB342;
 color: #fff;
 transition:.35s;
 letter-spacing: 1px;
}
.send:hover{background:tomato;transition:.35s;}

::-moz-placeholder{color: #7CB342;font-family: 'Ubuntu';font-size: 20px;opacity: 1;} 
::-webkit-input-placeholder {color: #7CB342; font-family: 'Ubuntu';font-size: 20px;}
*:focus {outline: none;}
input:focus:invalid,textarea:focus:invalid {
 /* when a field is considered invalid by the browser */
    background: #fff url(images/invalid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #d45252;
    border:1px solid #b03535;
}
input:required:valid,textarea:required:valid { 
 /* when a field is considered valid by the browser */
    background: #fff url(images/valid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}


@-webkit-keyframes message_animation {
 0%{
  transform:translatey(0px);
  z-index: 300;
  transition: 1s ease-in-out;
 }
 50%{
  transform:translatey(-340px);
  z-index: 300;
  transition: 1s ease-in-out;
 }
 51%{
  transform:translatey(-340px);
  z-index: 350;
  transition: 1s ease-in-out;
 }
 100%{
  transform:translatey(0px);
  z-index: 350;
  transition: 1s ease-in-out;
 }
}
@keyframes message_animation {
 0%{
  transform:translatey(0px);
  z-index: 300;
  transition: 1s ease-in-out;
 }
 50%{
  transform:translatey(-340px);
  z-index: 300;
  transition: 1s ease-in-out;
 }
 51%{
  transform:translatey(-340px);
  z-index: 350;
  transition: 1s ease-in-out;
 }
 100%{
  transform:translatey(0px);
  z-index: 350;
  transition: 1s ease-in-out;
 }
}
</style>   


Style 5

 <div class="container">

  <h2>Contact me</h2>

  <form id="contact" action="#" method="post">
    <div class="left">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" required="required"/>
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" required="required" />
<input type="text" placeholder="Subject" required="required"/>
    </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>
</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> 


Style 6

 <link href='https://fonts.googleapis.com/css?family=Open Sans' rel='stylesheet' type='text/css'>
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
<div id="content">
   <form action=" " method="post" autocomplete="on">
        <p>
            <label for="username" class="icon-user"> Name
                <span class="required">*</span>
            </label>
            <input type="text" name="username" id="ContactForm1_contact-form-name" required="required" placeholder="Your Name" />
        </p>

        <p>
            <label for="usermail" class="icon-envelope"> E-mail address
                <span class="required">*</span>
            </label>
            <input type="email" name="usermail" id="ContactForm1_contact-form-email" placeholder="I promise I hate spam too!" required="required" />
        </p>

        <p>
            <label for="usersite" class="icon-link"> Website</label>
            <input type="url" name="usersite" id="usersite" placeholder="eg: http://www.example.com" />
        </p>

        <p>
            <label for="subject" class="icon-bullhorn"> Subject</label>
            <input type="text" name="subject" id="subject" placeholder="What would you like to talk about?" />
        </p>

        <p>
            <label for="message" class="icon-comment"> Message
                <span class="required">*</span>
            </label>
            <textarea id="ContactForm1_contact-form-email-message" placeholder="Your message here and I'll answer as soon as possible " required="required"></textarea>
        </p>
        <p class="indication">Fields with
            <span class="required"> * </span>are required</p>

        <input  id="ContactForm1_contact-form-submit" type="submit" value=" Send this mail ! " />
    <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>
</form>


<style scoped="" type="text/css">
/* Contact Form */
 #content {
    position:relative;
    margin:50px auto;
    width:400px;
    min-height:200px;
    z-index:100;
    padding:30px;
    border:1px solid #383838;
    /* My stipped background */
    background: #D1D1D1;
    /* Old browsers */
    background: -moz-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
    /* FF3.6+ */
    background: -webkit-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
    /* FF3.6+ */
    background: -o-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
    /* FF3.6+ */
    background: repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
    /* FF3.6+ */
    /*border-radius*/
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
    /*box-shadow*/
    -webkit-box-shadow:0px 1px 6px #3F3F3F;
    -moz-box-shadow:0px 1px 6px #3F3F3F;
    box-shadow:0px 1px 6px #3F3F3F;
}
/** my "fake" background that will hover the stripes **/
 #content:after {
    background:#F9F9F9;
    margin:10px;
    position: absolute;
    content :" ";
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: -1;
    border:1px #E5E5E5 solid;
    /*border-radius*/
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
}
/*** form styling **/

/** we remove the red glow around required fields since we are already using the red star */
 input:required, textarea:required {
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    -o-box-shadow:none;
    box-shadow:none;
}
/** inputs and textarea**/
 input:not([type="submit"]), textarea {
    outline:none;
    display:block;
    width:380px;
    padding:4px 8px;
    border:1px dashed #DBDBDB;
    color:#3F3F3F;
    font-family:'Droid Sans', Tahoma, Arial, Verdana sans-serif;
    font-size:14px;
    /*border-radius*/
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
    /*transition*/
    -webkit-transition:background 0.2s linear, box-shadow 0.6s linear;
    -moz-transition:background 0.2s linear, box-shadow 0.6s linear;
    -o-transition:background 0.2s linear, box-shadow 0.6s linear;
    transition:background 0.2s linear, box-shadow 0.6s linear;
}
input:not([type="submit"]):active, textarea:active, input:not([type="submit"]):focus, textarea:focus {
    background:#F7F7F7;
    border:dashed 1px #969696;
    /*box-shadow*/
    -webkit-box-shadow:2px 2px 7px #E8E8E8 inset;
    -moz-box-shadow:2px 2px 7px #E8E8E8 inset;
    box-shadow:2px 2px 7px #E8E8E8 inset;
}
input:not([type="submit"]) {
    height: 20px;
}
/* placeholder */
 ::-webkit-input-placeholder {
    color:#BABABA;
    font-style:italic;
}
input:-moz-placeholder, textarea:-moz-placeholder {
    color:#BABABA;
    font-style:italic;
}
textarea {
    min-height:150px;
    resize:vertical
}
/** labels**/

/** adding our icon font !! */
 .iconic:before {
    font-size:25px;
    font-family:'Alice', Verdana, serif;
}
.iconic.link:before {
    content:'/';
}
.iconic.quote-alt:before {
    content:"'";
}
.iconic.comment:before {
    content:"q";
}
.iconic.user:before {
    content:"u";
}
.iconic.mail-alt:before {
    content:"M";
}
label {
    color:#7F7E7E;
    -webkit-transition: color 1s ease;
    -moz-transition: color 1s ease;
    transition: color 1s ease;
}
label:hover {
    color:#191919;
}
label:before {
    color:#C1BFBD;
    -webkit-transition: color 1s ease;
    -moz-transition: color 1s ease;
    transition: color 1s ease;
}
label:hover:before {
    color:#969696;
    -webkit-transition: color 1s ease;
    -moz-transition: color 1s ease;
    transition: color 1s ease;
}
p {
    margin-bottom:20px;
}
.indication {
    color:#878787;
    font-size:12px;
    font-style:italic;
    text-align:right;
    padding-right:10px;
}
.required {
    color:#E5224C;
}
/** Styling the send button **/
 input[type=submit] {
    margin-left:235px;
    cursor:pointer;
    background:none;
    border:none;
    font-family:'Alice', serif;
    color:#767676;
    font-size:18px;
    padding:10px 4px;
    border:1px solid #E0E0E0;
    text-shadow: 0px 1px 1px #E8E8E8;
    background: rgb(247, 247, 247);
    background: -moz-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, rgba(247, 247, 247, 1)), color-stop(100%, rgba(242, 242, 242, 1)));
    background: -webkit-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
    background: -o-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
    background: -ms-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
    background: linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
    /*border-radius*/
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    /*box-shadow*/
    -webkit-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA;
    -moz-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA;
    box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA;
    /*transition*/
    -webkit-transition:all 0.2s linear;
    -moz-transition:all 0.2s linear;
    -o-transition:all 0.2s linear;
    transition:all 0.2s linear;
}
input[type=submit]:hover {
    color:#686868;
    border-color: #CECECE;
    background: rgb(244, 244, 244);
    background: -moz-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(244, 244, 244, 1)), color-stop(100%, rgba(242, 242, 242, 1)));
    background: -webkit-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
    background: -o-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
    background: -ms-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
    background: linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
    /*box-shadow*/
    -webkit-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
    -moz-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
    box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
}
input[type=submit]:active, input[type=submit]:focus {
    position:relative;
    top:1px;
    color:#515151;
    background: rgb(234, 234, 234);
    background: -moz-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(234, 234, 234, 1)), color-stop(100%, rgba(242, 242, 242, 1)));
    background: -webkit-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
    background: -o-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
    background: -ms-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
    background: linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
    /*box-shadow*/
    -webkit-box-shadow:0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
    -moz-box-shadow:0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
    box-shadow:0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
}
</style> 


Style 7
7 Cara Membuat Contact Form (Contact Us) Keren di Blog
 
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><br />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea><br />
<input id="ContactForm1_contact-form-submit" type="button" value="Send" /><br />
<div style="max-width: 222px; text-align: center; width: 100%;">
<br />
<br />
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
  </div>


<style scoped="" type="text/css">
/* Contact Me */  
  .wrapper{background:#fff;padding 40px 60px;margin:80px}
.pesan-text{position:relative;padding:16px 20px;background-color:#e06666;color:#fafafa;text-align:center;line-height:1.5em;font-size:24px;margin-bottom:30px}
.contact-form-box{width:100%;margin:10px auto;padding:0;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{width: 70%;height:auto;margin: 5px auto 10px;padding: 10px;background: #fff;border: 2px solid #ccc;color:#999;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{background: #ececec;outline:none}
#ContactForm1_contact-form-email-message{width: 90%;height: 150px;margin: 5px auto;padding: 10px;background: #fff;border: 2px solid #ccc;color:#999;font-family:Arial, sans-serif;}
#ContactForm1_contact-form-submit {display:block;;float: left;font-size:24px;color: #fafafa;padding: 20px 40px;margin: 10px 0 5px 0;cursor: pointer;background-color:#68C3A3;border:1px solid #68C3A3;}
#ContactForm1_contact-form-submit:hover {background-color:#e06666;border:1px solid #e06666}
#ContactForm1_contact-form-submit:active {position:relative;top:2px;}
#ContactForm1_contact-form-submit:focus{outline:none}
#ContactForm1_contact-form-error-message{font-size:18px;color:#e06666;width: 100%;margin-top:10px;text-align:left}
#ContactForm1_contact-form-success-message{font-size:18px;color:#1abc9c;width: 100%;margin-top:10px;text-align:left}
@media screen and (max-width: 768px){
.contact-form-box{width:100%;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{width: 100%;}
}
@media screen and (max-width: 480px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{width: 100%;}
}
<style> 

Nah itulah beberapa langkah pemasangan kontak pesan di blog dengan mudah dan simple, dan terdapat banyak variasi yang bisa di pilih sesuai selera. Nah sekian dulu tutorial pada kali ini, jika ada yang ingin Anda tanyakan atau ingin menambahkan silahkan komentar dibawah ini terima kasih.

COMMENTS

Nama

AoV,4,BitCoin,5,Blogspot,55,Games,14,internet,35,komputer,59,Kontes Blog,1,lain-lain,130,linux,1,multimedia,1,Overwatch,3,Plugin,1,sejarah,13,Smartphone,35,Tips & Trik,22,tkj,55,Widget,33,windows,4,Wordpress,15,
ltr
item
Layar Komputer 21: 7 Cara Membuat Contact Form (Contact Us) Keren di Blog
7 Cara Membuat Contact Form (Contact Us) Keren di Blog
https://1.bp.blogspot.com/-bBp1dwnyWUk/Wo94IDcDofI/AAAAAAAABVw/2vMTHh-P-Mcemm7gej1oi4KO68j6J-drACEwYBhgL/s1600/ezgif.com-video-to-gif%2B%252834%2529.gif
https://1.bp.blogspot.com/-bBp1dwnyWUk/Wo94IDcDofI/AAAAAAAABVw/2vMTHh-P-Mcemm7gej1oi4KO68j6J-drACEwYBhgL/s72-c/ezgif.com-video-to-gif%2B%252834%2529.gif
Layar Komputer 21
https://www.lk21.news/2018/02/7-cara-membuat-contact-form-contact-us.html
https://www.lk21.news/
https://www.lk21.news/
https://www.lk21.news/2018/02/7-cara-membuat-contact-form-contact-us.html
true
2757422719814358249
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All Artikel Terkait LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy