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

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

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

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

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

 

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

 

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

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

 

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

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

<form id="contactform" action="" method="post">
    <label>Name:</label><input id="name" type="text" name="name" />
    <label>Email:</label><input id="email" type="text" name="email" />
    <label>Message:</label><textarea id="message" name="message"></textarea>
    <input id="submit" type="button" value="send" />
    <div id="success" style="color: red;"></div>
</form>

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

 

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

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

// Here we get all the information from the fields sent over by the form.
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];

$to = 'youremail@domain.com';
$subject = 'the subject';
$message = 'FROM: '.$name.' Email: '.$email.'Message: '.$message;
$headers = 'From: youremail@domain.com' . "\r\n";

if (filter_var($email, FILTER_VALIDATE_EMAIL)) { // this line checks that we have a valid email address
    mail($to, $subject, $message, $headers); //This method sends the mail.
    echo "Your email was sent!"; // success message
}else{
    echo "Invalid Email, please provide an correct email.";
}

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

 

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

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

            
$(document).ready(function() {
    $('#submit').click(function() {
        $('#submit').attr('value', 'Please wait...');
        $.post("sendemail.php", $("#contactform").serialize(), function(response) {
            $('#success').html(response);
            $('#submit').attr('value', 'SEND');
        });
        return false;
   });
});

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

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

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-latest.js"></script>
    <script>
            $(document).ready(function() {
                $('#submit').click(function() {
                    $('#submit').attr('value', 'Please wait...');
                    $.post("sendemail.php", $("#contactform").serialize(), function(response) {
                        $('#success').html(response);
                        $('#submit').attr('value', 'SEND');
                    });
                    return false;
                });
            });
    </script>
  </head>
  <body>

    <form id="contactform" action="" method="post">
      <label>Name:</label><input id="name" type="text" name="name" />
      <label>Email:</label><input id="email" type="text" name="email" />
      <label>Message:</label><textarea id="message" name="message"></textarea>
      <input id="submit" type="button" value="send" />
      <div id="success" style="color: red;"></div>
    </form>
  </body>
</html>

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

 

send-ajax-php-mail

فایلهای این آموزش کاملا پیاده سازی و تست شده است.

این دسخط هم میتونه آموزش کمکی خوبی باشه: آموزش ساختن فرم تماس با ما

daskhatmin

فواد طهماسبی

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

57 دیدگاه برای “آموزش ساخت فرم تماس با ما و ارسال به ایمیل با 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. shaghayegh گفت:

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

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

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

  11. مهدی گفت:

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

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

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

  12. محمد گفت:

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

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

      بعد از

      $headers = 'From: youremail@domain.com' . "\r\n";
      

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

      $headers .= "Content-Type: text/html; charset=utf-8" . "\r\n";
      

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

  13. سروش گفت:

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

  14. مریم گفت:

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

  15. الیاس گفت:

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

  16. marziye گفت:

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

  17. omid گفت:

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

  18. سپهر گفت:

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

  19. ShahBeat گفت:

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

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

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

      1. ShahBeat گفت:

        سلام
        کد send :
        http://s5.picofile.com/file/8130507992/Send.png
        کد JQuery :
        http://s5.picofile.com/file/8130508250/JS.png
        موفق باشید

  20. علی گفت:

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

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

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

          $headers = "From: Your Name " . "\r\n";
          $headers .= "Reply-To: " . "\r\n";
          $headers .= "MIME-Version: 1.0\r\n";
          $headers .= "Content-Type: text/html; charset=utf-8" . "\r\n";
          $headers .= "X-Mailer: PHP/" . phpversion();
      

دیدگاه‌های بیشتر

*اگر پرسشی دارید که مربوط به این مطلب نیست لطفا در بخش پرسشها مطرح کنید. در غیر این صورت دیدگاه شما تایید نخواهد شد.


کد HTMLCSSJavaScriptPHP