Membuat Widgets Contact Form - Hallo sahabat Didhiksty Blog, Pada Artikel yang anda baca kali ini dengan judul Membuat Widgets Contact Form, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Java Script, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Membuat Widgets Contact Form
link : Membuat Widgets Contact Form

Membuat Widgets Contact Form

ilustrasi kontak form

Kontak Form ini ber fungsi sebagai media komunikasi antara admin blogger dan pengunjung blog. mereka akan lebih mudah menghubungi anda sebagai admin blog dengan memasang form kontak ini. dibawah ini adalah salah satu contoh kode kontak yang bisa anda pasang.

Buat post di halaman statis, kemudian terapkan kode di bawah ini pada tab HTML. Catatan : Jika sudah menambahkan kode ini, disarankan untuk tidak menggunakan mode Compose di halaman Pos ini.

<form name="contact-form">

<span><i class="fa fa-pencil-square-o"></i> Name </span>

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

<span><i class="fa fa-envelope-o"></i> Email Address <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span>

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

<span><i class="fa fa-keyboard-o"></i> Content <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span>

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

<input id="ContactForm1_contact-form-submit" type="button" value="Send" /> 

<div style="max-width: 222px; text-align: center; width: 100%;">

<div id="ContactForm1_contact-form-error-message">

</div>

<div id="ContactForm1_contact-form-success-message">

</div>

</div>

</form>

<style scoped="" type="text/css">

#comments,.post_meta,#blog-pager {display:none;}

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{

height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;}

#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fafafa;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ccc;border-radius:3px;transition:all 0.5s ease-out;}

#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}

#ContactForm1_contact-form-submit{font-family:'Open Sans';float:left;background:#cf4d35;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;border:0;transition:all .8s ease}

#ContactForm1_contact-form-submit:hover {background:#e45a40;color:#fff;}

#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;}

.contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;}

.contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}

img.contact-form-cross {line-height:40px;margin-left:5px;}

@media only screen and (max-width:640px){

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}

</style>

Demikianlah Artikel Membuat Widgets Contact Form

Sekianlah artikel Membuat Widgets Contact Form kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Membuat Widgets Contact Form dengan alamat link https://didhiksty.blogspot.com/2016/08/membuat-widgets-contact-form.html