كل ما يخص البث المباشر جلب ملفات البث و تشغيلة علي الموقع

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

المعاينة

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

• تتوجة الي المظهر ثم تعديل HTML ثم قم بالبحث عن /b:skin وقم بوضع الكود فوقة.

/* CSS Contact Form */
#chslidingbox{background:#fff;width:100%;max-width:355px;width:100%;position:fixed;overflow:hidden;border:none;right:0;z-index:99;text-align:left;transition:all .4s ease-out}
.chslidingbox-title{background:#5996C1;color:#fff;display:block;height:45px;line-height:45px;width:100%;font-size:14px;text-transform:capitalize;font-weight:700;letter-spacing:.5px}
.chslidingbox-title span a{font-family:initial;float:right;height:40px;margin:0 0 0 15px;text-align:center;color:#fff;font-size:20px}
a#chslidingbox-close,a#chslidingbox-close{margin-right:15px}
.chslidingbox-title >span >h2{font-size:20px!important;font-weight:normal!important}
.chslidingbox-container{border:1px solid #ddd;float:left;width:100%;height:auto;padding:10px}
.chslidingbox-container >div{border:none;margin:3px 0;padding:10px 0}
.chslidingbox-container >div >span{font-size:14px}
#ContactForm1{display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width:300px;height:auto;margin:5px auto;padding:5px;background:#fff;color:#666;border:1px solid #ddd;transition:all 0.5s ease-in-out;box-shadow:none;}
#ContactForm1_contact-form-email-message{width:300px;height:120px;margin:5px 0;padding:5px;background:#fff;color:#666;font-family:'Droid Sans',sans-serif;border:1px solid #ddd;transition:all 0.5s ease-in-out;box-shadow:none;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none; border-color:#444;color:#444;background:#fff;}
#ContactForm1_contact-form-submit {background:#5996C1;color:#fff;border:1px solid #5996C1;width:100px;height:40px;line-height:30px;cursor:pointer;font-weight:700;font-size:13px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;transition:all 0.4s ease-out;}
#ContactForm1_contact-form-submit:hover{background:#fff;color:#5996C1}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width:300px;margin-top:35px;}
.show{bottom:-375px}
.hide{bottom:0}

• ثم قم بالبحث عن /body وقم بوضع الكود فوقة.

<div class='show' id='chslidingbox'>
<div class='chslidingbox-title chslidingbox-www'>
<span style='float:left;margin:0 15px;'>Contact Us</span>
<span><a href='javascript:void(0);' id='chslidingbox-close' title='close'>&#215;</a></span>
<span><a href='javascript:void(0);' id='chslidingbox-maximize' title='maximize'>+</a></span>
<span><a href='javascript:void(0);' id='chslidingbox-minimize' title='minimize'>&#8722;</a></span>
</div><div class='chslidingbox-container'>
<form name='contact-form'>
Nama<br/>
<input id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<br/>Email Address*
<br/><input id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<br/>Pesan*<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='Send'/>
<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>
<script type='text/javascript'>
//<![CDATA[
// Contact Us
$(document).ready(function(){var i=$("#chslidingbox"),s=$("#chslidingbox-close"),o=$("#chslidingbox-maximize"),l=$("#chslidingbox-minimize");l.hide(),s.click(function(){i.css({right:"-350px"}),i.fadeOut("slow")}),o.click(function(){i.toggleClass("hide"),$(this).hide(),l.show()}),l.click(function(){i.toggleClass("hide"),$(this).hide(),o.show()})});
//]]>
</script>