contact-us

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

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

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

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

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

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

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

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

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

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

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

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

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


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


نظر شما چیه؟

۵۹ دیدگاه

  1. maryam

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

    • فؤاد طهماسبی نویسنده

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

    • محمد

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

      • فؤاد طهماسبی نویسنده

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

  2. آسینتا

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

    • فؤاد طهماسبی نویسنده

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

  3. hassan

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

  4. hassan

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

    • فؤاد طهماسبی نویسنده

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

        • amin

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

  5. فری

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

  6. پیمان

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

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

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

    • فؤاد طهماسبی نویسنده

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

      • peyman

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

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

        • فؤاد طهماسبی نویسنده

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

  7. محسنی

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

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

  8. مهرداد

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

  9. peyman

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

    • فؤاد طهماسبی نویسنده

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

  10. peyman

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

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

  11. الهه

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

  12. فرهاد

    باسلام

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

  13. محسنی

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

  14. علی

    سلام
    با تشکر از آموزش کاملتون
    یک سوال داشتم. یک صفحه دردست ساخت تهیه کردم که فرم تماس رو داره فقط باید یک اسکریپت تماس طراحی کرده تا اون صفخه بتونه نظرات رو به ایمیل آدرس مورد نظر ارسال کنه در غیر این صورت امکان ارسال وجود ندارد.
    لطفا راهتمایی کنید باتشکر
    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

  15. علی

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

    • فؤاد طهماسبی نویسنده

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

  16. ShahBeat

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

    • فؤاد طهماسبی نویسنده

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

  17. سپهر

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

  18. omid

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

  19. marziye

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

  20. الیاس

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

  21. مریم

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

  22. سروش

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

  23. محمد

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

    • فؤاد طهماسبی نویسنده

      بعد از

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

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

  24. مهدی

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

    • فؤاد طهماسبی نویسنده

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

  25. shaghayegh

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

  26. ranjer

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

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

  27. رضا

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

  28. هادی

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

  29. محمد امين

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

  30. زهرا

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

  31. زهرا

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

  32. مریم

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

  33. محمود شکرانه

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

  34. موسوی

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

متاسفانه امکان ارسال دیدگاه وجود ندارد!