آموزش ساخت فرم تماس با ما و ارسال به ایمیل با PHP و Ajax

daskhatmin فواد طهماسبی
66,677 بازدید
آموزش ساخت فرم تماس با ما و ارسال به ایمیل با PHP و Ajax

برای ساخت فرم تماس با ما به زبان PHP و تکنولوژی Ajax بهتر است با ساخت فرم تماس ساده به زبان PHP آشنا باشید. قبلا در دسخطی به صورت مستقل و کامل ساخت فرم تماس با ما آموزش داده شده است که میتوانید از این لینک مطالعه کنید: آموزش ساختن فرم تماس با ما

همانطور که میدانید برای ارسال محتویات فرم به اسکریپت پردازش گر ارسال ایمیل PHP ، بعد از کلیک بر روی دکمه ارسال، صفحه مرورگر برای ارسال اطلاعات و پردازش آن نیاز به بارگذاری مجدد داشت. یا به عبارتی صفحه فرم تماس با ما دوباره بارگذاری میشد تا نتیجه عملیات نمایش داده شود. از آنجایی که کاربران سایت تمایل زیادی برای بارگذاری اجباری و مجدد یک صفحه ندارند (به علتهای مختلف مانند کم بودن سرعت اینترنت یا مصرف پهنای باند و …) استفاده از روشی که باعث بارگذاری مجدد صفحه تماس با ما نشود، هم منطقی و هم کاربر پسندتر است و تجربه مثبتی در ذهن کاربر ایجاد میکند.

 

مراحل ساخت فرم تماس با ما و ارسال به ایمیل با PHP و Ajax

 

برای ساخت فرم تماس با ما با تکنولوژی Ajax ما از فریم ورک JQuery استفاده میکنیم. در این فرم از ۲ فایل به ترتیب زیر استفاده شده است:

  • فایل contactform.html
  • فایل sendemail.php

 

کدهای مربوط به HTML

در زیر کدهای مربوط به فرم را ملاحظه میکنید که در فایل contactform.html قرار خواهد گرفت :

تا اینجای کار تنها تفاوت با فرم تماس با ما ساده، فیلد input مربوط به دکه ارسال هست که به جای نوع submit از نوع button استفاده شده و یک id تخصیص داده شده است. این امر به این دلیل هست که هنگام کلیک بر روی دکمه ارسال صفحه به صورت خودکار شروع به ارسال و بارگذاری مجدد صفحه نکند تا ما بتوانیم از دستورات JQuery بهره ببریم.

 

کدهای مربوط به PHP

در زیر کدهای مربوط به فایل sendemail.php را مشاهده میکنید:

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

 

کدهای مربوط به jQuery

کدهای مربوط به عملیات JQuery به صورت زیر است:

کد بالا کلیک بر روی دکمه ارسال را تشخیص داده و اطلاعات فرم را به صورت تکنولوژی Ajax به فایل PHP مربوط ارسال کرده و نتیجه HTML چاپ شده در فایل PHP را در داخل تگ با id با نام success نمایش میدهد. فراموش نکنید که برای اجرای کدهای JQuery نیاز به بارگذاری آن بخش head صفحه فرم تماس با ما دارید.

به صورت کلی فایل contactform.html به صورت زیر خواهد بود:

اکنون شما یک فرم تماس با ما دارید که از تکنولوژی Ajax برای ارسال اطلاعات فرم به ایمیلتان استفاده میکند.


برگرفته از: teaching you

 

daskhatmin

فواد طهماسبی

من فواد طهماسبی هستم. مهندسی نرم افزار خوندم و علاقه زیادی به برنامه نویسی تحت وب دارم. مطالبی که مینویسم یا ترجمه میکنم، اکثرا نکات یا مطالبی هست که زمانی خودم با اون مواجه شدم و مجبور شدم یاد بگیرم. امیدوارم که به درد شما هم بخوره!

59 دیدگاه برای “آموزش ساخت فرم تماس با ما و ارسال به ایمیل با PHP و Ajax”

  1. موسوی گفت:

    سلام . یه سئوال مهم داشتم خیلی مهمه واسم . اگه ممکن بود یه اشاره ای یا توضیحی بدید.
    این ارسال نظر به این شیوه و جواب شما که در سایت هستش چطور ایجاد میشه ؟!!
    فرض کنید سرور از پی اچ پی و دیتا بیس اس کیو ال ساپورت می کنه . و سایت ما یه سایت استاتیک با اچ تی ام ال هستش . آیا میشه در یه صفحه همچین ارسال نظری ایجاد کرد که به صورت آنلاین نظر رو بزنه و من بخوام پاسخ بدم بتونم !! که البته نیاز به نصب سی ام اس و این حرفا نباشه !!
    اگه میشه یه راهنمایی بفرمایید
    ممنون
    موسوی

  2. jumpeR گفت:

    وااااااااای عالی بود

  3. محمود شکرانه گفت:

    سلام جناب طهماسبی
    من میخواهم برای ایمیهایی که می فرستم در داخل یک فرم دلخوا خودم باز شود ،لطف می کنید راهنمای بفرماید که این فرم را با چه نرم افزاری بسازم و چگونه و چکار کنم که مثلا در جی میل دریافت کننده باز شود؟ با احترام

  4. مریم گفت:

    من هر دو تا فرم را ساختم ولی در اجرا فقط please wait میشه و دیگه send نمیشه. میدونم اشکالم در sendmail هست ولی نمی دونم کجاست؟ کد رو کپی کردم ولی جواب نداد.
    ممنون

  5. زهرا گفت:

    یعنی نمیخوام جدا به اینترنت متصل بشم فقط ازمایشی هر چی تو فرم وارد میکنم توی ی صفحه وارد بشه

  6. زهرا گفت:

    سلام ممنون ولی من میخوام اطلاعات بطور ازمایشی توی ی صفحه لنک داده بشه واز ایمیلم استفاده نکنم میشه راهنماییم کنید خیلی لازم دارم

  7. محمد امين گفت:

    سلام خسته نباشید ببخشید این فروم رو تو wordpress هم امتحان کردید؟؟؟ من این فرم رو تو وردپرس امتحان کردم ولی فقط رو please wait میمـــــــــونه دلیلش اگه فایل php من به صورت مسستقیم تو index قرار دادم ولی بازم please wait نشون میده ! البته من این کد رو تو لوکال امتحان کردم هنوز تو سرور قرار ندادم

  8. هادی گفت:

    خدا خیرتون بده بسیار بسیار عالی بود لطفا ادامه دهید

  9. رضا گفت:

    با سلام و خسته نباشید
    من فرم رو درست کردم و کاملاً سالمه فقط زمانی ک ایمیل ارسال میشه و میخوام تو جیمیلم بازش کنم اسمش $email هست میشه راهنمایی کنید چطور اسم مورد نظر رو بزارم؟؟؟

  10. ranjer گفت:

    با سلام
    میخواستم برای کاربران فرم هایی حاوی دکمه های افزاییش و یا کاهش فرم (+ و – ) برای سفارشات درست کنم لطفا من راهنمایی کنید خیلی گشتم ولی به جایی نرسیدم .از دوستان خواهش میکنم اگر کتاب یا نرم افزار و سیستم مدیریت محتوا خاصی که بتونم این فرم ها رو را ه اندازی کنم معرفی کنند

    سایت زیر نمونه ای از این فرم هست
    http://www.samanpl.ir/search/professionalsearch/Index/

  11. shaghayegh گفت:

    سلام ممنو از آموزش مفیدتون،
    من این کد رو در سایتم استفاده کردم ولی ایمیل ها ارسال نمیشه و خطای invalid email رو میده، ایمیل رو هم درست وارد میکنم

    1. فؤاد طهماسبی گفت:

      احتمالا از نسخه قدیمی php استفاده میکنید.
      برای اعتبار سنجی به این شکل باید از ۵٫۲ به بالا استفاده کنید.
      http://php.net/manual/en/function.filter-var.php

  12. صالح گفت:

    اون چیزی که می خواستم نبود متاسفانه

  13. مهدی گفت:

    سلام خسته نباشید ، آموزش هاتون واقعا عالیه ممنون . یه سوال داشتم ، من مطابق آموزش شما یک فرم درج مطلب در بانک ساختم همه فیلد ها ارسال میشه بجز اینپوت فایلم که خالی ارسال میشه ، تا قبل از استفاده از ایجکس کار میکرد و آدرس فایل درون دیتابیس ذخیره میشد … البته یه تکس ایریا هم دارم که به ckeditor تبدیلش کردم ، اونم ارسال نمیشه ، ممنون میشم پاسخ بدید .

    1. فؤاد طهماسبی گفت:

      سلام، با این روشی که اینجا گفته شده، امکان آپلود فایل وجود نداره. کدهایی هستند که برای آپلود فایل با آژاکس نوشته شده اند. لطفا جستجو کنید.

  14. محمد گفت:

    سلام . ممنون از مطلب مفیدتون اما من به یه مشکل بر خوردم
    اونم اینه که وقتی که مشخصات و یا متن پیام رو فارسی وارد میکنم، موقع در یافت ایمیل تمام حروف به هم ریخته میشه، درست مثل زیرنویس فیلم ها که انکودینگ اش به هم میخوره. نمیدونم با این مشکل باید چیکار کنم. اگر میشه راهنمایی کنین. ممنون.

    1. فؤاد طهماسبی گفت:

      بعد از

      این کد رو وارد کنید

      اینطوری Html هم میتونید بفرستید.

  15. سروش گفت:

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

  16. مریم گفت:

    سلام. واقعا ممنون از مطالبتون
    واقعا برای من یکی خیـــــــــــلی مفید واقع شده.
    فرم تمای که ایجاد کردم ارور میده و ارورش هم مربوط به خط mail توی تکه کد sendmail هست.
    چه مشکلی میتونه وجود داشته باشه؟
    ممنون میشم جواب بدید
    کارم خیلی لنگ پروژه ست، ممنون 🙂

  17. الیاس گفت:

    بابا کمکم کنید هرچی کد تست کردم به ایمیلم ارسال نمیشه لطفا مشکلم رو حل کنید هرچی هم کد تست می کنم اصلا هیچ کاری نمی کنه
    ولی باید بگد من از هاست و دامین استفاده نمیکنم یه طراح تازه کارم و html و css کار می کنم آشنایی با php ندارم و طراحی های من همش رو ویندوزه مشکلمم بالا گفتم حالا چی کار کنم دوروز دیگه باید قالب رو تحویل بدم؟؟؟؟

  18. marziye گفت:

    سلام خسته نباشید
    ببخشید اگه میشه کمک کنید مشکل حل بشه
    این دو فایل رو ساختم ولی ارسال نمیشه فقط مینویسه please wait
    اگر لطف کنید کدصحیح رو به من ایمیل بزنید ممنون میشم ازتون خیلی لازمش دارم ممنونم

  19. omid گفت:

    سلام دوست خوبم!
    میخواستم ببینم راهی هست بتونم یه فرم درست کنم که مشخصاتی که پر شده به ایمیلم بفرسته و با jquery mobile باشه؟!
    ممنون میشک اگه یه نمونه اماده هم داری برام بفرستی

  20. سپهر گفت:

    ممنون از آموزش عالیتون
    من یک مشکلی دارم
    زمانی که در ارسال ایمیل فایلی رو هم همراه با متن فرم ارسال میکنم به صورت معمولی (action=”send-mail.php”) ،متن به همراه فایل ارسال میشه
    اما زمانی که با استفاده از ajax و کدهای شما این عمل رو انجام میدم فقط متن ایمیل ارسال میشه و فایل در پیوست ارسال نمیشه
    ممنون میشم راهنمایی کنید

  21. ShahBeat گفت:

    سلام و عرض خسته نباشید
    این کد تو یکی از سایت هام گذاشتم و همه چی هم طبق گفته ی شما انجام دادم. اما در موقع تست من ایمیل ام رو صحیح وارد می کردم اما پیغام Invalid Email, please provide an correct email. را نشان می داد مشکل کجاست ؟
    با تشکر

    1. فؤاد طهماسبی گفت:

      تابعی که برای اعتبار سنجی ایمیل به کار میره، از توابع خود PHP هست و ایرادی در این موضوع نیست. شاید در وارد کردن ایمیل یا یه جای دیگه ایرادی داشته باشه کدتون. لطفا تو انجمن کد رو با ایمیلی که تست میکنید بنویسید و همینجا لینکشو بذارید تا بررسی کنم.

  22. علی گفت:

    سلام و خسته نباشید و دست مریضاد.
    آقا من ۱۰ تا مدل فرم تماس امتحان کردم ولی مشکل همه اینه که فارسی رو بدجور نشون میده تو ایمیلم.
    چیکار باید کرد!ممنون میشم کمکم کنید.
    مال شمام همیطوره.
    من کد
    $header .= “Content-type: text/html; charset=utf-8 \r\n”;
    رو در فایل php اضافه کردم ولی بازم حل نشد!

    1. فؤاد طهماسبی گفت:

      اینو بزنید به جای هدر ارسال ایمیلتون، اینطوری میتونید HTML هم بفرستید. 🙂

  23. علی گفت:

    سلام
    با تشکر از آموزش کاملتون
    یک سوال داشتم. یک صفحه دردست ساخت تهیه کردم که فرم تماس رو داره فقط باید یک اسکریپت تماس طراحی کرده تا اون صفخه بتونه نظرات رو به ایمیل آدرس مورد نظر ارسال کنه در غیر این صورت امکان ارسال وجود ندارد.
    لطفا راهتمایی کنید باتشکر
    expres.ir/%D9%82%D8%A7%D9%84%D8%A8-%D8%AF%D8%B1-%D8%AF%D8%B3%D8%AA-%D8%B3%D8%A7%D8%AE%D8%AA-%D9%81%D8%A7%D8%B1%D8%B3%DB%8C-snaily-%D8%A8%D9%87-%D8%B5%D9%88%D8%B1%D8%AA-html5/

    zdemo.xzn.ir/1

  24. محسنی گفت:

    خیلی ممنون از راهنمایی شما .
    لطفا درخصوص ساختن این فرم ( ارتباط با ما ) بفرمائید می شود در برنامه دریم ویور استفاده نمود .
    ۱۳-۴-۹۳

  25. فرهاد گفت:

    باسلام

    درخواست کمک در باره یک پروژه را دارم
    امکان کمک هست؟

  26. الهه گفت:

    خیلی خیلی خیلـــــــــــــــــــــــی عالی واقعا متشکرم مشکلم حل شد………..

  27. زهرا گفت:

    واقعاً ممنونم

  28. peyman گفت:

    ممنون فواد جان خیلی با سایتتون حال کردم

    ی سوال دیگه داشتم البته ببخشید این همه سوال میپرسم!
    چطور یک نمایشگر بازدید برای مطالب سایتم بسازم ؟؟ی راه ساده اگه بگی ممنون میشم

  29. peyman گفت:

    سلام فواد جان ی سوال ضهن منو در گیر کرده میخواستم بدونم چطور یک پست که میزاری هم توی فیس بوک میاد و هم تو سایت؟ به صورت دستی این کا رو انجام میدی؟؟؟؟

    1. فؤاد طهماسبی گفت:

      سلام،
      من به صورت دستی میزنم فقط فیسبوک البته، تویتر اتوماتیک از RSS و توسط Google FeedBurner فرستاده میشه.
      ولی اگه تحریم نبودیم، فیسبوک هم میشه اوتوماتیکش کرد فقط نیاز به ساخت اپ تو فیسبوک داره که فیسبوک نمیذاره ما ایرانیا اپ بسازیم.
      البته من به مخ بودن ایرانیا ایمان دارم، الان صد در صد یه راهی پیدا کردن. 😉

  30. مهرداد گفت:

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

  31. محسنی گفت:

    با سلام آقای طهماسبی
    من می خواستم این کدها را در برنامه دریم ویور بگذارم و فرم نظرات طراحی شده بوسیله ایمیل توسط کاربر به سایت من ارسال شود .
    من متوجه نشدم این دو فایل html و php با این کدهائی که ذکر نمودید چطوری و در چه برنامه ای بایستی ساخته شود آیا میشود این صفحه html در برنامه دریم ویور یک صفحه جدید درست نمائیم و این کدها را در آن بگذارم و ذخیره کنم به نام همان فایل که مورد نیاز است و فایل دوم که با پسوند php در برنامه php بایستی یک صفحه جدید باز کنم و این کدها را تایپ و بنام آن ذکر شده ذخیره نمایم و در نهایت این دو فایل در برنامه دریم ویور بایستی چطور تنظیم و لینک شود که وقتی کاربر آن را باز کرد با مشکل مواجه نشود و کل صفحه به ایمیل من فرستاده شود .

    لطفا بفرمائید این کد در برنامه دریم ویور یا فورنت پیج قابل استفاده است و اگر لطف بفرمائید این کدها را به ایمیل من ارسال فرمائید .
    قبلا از همکاری شما بسیار سپاسگزارم .
    دوشنبه ۲۹-۲-۹۳۲

  32. پیمان گفت:

    با سلام وخسته نباشید

    ی سوال داشتم اونم اینه که من به عنوان ی کاربر زمانی که میخوام ی پیغام رد کنم ارور ایمیل نا معتبر است نمایش داده میشه!؟

    اگه لطف کنید راهنمایی کنید خیلی ممنون میشم.

    1. فؤاد طهماسبی گفت:

      سلام،
      من متوجه نشدم! یعنی شما ایمیل رو درست وارد میکنید و این پیغام نمایش داده میشه؟
      به نظرم یک بار دیگه کدها و ایمیلتون رو چک کنید. چون ما فقط یک بار اون هم با توابع php ایمیل رو بررسی میکنیم تو این کد:

      1. peyman گفت:

        ممنونم از اینه که جواب دادین

        یعنی فقط فرم به ایمیل سایت خودمونو میره ؟یا میشه جیمیل یا یاهو هم میشه؟؟؟

        1. فؤاد طهماسبی گفت:

          خواهش میکنم،
          هیچ فرقی نمیکنه، هر ایمیلی که به عنوان ایمیل گیرنده داخل کد تعریف کنید به اون ایمیل ارسال میشه.

  33. فری گفت:

    با سلام یه اسکریپت ارسال فرم با قابلیت ضمیمه کردن فایل میشه بهم معرفی کنید که فارسی باشه من تو نت هرکدومو که دانلود کردم یه سری مشکلات داشت

  34. hassan گفت:

    سلام
    ۲ تا درخواست دارم
    یکی این که این فرم رو ساختم اما وقتی میزنم که ارسال کنه مینویسه please wait…. و همین جوری میمونه؟!؟ دلیلش چیه!!!
    دوم اینه لطفا. خواهشا این قالب نظرات سایتتونو به من بدین
    با سپاس

    1. فؤاد طهماسبی گفت:

      احتمالا پاسخی از فایل php دریافت نمیکنه. فایل و تنظیمات رو دوباره چک کنین.
      قالب نظرات منظورتون css هست که فکر نمیکنم باشه یا php؟

      1. hassan گفت:

        همین قالب نظراتی که الان دارم تایپ می کنم!!!!!!!

        1. amin گفت:

          قالبش از فریم ورک bootstraps که بسیار آسان هم هست یادگیریش داره استفاده می کنه. یعنی شما خیلی ساده بدون نوشتن css حتی می تونید چک باکس – اینپوت تکس و… را ایجاد کنید با html
          و بعد در نام class تگ اینتپوت ها از نام کلاسی استفاده میکنید که bootstraps برای اون کلاس کد نویسی شده است . خیلی راحته . آموزش های انگلیسی زیادی هستند که یاد میدن اینو .
          http://www.w3schools.com/bootstrap

  35. hassan گفت:

    سلام
    نمی دونستم کجا سوالمو مطرح کنم
    اما می خواستم بدونم چطوری میشه نویسندگان برتر رو همراه آواتارشون تو سایت نمایش داد؟

    1. فؤاد طهماسبی گفت:

      سلام،
      باید تو انجمن میپرسیدید. 🙂
      من از این افزونه استفاده میکنم.
      http://wordpress.org/plugins/top-authors/

  36. Gdal گفت:

    بسیار عالی دوست عزیز

  37. آسینتا گفت:

    سلام
    خیلی ممنون از مطلب خوبتون، با این آموزش برای بار اول تونستم خودم یک فرم رو طراحی کنم. البته کلی به مشکل خورد ولی خودم حلش کردم و آخرش برام خیلی شیرین بود، مرسی. ببخشید یه سوال غیر مربوط (: هم داشتم، اسم این افزونه نمایش کد شما چیه؟ چون خیلی شبیه به Crayon Syntax Highlighter هست اما خودش نیست.

    1. فؤاد طهماسبی گفت:

      خواهش میکنم. انشالا همیشه موفق باشید.
      در مورد افزونه هم، چرا خودشه. 🙂

  38. هادی گفت:

    درود
    ممنون مفید بود

  39. maryam گفت:

    خیلی ممنون. اما سوال اینه که آدرسی که قراره این فرم به اون ارسال بشه رو چطوری بنویسیم؟ کجا هست اصلن؟

    1. فؤاد طهماسبی گفت:

      لاین ۴ کد مربوط به jQuery:

    2. محمد گفت:

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

      1. فؤاد طهماسبی گفت:

        متاسفانه آدرس سایت کامل مشخص نبود. و اینکه در صورت امکان مسائلی که به مطلب مربوط نیست رو در فروم مطرح کنید. متشکرم.

  40. محمد گفت:

    عالی بود.
    دقیقا چیزی که بهش احتیاج داشتم. مرسی.

  41. fatemeh گفت:

    مرسی- کامل و مختصر 🙂

کد HTMLCSSJavaScriptPHP