القائمة الرئيسية

الصفحات

 




 

نموذج صفحات اتصل بنا لمدونات بلوجر

 

 

<div dir="rtl" style="text-align: right;" trbidi="on">

<div id="contact-form">

<form name="contact-form">

<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="الاسم" size="30" type="text" value="" />

<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="بريد إلكتروني" size="30" type="text" value="" />

<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="الرسالة" rows="5"></textarea>

<input id="ContactForm1_contact-form-submit" type="button" value="إرسال" />

<br />

<div style="text-align: center;">

<div id="ContactForm1_contact-form-error-message">

</div>

<div id="ContactForm1_contact-form-success-message">

</div>

</div>

</form>

</div>

<style type="text/css">#contact-form{background:#ececec;padding:10px;box-shadow:0 0 0 1px #d9dce1}#ContactForm1_contact-form-name,#ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{margin:5px auto;border:1px solid #e3e3e3;transition:all .5s ease-out;width:100%;border-radius:10px;padding:8px 15px;margin-bottom:10px;font-family:'bein',Roboto,sans-serif}#ContactForm1_contact-form-submit{border:1px solid #e3e3e3;font:unset;text-shadow:1px 1px 5px #111;font-weight:700;font-size:14px;padding:5px 15px;background-color:#06de15;border-radius:5px;color:#fff;font-family:'bein',Roboto,sans-serif;letter-spacing:1px;cursor:pointer}#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7)}.contact-form-error-message-with-border{color:#b90000;font-weight:700}</style>

<script src="https://www.blogger.com/static/v1/widgets/2227587253-widgets.js" type="text/javascript"></script>

<script type="text/javascript">

_WidgetManager._Init('');

_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'contact-sec', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'جارٍ الإرسال...', 'contactFormMessageSentMsg': 'تم إرسال رسالتك.', 'contactFormMessageNotSentMsg': 'تعذر إرسال الرسالة، يرجى المحاولة مرة أخرى في وقت لاحق.', 'contactFormInvalidEmailMsg': 'يلزم إدخال عنوان بريد إلكتروني صالح.', 'contactFormEmptyMessageMsg': 'لا يمكن أن يكون حقل الرسالة فارغًا.', 'title': 'نموذج الاتصال', 'blogId': 'ضع هنا id بلوجر الخاص بك', 'contactFormNameMsg': 'الاسم إجباري', 'contactFormEmailMsg': 'بريد إلكتروني إجباري', 'contactFormMessageMsg': 'رسالة', 'contactFormSendMsg': 'إرسال', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));

</script></div>

=====================================================

بالإنجليزي

 

 

 

Code to add:<!-- Contact Form Code --> <style> .page-contact-form input, .page-contact-form textarea { width: 100%; max-width: 100%; margin-bottom: 10px; } .page-contact-form input.contact-form-button.contact-form-button-submit { padding: 10px; background: #000; /* Button background color */ color: #fff; /* Button text color */ border: none; } .page-contact-form input.contact-form-button.contact-form-button-submit:hover { background: #777; /* Button background hover color */ color: #fff; /* Button text hover color */ } </style> <div class="contact-form-widget page-contact-form"> <div class="form"> <form name="contact-form"> Name:<br /> <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> E-mail: <span id="required">*</span><br /> <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> Message: <span id="required">*</span><br /> <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Submit" /> <br /> <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> </form> </div> </div> <!-- End Contact Form Code -->

 

 

 

 

======================

 

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

dgetInfo('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.1e

m;

}

}

@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://abduallah0.blogspot.com/'>مدونة عبدالله منقوش</a></div>

</div>

 

=============================================

<div dir="rtl" style="text-align: right;" trbidi="on"><form name="contact-form"><span style="color: #666666; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700;"><i class="fa fa-user"></i> الأسم&nbsp;</span><input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  <span style="color: #666666; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700;"><i class="fa fa-envelope"></i> البريد الإلكتروني&nbsp;<span style="color: #f56954; font-size: x-small; font-weight: bold;">مطلوب</span></span><input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  <span style="color: #666666; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700;"><i class="fa fa-pencil-square-o"></i> الرسالة&nbsp;<span style="color: #f56954; font-size: x-small; font-weight: bold;">مطلوب</span></span><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <input id="ContactForm1_contact-form-submit" type="button" value="إرسال" />  <br /><div style="max-width: 222px; text-align: center; width: 100%;"><div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></div></form><style scoped="" type="text/css">#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{width:100%;height:auto;margin:5px auto;padding:10px;background:#fff;color:#444;border:1px solid #ddd;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;}#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fff;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ddd;border-radius:3px;transition:all 0.5s ease-out;}#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}#ContactForm1_contact-form-submit {width:100%;font-family:'Open Sans';float:left;background:#f

ff;color:#aaa;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;background-image: linear-gradient(110deg, #7986cb 0%, #7986cb 50%, transparent 50%, transparent 100%);background-size:200%;background-position:120% 0;background-repeat:no-repeat;border:1px solid #ddd;transition:all .8s ease, background-position .8s ease, color .8s ease;}#ContactForm1_contact-form-submit:hover {color:#fff;background-position:0 0;border-color:#7986cb;}#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;}.contact-form-error-message-with-border {background:#f36c60;border:none;box-shadow:none;color:#fff;padding:5px 0;}.contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}img.contact-form-cross {line-height:40px;margin-left:5px;}</style></div>

 

===================================================

 

<form name="contact-form"><span style="color: #666666; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700;"><i class="fa fa-user"></i> Name </span><input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  <span style="color: #666666; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700;"><i class="fa fa-envelope"></i> Email Address <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span> <input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  <span style="color: #666666; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700;"><i class="fa fa-pencil-square-o"></i> Content <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <input id="ContactForm1_contact-form-submit" type="button" value="Send" />  <div style="max-width: 222px; text-align: center; width: 100%;"><div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></div></form><style scoped="" type="text/css">#comments {display:none;}</style>

 

 

==============================================

<form enctype="multipart/form-data" method="post" action="http://www.freedback.com/mail.php" accept-charset="UTF-8"> <div>  <input type="hidden" name="acctid" id="acctid" value="rvqrkz0ygh2es8hn" />  <input type="hidden" name="formid" id="formid" value="1087231" />  <input type="hidden" name="required_vars" id="required_vars" value="name,email,field-ce2693f4e47c4d1" /> </div> <table cellspacing="5" cellpadding="5" border="0">  <tr>   <td valign="top">    <strong>&#1575;&#1604;&#1571;&#1587;&#1605;:</strong>   </td>   <td valign="top">    <input type="text" name="name" id="name" size="40" value="" />       </td>  </tr>  <tr>   <td valign="top">    <strong>&#1575;&#1604;&#1576;&#1585;&#1610;&#1583; &#1575;&#1604;&#1571;&#1604;&#1603;&#1578;&#1585;&#1608;&#1606;&#1610;:</strong>   </td>   <td valign="top">    <input type="text" name="email" id="email" size="40" value="" />       </td>  </tr>  <tr>   <td valign="top">    <strong>&#1605;&#1581;&#1578;&#1608;&#1609; &#1575;&#1604;&#1585;&#1587;&#1575;&#1604;&#1577;</strong>   </td>   <td valign="top">    <textarea name="field-ce2693f4e47c4d1" id="field-ce2693f4e47c4d1" rows="6" cols="40"></textarea>       </td>  </tr>  <tr>   <td colspan="2" align="center">    <input type="submit" value=" ارسال " />   </td>  </tr> </table></form><br /><center><font face="Arial, Helvetica" size="1"><b><!-- End Freedback Form --></b></font></center>

 

<div id="contact-form">

<form name="contact-form">

<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="الاسم" size="30" type="text" value="" />

<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="بريد إلكتروني" size="30" type="text" value="" />

<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="الرسالة" rows="5"></textarea>

<input id="ContactForm1_contact-form-submit" type="button" value="إرسال" /> 

<div style="text-align: center;">

<div id="ContactForm1_contact-form-error-message">

</div>

<div id="ContactForm1_contact-form-success-message">

</div>

</div>

</form>

</div>

 

<style type="text/css">#contact-form{background:#ececec;padding:10px;box-shadow:0 0 0 1px #d9dce1}#ContactForm1_contact-form-name,#ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{margin:5px auto;border:1px solid #e3e3e3;transition:all .5s ease-out;width:100%;border-radius:10px;padding:8px 15px;margin-bottom:10px;font-family:'bein',Roboto,sans-serif}#ContactForm1_contact-form-submit{border:1px solid #e3e3e3;font:unset;text-shadow:1px 1px 5px #111;font-weight:700;font-size:14px;padding:5px

15px;background-color:#264079;border-radius:5px;color:#fff;font-family:'bein',Roboto,sans-serif;letter-spacing:1px;cursor:pointer}#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7)}.contact-form-error-message-with-border{color:#b90000;font-weight:700}</style>

<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2227587253-widgets.js"></script>

<script type='text/javascript'>

_WidgetManager._Init('');

_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'contact-sec', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'جار&#1613; الإرسال...', 'contactFormMessageSentMsg': 'تم إرسال رسالتك.', 'contactFormMessageNotSentMsg': 'تعذر إرسال الرسالة&#1548; يرجى المحاولة مرة أخرى في وقت لاحق.', 'contactFormInvalidEmailMsg': 'يلزم إدخال عنوان بريد إلكتروني صالح.', 'contactFormEmptyMessageMsg': 'لا يمكن أن يكون حقل الرسالة فارغ&#1611;ا.', 'title': 'نموذج الاتصال', 'blogId': '5666337625103699220', 'contactFormNameMsg': 'الاسم', 'contactFormEmailMsg': 'بريد إلكتروني', 'contactFormMessageMsg': 'رسالة', 'contactFormSendMsg': 'إرسال', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));

</script>

================================

 

تعليقات