06‏/06‏/2015

هذه الإضافة تمت مشاركتها من طلبات الأعضاء الكثيرة عليها وقد سبق وقدمت مثلها منذ شهور ولكن بشكل مختلف كما أنها لم تشتغل مع أغلبية الأشخاص نظرا لأنها تتطلب مكانا محدد في التخطيط لكي تعمل وينبثق الصندوق بشكل كامل وهذا لا ينطبق على هذه الإضافة حيث يمكنك وضعها بأي مكان بالتخطيط وأعني بذلك "أداة نموذج الإتصال" تم العديل عليها لتصبح أكثر سلاسة وأكثر أناقة يمكنكم معاينتها عبر قالب وجهات النسخة الثالثة
إقرأ أيضًا
إضافة خاصية اتصل بنا بشكل منزلقة
اضافة خاصية اتصل بنا بشكل منبثق V1
المرجو إتباع نفس الخطوات في الشرح وكذلك خذوا نسخة إحتياطية من القالب أو جربوها على مدونة تجريبة هذا التنويه للأشخاص المبتدئين وأي مشكل فباب التعليقات مفتوح للجميع
شرح طريقة التركيب
1. الكود التالي خاص بالأيقونات ضعه فوق </head> إذا كنت تتوفر عليه فلا داعي لإضافته
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet'/>
2. ابحث عن ]]></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 وضع الكود التالي فوقه
* ملاحظة : المقصود سيكون به Div أي هكذا <div ...
 <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>
هذه الإضافة تمت مشاركتها من طلبات الأعضاء الكثيرة عليها وقد سبق وقدمت مثلها منذ شهور ولكن بشكل مختلف كما أنها لم تشتغل مع أغلبية الأشخاص نظرا لأنها تتطلب مكانا محدد في التخطيط لكي تعمل وينبثق الصندوق بشكل كامل وهذا لا ينطبق على هذه الإضافة حيث يمكنك وضعها بأي مكان بالتخطيط وأعني بذلك "أداة نموذج الإتصال" تم العديل عليها لتصبح أكثر سلاسة وأكثر أناقة يمكنكم معاينتها عبر قالب وجهات النسخة الثالثة
إقرأ أيضًا
إضافة خاصية اتصل بنا بشكل منزلقة
اضافة خاصية اتصل بنا بشكل منبثق V1
المرجو إتباع نفس الخطوات في الشرح وكذلك خذوا نسخة إحتياطية من القالب أو جربوها على مدونة تجريبة هذا التنويه للأشخاص المبتدئين وأي مشكل فباب التعليقات مفتوح للجميع
شرح طريقة التركيب
1. الكود التالي خاص بالأيقونات ضعه فوق </head> إذا كنت تتوفر عليه فلا داعي لإضافته
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet'/>
2. ابحث عن ]]></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 وضع الكود التالي فوقه
* ملاحظة : المقصود سيكون به Div أي هكذا <div ...
 <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>
10 Blogger تعليقات
Disqus
10 التعليقات
المشرف
avatar

فى مشكلة فى الاضافة .لما بغط على البطن بيظهر خط ابيض .
ممكن حل للمشكلة؟

المشرف
avatar

ممكن توضح بصورة؟

المشرف
avatar

لم اجد كلمة footerwrapper أو footer-wrapper

المشرف
avatar

أي قالب تستعمل؟

المشرف
avatar

iHus sam kaifa o3adil Tempalte Intime please urg

المشرف
avatar

da3 at3li9 fi makanihe lmonasseb
almohim stajido millaf bi2sm inex ifta7ho wsatajido char7

المشرف
avatar
المشرف
avatar

الإضافة تعمل لكن عند النقر يظهر خط أبيض كما ذكر Maged Elmasry ... وكأنه يظهر جزء بسيط من النموذج بمقدار2px خط رفيع جدا بنفس عرض النموذج ... علماً أني أستخدم قالب Intime

المشرف
avatar

لأن قالب أنتيم متوفر به نموذج اتصال اخر ربما تتداخل الأكواد مع هذه، هل حذفتها؟ هي نفسها في التدوينة التالية:
http://www.ar1web.com/2014/06/blog-post_22.html

المشرف
avatar

الله يخليك ممكن تركبه لي على قالبي والله تعبت أضفت كل شيء ولكن المشكلة بعد الضغط على الزرار لا يتم اي شيء ....

ايميلي tecnaly@gmail.com

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة