Cara Memasang Contact Form Pada Halaman Statis Blogger

Cara Memasang Contact Form Pada Halaman Statis Blogger
Cara Memasang Contact Form Pada Halaman Statis Blogger - Setelah adanya widget contact form pada blogger, saya beralih menggunakannya yang sebelumnya saya pernah menggunakan 123contactform.com. Tetapi setelah itu saya mulai berpikir, bagaimana caranya agar contact form tersebut berada pada halaman statis blog? setelah saya browsing menelusuri luasnya dunia maya ini, saya menemukan toturial bagaimana cara memasang contact form pada halaman statis blogger. Nah.... bagi Anda yang juga ingin memasang contact form pada halaman statis blog, caranya sangat mudah sekali, yang harus Anda lakukan adalah :

  • Login ke blogger.com seperti biasa.
  • Pergike tata letak > Add widget > gadget lainnya > formulir kontak
Cara Memasang Contact Form Pada Halaman Statis Blogger
  • Copy kode dibawah ini dan letakkan diatas kode </style> atau ]]></b:skin>
#ContactForm1 {display: none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email {
max-width: 50%;
width:300px;
height: auto;
margin: 10px auto;
padding: 10px;
background: #fdfdfd;
color: #666;
border: 1px solid #ddd;
transition: all 0.5s ease-in-out;
}

#ContactForm1_contact-form-email-message {
max-width: 80%;
width: 450px;
height: 175px;
margin: 10px auto;
padding: 10px;
background: #fdfdfd;
color: #666;
font-family: sans-serif;
border: 1px solid #ddd;
transition: all 0.5s ease-in-out;
}

#ContactForm1_contact-form-submit {
font-family: sans-serif;
font-size: 15px;
width: 101px;
height: 35px;
float: left;
color: #fff;
padding: 0;
margin: 10px 0 3px 0;
cursor: pointer;
background: #aaa;
border: none;
border-radius: 2px;
transition: background 0.4s linear;
}

#ContactForm1_contact-form-submit:hover {
background: #3DA3A2;
}

#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message {
width: 450px;
margin-top: 35px;
}
  • Buat laman baru dan klik HTML mode (bukan compose)
  • Lalu tambahkan kode diawah  ini.
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Full Name" size="30" type="text" value="" />

<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />

<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Pesan" rows="5"></textarea>

<input id="ContactForm1_contact-form-submit" type="button" value="Send" />
<div id="ContactForm1_contact-form-error-message">
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
  • Agar Contact Form terlihat rapi, sebaiknya gunakan Tekan "Enter" untuk baris baru
Cara Memasang Contact Form Pada Halaman Statis Blogger
  • Lalu simpan laman anda 
Jika ada sebuah pertanyaan yang ingin disampaikan, saya akan senang untuk menjawabnya dengan semampu saya. Semoga bermanfaat :).