Cara Membuat Contact Form sendiri di Blogger

17 Mei, 2019 Posting Komentar

hai. kali ZTN INFORMATION berkesempatan memberikan kalian tutorial lagi Cara Membuat Contact form sendiri di blogger, oke langsung saja kalian simak di bawa ini..

1). masuk ke blogger.com lalu pilih Tata Letak/ Tambahkan Gadget
pilih Formulir Kontak Atau Bsa inggrisnya Contact Form, sudah
jika sudah lalu simpan

2).lalu pilih Template /Edit Html lalu cari kode ContactForm1 jika sudah ketemu. Hapus Kode

<b:f cond='data:title !=&quot;&quot;'>

Sampai Ke </div> yg di atas kode <b:include name='quickedit'/>

jika kalian hapus Hasilnya akan Seperti ini

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


  <b:include name='quickedit'/>

3). sekarang buat Laman Baru Ganti Mode Compose Ke Mode HTML dan pastekan kode di bawah ini

Skin 1 Contact

Contoh:

 <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"></p>
 <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 Aing komar */
#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>

Skin 2 Contact

Contoh:

<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>

Skin 3 Contact

Contoh:

<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>

Skin 4 Contact

Contoh:

<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>

Skin 5 Conatct

Contoh:

<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>

Skin 6 Contact

Contoh:

<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>

Skin 7 Contact

Contoh:

<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>

Selesai, itulah Cara Membuat Contact Form Sendiri di Blogger, Semoga itu dapat membantu Kalian,

jika Sobat Tidak Keberatan silahkan berikan respon yang sudah kami siapkan di bawah ini

Tutorial coding @ztncode

Cara Membuat Contact Form sendiri di Blogger

Posting Komentar untuk "Cara Membuat Contact Form sendiri di Blogger"

Posting Komentar