مرحبا اصدقائي اقدم لكم اليوم نموذج اتصل بنا مميز بشكلين مختلفيين في غاية الروعه اترككم مع شرح طريقة التركيب .
- شرح طريقة التركيب
1-داخل المدونة ادخل على القالب ثم تحرير HTML
2- داخل القالب ابحث عن ]]></b:skin> ضع الكود التالي فوقه أو ضعه بين <style> </style> فوق </head>
.ContactForm, .ContactForm .title {
display:none;
}
.floating-ai {
position:fixed;
width:250px;
right:15px;
bottom:0;
z-index:999;
}
.floating-ai-head a {
padding:5px 10px;
background:#2997e0;
color:#fff;
font-weight:bold;
display:inline-block;
font-family:droid arabic kufi;
text-transform:uppercase;
*display:block;
zoom:1;
transition:all 0.3s linear;
}
.fa-envelope-o:before {
content: "\f003";
margin-left: 5px;
font-weight: bold;
background: rgba(68, 68, 68, 0.27);
padding: 5px;
}
.floating-ai-head a:hover {
background:#2588ca;
color:#fff;
}
.floating-ai-body {
height:400px;
background:#fff;
padding:10px;
display:none;
box-shadow:0 0 5px 0 rgba(0,0,0,0.2);
}
.floating-ai-head {
text-align:right;margin-right: 15px;}
.floating-ai-body .ContactForm {margin:0;display:block!important;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email {
background:#eee;
margin-bottom:10px;
border:none;
color:#8f8f8f;
padding:2px;
width:75%;
}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {
background:#f5f5f5;
transition:all 0.3s linear;
}
#ContactForm1_contact-form-email-message {
background:#eee;
margin-bottom:10px;
border:none;
color:#8f8f8f;
font-family:droid arabic kufi;
padding:5px;
width:95%;
}
#ContactForm1_contact-form-submit {
width:100px;
color:#fff;
font-family:droid arabic kufi;
text-transform:uppercase;
font-weight:400;
font-size:14px;
cursor:pointer;
background:#57ad68;
border:none;
float:left;
transition:background 0.3s linear;
}
#ContactForm1_contact-form-submit:hover {
background:#468a53;
}
2. إبحث عن </body> وضع الكود التالي فوقه
<script type='text/javascript'>
//<![CDATA[
$('body').append('<div class="floating-ai"><div class="floating-ai-head"><a href="#no-move"><i class="fa fa-envelope-o"></i>إتصل بنا</a></div><div class="floating-ai-body"></div></div>');
$('.ContactForm').appendTo('.floating-ai-body');
var slide_up_ai = false;
$('.floating-ai-head a').click(function(){
if (!slide_up_ai) {
slide_up_ai = true;
$('.floating-ai-body').slideDown();
} else {
slide_up_ai = false;
$('.floating-ai-body').slideUp();
}
});
//]]>
</script>
3 .قم بالحفظ ثم توجه إلى التخطيط وأضف أداة نموذج الإتصال
------------------------------------------------------------------------------------------------
الشكل الثاني
داخل القالب ابحث عن ]]></b:skin> ضع الكود التالي فوقه أو ضعه بين <style> </style> فوق </head>
#contact{position: fixed;bottom: 0;right: 1%;background-color: #434E52;color: #555;width:250px;z-index: 999999;}
#contact h2.title{font-weight: 400;color: #FFF;padding: 8px 15px;font-size: 16px;cursor: pointer;text-align: center;background-color: #2B2B2B;border-bottom: none; font-family: electrolize,'Droid Arabic Naskh', serif; ;}
#contact h2.title .fa{position:absolute;left:10px;top:12px}#contact h2.title:before { content: "\f1d8"; font-family: FontAwesome; float: left; background-color: #434E52; padding: 15px; margin-top: -8px; margin-left: -15px; }
#contact .contact-form-widget{padding: 0px; display: none; padding-right: 10px; width: 240px;}
#contact .contact-form-name,#contact .contact-form-email,#contact .contact-form-email-message{background-color:#DDD;color:#111;border:0;padding:10px 5px;}
.contact-form-widget {margin-right:0;max-width:250px;padding:0;padding-top:0;
width:100%;height:auto;}
.contact-form-email, .contact-form-email-message, .contact-form-name {max-width:100%;
width:100%;}#contact *{transition:all 0 ease;-webkit-transition:all 0 ease;-moz-transition:all 0 ease;-o-transition:all 0 ease}
.contact-form-email, .contact-form-name {background:#dce1e2;border:none;border-top:none;box-sizing:border-box;color:#2e3639;display:inline-block;font-family:'Arial',sans-serif;font-size:13px;height:24px;margin:0;margin-top:5px;padding:10px;vertical-align:top;transition:.3s linear;}
.contact-form-email-message {background:#dce1e2;border:none;border-top:none;box-sizing:border-box;color:#2e3639;display:inline-block;font-family:'Arial',sans-serif;font-size:13px;margin:0;margin-top:5px;padding:10px;vertical-align:top;transition:.3s linear;}
.contact-form-email:hover, .contact-form-email:focus, .contact-form-name:hover, .contact-form-name:focus, .contact-form-email-message:hover, .contact-form-email-message:focus {background:#fff;border:none;border-top:none;outline:none;box-shadow:none;transition:.3s linear;}
form {color:#dce1e2;}
.contact-form-button-submit {width:100%;height:30px;background-color:#55849E;background-image:none;border:none;color:#fff;transition:.3s linear; margin-top: 5px; font-family: electrolize,'Droid Arabic Naskh', serif;}
.contact-form-button-submit:hover,.contact-form-button-submit:focus {background-color:#4DB2EC;background-image:none;;border:none;outline:none;color:#fff;cursor:pointer;transition:.3s linear;}
.contact-form-error-message-with-border {background:#FC4F3F;border:none;
bottom:0;box-shadow:none;color:#fff;font-size:11px;
font-weight:700;line-height:19px;margin-right:0;opacity:1;position:static;
text-align:center;transition:all 0.1s linear;}
.contact-form-success-message {background:#e1dae7;border:none;bottom:0;
box-shadow:none;color:#6a5b7a;font-size:11px;line-height:19px;margin-right:0;
opacity:1;position:static;text-align:center;transition:all 0.1s linear;}
2. إبحث عن </body> وضع الكود التالي فوقه
<script type='text/javascript'>
;$( "#contact h2.title" ).click(function() {$( "#contact .contact-form-widget" ).toggle("fast");});
</script>
3. ضع الكود التالي في مكان فوق الفوتر أو </body>
<b:section class='contact section' id='contact' maxwidgets='1' >
<b:widget id='ContactForm1' locked='false' title='اتصل بنا' type='ContactForm'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p/>
<data:contactFormNameMsg/>
<br/>
<input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value=''/>
<p/>
<data:contactFormEmailMsg/> <span style='font-weight: bolder;color: #F32525;'>*</span>
<br/>
<input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='30' type='text' value=''/>
<p/>
<data:contactFormMessageMsg/> <span style='font-weight: bolder;color: #F32525;'>*</span>
<br/>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5'/>
<p/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/>
<p/>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
مبروك عليك الأضافة , اترك لنا تعليق شكرا اذا عجبك الموضوع , ساعدنا بنشر الموقع عبر المشاركة في مواقع التواصل
تعليقات الإبتساماتإخفاء