إضافة نموذج الإتصال منبثقة



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

قبل كل شيئ أضف الكود التالي خاص بالأيقونات
 ضعه فوق <head/> إذا كنت تتوفر عليه فلا داعي لإضافته

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet'/>

طريقة التركيب:
    1. توجه إلى قالب >> تحرير
    2. ثم انقر على تحرير HTML
    3. ابحث عن الوسم  ]]></b:skin> و اضف الكود التالي فوقه:
    .contact-button {} .contact-button a {padding: 9.7px;color: #FFFFFF!important;display: inline-block;font-size: 190%;font-family: droid arabic kufi;background: #0FD2AD;text-shadow: 0 -1px 0 rgba(115, 114, 114, 0.3);float: left;} .contact-close:hover {color: #0894D8;background: #818484;} .contact-sec {border: 1px solid #eee;position: fixed;top: 50%;margin-top: -190px;left: 50%;max-width: 300px;width: 90%;margin-left: -150px;background-color: #FFF;height: auto;z-index: 99999;display: none;-webkit-transform: scale(0);-moz-transform: scale(0);transform: scale(0);transition: all .5s ease;webkit-transition: all .2s ease;-moz-transition: all .2s ease;-o-transition: all .2s ease;} .contact-close {position: absolute;top: -13px;background-color: #0FD2AD;color: #FFF!important;height: 25px;width: 25px;text-align: center;border-radius: 25px;line-height: 25px;font-size: 13px;left: 90%;} .contact-sec .widget {padding: 20px;} .contact-sec .contact-form-cross {display: none;} #ContactForm1 h2 {font-size: 16px;text-align: center;color: #848889;border-bottom: 1px dashed #eee;padding-bottom: 8px;font-family: droid arabic kufi;} .contact-sec.contact-show {-webkit-transform: scale(1);-moz-transform: scale(1);transform: scale(1);} contact-form-name, .contact-form-email, .contact-form-email-message, .contact-form-widget {max-width: none;padding: 5px; text-align: right;} .contact-form-name, .contact-form-email, .contact-form-email-message {background-color: #f3f3f3;width: 250px;border: 0;} .contact-form-button-submit {max-width: none;width: 100%;height: 35px;border: 0;background-image: none;background-color: #0894D8;cursor: pointer;color: #fff;} .contact-form-name:focus, .contact-form-email:focus, .contact-form-email-message:focus {border: 0;box-shadow: none;} .contact-form-name:hover, .contact-form-email:hover, .contact-form-email-message:hover {border: 0;} .contact-form-button-submit:hover {background-color: #222;background-image: none;border: 0;} input#ContactForm1_contact-form-name, input#ContactForm1_contact-form-email{padding: 8px;background: #F7F7F7;border: 1px solid #ECECEC;margin-bottom: 10px; width:100%;} textarea#ContactForm1_contact-form-email-message {padding: 8px;background: #F7F7F7;border: 1px solid #ECECEC;margin-top: 10px;width: 100%;} .contact-button {text-align: right;margin-right: 10px;font-family: droid arabic kufi;} #ContactForm1_contact-form-submit {font-family: droid arabic kufi;background: #fff;color: #aaa;vertical-align: middle;cursor: pointer;padding: 1px 15px!important;font-weight: 700;font-size: 13px;text-align: right;border-radius: 3px;background-image: linear-gradient(110deg, #0FD2AD 0%, #0FD2AD 50%, transparent 50%, transparent 100%); background-size: 200%;background-position: 120% 0;background-repeat: no-repeat;transition: all .8s ease, background-position .8s ease, color .8s ease;border: 1px solid #eee;float: right;margin-top: 10px;} #ContactForm1_contact-form-submit:hover {color:#fff;background-position:0 0;border-color:#DD4537; border: 1px solid #eee;} #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width: 100%;margin-top: 55px;font-family: cursive;font-size: 14px;color: #FFF; background: #0FD2AD;} .contact-form-error-message-with-border {background: #ED5345;border: none;box-shadow: none;color: #fff;padding: 5px 10px;font-family: cursive;} .contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;} img.contact-form-cross {line-height:40px;margin-left:5px;} form i.fa.fa-pencil, 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%;float: right; margin-left: 10px;} form i.fa.fa-user {color:#7986cb;} form i.fa.fa-envelope {color:#ffa726;} form i.fa.fa-pencil{color:#FC4F3F;}

     ابحث عن </body> وضع فوقه الكود التالي:

    <script type='text/javascript'> $(&quot;.contact-button a&quot;).click(function() { var e = $(&quot;.contact-sec&quot;); if (e.is(&quot;:hidden&quot;)) { e.fadeIn(300); e.addClass(&quot;contact-show&quot;); $(&quot;#outer-wrapper&quot;).addClass(&quot;pop_contact &quot;) } return false }); $(document).bind(&quot;click&quot;, function(e) { if ($(e.target).parents(&quot;.contact-sec&quot;).length === 0) { $(&quot;.contact-sec&quot;).fadeOut(300); $(&quot;#outer-wrapper&quot;).removeClass(&quot;pop_contact &quot;); $(&quot;.contact-sec&quot;).removeClass(&quot;contact-show&quot;) } }); $(&quot;.contact-close&quot;).click(function() { $(&quot;.contact-sec&quot;).fadeOut(300); $(&quot;#outer-wrapper&quot;).removeClass(&quot;pop_contact &quot;); $(&quot;.contact-sec&quot;).removeClass(&quot;contact-show&quot;); return false }); </script>

    إبحث عن footer-wrapper 
    أو عن footerwrapper وضع الكود التالي فوقه:

    <b:section class='contact-sec' id='contact-sec' maxwidgets='1' showaddelement='yes'> <b:widget id='ContactForm1' locked='true' 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'> <span style='font-family: cursive,droid arabic kufi;text-align: right;'><i class='fa fa-user'/> الإسم الكريم </span> <input id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/> <span style='font-family: cursive,droid arabic kufi;text-align: right;'><i class='fa fa-envelope'/> البريد الإلكتروني <span style='color:#fff;font-weight:normal;font-size:x-small;padding:0 3px 1px 3px; font-family: ge_ss_threeregular; border-radius:3px;background:#595656;line-height:normal;margin-left:5px;;'> مهم </span></span> <input id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/> <span style='font-family: cursive,droid arabic kufi;text-align: right;'><i class='fa fa-pencil'/> الرسالة <span style='color:#fff;font-weight:normal; font-family: ge_ss_threeregular; font-size:x-small;padding:0 3px 1px 3px ;border-radius:3px;background:#595656;line-height:normal;margin-left:5px;;'> مهم </span></span> <textarea cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'/> <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> </div> </div> <a class='contact-close' href='#'><i class='fa fa-times'/></a> </b:includable> </b:widget> </b:section>

    الكود الآتي هو لتفعيل ظهر أيقونة الإتصال 
    يمكنك إضافتها بأي مكان تراه مناسب

    <div class='contact-button'><a href='#'><i class='fa fa-envelope'/></a></div>

    1. لم اجد footerwrapper أو footer-wrapper

      ردحذف
      الردود
      1. التي بهم الهاشتاج أو النقطة ليسوا معنيين
        ستجد الكود هكذا div id='footer-wrapper'
        اخي ادا لم تجده قم بوضع في المكان الدي تريده

        حذف
    2. اخى لم اجد الكود الاخير فى مدونتى هل يمكنك انت تقول لى فى اى مكان اضعه وها هو رابط مدونتى http://cafear1.blogspot.com/

      ردحذف
      الردود
      1. قم بوضع في المكان الدي تريده
        مثل: footer او mcd-menu

        حذف

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