U3F1ZWV6ZTQ3Nzc0Mjg0MjA4X0FjdGl2YXRpb241NDEyMTY3MjQ3NDA=
recent
مواضيع ساخنة

اضافة كود اتصل بنا لمدونات بلوجر بثلاث نماذج مع الشرح

في هذا الموضوع سأقدم لكم ثلاثة نماذج حديثة لأضافة كود صفحة اتصل بنا لمدونات بلوجر مع شرح الطريقة الصحيحة لتركيب الأضافة .

الخطوة الأولى :
في البداية وحتى تعمل معك صفحة اتصل بنا بشكل صحيح يجب ان تضيف هذه الأضافة وتفعلها من لوحة تحكم بلوجر  كما يلي :
توجه الى لوحة تحكم بلوجر ثم اضافة اداة ثم تختار نموذج الأتصال ثم حفظ ، حتى وإن لم تظهر الأضافة كما في بعض القوالب ، المهم يجب أن تكون موجودة ومضافة في مدونتك .

اقرأ ايضا : كود الفهرس لمدونات بلوجر بصيغة جديدة

الخطوة الثانية :
توجه الى لوحة تحكم بلوجر ثم اختار الصفحات ثم صفحة جديدة وسميها اتصل بنا او راسلنا ثم انتقل من تأليف الى html وأضف احد الأكواد التالية حسب النموذج الذي يعجبك :

كود النموذج الأول لصفحة اتصل بنا :








 <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:#fff;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>
ومبروك عليك الأضافة
تعديل المشاركة
author-img

saeed alkalabani

مواضيع قد تهمك × +
تعليقات
    5 تعليقات
    إرسال تعليق
    1. السلام عليكم اخي الكريم هل يمكنك اعطائي هذا القالب الخاص بك

      ردحذف
    2. وعليكم السلام : يمكنك تحميل قالب مدونة الكلباني هنا
      https://www.kalabani.com/2018/04/2018-minima-colored-template.html

      ردحذف
    3. السلام عليكم كيف قمت بوضع دالك الجدول الدي كتبت فيه اكواد html و شكرا

      ردحذف
    4. اخي الكريم Abdel_Ali CH
      هذه خاصية css تكون موجدودة في القالب ويختلف شكل هذه الخاصية من قالب لآخر

      ردحذف
    5. شكرا على توضيح اخي الكريم

      ردحذف

    إرسال تعليق

    آرائكم تسعدنا, لمتابعة التعليق وحتى نرد عليك فقط ضع إشارة على إعلامي
    شكرا لك

    الاسمبريد إلكترونيرسالة