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 :
Baca juga : Mengatasi Error Image, Publisher, DateModified, MainEntityOfPage Pada Struktur Data Blog
- Login ke blogger.com seperti biasa.
- Pergike tata letak > Add widget > gadget lainnya > formulir kontak
- 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
- Lalu simpan laman anda