فرم کشویی ارتباط با ما

در این مقاله شما خواهید آموخت که توسط javascript , css یک فرم ارتباط با ما به صورت کشویی بسازید .

منبع : تیم برنامه نویسی راکسمنت
جمعه ، ۳ خرداد ۱۳۹۲ - ۲۳:۲۷:۵۵
پیش نمایش DEMOدریافت فایل DOWNLOAD

این فرم شکویی می تواند کاربردهای فراوانی در وب سایت شما داشته باشد و به غیر از فرم تماس می توانید هر چیزی را جایگزین نمایید .

- مرحله اول

یک فایل Index.html ایجاد نمایید و کدهای زیر را در آن قرار دهید .

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script><script type="text/javascript" src="jquery.contactable.js"></script> <link href="contactable.css" rel="stylesheet" type="text/css" /> <code class="code"><script> $(function(){ $('#contact').contactable({ recipient: 'test@test.com', subject: 'A Feeback Message' }); }); </script></code> <div id="contact"> &nbsp;</div>

 

-مرحله دوم

یک فایل css با نام contactable ایجاد کند و در کنار فایل ایندکس قرار دهید و کد زیر را داخل آن قرار دهید .

 

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:&amp;#39;&amp;#39;; } abbr,acronym { border:0; } body { font-family: georgia; font-size:1.1em; height:100%; width:100%; background-color:#dfdfdf; } #contactable { background-image:url(images/contact.png); color:#FFFFFF; background-color:#333333; cursor:pointer; height:102px; left:0; margin-left:-5px; overflow:hidden; position:fixed; *position:absolute; text-indent:-100000px; top:102px; *margin-top:200px; width:44px; z-index:100000; } #contactForm { background-color:#333333; border:2px solid #FFFFFF; color:#FFFFFF; height:450px; left:0; margin-left:-400px; margin-top:-160px; overflow:hidden; padding-left:30px; position:fixed; top:200px; width:360px; *width:394px; z-index:99; } form#contactForm input, textarea { background:#FFFFFF none repeat scroll 0 0; outline-style:none; outline-width:medium; width:325px; padding:5px; border:1px solid #dfdfdf; font-family: georgia; font-size:1em; margin-bottom:10px; } form#contactForm .submit { background: #F5410F none repeat scroll 0 0; outline-style:none; outline-width:medium; width:325px; padding:5px; border:3px solid #F52D0F; outline-color:-moz-use-text-color; font-family: georgia; font-size:1em; cursor:pointer; color:#FFF; text-transform:uppercase; font-weight:bolder; font-family:Helvetica; margin-top:10px; } form#contactForm p { width:325px; font-size:0.9em; } #contactForm .red { color: #F5410F; } #overlay { background-color:#666666; display:none; height:100%; left:0; margin:0; padding:0; position:absolute; top:0; width:100%; z-index:0; } #contactform .error { background-color: #EDBE9C; } #contactform #loading { background: url(images/ajax-loader.gif) no-repeat; width:55px; height:55px; margin: 100px auto; display:none; } #callback { font-family: georgia; font-size:1.1em; color: #FFF; width:325px; margin: 100px auto; display:none; } .holder { margin:0 auto; padding-top:20px; }

 

-مرحله سوم

دو فایل جاوا در این فرم فراخوانی می شود اولی از وب سایت گوگل و دومی را می توانید از لینک زیر دریافت نمایید و ان را در کنار دیگر فایل ها قرار دهید  .

http://www.roxment.com/Demo/Drop_Contact_Form/jquery.contactable.js

-مرحله چهارم

حال نیاز به 2 تصویر بارگزاری و دکمه دارید تصاویر زیر را ذخیره نمایید سپس فولدری به نام images بسازید و دو تصویر را در ان قرار دهید  .

مرحله پنجم

حال باید یک فایل php ایجاد نمایید تا عملیات ارسال ایمیل را انجام دهد یک فایل با نام  mail با پسوند php ایجاد نمایید و کد زیر را داخل آن قرار دهید .

 

<p> &lt;?php recipient=&amp;quot;$_GET[&amp;#39;recipient&amp;#39;];&amp;quot; name=&amp;quot;$_GET[&amp;#39;name&amp;#39;];&amp;quot; email=&amp;quot;$_GET[&amp;#39;email&amp;#39;];&amp;quot; comment=&amp;quot;$_GET[&amp;#39;comment&amp;#39;];&amp;quot; subject=&amp;quot;$_GET[&amp;#39;subject&amp;#39;];&amp;quot; notes=&amp;quot;stripcslashes($notes);&amp;quot; message=&amp;quot; Message: $comment \r \n From: $name \r \n Reply to: $email&amp;quot;&gt; success&lt;/?php&gt;</p> <p> &nbsp;</p>

 

کار ساخت به پایان رسید می توانید نتیجه آن را مشاهده نمایید .

موفق باشید

 

بازگشت