× İletişim Formu Blogger AMP İletişim Formu Arlina Design 7/24/2017 Etiketler : AMP Blogger Form Blogger Widget Arlina Design <!DOCTYPE html> <html> <head> <style type='text/css'> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed'); body {font-family: 'Fira Sans Condensed', sans-serif;margin: 0 auto 0 auto;} #contactForm{margin:10px 10px 10px 20px} #contactForm input:focus ~ label,#contactForm textarea:focus ~ label,#contactForm input:valid ~ label,#contactForm textarea:valid ~ label{font-size:0.75em;color:#D35400;top:-2.25rem;-webkit-transition:all 0.125s ease;transition:all 0.125s ease} #contactForm .styled-input{float:left;width:33.3333%;margin:2rem 0 1rem;padding:0 10px 0 0;position:relative;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #contactForm .styled-input-in{position:relative} #contactForm .styled-input label{color:#999;padding:1rem;position:absolute;top:0;left:0;-webkit-transition:all 0.25s ease;transition:all 0.25s ease;pointer-events:none;line-height:1} #contactForm .styled-input.wide{width:100%} #contactForm input,#contactForm textarea{padding:1rem 1rem;border:1px solid #ddd;width:100%;font-size:1rem;background:#fafafa;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #contactForm input ~ .span1,#contactForm textarea ~ .span1{display:block;width:0;height:3px;background:#D35400;position:absolute;left:50%;-webkit-transition:width 0.4s ease-in-out;transition:width 0.4s ease-in-out} #contactForm input ~ .span2,#contactForm textarea ~ .span2{display:block;width:0;height:3px;background:#D35400;position:absolute;right:50%;-webkit-transition:width 0.4s ease-in-out;transition:width 0.4s ease-in-out} #contactForm input ~ span{bottom:0} #contactForm textarea ~ span{bottom:5px} #contactForm input:focus,#contactForm textarea:focus{outline:0} #contactForm input:focus ~ .span1,#contactForm textarea:focus ~ .span1,#contactForm input:focus ~ .span2,#contactForm textarea:focus ~ .span2{width:50%} #contactForm textarea{width:100%;min-height:15em} #contactForm .btn{font-family:"Helvetica","Arial",sans-serif;text-transform:uppercase;font-size:14px;font-weight:800;letter-spacing:1px;border-radius:0;padding:0 25px;height:51px;line-height:51px;color:#333;background-color:#fafafa;border:1px solid #ddd;cursor:pointer;margin:20px 0 0;background-image:none} #contactForm .btn-default:hover,#contactForm .btn-default:focus{background-color:#D35400;border:1px solid #0400bf;color:white} </style> </head> <body> <form action="https://formspree.io/email@gmail.com" method="POST" target="_blank" name="sentMessage" id="contactForm"> <div class="styled-input"> <div class="styled-input-in"> <input type="text" name="name" required="required" /> <label>Adınız</label> <span class="span1"></span><span class="span2"></span> </div></div> <div class="styled-input"> <div class="styled-input-in"> <input type="email" name="_replyto" required="required" /> <label>Email</label> <span class="span1"></span><span class="span2"></span> </div></div><div class="styled-input"> <div class="styled-input-in"> <input type="text" name="_subject" required="required" /> <label>Konu</label> <span class="span1"></span><span class="span2"></span> </div></div> <div class="styled-input wide"> <div class="styled-input-in"> <textarea required="required"></textarea> <label>Mesajınız</label> <span class="span1"></span><span class="span2"></span> </div></div> <button type="submit" class="btn btn-default">Gönder</button> </form> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "Blogger AMP İletişim Formu" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Blogger AMP İletişim Formu Arlina Design 7/24/2017 Etiketler : AMP Blogger Form Blogger Widget Arlina Design <!DOCTYPE html> <html> <head> <style type='text/css'> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed'); body {font-family: 'Fira Sans Condensed', sans-serif;margin: 0 auto 0 auto;} #contactForm{margin:10px 10px 10px 20px} #contactForm input:focus ~ label,#contactForm textarea:focus ~ label,#contactForm input:valid ~ label,#contactForm textarea:valid ~ label{font-size:0.75em;color:#D35400;top:-2.25rem;-webkit-transition:all 0.125s ease;transition:all 0.125s ease} #contactForm .styled-input{float:left;width:33.3333%;margin:2rem 0 1rem;padding:0 10px 0 0;position:relative;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #contactForm .styled-input-in{position:relative} #contactForm .styled-input label{color:#999;padding:1rem;position:absolute;top:0;left:0;-webkit-transition:all 0.25s ease;transition:all 0.25s ease;pointer-events:none;line-height:1} #contactForm .styled-input.wide{width:100%} #contactForm input,#contactForm textarea{padding:1rem 1rem;border:1px solid #ddd;width:100%;font-size:1rem;background:#fafafa;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #contactForm input ~ .span1,#contactForm textarea ~ .span1{display:block;width:0;height:3px;background:#D35400;position:absolute;left:50%;-webkit-transition:width 0.4s ease-in-out;transition:width 0.4s ease-in-out} #contactForm input ~ .span2,#contactForm textarea ~ .span2{display:block;width:0;height:3px;background:#D35400;position:absolute;right:50%;-webkit-transition:width 0.4s ease-in-out;transition:width 0.4s ease-in-out} #contactForm input ~ span{bottom:0} #contactForm textarea ~ span{bottom:5px} #contactForm input:focus,#contactForm textarea:focus{outline:0} #contactForm input:focus ~ .span1,#contactForm textarea:focus ~ .span1,#contactForm input:focus ~ .span2,#contactForm textarea:focus ~ .span2{width:50%} #contactForm textarea{width:100%;min-height:15em} #contactForm .btn{font-family:"Helvetica","Arial",sans-serif;text-transform:uppercase;font-size:14px;font-weight:800;letter-spacing:1px;border-radius:0;padding:0 25px;height:51px;line-height:51px;color:#333;background-color:#fafafa;border:1px solid #ddd;cursor:pointer;margin:20px 0 0;background-image:none} #contactForm .btn-default:hover,#contactForm .btn-default:focus{background-color:#D35400;border:1px solid #0400bf;color:white} </style> </head> <body> <form action="https://formspree.io/email@gmail.com" method="POST" target="_blank" name="sentMessage" id="contactForm"> <div class="styled-input"> <div class="styled-input-in"> <input type="text" name="name" required="required" /> <label>Adınız</label> <span class="span1"></span><span class="span2"></span> </div></div> <div class="styled-input"> <div class="styled-input-in"> <input type="email" name="_replyto" required="required" /> <label>Email</label> <span class="span1"></span><span class="span2"></span> </div></div><div class="styled-input"> <div class="styled-input-in"> <input type="text" name="_subject" required="required" /> <label>Konu</label> <span class="span1"></span><span class="span2"></span> </div></div> <div class="styled-input wide"> <div class="styled-input-in"> <textarea required="required"></textarea> <label>Mesajınız</label> <span class="span1"></span><span class="span2"></span> </div></div> <button type="submit" class="btn btn-default">Gönder</button> </form> </body> </html>
Yorum Gönder