Ajax, jQuery, PHP

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

تبلیغات
4 سوالی شهرداری
کانال تلگرام فتولیا

Contactable یک پلاگین jQuery است که به شما کمک می کند به سادگی و سرعت ، فرم تماس مورد نظرتان را ایجاد کنید . مشخصه اصلی پلاگین این است که به آسانی می توان آن را به صفحات اضافه کرد با کمترین تغییر در کدها . این فرم در سمت چپ صفحه قرار خواهد گرفت و دارای قابلیت validation یا اعتبار سنجی ورودی کاربر نیز هست و سپس تماس را به ایمیل شما ارسال می کند.

 

نحوه استفاده

نحوه استفاده از این افزونه ساده است ، برای شروع باید یک Div با id زیر ایجاد کنید

همچنین باید خود کتابخانه jQuery و پلاگین Validator را به صفحه الحاق کنید

برای شروع کار پلاگین کافیست آن را به id تگ اولی فراخوانی کنید .همچنین اگر فایل سورس را دانلود کنید یک فایل بنام mail.php خواهید دید که برای کارکردن صحیح فرم لازم است . کد زیر را داخل تگ scriptو در بخش head صفحه قرار دهید

نکته مهم : بعد از دانلود پروژه از پایین ، فایل mail.php را باز کرده در خط ۱۸ آن عبارت /*RECIPIENTS EMAIL ADDRESS HERE*/ ، را پاک کرده و ایمیل خود را به جای آن وارد کنید و فایل را ذخیره کنید.دقت کنید که تماس ها به این ایمیل ارسال خواهند شد.

 

تنظیمات Contactable

این پلاگین یک سری تنظیمات در داخل فایل jquery.contactable.js دارد که مثلا مسیر فایل mail.php ، عناوین فیلدها و … را می توانید در آن تغییر دهید

پیش نمایش

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

منبع

31 Comments

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

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

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

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

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

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

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

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

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

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

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

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

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

پاسخ دهید

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

آخرین مقالات فتولیا در ایمیل شما

در خبرنامه ما عضو شوید و آخرین مطالب و مقالات آموزشی را اول شما دریافت کنید