عاجـــــل »

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

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

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

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


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

الخطوة الثانية :
توجه الى لوحة تحكم بلوجر ثم اختار الصفحات ثم صفحة جديدة وسميها اتصل بنا او راسلنا ثم انتقل من تأليف الى 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>
ومبروك عليك الأضافة
تعليقات
11 تعليقًا
إرسال تعليق
  • علي كريم | Ali Kareem
    علي كريم | Ali Kareem 8 يناير 2019 في 10:30 ص

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

    إرسال ردحذف
    • saeed alkalabani
      saeed alkalabani 8 يناير 2019 في 11:10 ص

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

      إرسال ردحذف
      • Abdel_Ali CH
        Abdel_Ali CH 20 يوليو 2019 في 12:41 م

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

        إرسال ردحذف
        • saeed alkalabani
          saeed alkalabani 20 يوليو 2019 في 3:56 م

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

          إرسال ردحذف
          • Abdel_Ali CH
            Abdel_Ali CH 20 يوليو 2019 في 5:12 م

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

            إرسال ردحذف
            • SIHAM. D
              SIHAM. D 5 نوفمبر 2019 في 9:27 م

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

              إرسال ردحذف
              • saeed alkalabani
                saeed alkalabani 6 نوفمبر 2019 في 5:42 ص

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

                حذف
              • Ibrahim Khaled
                Ibrahim Khaled 19 يناير 2020 في 2:07 م

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

                إرسال ردحذف
                • saeed alkalabani
                  saeed alkalabani 20 يناير 2020 في 6:35 ص

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

                  حذف
                • مروة محمد
                  مروة محمد 24 مارس 2020 في 10:08 ص

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

                  إرسال ردحذف
                  • Be15design
                    Be15design 26 يونيو 2020 في 7:31 م

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

                    إرسال ردحذف



                    وضع القراءة :
                    حجم الخط
                    +
                    16
                    -
                    تباعد السطور
                    +
                    2
                    -