Cara Membuat Contact Form di blog (Halaman Statis)


Contact Form pada blog penting dilakukan karena dapat mempermudah pengunjung blog jika ingin menghubungi admin atau pemilik blog. Selain itu juga dapat mempermudah pengunjung jika ingin bertanya atau memberikan tanggapan berupa kritik dan saran kepada pemilik blog yang bersifat pribadi.

Nah, Jika blog anda belum mempunyai halaman Contact From dan anda ingin membuatnya berikut ini adalah Cara Membuat Contact Form di Blog (Halaman Statis).

Membuat Contact Form 

1. Login ke blogger

2. Pada dashboard blogger, klik Halaman >> Halaman Baru

3. Setelah laman baru terbuka, klik bagian HTML (Bukan Compose)

4. Copy kode di bawah ini, lalu Paste di bagian HTML


<style>
#ContactForm1_contact-form-submit{font-family:"Roboto",sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:rgba(0,0,0,.87);font-size:14px;font-weight:500;letter-spacing:.4px;text-transform:uppercase;text-align:center;border:0;outline:none;background-image:none;background-color:#008c5f;display:inline-block;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;min-width:88px;height:36px;line-height:36px;padding:0 16px;margin:6px 0;border-radius:4px;overflow:hidden;white-space:nowrap;vertical-align:middle;cursor:pointer;z-index:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:.2s;-o-transition:.2s;transition:.2s;-webkit-box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}#ContactForm1_contact-form-submit:hover,#ContactForm1_contact-form-submit:focus{color:#008c5f;background-color:#212121;-webkit-box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}#ContactForm1_contact-form-error-message{margin-top:16px;font-size:15px;font-weight:500;color:#f44336}#ContactForm1_contact-form-success-message{margin-top:16px;font-size:15px;font-weight:500;color:#2196F3}#ContactForm1_contact-form-error-message img{cursor:pointer;margin:0 8px}
</style>
<div class="contact-form-widget">
<form method="POST" name="contact-form">
<div class="textfield">
<input autocomplete="name" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />
      <label>Name</label>
    </div>
<div class="textfield">
<input autocomplete="email" id="email" name="email" required="" type="email" value="" />
      <label>Email</label>
    </div>
<div class="textfield">
<textarea id="message" name="email-message" rows="6"></textarea>
      <label>Message</label>
    </div>
<button id="ContactForm1_contact-form-submit" type="submit">Send</button>
    <br />
<div id="ContactForm1_contact-form-error-message">
</div>
<div id=
"ContactForm1_contact-form-success-message">
</div>
</form>
</div>

5. Selanjutnya tinggal buat judulnya sesuai selera anda, lalu klik Publikasikan

Cukup simple bukan?
Ya itulah tadi tutorial Cara Membuat Contact Form di blog (Halaman Statis)

Popular Posts