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

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

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

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


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

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

تعليقات

11 تعليقًا
إرسال تعليق
  • علي كريم | Ali Kareem photo
    علي كريم | Ali Kareem8 يناير 2019 في 10:30 ص

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

    حذف التعليق
    • saeed alkalabani photo
      saeed alkalabani8 يناير 2019 في 11:10 ص

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

      حذف التعليق
      • Abdel_Ali CH photo
        Abdel_Ali CH20 يوليو 2019 في 12:41 م

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

        حذف التعليق
        • saeed alkalabani photo
          saeed alkalabani20 يوليو 2019 في 3:56 م

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

          حذف التعليق
          • Abdel_Ali CH photo
            Abdel_Ali CH20 يوليو 2019 في 5:12 م

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

            حذف التعليق
            • SIHAM. D photo
              SIHAM. D5 نوفمبر 2019 في 9:27 م

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

              حذف التعليق
              • saeed alkalabani photo
                saeed alkalabani6 نوفمبر 2019 في 5:42 ص

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

                حذف التعليق
              • Ibrahim Khaled photo
                Ibrahim Khaled19 يناير 2020 في 2:07 م

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

                حذف التعليق
                • saeed alkalabani photo
                  saeed alkalabani20 يناير 2020 في 6:35 ص

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

                  حذف التعليق
                • مروة محمد photo
                  مروة محمد24 مارس 2020 في 10:08 ص

                  عاااااااااااش

                  حذف التعليق
                  • Be15design photo
                    Be15design26 يونيو 2020 في 7:31 م

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

                    حذف التعليق

                    المساهمون