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

يناير 07, 2019

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

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

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

الخطوة الثانية :
توجه الى لوحة تحكم بلوجر ثم اختار الصفحات ثم صفحة جديدة وسميها اتصل بنا او راسلنا ثم انتقل من تأليف الى 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>

 

ومبروك عليك الأضافة

مواضيع ذات صلة

Previous
Next Post »

2 Comments

Write Comments
8 يناير 2019 10:30 ص delete

السلام عليكم اخي الكريم هل يمكنك اعطائي هذا القالب الخاص بك

تعليق
avatar
8 يناير 2019 11:10 ص delete

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

تعليق
avatar

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