إضافة نموذج الإتصال منبثقة ~ تحميل جميع البرامج

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

هذه الإضافة تمت مشاركتها من طلبات الأعضاء الكثيرة عليها

الشكل الأول : إضافة خاصية اتصل بنا بشكل منزلق

الشكل الثاني : اضافة خاصية اتصل بنا بشكل منبثق V1

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

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

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

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

1 . توجه لقالب >> تحرير

2. ابحث بإستعمال CTRL+F عن ]]></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;}

3. ابحث عن </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>

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

<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>

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

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

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

About Author

ليست هناك تعليقات

إرسال تعليق