Blogger Yeni İletişi Formu Tasarımı

<!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>

<!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}}
 
 

Kodeks Editör

Blogger Yeni İletişi Formu Tasarımı

"Blogger Yeni İletişi Formu Tasarımı" 0 Yorum yapıldı.

Yorum Gönder