× İletişim Formu Blogger Yeni İletişi Formu Tasarımı Arlina Design 5/03/2018 Etiketler : Widget Arlina Design <!DOCTYPE html> <html> <head> <title>Blogger İletişim Formu</title> <style scoped="" type="text/css"> *, *:before, *:after {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} [placeholder]:focus::-webkit-input-placeholder{transition:opacity .5s .5s ease;opacity:0}input:focus{outline:none}input[type="text"],input[type="email"]{padding:12px 16px;font-size:16px}button,input[type="button"],input[type="reset"],input[type="submit"],.button{border:0;color:#fff;cursor:pointer;font-size:14px;font-weight:400;padding:12px 16px;white-space:normal;width:auto;border-radius:3px;outline:0}button:focus,button:hover,input[type="button"]:focus,input[type="button"]:hover,input[type="reset"]:focus,input[type="reset"]:hover,input[type="submit"]:focus,input[type="submit"]:hover,.button:focus,.button:hover{color:#fff} @import url('https://fonts.googleapis.com/css?family=Roboto'); body {font-family:'Roboto', sans-serif;font-size:16px} #comments,#ContactForm1{display:none} #ContactForm1_contact-form-email,#ContactForm1_contact-form-name{display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#f4f7f8;color:#222;border:0;border-bottom:1px solid #c6cbcc;transition:all .6s} #ContactForm1_contact-form-email-message{background:#f4f7f8;color:#222;font-family:'Roboto', sans-serif;width:100%;height:250px;margin:10px auto;padding:14px;border:0;border-bottom:1px solid #c6cbcc;transition:all .6s} #ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email-message:focus{background:#f4f7f8;border-color:#f24a4a;outline:none} #ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;margin:10px 0 3px 5px;padding:0 0 0 20px;border:none;border-radius:24px;cursor:pointer;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)} .contact_form-4{position:relative} .contact_form-4:before{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUBAMAAAB/pwA+AAAAElBMVEVHcExChfTqQzXyui80qFOWZJRFkkmAAAAAAXRSTlMAQObYZgAAAC5JREFUCNdjYEAFSkpUYjIbGxsrqQoKCgpAmIFwJkgQygyEMEHAxQVuAuVMCAAACWsKY1KWucsAAAAASUVORK5CYII=);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0} #ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)} #ContactForm1_contact-form-success-message,#ContactForm1_contact-form-error-message{margin-top:35px} form{color:#666} .contact_form-1,.contact_form-2{float:left;width:50%} .contact_form-1,.contact_form-2{margin:0 0 10px 0;padding:0 10px 0 0} .contact_form-2{padding:0 0 0 10px} @media only screen and (max-width:640px){.contact_form-1,.contact_form-2{width:100%;padding:0}} </style> </head> <body> <form name="contact-form"> <div class='contact_form-1'> <input id="ContactForm1_contact-form-name" name="name" placeholder='Adınız' size="30" type="text" value="" /> </div> <div class='contact_form-2'> <input id="ContactForm1_contact-form-email" name="email" placeholder='E-posta adresiniz' size="30" type="text" value="" /> </div> <div class='contact_form-3'> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder='Mesajınız' rows="7"></textarea> </div> <div class='contact_form-4'> <input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Gönder" /> </div> <div style="max-width: 100%; text-align: center; width: 100%;"> <div id="ContactForm1_contact-form-error-message"> </div> <div id="ContactForm1_contact-form-success-message"> </div> </div> </form> <script defer='defer' onload='loadDIWComments();' src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function loadDIWComments(){ if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '6286115367912778321';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6286115367912778321','//bloggereklentileri.blogspot.com/','6286115367912778321'); _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Gönderiliyor...', 'contactFormMessageSentMsg': 'Mesajınız gönderildi.', 'contactFormMessageNotSentMsg': 'Mesaj gönderilemedi. Lütfen daha sonra tekrar deneyiniz.', 'contactFormInvalidEmailMsg': 'Geçerli bir e-posta adresi gereklidir.', 'contactFormEmptyMessageMsg': 'Mesaj alanı boş bırakılamaz.', 'title': 'İletişim Formu', 'blogId': '6286115367912778321', 'contactFormNameMsg': 'Adınız', 'contactFormEmailMsg': 'E-posta adresiniz', 'contactFormMessageMsg': 'Mesajınız', 'contactFormSendMsg': 'Gönder', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));} //]]> </script> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "Blogger Yeni İletişi Formu Tasarımı" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Blogger Yeni İletişi Formu Tasarımı Arlina Design 5/03/2018 Etiketler : Widget Arlina Design <!DOCTYPE html> <html> <head> <title>Blogger İletişim Formu</title> <style scoped="" type="text/css"> *, *:before, *:after {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} [placeholder]:focus::-webkit-input-placeholder{transition:opacity .5s .5s ease;opacity:0}input:focus{outline:none}input[type="text"],input[type="email"]{padding:12px 16px;font-size:16px}button,input[type="button"],input[type="reset"],input[type="submit"],.button{border:0;color:#fff;cursor:pointer;font-size:14px;font-weight:400;padding:12px 16px;white-space:normal;width:auto;border-radius:3px;outline:0}button:focus,button:hover,input[type="button"]:focus,input[type="button"]:hover,input[type="reset"]:focus,input[type="reset"]:hover,input[type="submit"]:focus,input[type="submit"]:hover,.button:focus,.button:hover{color:#fff} @import url('https://fonts.googleapis.com/css?family=Roboto'); body {font-family:'Roboto', sans-serif;font-size:16px} #comments,#ContactForm1{display:none} #ContactForm1_contact-form-email,#ContactForm1_contact-form-name{display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#f4f7f8;color:#222;border:0;border-bottom:1px solid #c6cbcc;transition:all .6s} #ContactForm1_contact-form-email-message{background:#f4f7f8;color:#222;font-family:'Roboto', sans-serif;width:100%;height:250px;margin:10px auto;padding:14px;border:0;border-bottom:1px solid #c6cbcc;transition:all .6s} #ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email-message:focus{background:#f4f7f8;border-color:#f24a4a;outline:none} #ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;margin:10px 0 3px 5px;padding:0 0 0 20px;border:none;border-radius:24px;cursor:pointer;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)} .contact_form-4{position:relative} .contact_form-4:before{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUBAMAAAB/pwA+AAAAElBMVEVHcExChfTqQzXyui80qFOWZJRFkkmAAAAAAXRSTlMAQObYZgAAAC5JREFUCNdjYEAFSkpUYjIbGxsrqQoKCgpAmIFwJkgQygyEMEHAxQVuAuVMCAAACWsKY1KWucsAAAAASUVORK5CYII=);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0} #ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)} #ContactForm1_contact-form-success-message,#ContactForm1_contact-form-error-message{margin-top:35px} form{color:#666} .contact_form-1,.contact_form-2{float:left;width:50%} .contact_form-1,.contact_form-2{margin:0 0 10px 0;padding:0 10px 0 0} .contact_form-2{padding:0 0 0 10px} @media only screen and (max-width:640px){.contact_form-1,.contact_form-2{width:100%;padding:0}} </style> </head> <body> <form name="contact-form"> <div class='contact_form-1'> <input id="ContactForm1_contact-form-name" name="name" placeholder='Adınız' size="30" type="text" value="" /> </div> <div class='contact_form-2'> <input id="ContactForm1_contact-form-email" name="email" placeholder='E-posta adresiniz' size="30" type="text" value="" /> </div> <div class='contact_form-3'> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder='Mesajınız' rows="7"></textarea> </div> <div class='contact_form-4'> <input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Gönder" /> </div> <div style="max-width: 100%; text-align: center; width: 100%;"> <div id="ContactForm1_contact-form-error-message"> </div> <div id="ContactForm1_contact-form-success-message"> </div> </div> </form> <script defer='defer' onload='loadDIWComments();' src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function loadDIWComments(){ if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '6286115367912778321';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6286115367912778321','//bloggereklentileri.blogspot.com/','6286115367912778321'); _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Gönderiliyor...', 'contactFormMessageSentMsg': 'Mesajınız gönderildi.', 'contactFormMessageNotSentMsg': 'Mesaj gönderilemedi. Lütfen daha sonra tekrar deneyiniz.', 'contactFormInvalidEmailMsg': 'Geçerli bir e-posta adresi gereklidir.', 'contactFormEmptyMessageMsg': 'Mesaj alanı boş bırakılamaz.', 'title': 'İletişim Formu', 'blogId': '6286115367912778321', 'contactFormNameMsg': 'Adınız', 'contactFormEmailMsg': 'E-posta adresiniz', 'contactFormMessageMsg': 'Mesajınız', 'contactFormSendMsg': 'Gönder', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));} //]]> </script> </body> </html>
Yorum Gönder