7 Cara Menciptakan Contact Form (Contact Us) Keren Di Blog
Contact Us atau Contact Form adalah sebuah halaman yang bertujuan untuk membangun serta menyebarkan blog atau situs web dari sang pemilik, karna disini kontak pesan akan memudahkan pengunjung ketika ingin memberikan pendapat, kritik, pesan singkat, pujian, opini, ide, gagasan dan lainnya kepada admin dan juga berfungsi sebagai upaya untuk meningkatkan kualitas dan kinerja dari pada website tersebut. Oleh sebab itu Contact Me sangat di butuhkan atau termasuk ke dalam salah satu hal terpenting dari situs atau website. Sebelumnya aku sudah pernah menulis artikel menciptakan Contact Us keren di blog, namun kali ini aku akan menciptakan lebih banyak lagi contact form di mulai dari yang sederhana, responsive, SEO, keren, menarik, dan lain-lain. Sebagai upaya untuk meningkatkan SEO baik di mata pengunjung ataupun dari search Engine itu sendiri, tentu pemasangan Formulir kontak pesan ini sangat wajib atau paling disarankan, jadi jangan hingga terlewatkan dalam membangun blog Anda. Lalu bagaimana cara pemasangannya simak aja tutorialnya berikut.
A. Cara Membuat Widget Contact Form di Blogger
1. Langkah awal silahkan Anda login terlebih dahulu ke Blogger
2. Kemudian masuk Ke "Tata Letak atau Layout" kemudian pilih Add a Gadget/ Tambahkan Gadget.
3. Setelah itu klik Gadget Lainnya lalu pilih Formulir Contact atau Contact Form
4. Jika sudah, silahkan Anda Simpan, dan untuk sementara biarkan saja ia muncul di sidebar atau lainnya sesuai di mana letak Anda membuatnya.
B. Menyembunyikan Contact Form bawaan Blogger
1. Pada Dasbor Blogger pilih Template → Edit HTML
2. Lalu cari instruksi "ContactForm1" atau langsung Lompat Ke Widget Contact Form 1 semoga lebih gampang mencarinya.
3. Kemudian hapus kode di mulai dari <b:if cond='data:title != ""'> sampai kode penutup </div> yang berada di atas kode <b:include name='quickedit'/> Seperti gambar dibawah ini.
4. Sehingga kesannya akan ibarat ini
5. Setelah itu Simpan Tema
<b:widget id='ContactForm1' locked='false' title='Formulir Kontak' type='ContactForm'> <b:includable id='main'> <b:include name='quickedit'/> 5. Setelah itu Simpan Tema
C. Cara memasang Contact Form Keren, Responsive, Menarik di Blog
Nah disini aku menyediakan 7 style contact form yang menarik untuk di pasang di blog Anda, silahkan Anda pilih sesuai impian Anda. Dengan syarat semua langkah diatas sudah Anda penuhi, karna kalau salah maka contact Us tidak akan berfungsi. Baik kita pribadi saja ke pembuatannya.
1. Pada Dasbor Blogger silahkan Anda pergi ke Laman atau Pages lalu pilih Laman baru/ Newpage
2. Setelah itu pada halaman posting pilih Mode HTML
3. Lalu Copy kode dibawah ini dan Paste dalam Mode HTML bukan Compose
4. Dan jangan lupa beri Judul dan Publikasikan apabila instruksi sudah dipasang, dan silahkan lihat hasilnya.
Style 1
<div class="contact-form"> <div class="contact section" id="contact" style="display: block;"> <div class="widget ContactForm" id="ContactForm1"> <div class="contact-form-widget"> <div class="form"> <form name="contact-form"> <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /> <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /> <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea> <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /> <br /> <div style="text-align: center; width: 100%;"> <div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"> </div> <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"> </div> </div> </form> </div> </div> </div> </div> </div> <style scoped="" type="text/css"> /* contact us */ #contact{background-color:#fff;margin:30px 0 !important}#contact .contact-form-widget{max-width:100% !important} #contact .contact-form-name,#contact .contact-form-email, #contact .contact-form-email-message{background-color:#FFF;border:1px solid #eee;border-radius:3px;padding:10px;margin-bottom:10px !important;max-width:100% !important} #contact .contact-form-name{width:47.7%;height:50px} #contact .contact-form-email{width:49.7%;height:50px} #contact .contact-form-email-message{height:150px}#contact .contact-form-button-submit{max-width:100%;width:100%;z-index:0;margin:4px 0 0;padding:10px !important;text-align:center;cursor:pointer;background:#27ae60;border:0;height:auto;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;border-radius:2px;text-transform:uppercase;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;-ms-transition:all .2s ease-out;transition:all .2s ease-out;color:#FFF} #contact .contact-form-button-submit:hover{background:#2c3e50}#contact .contact-form-email:focus,#contact .contact-form-name:focus,#contact .contact-form-email-message:focus{box-shadow:none !important}.alert-message{position:relative;display:block;background-color:#FAFAFA;padding:20px;margin:20px 0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;color:#2f3239;border:1px solid} </style> Style 2
<div class="head1"> <h2><i class="fas fa-space-shuttle"></i> Silahkan Kontak Kami !!!</h2> </div> <div class="contact-form"> <div class="contact section" id="contact" style="display: block;"> <div class="widget ContactForm" id="ContactForm1"> <div class="contact-form-widget"> <div class="form"> <form name="contact-form"> <input class="feedback-input" id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /> <input class="feedback-input" id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /> <textarea class="feedback-input" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea> <input class="feedback-input" id="ContactForm1_contact-form-submit" type="submit" value="Kirim" /> <br /> <div style="text-align: center; width: 100%;"> <div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"> </div> <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"> </div> </div> </form> </div> </div> </div> </div> </div> <style scoped="" type="text/css"> /* contact us */ .head1 { -webkit-border-radius:6px 6px 0px 0px; -moz-border-radius:6px 6px 0px 0px; border-radius:6px 6px 0px 0px; background-color:#CC6666; color:white; } h2 { text-align:center; padding:18px 0 18px 0; font-size: 1.4em;} form { max-width:700px; margin:50px auto; } .feedback-input { color:#000000; font-family: Helvetica, Arial, sans-serif; font-weight:500; font-size: 18px; border-radius: 5px; line-height: 22px; background-color: transparent; border:2px solid #CC6666; transition: all 0.3s; padding: 13px; margin-bottom: 15px; width:700px; box-sizing: border-box; outline:0; } .feedback-input:focus { border:2px solid #CC4949; } textarea { height: 150px; line-height: 150%; resize:vertical; } [type="submit"] { font-family: 'Montserrat', Arial, Helvetica, sans-serif; width: 700px; background:#CC6666; border-radius:5px; border:0; cursor:pointer; color:white; font-size:24px; padding-top:10px; padding-bottom:10px; transition: all 0.3s; margin-top:-4px; font-weight:700; } [type="submit"]:hover { background:#48afcc; } </style> Style 3
<section id="contact"> <div class="sectionheader"> <h1>CONTACT</h1></div> <article> <p>Silahkan contact kami kalau Anda ingin menunjukkan kritik, saran, serta motivasi terhadap blog ini, dan kami berharap sekali atas proteksi Anda yang membangun tersebut.</p> <label for="checkcontact" class="contactbutton"><div class="mail"></div></label><input id="checkcontact" type="checkbox"> <form name="contact-form" class="contactform"> <p class="input_wrapper"> <input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><label for="contact_nom">NAME</label></p> <p class="input_wrapper"> <input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value=""><label for="contact_email">EMAIL</label></p> <p class="input_wrapper"> <input type="text" name="contact_sujet" value="" id ="contact_sujet"><label for="contact_sujet">SUBJECT</label></p> <p class="textarea_wrapper"><textarea name="contact_message" id="ContactForm1_contact-form-email-message""></textarea></p> <p class="submit_wrapper"> <input id="ContactForm1_contact-form-submit" type="submit" value="Kirim" /> <div id="ContactForm1_contact-form-error-message"> </div> <div id="ContactForm1_contact-form-success-message"> </div> </form> </article> </section> <style scoped="" type="text/css"> /* Contact Us By Lk21.news */ #contact { width: 600px; margin:2em auto; background:white; position: relative; } #contact::after { content: ""; display: block; height: 30px; width: 100%; left: 5%; bottom: 0; position: absolute; -webkit-box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.19); box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.19); border-radius: 100%; z-index: -1; } #contact article { padding: 1em; } #contact h1 { background: #27dbd2; font-family: Oswald ,sans-serif; font-size: 1.75em; padding: 0.6em 0 0.6em 0.4em; color: white; text-shadow: 0 0.06em 0 #424242; position: relative; } .contactbutton { background: #27dbd2; -webkit-box-shadow: 1px 1px 0 0 #1f7a82,2px 2px 0 0 #1f7a82,3px 3px 0 0 #1f7a82; box-shadow: 1px 1px 0 0 #1f7a82,2px 2px 0 0 #1f7a82,3px 3px 0 0 #1f7a82; text-align: center; display: block; width: 100%; height: 50px; margin-top: 20px; margin-bottom: 2px; cursor: pointer; } .contactbutton:hover { -webkit-box-shadow: 1px 1px 0 0 #1f7a82,0px 0px 0 0 #1f7a82,0px 0px 0 0 #1f7a82; box-shadow: 1px 1px 0 0 #1f7a82,0px 0px 0 0 #1f7a82,0px 0px 0 0 #1f7a82; margin-top: 22px; margin-left: 2px; margin-bottom: 0px; } .mail { margin-top: 11px; font-size: 15px; display: inline-block; border-top: 2em solid transparent; border-left: 2.6em solid #fff; height: 0; width: 0; position: relative; } .mail:before { content: ''; top: -2.5em; left: -2.95em; display: block; position: absolute; border-top: 1.2em solid #fff; border-left: 1.6em solid transparent; border-right: 1.6em solid transparent; border-bottom: 1em solid transparent; font-size: 0.8em; } .mail::after { display: block; content: ""; position: absolute; border-top: 2em solid transparent; border-right: 2.6em solid #fff; height: 0; width: 0; left: -2.18em; bottom: 0; } #checkcontact{ position: absolute; left: -99999px; } .contactform { overflow: hidden; max-height: 0px; -webkit-transition: all linear 1s; -moz-transition: all linear 1s; -o-transition: all linear 1s; -ms-transition: all linear 1s; transition: all linear 1s; } #checkcontact:checked + .contactform { max-height: 1000px; } .input_wrapper { position: relative; } .textarea_wrapper textarea { margin-top: 20px; display: block; width: 100%; background: white; border: 1px solid #DADADA; box-shadow: 0 0 1px 0 #E4E4E4; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 1em; -webkit-transition: all 250ms ease; -moz-transition: all 250ms ease; -ms-transition: all 250ms ease; -o-transition: all 250ms ease; transition: all 250ms ease; color: #5E5E5E; } .input_wrapper input[type="text"] { margin-top: 1em; display: block; width: 100%; background: white; border: 1px solid #DADADA; box-shadow: 0 0 1px 0 #E4E4E4; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 1em; -webkit-transition: all 250ms ease; -moz-transition: all 250ms ease; -ms-transition: all 250ms ease; -o-transition: all 250ms ease; transition: all 250ms ease; color: #5E5E5E; text-indent: 15%; } .input_wrapper input[type="text"]:focus { background: rgba(242, 56, 90, 0.05); box-shadow: inset 2px 2px 5px 0 #DADADA; outline: none; text-indent: 0; } .input_wrapper label { position: absolute; left: 0; top: 0; height: 100%; background: #27dbd2; color: white; font-family: Oswald ,sans-serif; box-sizing: border-box; width: 15%; text-align: center; line-height: 2.8em; -webkit-transition: all 250ms ease; -moz-transition: all 250ms ease; -ms-transition: all 250ms ease; -o-transition: all 250ms ease; transition: all 250ms ease; } .input_wrapper input[type="text"]:focus + label { left: 85%; } .textarea_wrapper textarea { margin-top: 20px; display: block; width: 100%; min-height:150px; background: white; border: 1px solid #DADADA; box-shadow: 0 0 1px 0 #E4E4E4; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 1em; -webkit-transition: all 250ms ease; -moz-transition: all 250ms ease; -ms-transition: all 250ms ease; -o-transition: all 250ms ease; transition: all 250ms ease; color: #5E5E5E; } .textarea_wrapper textarea:focus { background: rgba(242, 56, 90, 0.05); box-shadow: inset 2px 2px 5px 0 #DADADA; outline: none; } .submit_wrapper { text-align: center; } .submit_wrapper input { text-align: center; display: inline-block; width: 40%; height: 50px; margin-top: 1em; margin-bottom: 6px; cursor: pointer; background: #27dbd2; color: white; font-family: Oswald ,sans-serif; font-size: 1em; border: none; -webkit-box-shadow: 1px 1px 0 0 #1f7a82,2px 2px 0 0 #1f7a82,3px 3px 0 0 #1f7a82; box-shadow: 1px 1px 0 0 #1f7a82,2px 2px 0 0 #1f7a82,3px 3px 0 0 #1f7a82; -webkit-appearance: none; -webkit-transition: all 250ms ease; -moz-transition: all 250ms ease; -ms-transition: all 250ms ease; -o-transition: all 250ms ease; transition: all 250ms ease; } .submit_wrapper input:hover { -webkit-box-shadow: 1px 1px 0 0 #1f7a82,0px 0px 0 0 #1f7a82,0px 0px 0 0 #1f7a82; box-shadow: 1px 1px 0 0 #1f7a82,0px 0px 0 0 #1f7a82,0px 0px 0 0 #1f7a82; margin-top: 22px; margin-left: 2px; margin-bottom: 0px; } @media (max-width: 500px){ #contact { width: 100%; } .input_wrapper label { line-height: 3.5em; font-size: 0.8em; } } </style> Style 4
<div class = "frame"> <div id = "button_open_envelope"> Email me </div> <div class = "message"> <form name="contact-form"> <input id="ContactForm1_contact-form-name" type="text" name="name" class="name" placeholder=" Name* " required> <input id="ContactForm1_contact-form-email" type="email" name="email" class="email" placeholder=" Email* " required pattern="^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$"> <input type="text" name="phone" class="phone" placeholder=" Phone (optional)" autofocus> <textarea id="ContactForm1_contact-form-email-message" name="message" class="messarea" placeholder=" Message* " required></textarea> <input id="ContactForm1_contact-form-email-message" type="text" name="address" class="address" style="display: none;"> <input id="ContactForm1_contact-form-submit" type="submit" value="Send" class="send"> <br /> <div style="text-align: center; width: 100%;"> <div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"> </div> <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"> </div> </div> </form> </div> <div class = "bottom"></div> <div class = "left"></div> <div class = "right"></div> <div class = "top"></div> <script src="js/script.js"></script> </div> <style scoped="" type="text/css"> /* Contact US */ .frame{ width: 600px; height: 350px; margin: 250px auto 0; position: relative; background: #435d77; border-radius:0 0 40px 40px; } #button_open_envelope{ width: 180px; height: 30px; position: absolute; z-index: 311; top: 250px; left: 208px; border-radius: 10px; color: #fff; font-size: 26px; padding:15px 0; border: 2px solid #fff; transition:.3s; } #button_open_envelope:hover{ background: #FFf; color: #2b67cb; transform:scale(1.1); transition:background .25s, transform .5s,ease-in; cursor: pointer; } .message{ position: relative; width: 580px; min-height:300px; height: auto; background: #fff; margin: 0 auto; top: 30px; box-shadow: 0 0 5px 2px #333; transition:2s ease-in-out; transition-delay:1.5s; z-index: 300; } .left,.right,.top{width: 0; height: 0;position:absolute;top:0;z-index: 310;} .left{ border-left: 300px solid #337efc; border-top: 160px solid transparent; border-bottom: 160px solid transparent; } .right{ border-right: 300px solid #337efc; border-top: 160px solid transparent; border-bottom: 160px solid transparent;; left:300px; } .top{ border-right: 300px solid transparent; border-top: 200px solid #03A9F4; border-left: 300px solid transparent; transition:transform 1s,border 1s, ease-in-out; transform-origin:top; transform:rotateX(0deg); z-index: 500; } .bottom{ width: 600px; height: 190px; position: absolute; background: #2b67cb; top: 160px; border-radius:0 0 30px 30px; z-index: 310; } .open{ transform-origin:top; transform:rotateX(180deg); transition:transform .7s,border .7s,z-index .7s ease-in-out; border-top: 200px solid #2c3e50; z-index: 200; } .pull{ -webkit-animation:message_animation 2s 1 ease-in-out; animation:message_animation 2s 1 ease-in-out; -webkit-animation-delay:.9s; animation-delay:.45s; transition:1.5s; transition-delay:1s; z-index: 350; } .name,.email,.phone,.messarea,.send{ margin: 0; padding: 0 0 0 10px; width: 570px; height:40px; float: left; display: block; font-size: 18px; color: #2b67cb; border:none; border-bottom:1px solid #bdbdbd; letter-spacing: normal; } .messarea{ height: 117px; width: 560px; overflow: auto; border:none; padding: 10px; } .send{ width: 580px; padding: 0; border: none; cursor: pointer; background: #7CB342; color: #fff; transition:.35s; letter-spacing: 1px; } .send:hover{background:tomato;transition:.35s;} ::-moz-placeholder{color: #7CB342;font-family: 'Ubuntu';font-size: 20px;opacity: 1;} ::-webkit-input-placeholder {color: #7CB342; font-family: 'Ubuntu';font-size: 20px;} *:focus {outline: none;} input:focus:invalid,textarea:focus:invalid { /* when a field is considered invalid by the browser */ background: #fff url(images/invalid.png) no-repeat 98% center; box-shadow: 0 0 5px #d45252; border:1px solid #b03535; } input:required:valid,textarea:required:valid { /* when a field is considered valid by the browser */ background: #fff url(images/valid.png) no-repeat 98% center; box-shadow: 0 0 5px #5cd053; border-color: #28921f; } @-webkit-keyframes message_animation { 0%{ transform:translatey(0px); z-index: 300; transition: 1s ease-in-out; } 50%{ transform:translatey(-340px); z-index: 300; transition: 1s ease-in-out; } 51%{ transform:translatey(-340px); z-index: 350; transition: 1s ease-in-out; } 100%{ transform:translatey(0px); z-index: 350; transition: 1s ease-in-out; } } @keyframes message_animation { 0%{ transform:translatey(0px); z-index: 300; transition: 1s ease-in-out; } 50%{ transform:translatey(-340px); z-index: 300; transition: 1s ease-in-out; } 51%{ transform:translatey(-340px); z-index: 350; transition: 1s ease-in-out; } 100%{ transform:translatey(0px); z-index: 350; transition: 1s ease-in-out; } } </style> Style 5
<div class="container"> <h2>Contact me</h2> <form id="contact" action="#" method="post"> <div class="left"> <input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" required="required"/> <input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" required="required" /> <input type="text" placeholder="Subject" required="required"/> </div> <div class="right"> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea> </div> <div class="send-button cl"> <div class="send-button cl"> <button id="ContactForm1_contact-form-submit" type="submit">Send</button> </div> <br /> <div style="text-align: center; width: 100%;"> <div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"> </div> <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"> </div> </div> </form> <style scoped="" type="text/css"> /*Contact Us */ *{ margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } ::-webkit-input-placeholder{color: #777;} :-moz-placeholder { /* Firefox 18- */ color: #777;} ::-moz-placeholder { /* Firefox 19+ */ color: #777;} :-ms-input-placeholder {color: #777;} .container{ position: relative; width: 100%; padding: 1em; margin: auto; } .container h2{ text-align: center; text-transform: uppercase; color: #f55; } #contact input[type="text"],#contact input[type="email"], #contact textarea{ display: block; padding: 10px; margin: 10px auto; width: 100%; font-size: 18px; color: #777; border: 1px solid #ccc; } #contact textarea{ font-size: 16px; } #contact input:hover, #contact textarea:hover{ border: 1px solid #888; } #contact input:focus, #contact textarea:focus{ border: 1px solid #777; } #contact textarea{ max-width: 100%; min-width: 100%; max-height: 180px; min-height: 180px; resize: none; } #contact .send-button{ text-align: center; } #contact .send-button button[type="submit"]{ color: #fff; background: #e74c3c; border: none; width: 100%; padding: 10px 0; font-size: 20px; text-transform: uppercase; transition: .5s all ease; cursor: pointer; } #contact .send-button button[type="submit"]:hover{ background: #c0392b; } #contact .send-button button[type="submit"]:focus{ position: relative; top: 2px; } /* Contact US Responsive*/ @media screen and (min-width: 640px){ .container{ width: 600px; } #contact textarea{ max-width: 98%; min-width: 98%; min-height: 152px; margin-right: 0; } #contact .right,#contact .left{ display: block; } #contact .right{ float: right; width: 50%; } #contact .left{ float: left; width: 50%; } .cl{ clear: both; } } </style> Style 6
<link href='https://fonts.googleapis.com/css?family=Open Sans' rel='stylesheet' type='text/css'> <link href="https://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet"> <div id="content"> <form action=" " method="post" autocomplete="on"> <p> <label for="username" class="icon-user"> Name <span class="required">*</span> </label> <input type="text" name="username" id="ContactForm1_contact-form-name" required="required" placeholder="Your Name" /> </p> <p> <label for="usermail" class="icon-envelope"> E-mail address <span class="required">*</span> </label> <input type="email" name="usermail" id="ContactForm1_contact-form-email" placeholder="I promise I hate spam too!" required="required" /> </p> <p> <label for="usersite" class="icon-link"> Website</label> <input type="url" name="usersite" id="usersite" placeholder="eg: http://www.example.com" /> </p> <p> <label for="subject" class="icon-bullhorn"> Subject</label> <input type="text" name="subject" id="subject" placeholder="What would you like to talk about?" /> </p> <p> <label for="message" class="icon-comment"> Message <span class="required">*</span> </label> <textarea id="ContactForm1_contact-form-email-message" placeholder="Your message here and I'll answer as soon as possible " required="required"></textarea> </p> <p class="indication">Fields with <span class="required"> * </span>are required</p> <input id="ContactForm1_contact-form-submit" type="submit" value=" Send this mail ! " /> <br /> <div style="text-align: center; width: 100%;"> <div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"> </div> <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"> </div> </div> </form> <style scoped="" type="text/css"> /* Contact Form */ #content { position:relative; margin:50px auto; width:400px; min-height:200px; z-index:100; padding:30px; border:1px solid #383838; /* My stipped background */ background: #D1D1D1; /* Old browsers */ background: -moz-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px); /* FF3.6+ */ background: -webkit-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px); /* FF3.6+ */ background: -o-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px); /* FF3.6+ */ background: repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px); /* FF3.6+ */ /*border-radius*/ -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; /*box-shadow*/ -webkit-box-shadow:0px 1px 6px #3F3F3F; -moz-box-shadow:0px 1px 6px #3F3F3F; box-shadow:0px 1px 6px #3F3F3F; } /** my "fake" background that will hover the stripes **/ #content:after { background:#F9F9F9; margin:10px; position: absolute; content :" "; bottom: 0; left: 0; right: 0; top: 0; z-index: -1; border:1px #E5E5E5 solid; /*border-radius*/ -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; } /*** form styling **/ /** we remove the red glow around required fields since we are already using the red star */ input:required, textarea:required { -moz-box-shadow:none; -webkit-box-shadow:none; -o-box-shadow:none; box-shadow:none; } /** inputs and textarea**/ input:not([type="submit"]), textarea { outline:none; display:block; width:380px; padding:4px 8px; border:1px dashed #DBDBDB; color:#3F3F3F; font-family:'Droid Sans', Tahoma, Arial, Verdana sans-serif; font-size:14px; /*border-radius*/ -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; /*transition*/ -webkit-transition:background 0.2s linear, box-shadow 0.6s linear; -moz-transition:background 0.2s linear, box-shadow 0.6s linear; -o-transition:background 0.2s linear, box-shadow 0.6s linear; transition:background 0.2s linear, box-shadow 0.6s linear; } input:not([type="submit"]):active, textarea:active, input:not([type="submit"]):focus, textarea:focus { background:#F7F7F7; border:dashed 1px #969696; /*box-shadow*/ -webkit-box-shadow:2px 2px 7px #E8E8E8 inset; -moz-box-shadow:2px 2px 7px #E8E8E8 inset; box-shadow:2px 2px 7px #E8E8E8 inset; } input:not([type="submit"]) { height: 20px; } /* placeholder */ ::-webkit-input-placeholder { color:#BABABA; font-style:italic; } input:-moz-placeholder, textarea:-moz-placeholder { color:#BABABA; font-style:italic; } textarea { min-height:150px; resize:vertical } /** labels**/ /** adding our icon font !! */ .iconic:before { font-size:25px; font-family:'Alice', Verdana, serif; } .iconic.link:before { content:'/'; } .iconic.quote-alt:before { content:"'"; } .iconic.comment:before { content:"q"; } .iconic.user:before { content:"u"; } .iconic.mail-alt:before { content:"M"; } label { color:#7F7E7E; -webkit-transition: color 1s ease; -moz-transition: color 1s ease; transition: color 1s ease; } label:hover { color:#191919; } label:before { color:#C1BFBD; -webkit-transition: color 1s ease; -moz-transition: color 1s ease; transition: color 1s ease; } label:hover:before { color:#969696; -webkit-transition: color 1s ease; -moz-transition: color 1s ease; transition: color 1s ease; } p { margin-bottom:20px; } .indication { color:#878787; font-size:12px; font-style:italic; text-align:right; padding-right:10px; } .required { color:#E5224C; } /** Styling the send button **/ input[type=submit] { margin-left:235px; cursor:pointer; background:none; border:none; font-family:'Alice', serif; color:#767676; font-size:18px; padding:10px 4px; border:1px solid #E0E0E0; text-shadow: 0px 1px 1px #E8E8E8; background: rgb(247, 247, 247); background: -moz-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, rgba(247, 247, 247, 1)), color-stop(100%, rgba(242, 242, 242, 1))); background: -webkit-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%); background: -o-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%); background: -ms-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%); background: linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%); /*border-radius*/ -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; /*box-shadow*/ -webkit-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA; -moz-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA; box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA; /*transition*/ -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; } input[type=submit]:hover { color:#686868; border-color: #CECECE; background: rgb(244, 244, 244); background: -moz-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(244, 244, 244, 1)), color-stop(100%, rgba(242, 242, 242, 1))); background: -webkit-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%); background: -o-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%); background: -ms-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%); background: linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%); /*box-shadow*/ -webkit-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0; -moz-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0; box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0; } input[type=submit]:active, input[type=submit]:focus { position:relative; top:1px; color:#515151; background: rgb(234, 234, 234); background: -moz-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(234, 234, 234, 1)), color-stop(100%, rgba(242, 242, 242, 1))); background: -webkit-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%); background: -o-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%); background: -ms-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%); background: linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%); /*box-shadow*/ -webkit-box-shadow:0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0; -moz-box-shadow:0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0; box-shadow:0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0; } </style> Style 7
<form name="contact-form"> <input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><br /> <input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br /> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea><br /> <input id="ContactForm1_contact-form-submit" type="button" value="Send" /><br /> <div style="max-width: 222px; text-align: center; width: 100%;"> <br /> <br /> <div id="ContactForm1_contact-form-error-message"> </div> <div id="ContactForm1_contact-form-success-message"> </div> </div> </form> </div> </div> <style scoped="" type="text/css"> /* Contact Me */ .wrapper{background:#fff;padding 40px 60px;margin:80px} .pesan-text{position:relative;padding:16px 20px;background-color:#e06666;color:#fafafa;text-align:center;line-height:1.5em;font-size:24px;margin-bottom:30px} .contact-form-box{width:100%;margin:10px auto;padding:0;} #ContactForm1_contact-form-name, #ContactForm1_contact-form-email{width: 70%;height:auto;margin: 5px auto 10px;padding: 10px;background: #fff;border: 2px solid #ccc;color:#999;} #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{background: #ececec;outline:none} #ContactForm1_contact-form-email-message{width: 90%;height: 150px;margin: 5px auto;padding: 10px;background: #fff;border: 2px solid #ccc;color:#999;font-family:Arial, sans-serif;} #ContactForm1_contact-form-submit {display:block;;float: left;font-size:24px;color: #fafafa;padding: 20px 40px;margin: 10px 0 5px 0;cursor: pointer;background-color:#68C3A3;border:1px solid #68C3A3;} #ContactForm1_contact-form-submit:hover {background-color:#e06666;border:1px solid #e06666} #ContactForm1_contact-form-submit:active {position:relative;top:2px;} #ContactForm1_contact-form-submit:focus{outline:none} #ContactForm1_contact-form-error-message{font-size:18px;color:#e06666;width: 100%;margin-top:10px;text-align:left} #ContactForm1_contact-form-success-message{font-size:18px;color:#1abc9c;width: 100%;margin-top:10px;text-align:left} @media screen and (max-width: 768px){ .contact-form-box{width:100%;} #ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{width: 100%;} } @media screen and (max-width: 480px){ #ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{width: 100%;} } <style> Nah itulah beberapa langkah pemasangan kontak pesan di blog dengan gampang dan simple, dan terdapat banyak variasi yang sanggup di pilih sesuai selera. Nah sekian dulu tutorial pada kali ini, kalau ada yang ingin Anda tanyakan atau ingin menambahkan silahkan komentar dibawah ini terima kasih.
 Keren Di Blog){kind=link}