24 مايو 2015

اضافة نموذج اتصال مدون محترف

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

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


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

قم بالدخول لصفحة التخطيط ثم أضف آداة نموذج الإتصال ستجدها في المزيد من الأدوات

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


بعد إضافة الادة نقوم بعمل الخطوات التالية

  1. نتوجه إلى لوحة تحكم بلوجر
  2. ننقر على قالب
  3. ثم ننقر على تحرير HTML
تحديث : إن لم يعمل النموذج لا تقم بمسح الاكواد في هذه الخطوة

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



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



ايضاابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه
/* CSS Contact */
#ContactForm1,#ContactForm1 br{display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width:96.5%;height:auto;margin:5px auto;padding:10px;background:#fff;color:#444;border:1px solid #e3e3e3;border-radius:3px;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 #e3e3e3;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:right;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 #e3e3e3;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-right:5px;}

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

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

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

اضافة نموذج اتصال مدون محترف الاحترافي في صفحة ثابتة
<form name="contact-form">
<span style="color: #999999; display: inline-block; font-family: Droid Arabic Kufi,Arial; font-weight: 700; margin-bottom: 10px; margin-top: 15px;"><i class="fa fa-user"></i> الإسم </span><br />
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  <br />
<br />
<span style="color: #999999; display: inline-block; font-family: Droid Arabic Kufi,Arial; font-weight: 700; margin-bottom: 10px; margin-top: 15px;"><i class="fa fa-envelope"></i> البريد الإلكتروني <span style="background: #aaa; border-radius: 3px; color: white; font-size: x-small; font-weight: normal; line-height: normal; margin-left: 5px; padding: 0 3px 1px 3px;">إجباري</span></span> <br />
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  <br />
<br />
<span style="color: #999999; display: inline-block; font-family: Droid Arabic Kufi,Arial; font-weight: 700; margin-bottom: 10px; margin-top: 15px;"><i class="fa fa-bars"></i> الرسالة <span style="background: #aaa; border-radius: 3px; color: white; font-size: x-small; font-weight: normal; line-height: normal; margin-left: 5px; padding: 0 3px 1px 3px;">إجباري</span></span><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <br />
<input id="ContactForm1_contact-form-submit" type="button" value="إرسال" />  <br />
<div style="max-width: 100%; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<br />
<style type="text/css">
#comments,#sidebar-wrapper,.banner,.banner2 {display:none;}
#post-wrapper {float:none;width:100%;margin:0 auto;}
.post-inner {padding:15px 0;}
.post-body {margin:0 auto;width:70%;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;}
form i.fa.fa-user,form i.fa.fa-envelope,form i.fa.fa-bars {padding:3px 5px;border-radius:3px;font-weight:normal;font-size:120%;}
form i.fa.fa-user {background:#7986cb;color:#fff;}
form i.fa.fa-envelope {background:#ffa726;color:#fff;}
form i.fa.fa-bars {background:#00897b;color:#fff;}
</style>

و مبروك عليك نموذج اتصال مدون محترف لا تنسا دعمنا عبر نشر الموضوع من خلال ازرار المشاركة
اي سؤال او استفسار لا تترد بوضعه في تعليق

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

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

  1. ما شاء الله، نموذج اتصال احترافي منك و مُطور أيضًا
    باركك الله، و بانتظار دروس و تكويدات أخرى حول كيفية
    وضع جدول مُطور بالـ css، باركك الله ثانيةً حبيبي
    و بالتوفيق @____@

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

      حذف
  2. شكراعلى الإضافة أخونا موفق

    ردحذف
  3. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
    الردود
    1. لا شكر على واجب يا غالي
      السبب إن الكود كان مكود على مدونتي فقط
      و نسيت ان الغي الاكواد
      الان قم بمسح كود الـ HTML الموجود عندك
      و ارجع انسخ الموجود هنا لأنه تم التعديل عليه
      جرب و ردلي خبر لو نجح معك او لا
      و اعتذر لمسح التعليق بسبب الرابط

      حذف
    2. اشكرك على الرد يا طيب
      لكن لازالت المشكلة كما هي
      واسف على وضع الرابط لكني وضعته لتطلع عليه وليس للاشهار :)

      حذف
    3. لا شكر على واجب يا غالي
      ولا داعي للأعتذار فأنا اعرف ان قصدك ليس الإشهار
      ولكن بعد الإطلاع على الاكواد
      المشكلة ليست من اكواد نموذج الاتصال و انما من القالب
      فكل قالب يكون به تقسيمات للإضافات مثل نموضج الاتصال و البحث و هذه الامور جرب
      تطبيق الخطوات ولكن دون ان تمسح اكواد النموذج من داخل القالب بعني بعد اضافة اداة النموذج من التخطيط لا تقم بمسحه من داخل القالب
      او قد تكون المشكلة من حجم عرض الإضافة ابحث في اكواد ال CSS عن %width:100 و قم بإستبدالها بـ 50%

      حذف
    4. اشكرك جزيل الشكر اخي الغالي
      مع بعض التعديلات في اكواد CSS وبعض التعديلات في كود HTML
      اصبحت الصفحة ممتازة والفضل من بعد الله لك ولجهودك اخي الطيب
      شكرا لك مجددا

      حذف
    5. لا شكر على واجب اخي
      المشكلة تقريبا كانت من حجم عرض الاضافة
      و الحمدلله انها حلت المشكلة
      اتمنى لك التوفيق =r

      حذف
  4. السلام عليكم

    تم حل المشكلة اخوي الموجودة في الاضافة من خلال ازالة الاضافة واعادة تثبيتها في التخطيط واشتغلت في الصفحة الثابتة

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

      حذف
  5. لا يصل الأيمايل ما هوا الحل ارجووك

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

      حذف
    2. اخي ما عرفت طريقة اخر كود وين حطو في اي خانة

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

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

    ردحذف
    الردود
    1. و عليكم السلام و رحمة الله و بركاته

      اهلا صديقي اتبع نفس المعلومات فوق
      عند كلمة تحديث يوجد اكواد قم بمسحها إن وصلت الرسائل هكذا هو يعمل
      إن لم تصل لا تمسحها و احفظ القالب مثل ما هو
      راجع التعليقات ممكن تفيدك

      حذف
  7. النموذج روعة
    تم التطبيق

    ردحذف
    الردود
    1. شكراً لك
      مرورك الرائع
      بالتوفيق

      حذف
  8. اخي ياريت تشرح طريقة في الفيديو لان يوجد بعض جمهور لا يعرف هاكذا

    ردحذف
    الردود
    1. صديقي الطريقة لا تحتاج فيديو صدقني
      فقط ابتع الخطوات في الشرح

      حذف
    2. اخي فيني اتواصل معك على فيس بوك

      حذف
    3. اكيد اخي
      ابحث عن مدون محترف على فيس بوك وسوف تجد صفحتنا وتوصل معي هُناك =q

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

    ردحذف
    الردود
    1. نعم صديقي سوف يتم إرسالها على جيميل

      حذف

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