چگونه : یک فرم تماس با ما بوسیله jQuery,PHP و Ajax ایجاد کنیم ؟!

31 دیدگاه

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 تست شده است و مشکلی نخواهد داشت .از پایین می توانید کل فایل های فارسی شده را یکجا دانلود کنید.

در همین رابطه :   نکات جالب و کاربردی برای تازه کاران php

منبع

دسته بندی : AjaxjQueryPHP

31 نظر

  1. سلام
    ایمیلی که ارسال میشه در قسمت
    From
    آدرس ایمیل سایت خودم برای من ارسال میشود.
    من تمایل دارم در قسمت
    from
    ایمیل ارسالی ،ایمیلی که فرد ثبت می کند قرار گیرد.نه ایمیل سرورم.

    چیکار کنم ؟؟
    با تشکر

  2. من این کارو که گفتیو کردم یعنی ایمیل خودم رو نوشتم
    حتی آدرس mail رو درست کردم اماانجام نشد
    من یه کار دیگم کردم مقدار های ارسالی متن هارو توی صفحه ی
    mail.php گرفتم و توی بانک ذخیره کردم اما هیچی ذخیره نشد

  3. مطلب خوبی بودوهمین طور جالب
    فقط اگه میشه برام توضیح بده
    چطوری پیامی که مینویسیم بره به ایمیل خودم

  4. سه تا فایل جاوا اسکریپت واسه یه فرم تماس؟!
    یه پنجاه شصتا فایل جاوااسکریپت دیگه هم ضمیمش می کردی…
    Lol

  5. من نمی دونم چطور اینکارو انجام بدم : برای شروع کار پلاگین کافیست آن را به id تگ اولی فراخوانی کنید؟؟؟

    1. سلام
      منظور اینه id تگ div رو بزارین بعد از علامت # تو کد زیر

      $(function(){
      $('#contact').contactable({
      subject: 'A Feeback Message'
      });
      });

      که اینجا اون مقدار contact هست و اگه دقت کنین هم id تگ div این هست و هم در کد دوم contact رو به عنوان انتخابگر به کد جی کوئری معرفی کردیم

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

    متاسفانه پیام شما ارسال نشد .لطفا مدتی بعد تلاش کنید .

      1. سلام.منم دقیقا همین مشکلو دارم.چکش کردم ولی نشد.حتی آدرسه mail.php هم درسته.اگر میشه راهنمایی کنید.

  7. با تشکر از مطلب خوب و اموزشی شما
    لطفا نحوه استفاده ان در ورد پرس را توضیح دهید.
    چطور تنظیم کنیم و کد ها را در کجا قرار دهیم؟؟
    منتظریم !!
    با تشکر م.فعال

  8. مفید بود اما من نتونستم روی وبلاگم پیاده کنم کاش دقیقا توضیح می دادید که در چه فایل هایی باید کدهای نوشته شود .
    وبلاگ من وردپرسی واقعا هرکار کردم نشد مثلا index.html کجا باید فراخوانی بشه ؟!
    یا اینکه داخل

    چی را باید فراخوانی کنیم
    خلاصه یه کم بیشتر توضیح بدهید . ممنون میشم

  9. علی جان متشکریم.
    راستی داشتم این نظر رو می نوشتم وقتی به فیلد آدرس وب رسیدم و اون رو تکمیل کردم دیدم زیر نظرات rss سایتم رو آورد عجب مازولی هست این پسندیدم.

    1. سلام
      جی کوئری یک پلاگین برای این کار داره که کارکردش هم راحته . با جستجوی jquery validation می تونید پیداش کنید

  10. پستهای اخیرت خیلی باحاله علی جان مخصوصا دسته جی کوئری و پی اچ پی.
    حیف که وقت نمیکنم بخونمشون
    یاعلی

  11. عالی بود، فقط بهتر بود div contactable_inner داخل یک تگ لینک بود تا در صورت غیر فعال بودن جاوا به صفحه تماس بره. در غیر این صورت عادی باز بشه.
    سازگاری تو طراحی خیلی مهمه 🙂

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *