با Contactable یک پلاگین jQuery است که به شما کمک می کند به سادگی و سرعت ، فرم تماس مورد نظرتان را ایجاد کنید . مشخصه اصلی پلاگین این است که به آسانی می توان آن را به صفحات اضافه کرد با کمترین تغییر در کدها . این فرم در سمت چپ صفحه قرار خواهد گرفت و دارای قابلیت validation یا اعتبار سنجی ورودی کاربر نیز هست و سپس تماس را به ایمیل شما ارسال می کند.
نحوه استفاده
نحوه استفاده از این افزونه ساده است ، برای شروع باید یک Div با id زیر ایجاد کنید
<div id="contact"> </div>
همچنین باید خود کتابخانه jQuery و پلاگین Validator را به صفحه الحاق کنید
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript" src="jquery.validate.pack.js"></script> <script type="text/javascript" src="jquery.contactable.min.js"></script>
برای شروع کار پلاگین کافیست آن را به id تگ اولی فراخوانی کنید .همچنین اگر فایل سورس را دانلود کنید یک فایل بنام mail.php خواهید دید که برای کارکردن صحیح فرم لازم است . کد زیر را داخل تگ scriptو در بخش head صفحه قرار دهید
$(function(){
$('#contact').contactable({
subject: 'A Feeback Message'
});
});نکته مهم : بعد از دانلود پروژه از پایین ، فایل mail.php را باز کرده در خط 18 آن عبارت /*RECIPIENTS EMAIL ADDRESS HERE*/ ، را پاک کرده و ایمیل خود را به جای آن وارد کنید و فایل را ذخیره کنید.دقت کنید که تماس ها به این ایمیل ارسال خواهند شد.
mail('/*RECIPIENTS EMAIL ADDRESS HERE*/', $subject, $contactMessage);
تنظیمات Contactable
این پلاگین یک سری تنظیمات در داخل فایل jquery.contactable.js دارد که مثلا مسیر فایل mail.php ، عناوین فیلدها و … را می توانید در آن تغییر دهید
var defaults = {
url: 'https://fotolia.ir/cdn/demo/contactable/mail.php',
name: 'نام',
email: 'ایمیل',
message : 'پیام',
subject : 'متن تماس',
submit : 'ارسال',
recievedMsg : 'از تماس شما ممنونم . در صورت نیاز ،در اولین فرصت پاسخ خواهم داد.متشکرم :)',
notRecievedMsg : 'متاسفانه پیام شما ارسال نشد .لطفا مدتی بعد تلاش کنید .',
disclaimer: 'ایمیل تماس : [email protected]',
hideOnSubmit: false
};پیش نمایش
برای نمایش نتیجه نهایی می توانید به اینجا سری بزنید . نمایش درست این پلاگین حتی در مرورگر IE6 تست شده است و مشکلی نخواهد داشت .از پایین می توانید کل فایل های فارسی شده را یکجا دانلود کنید.
سلام
ایمیلی که ارسال میشه در قسمت
From
آدرس ایمیل سایت خودم برای من ارسال میشود.
من تمایل دارم در قسمت
from
ایمیل ارسالی ،ایمیلی که فرد ثبت می کند قرار گیرد.نه ایمیل سرورم.
چیکار کنم ؟؟
با تشکر
من این کارو که گفتیو کردم یعنی ایمیل خودم رو نوشتم
حتی آدرس mail رو درست کردم اماانجام نشد
من یه کار دیگم کردم مقدار های ارسالی متن هارو توی صفحه ی
mail.php گرفتم و توی بانک ذخیره کردم اما هیچی ذخیره نشد
مطلب خوبی بودوهمین طور جالب
فقط اگه میشه برام توضیح بده
چطوری پیامی که مینویسیم بره به ایمیل خودم
سه تا فایل جاوا اسکریپت واسه یه فرم تماس؟!
یه پنجاه شصتا فایل جاوااسکریپت دیگه هم ضمیمش می کردی…
Lol
ممنون مفید بود !!
من نمی دونم چطور اینکارو انجام بدم : برای شروع کار پلاگین کافیست آن را به id تگ اولی فراخوانی کنید؟؟؟
سلام
منظور اینه id تگ div رو بزارین بعد از علامت # تو کد زیر
$(function(){
$('#contact').contactable({
subject: 'A Feeback Message'
});
});
که اینجا اون مقدار contact هست و اگه دقت کنین هم id تگ div این هست و هم در کد دوم contact رو به عنوان انتخابگر به کد جی کوئری معرفی کردیم
علي جان آموزش هاي php, jquery, ajax حرف نداره
دستت درست
خواهش می کنم دوست عزیز
خوشحالیم 🙂
خیلی عالیه
دستتون درد نکنه واقعا
سلام این برنامه ایمیل ارسالیشو از چه سروری برای ما ارسال میکنه؟
من جایی که گفتید ایمیل خودمو نوشتم اما متن رو ارسال نمیکنهو مینویسه
متاسفانه پیام شما ارسال نشد .لطفا مدتی بعد تلاش کنید .
از سرور خودتون ارسال میشه . یه نگاه به تنظیمات مثلا آدرس فایل mail.php بکنین
سلام.منم دقیقا همین مشکلو دارم.چکش کردم ولی نشد.حتی آدرسه mail.php هم درسته.اگر میشه راهنمایی کنید.
با تشکر از مطلب خوب و اموزشی شما
لطفا نحوه استفاده ان در ورد پرس را توضیح دهید.
چطور تنظیم کنیم و کد ها را در کجا قرار دهیم؟؟
منتظریم !!
با تشکر م.فعال
مفید بود اما من نتونستم روی وبلاگم پیاده کنم کاش دقیقا توضیح می دادید که در چه فایل هایی باید کدهای نوشته شود .
وبلاگ من وردپرسی واقعا هرکار کردم نشد مثلا index.html کجا باید فراخوانی بشه ؟!
یا اینکه داخل
چی را باید فراخوانی کنیم
خلاصه یه کم بیشتر توضیح بدهید . ممنون میشم
این برنامه مستقل هست و با وردپرس ترکیب نمیشه
علی جان متشکریم.
راستی داشتم این نظر رو می نوشتم وقتی به فیلد آدرس وب رسیدم و اون رو تکمیل کردم دیدم زیر نظرات rss سایتم رو آورد عجب مازولی هست این پسندیدم.
به به روزبه خان 🙂
بله پلاگین خوبیه
سلام.
من یه فرم تماس با ما طراحی کردم.
میخوام با jQuery ولیدیشن کنم.
ممنون میشم راهنمایی کنید.
سلام
جی کوئری یک پلاگین برای این کار داره که کارکردش هم راحته . با جستجوی jquery validation می تونید پیداش کنید
من این پلاگین رو دارم.
منتها نحوه کار و پیاده سازیش رو نمیدونم.
بیلبلب
پست اشتباهات وبلاگ نویسان رو با ذکر منبع(که سایت شما باشه)گذاشتم تو وبم.مرسی
پستهای اخیرت خیلی باحاله علی جان مخصوصا دسته جی کوئری و پی اچ پی.
حیف که وقت نمیکنم بخونمشون
یاعلی
سلام.
خیلی خوب بود.
مرسی . . .
عالی بود، فقط بهتر بود div contactable_inner داخل یک تگ لینک بود تا در صورت غیر فعال بودن جاوا به صفحه تماس بره. در غیر این صورت عادی باز بشه.
سازگاری تو طراحی خیلی مهمه 🙂
خيلي عالي بود… ممنون.
جالب بود 🙂
ممنون
ممنون 🙂
آموزش مفیدی بود…
ممنون علی آقا
خواهش می کنم 🙂