Cara Membuat Contact Form Keren Untuk Blogger Dihalaman Statis

shares

Cara Membuat Contact Form Keren Untuk Blogger. Contact form adalah tempat untuk pembaca blog yang ingin menghubungi pemilik/ admin blog melalui email perihal tulisan, keluhan, pujian maupun komentar yang berhubungan denga tulisan blog yang di posting. Saya akan bagikan caranya kepada sobat semua.
Sebelum kita buat yang keren, tampilan aslinya seperti ini :


Setelah kita ubah jadinya seperti ini :


Bagaimana ? kerenkan, Nah caranya seperti ini :

1. Tambahkan Widget Contact Form yang asli dulu,terserah mau pake widget footer atau side bar, Klik Tata Letak >Tambah Gadget>Gadget lainnya> Contact Form
2. Sembunyikan Widget Contact Form yang asli dengan cara  meletakkan kode dibawah ini persis diatas ]]></b:skin> atau </style>

div#ContactForm1 {
  display: none !important;
}
3. Buat Contact Form yang keren di aman baru caranya :
  • Klik laman>laman baru> Pilh laman yang HTML bukan COMPOSE
  • Copy kode berikut ini dan pastekan di laman html yang baru tersebut :
  • <div dir="ltr" style="text-align: left;" trbidi="on">
    Here Goes Your Contact Page Message To Visitors or Else Delete it.
    <br />
    <style>
    .twist_blogger_cntct_form_wrap {
      margin: 0 auto;
      max-width: 840px;
      padding: 0 10px;
      position: relative;
      background-color: #FDFDFD;
    }
    .twist_blogger_cntct_form_wrap:after, .twist_blogger_cntct_form_wrap:before {
      content: '';
      display: table;
      clear: both;
    }
    /*----Change Contact Form Background Color Here----*/
    div#twist_blogger_cntct_form {
      padding: 20px 20px 10px 20px;
      background: #FA540B;
     border-radius: 2px;
      margin: 20px auto 20px;
      color: #FFF;
      font-size: 16px;
      max-width: 260px;
    }
    input#ContactForm1_contact-form-name, .contact-form-email, .contact-form-email:hover, .contact-form-email:active, .contact-form-email-message, .contact-form-email-message:active, .contact-form-email-message:hover {
      padding: 5px;
      box-shadow: none!Important;
      min-width: 186px;
      max-width: 260px;
      width: 100%;
      border: 0 !important;
      line-height: 1em;
      min-height: 31px;
      background: #FCFCFC;
      margin-bottom: 15px;
    }
    /**** Submit button style ****/
    .contact-form-button-submit {
      background: #FA540B;
      font-size: 20px;
      letter-spacing: 2px;
      cursor: pointer;
      outline: none!important;
      color: #FFFFFF;
      border: 2px solid rgba(255,255,255,1);
      border-radius: 50px;
      min-width: 186px;
      max-width: 260px;
      width: 100%;
      text-transform: uppercase;
      height: 46px;
      margin-top: 10px!important;
      transition: all 300ms ease-;
      -webkit-transition: all 300ms ease-in-out;
      -moz-transition: all 300ms ease-in-out;
    }
    /**** Submit button on mouse hover ****/
    .contact-form-button-submit:hover {
      border: 2px solid;
      color: #FFFFFF;
      background: #EF4800 !important;
    }
    /**** Submit button on Focus ****/
    .contact-form-button-submit:focus, .contact-form-button-submit.focus {
      border-color: #FFFFFF;
      box-shadow: none !important;
    }
    /**** Error message and Success Message ****/
    .contact-form-error-message-with-border .contact-form-success-message {
      background: #f9edbe;
      border: 1px solid #f0c36d;
      bottom: 0;
      box-shadow: 0 2px 4px rgba(0,0,0,.2);
      color: #666;
      font-size: 12px;
      font-weight: bold;
    padding-bottom: 10px;
      line-height: 19px;
      margin-left: 0;
      opacity: 1;
      position: static;
      text-align: center;
    }
    </style>
    <br />
    <br />
    <div class="twist_blogger_cntct_form_wrap">
    <div id="twist_blogger_cntct_form">
    <form name="contact-form">
    Your Name<br />
    <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Enter your name here..." size="30" type="text" value="" /><br />
    <br />
    Your Email*<br />
    <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Enter your email here..." size="30" type="text" value="" /><br />
    <br />
    Your Message*<br />
    <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Write your message here..." rows="5"></textarea><br />
    <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /><br />
    <div style="max-width: 260px; 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>
    <br />
    </div>
    </div>
    </div>
  • Klik Publish
  • Selesai 
Selamat mencoba




Related Posts

0 komentar:

Post a Comment