<link href='//fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet'/>
<script>
var blogId = '4371357773824486577';
//The below message 5 Strings can also be edited
var contactFormMessageSendingMsg ='جاري الارسال...';
var contactFormMessageSentMsg = 'تم ارسال رسالتك بنجاح.';
var contactFormMessageNotSentMsg = 'تعذر إرسال الرسالة. الرجاء معاودة المحاولة في وقت لاحق.';
var contactFormEmptyMessageMsg ='صندوق الرسالة لا يمكن أن يكون فارغا.';
var contactFormInvalidEmailMsg = 'ادخل بريد إلكتروني صحيح.'
var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
widgetLoaded=true;
document.getElementById('ContactForm1_contact-form-submit').click();
}
return true;
}
</script>
<style type="text/css">
.login-body{
direction: rtl;
background: #f93c64;
display: -webkit-box;
margin: 10px;
border-radius: 5px;
font-family: Droid Arabic Kufi;
}
.login-01{
width:85%;
margin:5% auto 3%;
}
form {
padding: 0% 1%;
}
form li.first,li.second{
border:none;
list-style:none;
margin-bottom:10px;
width:100%;
}
.icon,.icon2 {
height:55px;
width:55px;
vertical-align: top;
display: -webkit-inline-box;
border-top-right-radius: 0.3em;
-o-border-top-right-radius: 0.3em;
-moz-border-top-right-radius: 0.3em;
-webkit-border-top-right-radius: 0.3em;
border-border-bottom-right-radius: 0.3em;
-o-border-bottom-right-radius: 0.3em;
-moz-border-bottom-right-radius: 0.3em;
-webkit-border-bottom-right-radius: 0.3em;
}
.user1 {
background: url(https://p.w3layouts.com/demos/pink_contact_form/web/images/icons.png) no-repeat 14px 15px #f79d29;
}
.email{
background:url(https://p.w3layouts.com/demos/pink_contact_form/web/images/icons.png) no-repeat 15px -39px #f79d29;
}
.msg{
background: url(https://p.w3layouts.com/demos/pink_contact_form/web/images/msg.png) no-repeat 16px 16px #f79d29;
}
li.first:hover .user1{
background: url(https://p.w3layouts.com/demos/pink_contact_form/web/images/icons.png) no-repeat 14px 15px #DB2048;
}
li.first:hover .email{
background:url(https://p.w3layouts.com/demos/pink_contact_form/web/images/icons.png) no-repeat 15px -39px #DB2048;
}
li.second:hover .msg {
background: url(https://p.w3layouts.com/demos/pink_contact_form/web/images/msg.png) no-repeat 16px 16px #DB2048;
}
/*-----*/
input[type="text"],form textarea {
width: 77%;
padding: 1.13em 1em 1.13em 1em;
color: #858282;
font-size: 17px;
outline: none;
height: 16.2px;
background: #fff;
font-weight: 500;
border: none;
font-family: inherit;
border-top-left-radius: 0.3em;
-o-border-top-left-radius: 0.3em;
-moz-border-top-left-radius: 0.3em;
-webkit-border-top-left-radius: 0.3em;
border-border-bottom-left-radius: 0.3em;
-o-border-bottom-left-radius: 0.3em;
-moz-border-bottom-left-radius: 0.3em;
-webkit-border-bottom-left-radius: 0.3em;
}
.button{
}
form textarea {
resize: none;
height: 140px;
}
.login-01 input[type="button"]{
font-size: 17px;
font-weight: 300;
color: #fff;
font-family: inherit;
cursor: pointer;
outline: none;
padding: 5px 10px;
width: 25%;
border: 2px solid #F79D29;
float: left;
background: #F79D29;
border-radius: 0.3em;
-o-border-radius: 0.3em;
-webkit-border-radius: 0.3em;
-moz-border-radius: 0.3em;
margin-right:2.85em;
}
input[type="button"]:hover{
-webkit-transform: rotate(4deg);
transform: rotate(4deg);
-o-transform: rotate(4deg);
-moz-transform: rotate(4deg);
}
li.lost {
margin-bottom: 21px;
}
/*---------------*/
.copy-right {
text-align: center;
margin: 2em 0;
}
.copy-right p {
color: #fff;
font-size: 1em;
font-weight:400;
}
.copy-right p a {
color:#fff;
}
.copy-right p a:hover {
text-decoration: underline;
}
.login-body .contact-form-email-message{
height: 106px;
}
.login-body .contact-form-error-message-with-border{
background: #c73352;
}
.login-body .contact-form-success-message{
background: #c73352;
}
.login-body .contact-form-error-message-with-border,.all-emil contact-form-success-message{
color: #fff;
padding: 3px 0px;
border-radius: 4px;
margin: 10px 0 0 0;
clear: both;
}
.login-body .contact-form-error-message-with-border img,.all-emil contact-form-success-message img{
cursor: pointer;
float: right;
padding: 0px 3px 0px 0;
}
/*-----start-responsive-design------*/
@media (max-width:1440px){
.login-01 input[type="button"]{
margin-right:1.85em;
}
}
@media (max-width:1366px){
.login-01 input[type="button"]{
margin-right: 1.6em;
}
}
@media (max-width:1280px){
.login-01 {
width: 40%;
margin:5% auto 5%;
}
body h1 {
font-size: 2.7em;
}
}
@media (max-width:1024px){
.login-01 {
width: 45%;
}
body h1 {
font-size: 2.5em;
}
}
@media (max-width:768px){
.login-01 {
width: 63%;
}
body h1 {
font-size: 2.3em;
}
}
@media (max-width:640px){
.login-01 {
width: 73%;
}
body h1 {
font-size: 2.1em;
}
}
@media (max-width:480px){
.login-01 {
width: 85%;
}
.copy-right p {
font-size: 0.9em;
}
input[type="text"], form textarea{
height: 14.2px;
}
form textarea {
height: 140px;
}
input[type="text"], form textarea {
width: 77%;
padding: 1em 1em 1em 1em;
}
.icon, .icon2 {
height: 48px;
width: 48px;
}
.user1 {
background: url(https://p.w3layouts.com/demos/pink_contact_form/web/images/icons.png) no-repeat 11px 12px #f79d29;
background-size: 45%;
}
.email{
background:url(https://p.w3layouts.com/demos/pink_contact_form/web/images/icons.png) no-repeat 12px -36px #f79d29;
background-size: 45%;
}
.msg{
background: url(https://p.w3layouts.com/demos/pink_contact_form/web/images/msg.png) no-repeat 14px 11px #f79d29;
background-size: 45%;
}
li.first:hover .user1{
background: url(https://p.w3layouts.com/demos/pink_contact_form/web/images/icons.png) no-repeat 11px 9px #DB2048;
background-size: 45%;
}
li.first:hover .email{
background:url(https://p.w3layouts.com/demos/pink_contact_form/web/images/icons.png) no-repeat 12px -36px #DB2048;
background-size: 45%;
}
li.second:hover .msg {
background: url(https://p.w3layouts.com/demos/pink_contact_form/web/images/msg.png) no-repeat 14px 11px #DB2048;
background-size: 45%;
}
form li.first, li.second {
margin-bottom: 5px;
}
}
@media (max-width:600px){
.login-01 {
width: 100%;
}
}
input[type="text"], form textarea {
width: 65%;
}
}
</style>
<div class="login-body">
<div class="login-01">
<form name="contact-form">
<ul>
<li class="first">
<a class=" icon user1"></a><input id="ContactForm1_contact-form-name" type="text" name="name" class="text" value="" placeholder="الأسم">
<div class="clear"></div>
</li>
<li class="first">
<a class=" icon email"></a><input id="ContactForm1_contact-form-email" type="text" name="email" class="text" value="" placeholder="البريد الالكتروني">
<div class="clear"></div>
</li>
<li class="second">
<a class=" icon msg"></a><textarea id="ContactForm1_contact-form-email-message" value="Message" placeholder="محتوى الرسالة" name="email-message" ></textarea>
<div class="clear"></div>
</li>
</ul>
<input id="ContactForm1_contact-form-submit" type="button" onclick="sendEmailMsg()" value="إرسال">
<div class="clear"></div>
<div style="max-width: 450px; text-align: center; width: 100%;margin: 3px auto;">
<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 style="visibility: collapse; opacity: 0;" ><a href='https://ezzeldin-ahmed.blogspot.com/'>Ezzeldin Ahmed</a></div>
</div>