صفحة تواصل لبلوجر بتصميم الماتريال ديزاين

شرح طريقة التركيب 

<style scoped="scoped">
.technomeeinput{float:none;position:relative;margin-bottom:45px;margin-left:10px}.technomeeinput input,.technomeeinput textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.technomeeinput input:focus,.technomeeinput textarea:focus{outline:none}.technomeeinput label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;right:0;top:10px;transition:.2s ease all}.technomeeinput input:focus ~ label,.technomeeinput input:valid ~ label,.technomeeinput textarea:focus ~ label,.technomeeinput textarea:valid ~ label{top:-20px;font-size:14px;color:#07ACEC}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#07ACEC;transition:.2s ease all}.bar:before{right:50%}.bar:after{left:50%}.technomeeinput input:focus ~ .bar:before,.technomeeinput input:focus ~ .bar:after,.technomeeinput textarea:focus ~ .bar:before,.technomeeinput textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;right:0;pointer-events:none;opacity:.5}.technomeeinput input:focus ~ .highlight,.technomeeinput textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.technomeeinput input:focus ~ label,.technomeeinput input:valid ~ label,.technomeeinput textarea:focus ~ label,.technomeeinput textarea:valid ~ label{top:-20px;font-size:13px;color:#07ACEC}
input#ContactForm1_contact-form-email-message{height:150px}
input#ContactForm1_contact-form-submit{font-family: mahdi-font;color:#fff!important;background:#07ACEC;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;float:right;margin-top:15px}
input#ContactForm1_contact-form-submit:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
#ContactForm1_contact-form-error-message{float:left;background:#D32F2F;color:#fff;font-size:13px;font-weight:700;border-radius:3px}#ContactForm1_contact-form-success-message{float:left;background:#4CAF50;color:#fff;font-size:13px;font-weight:700;border-radius:3px}
</style>
<br />
<form name="contact-form">
<div class="technomeeinput">
<input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label>الإسم</label></div>
<div class="technomeeinput">
<input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label>البريد الإلكتروني</label></div>
<div class="technomeeinput">
<textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea>
<span class="highlight"></span>
<span class="bar"></span>
<label>الرسالة</label></div>
<input id="ContactForm1_contact-form-submit" type="button" value="إرسال" />
<br />
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</form>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '3016169891337403942';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d3016169891337403942','//btechnomee.blogspot.com/','3016169891337403942');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Sending...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Your message has been sent.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px;color:#fff">Message could not be sent. ;color:#fffPlease try again later.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">البريد الإلكتروني غير صحيح.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px;color:#fff">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': '3016169891337403942', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

التغييرات