11 نوفمبر 2014

مدون محترف اضافات بلوجر دروس بلوجر CSS اضافة نموذج الاتصال في صفحة ثابتة

اضافة نموذج الاتصال في صفحة ثابتة

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

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

طريقة التركيب

اولا عليك اضافة نموذج الاتصال من التخطيط


  1. الان قم بالدخول إلى لوحة تحكم المدونة
  2. اختر قالب 
  3. ثم انقر فوق تحرير HTML

ابحث عن الوسم </head> و اضف الكود التالي فوقه
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>


الان ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه
/* Contact Us mudwnp */
#ContactForm1 {
    display: none;
}

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email {
    width: 300px;
    height: auto;
    margin: 10px auto;
    padding: 10px;
    background: #F4F3F3;
    color: #666;
    border: 1px dashed #ddd;
    transition: all 0.5s ease-in-out;
}

#ContactForm1_contact-form-email-message {
    width: 450px;
    height: 175px;
    margin: 10px auto;
    padding: 10px;
    background: #fdfdfd;
    color: #666;
    font-family: 'Droid Arabic Kufi',sans-serif;
    border: 1px dashed #ddd;
    transition: all 0.5s ease-in-out;
}

#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {
    background: #fff;
    outline: none;
    border: 1px dashed #f8a82a;
}

#ContactForm1_contact-form-submit {
    font-family: 'Droid Arabic Kufi';
    font-size: 15px;
    width: 101px;
    height: 35px;
    float: right;
    color: #fff;
    padding: 0;
    margin: 10px 0 3px 0;
    cursor: pointer;
    background: #aaa;
    border: none;
    border-radius: 2px;
    transition: background 0.4s linear;
}

#ContactForm1_contact-form-submit:hover {
    background: #f8a82a;
}

#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message {
    width: 450px;
    margin-top: 35px;
}

الان قم بحفظ القالب و قم بإنشاء صفحة ثابتة مع وضع الخيارات مثل الصورة


و اخيرا انتقل إلى وضع HTML و قم بوضع الكود التالي


<form name="contact-form">
<span style="font-family: Droid Arabic Kufi, Arial, Helvetica, sans-serif;"><i class="fa fa-user"></i> الإسم</span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> 

<span style="font-family: Droid Arabic Kufi, Arial, Helvetica, sans-serif;"><i class="fa fa-envelope"></i> البريد الإلكتروني <span style="color: red; font-weight: bolder;">*</span></span>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> 

<span style="font-family: Droid Arabic Kufi, Arial, Helvetica, sans-serif;"><i class="fa fa-pencil"></i> الرسالة<span style="color: red; font-weight: bolder;">*</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=" إرسال " /> 
<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>

التنسيق


استبدل Droid Arabic Kufi بالخط الموجود في مدونتك ستجدها مكررة اكثر من مرة استبدلها كلها

يمكنك ايضا مشاهدة : تخصيص نموذج الاتصال الجزء الاول
                           إنشاء نموذج اتصال احترافي لمدونات بلوجر


اي سؤال او استفسار لا تترد بوضعه في تعليق بالتوفيق


مواضيع ذات صلة
اضافة نموذج الاتصال في صفحة ثابتة
4 / 5
بواسطة

هناك 26 تعليقًا :

  1. جميل اخى استمر صاحب مدونة مدون

    ردحذف
    الردود
    1. مرورك الجميل اخي محمد انرت المدونة يا غالي =r

      حذف
  2. الردود
    1. بل الشكر لك اخي محمد شكرا لمرورك =r

      حذف
  3. أخي انا لم تظهر لي في الصفحة بل ظهرت في الجانب ما الحل
    http://motvaeil.blogspot.com/p/contact.html

    ردحذف
    الردود
    1. اخي محمد هل قمت بعمل نفس الخطوات كما في الشرح

      حذف
    2. نعم اخي قمت بعمل كما في الشرح

      حذف
    3. طيب اخي محمد اعمل نفس هذه الخطوات

      ادخل القالب و اضغط على زر الأنتقال إلى أداة بجانب زر حفظ القالب و انتقل إلى معرف ContactForm1 ثم اضغط على أسهم توسعة الآداة واحذف كل ما هو مجود بين هاذين الكودين

      <b:includable id='main'>
      </b:includable>

      بعد مسحمهم احفظ القالب و طبق نفس الشرح و لن يظهر نموذج الاتصال بالصفحة الرئيسية
      بعدها اذهب إلى الصفحة و اضغط على تبوبيب html و قم بعمل الصفحة و نشرها و عمل قسم و لصق رابط الصفحة في القسم

      حذف
  4. اخي لا يتم ارسال الرسالة :/ ما الحل

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

      بالتوفيق

      حذف
  5. شكرا لك لم انتبه لخطوة اضافة الاداة :)

    ردحذف
    الردود
    1. ولا يهمك اخي
      شكرا لمرورك

      بالتوفيق =r

      حذف
  6. اخي كيف يمكنني عمل هكذا ترقيم ومشكور مقدما

    ردحذف
    الردود
    1. اهلا اخي إن شاء الله اقوم بعمل موضوع عن كيفية اضافة الترقيم

      حذف
  7. =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r

    ردحذف
  8. شغال بالفعل :D

    ردحذف
    الردود
    1. شكرا لك اخي الكريم لردك

      جميع الدروس و الاضافات في المدونة تعمل و نحن قبل إنزال اي شيء نقوم بوضع بتجربته =f

      حذف
  9. اشكرك على النموزج هو منكول من arlinadesign لاكن انتا كومت بى تعريبو اشكرك
    لاكن من الممكن ان تنكل السندوك من الشمال الا اليمين او الوسط =q

    ردحذف
  10. لا شكر على واجب و المواضيع التي تكون من تعريبك لا تعتبر منقولة
    بالنسبة لتغيير المكان
    غير كلمة right في اكواد ال CSS غيرها إلى left او center

    ردحذف
    الردود
    1. اسف اخى لا يتم النقل

      حذف
    2. لم افهم اخي حسين عن ماذا تقصد

      حذف
    3. يعنى لا يتم التغيير من right اللى left او center
      ولاكن انا استخدمت برنامج تعريب الاداه وقام بى عملها =f

      حذف
    4. اعذرني اخي حسين لم انتبه لتعليقك السابق لذلك لم اعرف عن ماذا تتكلم
      و لكن كان يجب جميع المعرفات لأنها مكررة
      و بما انك استخدمت اداة تعريب و لم يكن هناك اي مشاكل في القالب فهذا جيد
      بالتوفيق لك اخي حسين
      انرت المدونة بتعليقك

      حذف
  11. شكراً على الاضافة الجميلة
    ولكن أين أجد الرسائل المرسلة من زوار مدونتي

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

      حذف

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r