Cara Membuat Contact Form Simpel dan Responsive - Mas Danang

    Social Items

Cara Membuat Contact Form Simpel dan Responsive - Hai teman teman blogger, kali ini saya mau share cara membuat Contact Form Simpel dan Responsive seperti yang saya pakai saat ini, contact form adalah sesuatu yang wajib pada sebuah blog atau website untuk menghubungi penulis.

Contact form ini dapat memudahkan pengunjung untuk bertanya kepada penulis atau memberikan kritik atau saran terhadap blog kita, disini saya akan menjelaskan step by step Cara Membuat Contact Form Simpel dan Responsive.

Cara Membuat Contact Form Simpel dan Responsive

Apakah Contact Form itu ?

Contact form adalah sebuah halaman untuk menghubungi penulis yang disediakan di sebuah website atau blog, agar kita di berikan masukan atau kritikan sehingga blog kita kedepannya semakin bagus.

Cara Membuat Contact Form

1. Buka dashboard blogger kalian
2. Pilih halaman
3. Buat halaman baru
4. Masukkan kode dibawah ini

<div style="text-align: center;">
Silahkan isi form dibawah ini untuk menghubungi Admin

</div>
<form id="kontak-arlina" name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="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="Message *" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send Message" />
<br />
<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}
form{color:#666}
#kontak-arlina{margin:auto;max-width:640px}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;transition:all 0.5s ease-out}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;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:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}
#ContactForm1_contact-form-submit{float:left;background:#48bcc6;margin:auto;vertical-align:middle;cursor:pointer;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease}
#ContactForm1_contact-form-submit:hover{background:#3498db;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}
.post-body input{width:initial}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>
5. Save dan publish
6. Silahkan Preview

Sekian ulasan tentang Cara Membuat Contact Form Simpel dan Responsive, semoga bermanfaat dan apabila kalian ingin share postingan ini silahkan dan semoga bermanfaat juga ke orang lain, jangan lupa tinggalkan jejak dengan cara berkomentar, apabila ingin langgan artikel bisa isi form langganan, anda akan menerima notifikasi ketika ada postingan terbaru,

Terima Kasih

Cara Membuat Contact Form Simpel dan Responsive

Cara Membuat Contact Form Simpel dan Responsive - Hai teman teman blogger, kali ini saya mau share cara membuat Contact Form Simpel dan Responsive seperti yang saya pakai saat ini, contact form adalah sesuatu yang wajib pada sebuah blog atau website untuk menghubungi penulis.

Contact form ini dapat memudahkan pengunjung untuk bertanya kepada penulis atau memberikan kritik atau saran terhadap blog kita, disini saya akan menjelaskan step by step Cara Membuat Contact Form Simpel dan Responsive.

Cara Membuat Contact Form Simpel dan Responsive

Apakah Contact Form itu ?

Contact form adalah sebuah halaman untuk menghubungi penulis yang disediakan di sebuah website atau blog, agar kita di berikan masukan atau kritikan sehingga blog kita kedepannya semakin bagus.

Cara Membuat Contact Form

1. Buka dashboard blogger kalian
2. Pilih halaman
3. Buat halaman baru
4. Masukkan kode dibawah ini

<div style="text-align: center;">
Silahkan isi form dibawah ini untuk menghubungi Admin

</div>
<form id="kontak-arlina" name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="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="Message *" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send Message" />
<br />
<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}
form{color:#666}
#kontak-arlina{margin:auto;max-width:640px}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;transition:all 0.5s ease-out}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;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:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}
#ContactForm1_contact-form-submit{float:left;background:#48bcc6;margin:auto;vertical-align:middle;cursor:pointer;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease}
#ContactForm1_contact-form-submit:hover{background:#3498db;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}
.post-body input{width:initial}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>
5. Save dan publish
6. Silahkan Preview

Sekian ulasan tentang Cara Membuat Contact Form Simpel dan Responsive, semoga bermanfaat dan apabila kalian ingin share postingan ini silahkan dan semoga bermanfaat juga ke orang lain, jangan lupa tinggalkan jejak dengan cara berkomentar, apabila ingin langgan artikel bisa isi form langganan, anda akan menerima notifikasi ketika ada postingan terbaru,

Terima Kasih

Berlangganan Artikel Kami