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

يناير 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 »

11 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
Abdel_Ali CH
AUTHOR
20 يوليو 2019 في 12:41 م delete

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

تعليق
avatar
20 يوليو 2019 في 3:56 م delete

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

تعليق
avatar
Abdel_Ali CH
AUTHOR
20 يوليو 2019 في 5:12 م delete

شكرا على توضيح اخي الكريم

تعليق
avatar
SIHAM. D
AUTHOR
5 نوفمبر 2019 في 9:27 م delete

ماهو كود تفعيل نموذج الاتصال ؟ ممكن تعطيني اياه لاني ركبت النموذج لكنه لا يعمل

تعليق
avatar
6 نوفمبر 2019 في 5:42 ص delete

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

تعليق
avatar
19 يناير 2020 في 2:07 م delete

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

تعليق
avatar
20 يناير 2020 في 6:35 ص delete

حياك الله اخي .. النماذج كلها شغاله 100% تأكد انك اضفت اداة نموذج الأتصال كما هو موجود في الشرح

تعليق
avatar
Be15design
AUTHOR
26 يونيو 2020 في 7:31 م delete

اشكرك على كل هذا المجهود

تعليق
avatar

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

ملحوظة: يمكن لأعضاء المدونة فقط إرسال تعليق.