إضافة نموذج أتصل بنا الرسمي في صفحة ثابته على بلوجر بشكل جميل



السلام عليكم ورحمة الله وبركاته

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

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


كيفية إضافة نموذج أتصل بنا في صفحة ثابته على بلوجر؟


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

بعد إضافة نموذج الأتصال إذهب إلى القالب ثم أنقر على تحرير html ثم أختر من القائمة ContactForm1

ثم أنقر عليها من أجل توسيع الكود ومعرفة كيفية التعديل عليه


الآن سوف يظهر لك الكود على الشكل التالي:
 <b:widget id='ContactForm1' locked='false' title='نموذج الاتصال' type='ContactForm'>
            <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>
</b:includable>
          </b:widget>

يجب الآن إضافة له الأكواد التالية الموجودة باللون الأحمر ليبدو هكذا:
  <b:widget id='ContactForm1' locked='false' title='نموذج الاتصال' type='ContactForm'>
                  <b:includable id='main'>
                    <b:if cond='data:blog.url == &quot;&quot;'>
                      <b:if cond='data:title != &quot;&quot;'>
                        <h2 class='title'>
                          <data:title/>
                        </h2>
                      </b:if>
                      <div class='contact-form-widget'>
                        <div class='form'>
                          <form name='contact-form'>
                            <p/>
                            <data:contactFormNameMsg/>
                            <br/>
                            <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
                            <p/>
                            <data:contactFormEmailMsg/>
                            <span style='font-weight: bolder;'>
                              *
                            </span>
                            <br/>
                            <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
                            <p/>
                            <data:contactFormMessageMsg/>
                            <span style='font-weight: bolder;'>
                              *
                            </span>
                            <br/>
                            <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
                            <p/>
                            <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
                            <p/>
                            <div style='text-align: center; max-width: 222px; width: 100%'>
                              <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
                              <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
                            </div>
                          </form>
                        </div>
                      </div>
                    </b:if>
                    <b:include name='quickedit'/>
                  </b:includable>
                </b:widget> 
الآن أحفظ القالب


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




هناك 16 تعليقًا

  1. منذ حوالي ساعة و أنا أبحث عن طريقة لتصميم صفحة اتصل بنا ... عانيت كثيرا من شروحات مكررة لاستخدام موقع اسمه فروكسي أو لا ادري ... شيء من هذا القبيل (شرح واحد لطريقة واحدة بائسة ... و لكن بأسلوب مختلف)

    جزاك الله عني خيرا
    حقا مدونة متميزة تستحق الدعم ... نحن هنا لذلك ;)

    ردحذف
  2. احسنت اخي الكريم وجزاك الله خيرا
    youland078123.blogspot.com

    ردحذف
  3. مفيش حاجة بتوصل

    ردحذف
    الردود
    1. في حال تطبيق الشرح جيدا سوف تصل الرسائل إلى البريد الإلكتروني الخاص بمشرف المدونة

      حذف
  4. شكرا جزيلا لك تم اضافتها بنجاح

    ردحذف
  5. رائع أخي دائماً مبدع

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

    ردحذف
    الردود
    1. أهلا بك
      قم بالبحث عن رمز اللون #7986CB ستجده ثلاث مرات قم بإستبدالة برمز اللون المطلوب
      بالنسبة للحجم فهو متجاوب ولا يحتاج للتعديل

      حذف
  7. أحمد السيد02‏/11‏/2018 6:00:00 م

    السلام عليكم اشكرك على موضوعك فقد استفدت منه فعلا ولكنى لاحظت ايقونة خطأ تظهر عند رسالة الخطا وعدم كتابة الايميل وحاولت حذفها او تغييرها لكنى لم اعرف كيف كيف
    https://1drv.ms/u/s!Ah6jFADJrtGpgVStYtEjwddkzBz2

    ردحذف
    الردود
    1. وعليكم السلام
      اخي هذه الرسالة اساسية ومطلوبة بنموذج الاتصال لالزام صاحب الرسالة على تضمين بريد الكتروني

      حذف
    2. أحمد السيد02‏/11‏/2018 7:12:00 م

      اعلم اخى انها أساسية لا اريد حذفها فهذا لن ينفع انا اقصد تغيير الايقونة والتعديل عليها وعلى الوانها مثلا

      حذف
    3. شكرا لأهتمامك اخي الكريم لا شيء مستحيل ولكن ليست متوفرة لدي
      اضف ان شكلها مناسب لون تنبيه أحمر ومضمون

      حذف

تعليقاتكم تشجعنا على تقديم المزيد وهي محل إهتمامنا دائمًا

© جميع الحقوق محفوظة مداد الجليد 2013 - حقوق الطبع والنشر | مدعومة بكل فخّر من blogger | سياسة الخصوصية