فرم بازخورد در jQuery و PHP. فرم تماس با jQuery، jGrowl، ajaxForm و Buzz

برای اینکه به کار اسکریپت های دیگران وابسته نباشید، یاد بگیرید که چگونه آنها را خودتان ایجاد کنید. دوره ویدیوی من این را به شما آموزش می دهد " PHP و MySQL از صفر تا گورو":

در این درس با تابع آشنا می شویم پست ()، با استفاده از مثال ایجاد فرم های بازخورد پی اچ پیبا ارسال بعدی داده های دریافتی به نامه.

برای این، ما دو فایل ایجاد خواهیم کرد - forma.phpو mail.php... فایل اول فقط حاوی یک فرم با فیلدهایی برای ورودی داده های کاربر خواهد بود. داخل تگ فرم- دکمه "ارسال"و صفت عملکه به کنترل کننده اشاره دارد - mail.php، با فشار دادن دکمه به داده های فرم دسترسی پیدا می کند "ارسال"... در مثال ما، داده های فرم به صفحه وب با نام ارسال می شود "/Mail.php"... این صفحه شامل یک اسکریپت برای PHPکه داده های فرم را پردازش می کند:

این فرم به صورت بصری در مرورگر به نظر می رسد.

سپس کد فایل را می نویسیم mail.php... آمدن با نام برای متغیرها. V PHPمتغیر با علامت شروع می شود $ و سپس نام متغیر. مقدار متنمتغیر در علامت نقل قول قرار می گیرد. با کمک متغیرها، محتوای فرم به سادگی با جایگزین کردن آن به ایمیل مدیر ارسال می شود. براکتنام عنصر فرم - مقدار نام.

$ به = " [ایمیل محافظت شده]"؛ // ایمیل گیرنده داده از فرم
$ tema = "فرم بازخورد PHP"; // موضوع ایمیل دریافتی
$ message = "نام شما:". $ _ POST ["name"]."
"; // مقدار به دست آمده از فرم نام = نام را به متغیر اختصاص دهید
$ message. = "E-mail:". $ _ POST ["email"]."
"؛ // به دست آمده از فرم نام = ایمیل
$ message. = "شماره تلفن:". $ _ POST ["phone"]."
"؛ // به دست آمده از فرم نام = تلفن
$ message. = "Message:". $ _ POST ["message"]."
"؛ // به دست آمده از فرم نام = پیام
$ headers = "MIME-Version: 1.0". "\ r \ n"؛ هدر // با قالب به اضافه یک کاراکتر فید خط مطابقت دارد
هدر $ = "نوع محتوا: متن / html؛ مجموعه حروف = utf-8". "\ r \ n"؛ // نوع محتوای ارسالی را نشان می دهد
نامه ($ به، $ tema، $ پیام، $ هدر)؛ // مقادیر متغیر را از طریق ایمیل برای گیرنده ارسال کنید
?>

بنابراین، داده ها از آرایه $ _POSTبه متغیرهای مربوطه ارسال می شود و با استفاده از تابع به نامه ارسال می شود پست الکترونیکی... بیایید فرم خود را پر کنیم و دکمه ارسال را بزنید. فراموش نکنید که ایمیل خود را وارد کنید. نامه فورا رسید.

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

9 اصل بازخورد

من برای هر یک از اصول یک مثال می زنم - همچنین بسیار ساده است، اما امیدوارم که اصول را واضح تر کند. علاوه بر این، من آن را با افکار خود رقیق خواهم کرد. برو

1. بازخورد مهم ترین ابزار در تمام عرصه های زندگی و حتی بیشتر از آن در فعالیت های اجتماعی و کار با مردم است. استفاده کن!
در مورد اهمیت بازخورد در پست آخر نوشتم، اینجا می خواهم در مورد استفاده از آن بنویسم. من معتقدم که هر چه مردم بیشتر با بازخورد و اصول آن آشنا شوند، زندگی برای همه ما آسان تر خواهد بود. در کار، در ارتباط روزانه با مردم، در خانواده قابل اجرا است. ولی! بسیار مهم است که در مصرف آن زیاده روی نکنید. معلم من در دوره گروهی یک بار گفت: "وقتی شروع به بازخورد دادن به همسر و فرزندانم کردم و به وضوح از اصول او پیروی کردم، متوجه شدم که باید به تعطیلات بروم." این جمله او واقعاً در روح من فرو رفت. من را اشتباه نفهمید، من مطمئن هستم که بازخورد به شوهر، فرزندان، مادر و مادرشوهر فقط می تواند مفید باشد. اما فراموش نکنید که خانواده مال ماست. محل امنو باید فضایی برای احساسات غیرقابل توضیح، اظهارات احمقانه، نمایش های بی هدف عشق، عجیب و غریب و در نهایت وجود داشته باشد. در یک خانواده، یافتن تعادل بین بازخورد و احساسات عادی انسان بسیار مهم است. این در همه جا مهم است، به ویژه در خانواده.

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

3. در فرآیند بازخورد، وظیفه شما آوردن است نمونه های خاصو حقایق، نه عبارات انتزاعی و احساسی.
اینجا همه چیز ساده است. "واسیا لعنتی بز، چه لعنتی اینجا برام نوشتی!" - این بازخورد نیست و بعید است برای کسی مفید باشد. "واسیا، تو اشتباه می کنی. از تو خواستم لیستی از همه مشتریان را با نام از شما بنویسید سه حرف، و شما لیستی از کارمندان را با اسامی برای من نوشتید چهار حرف... اگر با دقت بیشتری به درخواست های من گوش دهید، برای من خیلی راحت تر خواهد شد. چیزی از او دریافت خواهد کرد، آنچه شما نیاز دارید.

4. انتخاب کلمات صحیحو جمله بندی در فرآیند بازخورد بسیار مهم است - به یاد داشته باشید که شخصی که برای شما مهم است روبروی شما نشسته است یا تعامل با او برای شما مهم است (به طور معمول این در محل کار است).
این نکته مستقیماً از مورد قبلی پیروی می کند. قبل از ارائه بازخورد، دقیقاً به آنچه می خواهید بگویید و می خواهید آنها به چه چیزی دست پیدا کنند فکر کنید. یک به اصطلاح "اصل ساندویچ" وجود دارد، من نسبت به آن بی تفاوت هستم، اما بسیاری آن را مفید می دانند، چرا که نه. می گوید که باید در بازخوردها استدلال هایی مانند نان و پنیر در ساندویچ قرار دهید. با مثبت (نان) شروع می کنیم، با منفی (پنیر) ادامه می دهیم و دوباره با مثبت پایان می دهیم. من فکر می کنم این کار زیاد است، اما اگر آن را دوست دارید، آن را بگیرید و از آن استفاده کنید.

5. توصیه می شود از کلمه "اما" در بازخورد استفاده نکنید (من همه چیز را دوست داشتم، اما ...). آنچه قبلا گفته شده را لغو و خط می زند.
اگر بازخورد شما حاوی نکات مثبت و منفی است، کافی است آنها را از هم جدا کنید و در جملات مختلف بگویید. از این گذشته ، آنها به یکدیگر وابسته نیستند و یکدیگر را لغو نمی کنند. دوست شما که برای مشاوره در مورد لباس های جدید به شما مراجعه می کند، اگر به او بگویید "دامن چیزی نیست، اما کفش ها کاملا احمقانه هستند" بیشتر ناراحت می شود. اما اگر بگویید "من این دامن را دوست دارم، کاملا به تن شما می آید، باریک و رنگ شما. من کفش را دوست ندارم، به نظر من این استایل شما نیست و رنگش مایه تاسف است." این یک کلمه در مورد "حقیقت در چشم" است. بازخورد به ما این امکان را می دهد که این حقیقت را بدون خطر توهین به دوستان یا درگیری با همکاران بیان کنیم. البته من دوستان و اعضای خانواده ای دارم که "دامن احمقانه" و حتی "پاهای کج" با آنها سوار می شوند، اما همه ما از این قبیل افراد کم داریم، پس به نکته 1 توجه کنید.

6. به یاد داشته باشید که بازخورد خوب نوعی بازخورد است که به شخصی که آن را دریافت می کند قادر می سازد چیزی را بهبود بخشد. همچنین به یاد داشته باشید که هیچ کس موظف نیست با بازخورد شما موافقت کند و آن را بپذیرد - بالاخره شما همیشه ذهنی هستید.
دوستان این فوق العاده است نکته مهم... فراموش نکنیم که دوستی با کفش های حواس پرت به احتمال زیاد به پوشیدن آن ها ادامه می دهد. و نظر ما نظر نهایی نیست. V بهترین موردمی توان امیدوار بود که به هر طریقی مورد توجه قرار گیرد. در مورد دیگر، ممکن است نظر ما فقط از آن ما باقی بماند و این عادی است. بالاخره ما خودمان همیشه نظر کسانی را که به ما بازخورد می دهند قبول نداریم، چه او برنده سه جایزه نوبل باشد و چه مادر خودش. بنابراین ما تصمیم را ترک می کنیم - پذیرفتن یا نپذیرفتن بازخورد از طرف آسیب دیده.

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

8. اگر دریافت کننده بازخورد هستید، فراموش نکنید که از شخصی که این بازخورد را به شما می دهد تشکر کنید. با دانش به دست آمده، باید کاری انجام دهید، دانه ها را از کاه جدا کنید و سعی کنید آنها را اعمال کنید. بازخورد یک هدیه ارزشمند است!
دشوار است، درست است؟ اما به نظر من، دریافت بازخورد به همان اندازه مهم است که آن را ارائه کنید.

9. بسیار مهم است که بازخورد مثبت را در طول فرآیند بازخورد از دست ندهید - اهمیت آن کمتر از بازخورد منفی نیست!
بسیاری از ما چنین نگرشی داریم - برای اینکه یک فرد یاد بگیرد، باید او را سرزنش کنید. چنین یادگاری از اسکوپ. خوب، این مزخرف است، می دانید. باید به یاد داشته باشیم که بازخورد نه تنها فهرستی سازنده و دقیق از کاستی‌ها است، بلکه نشانه‌ای ضروری از جوانب مثبت و جستجوی چیزهای خوب است. از این گذشته، شما نه تنها به شوهرتان می گویید "عزیزم، سوپ را زیاد نمک زدی!"، بلکه "عزیزم، چه نان های خوشمزه ای پختی!" :) از این گذشته ، اگر شوهر همیشه فقط در مورد کتلت های سوخته و سوپ شور بشنود ، به سرعت دست از پختن می کشد. بنابراین در زمینه های دیگر - خوب را فراموش نکنید، اما بهتر است - با جستجو برای آن شروع کنید.

من می خواهم یک نمونه از بازخورد بسیار مهمی را که دریافت کردم به شما ارائه دهم. مثال بسیار شخصی است، اما برای من مهم است که در مورد این تجربه به شما بگویم تا نشان دهم اقدام واقعیاین ابزار نه تنها در انتزاعی Vasya Pupkin از نمونه های من است.
حدود یک سال پیش، نزدیکترین دوستم مرا به یک کافه دعوت کرد. ایلان، پسرم، 3 ماهه بود، من تازه از پوشک و کالسکه به دنیا خزیدم. فکر کردم قراره در مورد مزخرفات عمه مون چت کنیم. و او گفت که باید در مورد دردناک با من صحبت کند. او به من گفت که واقعاً دلش برای من تنگ شده است. اینکه در شش ماه گذشته کاملاً در خودم و خانواده ام غوطه ور شده ام، با او تلفنی صحبت نمی کنم، چیزی در مورد بارداری یا پسرم به او نمی گویم، به مشکلات او گوش نمی دهم. و شادی ها او گفت که خیلی دلم برای من تنگ شده بود و نمی دانست بعد از آن رابطه ما چه اتفاقی می افتد ، زیرا ما در حال دور شدن بودیم و من مطلقاً از اخبار او مطلع نبودم. او اضافه کرد که دوران بسیار سختی در زندگی خود دارد و واقعا به حمایت من نیاز دارد.
بازخورد واقعی بود. او در مورد احساسات خود صحبت کرد و نمونه هایی از موقعیت های خاص را بیان کرد. او مرا به خاطر غوطه ور شدن من در خانواده سرزنش نکرد، او در مورد آنچه که از رابطه ما می خواهد و چگونه می توان به این امر دست یافت صحبت کرد. معلوم بود که این را نه تنها برای خودش، بلکه برای من هم می‌گفت.
و برای من یک خبر مطلق بود! من آنقدر غرق پسر تازه متولد شده ام و قبل از آن - در دوران بارداری بودم، که متوجه نشدم چگونه نزدیک ترین و بسیار مهم ترین افراد را از خود بیگانه کردم! من بالا هستم امروزاز اینکه چقدر از رفتارم بی خبر بودم شوکه شدم.

اگر آن موقع با من صحبت نمی کرد چه اتفاقی می افتاد؟ به احتمال زیاد، یک سری از گلایه ها: "چرا به من زنگ نمی زنی؟" "صد سال است که دیگر همدیگر را ندیده اید" "به زندگی من علاقه ای ندارید" و غیره.
واقعا چه اتفاقی افتاد؟ من از خواب بيدار شدم". من به وضوح به او گفتم که نمی خواهم جایی بروم، دوستش دارم و دارم برمی گردم. من خودم را جمع و جور کردم و برای ماه های آینده چندین "قرار" را همزمان با هم گذاشتیم. من شروع به تماس بیشتر کردم و سعی کردم وقتی او تماس گرفت تلفن را بردارم. و همچنین - من هم به ملاقات دوست دیگری رفتم که این نوع بازخورد دادن برای او دشوارتر است و خودم یک سؤال از او پرسیدم. و معلوم شد که او نیز مانند اولین احساس می کند - می توانید تصور کنید؟ آیا می توانید تصور کنید که از یک بازخورد چند چیز خوب حاصل شد؟ من با دو فرد بسیار مهم برایم در تماس بودم. و دوست من از این گفتگو بسیار سپاسگزار است.

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

هنگام شروع یک پروژه وب جدید، هیچ چیز بهتر از دریافت فوری آن نیست. نظرات مثبتو تشکر از اولین بازدید کنندگان متأسفانه، صاحبان بسیاری از وب سایت ها این واقعیت را از دست می دهند و تماس با مدیریت سایت آنها بسیار دشوار است.

امروز ما در مورد یک راه حل ساده برای این مشکل به شما خواهیم گفت. این فرم با استفاده از jQuery، PHP و PHPMailer به شما این امکان را می دهد که بازخورد بازدیدکنندگان را مستقیماً به سایت خود دریافت کنید. پست الکترونیک.

Html

بیا شروع کنیم با نشانه گذاری HTML... شیوه نامه در ابتدای سند و منابع جاوا اسکریپت در انتها آمده است. این عملکرد را بهبود می بخشد زیرا اسکریپت ها آخرین بار بارگذاری می شوند در حالی که بقیه وب سایت از قبل بارگذاری شده و نمایش داده می شود.

: بازخورد.html

فرم بازخورد سریع w / PHP و jQuery | نسخه ی نمایشی Tutorialzine

در متن سند، DIV "#feedback" را می بینیم. این یک موقعیت ثابت زمان بندی شده در گوشه سمت راست پایین پنجره دارد که می توانید آن را مشاهده کنید بخش بعدیمقالات

داخل آن 5 دهانه رنگی وجود دارد. عرض هر سند 20 درصد است و در سمت چپ تراز شده اند. به این ترتیب تمام عرض #بازخورد DIV را پر می کنند.

در نهایت، ظرف .section که شامل عنوان و هدر است، حاوی دکمه و فیلد ورودی متن است.

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

: styles.css - قسمت 1

#بازخورد (
پس زمینه رنگ: # 9db09f;
عرض: 310 پیکسل؛
ارتفاع: 330px;
موقعیت: ثابت
پایین: 0;
سمت راست: 120 پیکسل؛
margin-bottom: -270px;
z-index: 10000;
}

بخش #بازخورد (
پس زمینه: url ("img / bg.png") repeat-x بالا سمت چپ;
حاشیه: 1px جامد # 808f81;
border-bottom: هیچ
بالشتک: 10px 25px 25px;
}

#بازخورد .color (
شناور به سمت چپ؛
ارتفاع: 4px;
عرض: 20%;
سرریز: پنهان
}

#feedback .color-1 (رنگ پس زمینه: # d3b112;)
#بازخورد .color-2 (رنگ پس زمینه: # 12b6d3;)
#feedback .color-3 (رنگ پس زمینه: # 8fd317;)
#بازخورد .color-4 (رنگ پس زمینه: # ca57df;)
#بازخورد .color-5 (رنگ پس زمینه: # 8ecbe7;)

#بازخورد h6 (
پس زمینه: url ("img / feedback.png") بدون تکرار.
ارتفاع: 38 پیکسل؛
حاشیه: 5px 0 12px;
text-indent: -99999px;
مکان نما: اشاره گر
}

#فیدبک ناحیه متنی (
background-color: #fff;
مرز: هیچ
رنگ: # 666666;
فونت: 13px "Lucida Sans", Arial, sans-serif;
ارتفاع: 100 پیکسل؛
بالشتک: 10 پیکسل؛
عرض: 236 پیکسل؛

Moz-box-shadow: 4px 4px 0 # 8a9b8c;
-webkit-box-shadow: 4px 4px 0 # 8a9b8c;
box-shadow: 4px 4px 0 # 8a9b8c;
}
اولین عنصری که باید قالب بندی کنیم، #بازخورد DIV است. موقعیت یابی ثابتی دارد و به پنجره مرورگر محدود می شود. بعد تعریف DIV'a.section و پنج دهانه رنگی می آید. این فاصله ها فقط در رنگ پس زمینه مشخص شده توسط کلاس های مختلف متفاوت است.

در نهایت، قوانین CSS را داریم که ظاهر فیلد ورودی متن را تعیین می کند.

: styles.css - قسمت 2

#بازخورد a.submit (
پس زمینه: url ("img / submit.png") بدون تکرار.
مرز: هیچ
نمایش: بلوک؛
ارتفاع: 34px;
حاشیه: 20 پیکسل خودکار 0;
text-decoration: هیچ;
text-indent: -99999px;
عرض: 91 پیکسل؛
}

#بازخورد a.submit: شناور (
پس زمینه موقعیت: پایین سمت چپ.
}

#بازخورد a.submit.working (
پس زمینه موقعیت: بالا سمت راست مهم.
مکان نما: پیش فرض;
}

#بازخورد .پیام (
font-family: Corbel, Arial, sans-serif;
رنگ: # 5a665b;
text-shadow: 1px 1px 0 #b3c2b5;
حاشیه پایین: 20 پیکسل.
}

#بازخورد .arrow (
پس زمینه: url ("img / arrows.png") بدون تکرار.
شناور: سمت راست;
عرض: 23 پیکسل؛
ارتفاع: 18 پیکسل؛
موقعیت: نسبی;
بالا: 10px;
}

#بازخورد .arrow.down (موقعیت پس زمینه: بالا سمت چپ؛)
#بازخورد h6: نشانگر را به سمت پایین نگه دارید (موقعیت پس‌زمینه: پایین سمت چپ؛)
#بازخورد .arrow.up (موقعیت پس زمینه: بالا سمت راست؛)
#بازخورد h6: شناور .بالا (موقعیت پس‌زمینه: پایین سمت راست؛)

#بازخورد .پاسخ (
اندازه فونت: 21px;
margin-top: 70px;
text-align: center;
text-shadow: 2px 2px 0 # 889889;
رنگ: #FCFCFC;
}
در قسمت دوم شیوه نامه، تعریف دکمه ارسال (ارسال) را مشاهده می کنید. لطفاً توجه داشته باشید که این دکمه دارای سه موقعیت است که به یکسان متصل می شوند تصویر پس زمینه- submit.png است و فقط در صورت نیاز نمایش داده می شود. موقعیت ها: موقعیت استاندارد، موقعیت ماوس روی آن، و موقعیت فعال "دویدن". هنگامی که دکمه در موقعیت کار قرار دارد، جلوه ماوس غیرفعال می شود.

فرم بازخورد دارای دو ماده است: پنهان و آشکار. هنگامی که بارگذاری می شود، موقعیت آن توسط استاندارد مخفی تنظیم می شود. اما وقتی کاربر روی عنوان کلیک می کند، از طریق jQuery گسترش می یابد. این از طریق نظارت بر رویداد و راه اندازی اجرا می شود انیمیشن سادههمانطور که در زیر به وضوح مشاهده می کنید.

: script.js - قسمت 1

$ (سند) .ready (تابع () (

// URL نسبی اسکریپت submit.php.
// احتمالا باید آن را تغییر دهید.
var submitURL = "submit.php";

// کش کردن شی بازخورد:
var feedback = $ ("# بازخورد");

$ ("# بازخورد h6"). روی (عملکرد () (

// ما مقادیر انیمیشن را ذخیره می کنیم
// خواص در یک شی جداگانه:

Var el = $ (this) .find (. Arrow");

اگر (el.hasClass ("پایین")) (
انیمه = (
mb: -270،
pt: 10
};
}

// اولین انیمیشن فرم را به بالا یا پایین حرکت می دهد، ودوم
// عنوان "بازخورد" را جابجا می کند، بنابراین در نسخه کوچک شده قرار می گیرد

Feedback.stop () Animate ((marginBottom: anim.mb));

Feedback.find (. بخش"). Stop (). Animate ((paddingTop: anim.pt)، تابع () (
el.toggleClass ("پایین بالا");
});
});
برای اینکه کدمان مرتب باشد، موقعیت‌های if را به بالای سند منتقل کرده‌ایم و یک شی انیمیشن ایجاد کرده‌ایم که مقادیر انیمیشن را نگه می‌دارد. بسته به اینکه یک کلاس "down" روی فلش وجود دارد یا خیر، فرم را پنهان یا آشکار می کنیم.

بخش دوم script.js شامل ساختار تعامل AJAX با submit.php است.

: script.js - قسمت 2

$ ("# بازخورد a.submit"). زنده ("کلیک کنید"، تابع () (
دکمه var = $ (این)؛
var textarea = feedback.find ("textarea");

// ما از کلاس کارگر نه تنها برای استایل کردن دکمه ارسال استفاده می کنیم،
// بلکه به عنوان نوعی "قفل" برای جلوگیری از ارسال های متعدد.

If (button.hasClass ("کار") || textarea.val (). طول بازگشت false;
}

// قفل کردن فرم و تغییر سبک دکمه:
button.addClass ("کار")؛

$.ajax ((
آدرس اینترنتی: submitURL،
نوع: "پست"،
داده: (پیام: textarea.val ())،
کامل: تابع (xhr) (

Var text = xhr.responseText;

// این به کاربران کمک می کند فرم خود را عیب یابی کنند:
if (xhr.status == 404) (
text = "مسیر شما برای submit.php نادرست است.";
}

// پنهان کردن دکمه و ناحیه متنی، پس از آن
// ما در حال نشان دادن پاسخ دریافتی از submit.php هستیم

Button.fadeOut ();

Textarea.fadeOut (تابع () (
var span = $ (" ",{
نام کلاس: "پاسخ"،
html: متن
})
.پنهان شدن ()
.appendTo (feedback.find (. بخش"))
.نمایش ();
)). val ("")؛
}
});

بازگشت نادرست؛
});
});
در اینجا ما از روش AJAX استفاده می کنیم سطح پایین تر jQuery - $ .ajax ()، که از طریق آن تعامل با submit.php پیاده سازی می شود. این روش به ما کنترل کمی بیشتر از $ .get () یا $ .post () می دهد.

یکی مزیت بزرگ این روششامل یک پیام برگشتی "کامل" است. در اینجا یک تطابق بین پاسخ و خطای 404 تعریف می کنیم که مودبانه به کاربر می گوید مسیر ارسال URL را بررسی کند.

حالا بیایید جلو برویم و به بخش پایانی آموزش - بخش PHP - برویم

PHP

PHP حاوی اطلاعات ارسال شده از طریق AJAX است، آن را پردازش می کند و پیامی را به صندوق ورودی شما ارسال می کند.

: submit.php

// آدرس ایمیل خود را در قسمت زیر وارد کنید
آدرس ایمیل $ = " [ایمیل محافظت شده]";

// استفاده از جلسه برای جلوگیری از سیل:

session_name ("بازخورد سریع");
session_start ();

// اگر آخرین فرم ارسالی کمتر از 10 ثانیه پیش بود،
// یا کاربر قبلاً 10 پیام در یک ساعت گذشته ارسال کرده است

if ($ _ SESSION ["lastSubmit"] && (time () - $ _SESSION ["lastSubmit"] 10)) (
die ("لطفا قبل از ارسال دوباره چند دقیقه صبر کنید.");
}

$ _SESSION ["lastSubmit"] = time ();
$ _SESSION ["submitsLastHour"] ++;

نیاز به "phpmailer / class.phpmailer.php"؛

if (ini_get ("magic_quotes_gpc")) (
// اگر نقل قول های جادویی فعال هستند، آن ها را بردارید
$ _POST ["message"] = stripslashes ($ _ POST ["message"]);
}

if (mb_strlen ($ _ POST ["پیام"]، "utf-8") die ("متن بازخورد شما خیلی کوتاه است.");
}

$ msg = nl2br (strip_tags ($ _ POST ["پیام"]));

// با استفاده از کلاس PHPMailer

$ mail = جدید PHPMailer ();
$ mail-> IsMail ();

// افزودن آدرس ایمیل دریافت کننده
$ mail-> AddAddress ($ emailAddress);

$ mail-> Subject = "ارسال فرم بازخورد سریع جدید";
$ mail-> MsgHTML ($ msg);

$ mail-> AddReplyTo (" [ایمیل محافظت شده]". $ _ SERVER [" HTTP_HOST "]," Quick Feedback Form ");
$ mail-> SetFrom (" [ایمیل محافظت شده]". $ _ SERVER [" HTTP_HOST "]," Quick Feedback Form ");

echo "متشکرم!"؛
ابتدا از کنترل ها استفاده می کنیم جلسات PHPمحاسبه کنید که کاربر در یک ساعت گذشته چند بار از فرم استفاده کرده است. اگر کاربر سعی کند پیامی را کمتر از 10 ثانیه پس از ارسال آن ارسال کند آخرین پستیا در عرض یک ساعت بیش از 10 پیام ارسال می کند، سپس خطایی برای او نمایش داده می شود.

پیام ها با استفاده از کلاس PHPMailer ارسال می شوند. این فقط با PHP5 کار می کند، بنابراین سرور باید از این نسخه خاص پشتیبانی کند.

تعدادی از روش های PHPMailer برای پیکربندی نامه های خروجی استفاده می شود. ما از IsMail () استفاده می کنیم تا به کلاس بگوییم که از تابع ایمیل داخلی PHP () استفاده کند. AddAddress () گیرندگان را اضافه می کند (شما می توانید بیش از یک گیرنده را در آنجا اضافه کنید). پس از افزودن شی به بدنه سند، آدرس پاسخ را نشان می دهیم و پیام را ارسال می کنیم.

این توسعه را به پایان می رساند!

در نتیجه

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

برای توسعه یک پروژه وب، دریافت بازخورد از بازدیدکنندگان بسیار مهم است. متأسفانه، در بسیاری از وب سایت ها، امکان ارسال پیام به توسعه دهندگان یا اصلاً ارائه نشده است یا با مشکلات نسبتاً جدی همراه است.

امروز ما یک راه حل ساده برای این مشکل ایجاد می کنیم. با استفاده از jQuery، PHP و کلاس PHPMailer، فرم پیشنهاد کاربر را مستقیماً به صندوق ورودی شما ارسال می کند.

Html

بیایید با نشانه گذاری HTML شروع کنیم. سبک ها در بالای سند گنجانده شده اند، و فایل های جاوا اسکریپت- در پایین این فرآیند بارگذاری صفحه را بهینه می کند، بنابراین اسکریپت ها آخرین بار بارگذاری می شوند و به کاربر اجازه می دهند محتوای صفحه را ببینند.

دمو.html

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

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

سپس ظرف می آید .بخش،که شامل یک عنوان، یک ناحیه متنی و یک دکمه است.

CSS

بیایید به تنظیم استایل های فرم بپردازیم. ابتدا اجازه دهید چند کلمه در مورد اینکه ساختار یک stylesheet از چه چیزی تشکیل شده است بگوییم. اگر به تعاریف CSS زیر نگاه کنید، متوجه خواهید شد که هر قانون با آن شروع می شود #بازخورد... این یک شباهت به فضای نام در CSS ایجاد می کند و اضافه کردن کد به وب سایت موجود را بدون تداخل آسان می کند.

styles.css - قسمت 1

#بازخورد (رنگ پس‌زمینه: # 9db09f؛ عرض: 310 پیکسل؛ ارتفاع: 330 پیکسل؛ موقعیت: ثابت؛ پایین: 0؛ سمت راست: 120 پیکسل؛ حاشیه-پایین: -270 پیکسل؛ z-index: 10000؛) #بازخورد .بخش (پس‌زمینه) : url ("img / bg.png") تکرار-x بالا سمت چپ؛ حاشیه: 1px توپر # 808f81؛ حاشیه پایین: هیچکدام؛ بالشتک: 10px 25px 25px؛) #بازخورد .color (شناور: چپ؛ ارتفاع: 4px. عرض: 20%؛ سرریز: پنهان؛) #بازخورد .color-1 (پس‌زمینه رنگ: # d3b112;) #بازخورد .color-2 (رنگ پس‌زمینه: # 12b6d3;) #بازخورد .color-3 (رنگ پس‌زمینه : # 8fd317;) #feedback .color-4 (background-color: # ca57df;) #feedback .color-5 (background-color: # 8ecbe7;) #feedback h6 (background: url ("img / feedback.png" ) بدون تکرار؛ ارتفاع: 38 پیکسل؛ حاشیه: 5 پیکسل 0 12 پیکسل؛ تورفتگی نوشتار: -99999 پیکسل؛ مکان نما: نشانگر؛) ناحیه متنی #بازخورد (رنگ پس‌زمینه: #fff؛ حاشیه: هیچ؛ رنگ: # 666666؛ فونت: 13 پیکسل "Lucida Sans"، Arial، sans-serif؛ ارتفاع: 100px؛ بالشتک: 10px؛ عرض: 236px؛ تغییر اندازه: هیچکدام؛ طرح کلی: هیچ؛ سرریز: خودکار؛ -moz-box-shadow: 4px 4px 0 # 8a9b8c؛ -webk -box-sha dow: 4px 4px 0 # 8a9b8c; box-shadow: 4px 4px 0 # 8a9b8c; )

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

در پایین قسمت ارائه شده از فایل CSS، قوانینی برای نمایش ناحیه ای از متن تعریف شده است.

styles.css - قسمت 2

#بازخورد a.submit (پس‌زمینه: url ("img / submit.png") بدون تکرار؛ حاشیه: هیچ‌کدام؛ نمایش: بلوک؛ ارتفاع: 34 پیکسل؛ حاشیه: 20 پیکسل خودکار 0؛ متن-تزیین: هیچ؛ تورفتگی نوشتاری: -99999px؛ عرض: 91px؛) #بازخورد a.submit: شناور (موقعیت پس‌زمینه: پایین سمت چپ؛) #feedback a.submit.working (موقعیت پس‌زمینه: بالا سمت راست! مهم؛ مکان‌نما: پیش‌فرض؛) #بازخورد .پیام (فونت-خانواده: Corbel، Arial، sans-serif؛ رنگ: # 5a665b؛ متن-سایه: 1px 1px 0 # b3c2b5؛ حاشیه-پایین: 20px؛) #feedback .arrow (پس زمینه: url ("img / arrows.png ( پس‌زمینه موقعیت: پایین سمت چپ؛) #بازخورد .arrow.up (موقعیت پس‌زمینه: سمت راست بالا؛) #بازخورد h6: شناور .بالا (موقعیت پس‌زمینه: پایین سمت راست؛) #بازخورد .پاسخ (اندازه قلم: 21px; حاشیه بالا: 70 پیکسل؛ تراز نوشتاری: مرکز؛ سایه متن: 2 پیکسل 2 پیکسل 0 # 889889؛ رنگ: #FCFCFC؛ نمایشگر: بلوک؛)

قسمت دوم شیوه نامه ظاهر دکمه ارسال را مشخص می کند. توجه داشته باشید که دکمه سه حالت دارد که تصاویر مربوط به آنها در یک فایل موجود است تصویر پس زمینه - submit.png... آنها فقط در صورت نیاز نمایش داده می شوند.

جی کوئری

فرم بازخورد دو حالت دارد - حداقل و حداکثر. در هنگام راه‌اندازی، حالت پیش‌فرض روی حالت مینیمم شده در سمت راست پایین صفحه تنظیم می‌شود. و jQuery زمانی که کاربر روی هدر کلیک می کند، فرم را به حداکثر حالت خود می رساند. این تابعبا اتصال یک رویداد و اجرای انیمیشن های ساده انجام می شود.

script.js - قسمت 1

$ (document) .ready (function () (// URL نسبی اسکریپت submit.php. // احتمالاً باید آن را تغییر دهید.var submitURL = "submit.php"؛ // ذخیره شی بازخورد: var feedback = $ ("#feedback")؛ $ ("# feedback h6"). روی (تابع () کلیک کنید (// مقادیر ویژگی انیمیشن ذخیره می شوند // در یک شی جداگانه: var anim = (mb: 0, // قسمت پایین: 25 // تورفتگی بالا؛ var el = $ (این) .find (. Arrow")؛ if (el.hasClass ("پایین")) (anim = (mb: -270، pt: 10 )) // انیمیشن اول فرم را به بالا یا پایین حرکت می دهد و دومی عنوان // را به طوری که با نسخه کوچک شده feedback.stop (). animate ((marginBottom: anim.mb))؛ feedback.find تراز می کند. (". بخش"). stop () .animate ((paddingTop: anim.pt)، تابع () (el.toggleClass ("پایین بالا");)));

برای ساده و سرراست نگه داشتن کد، یک شی anim در بالا ایجاد می شود که حاوی مقادیر انیمیشن است و اپراتور قرار می گیرد. اگر... بسته به وجود کلاس " پایین روی پیکان، ما در حال گسترش یا فروپاشی فرم هستیم.

بخش دوم script.jsدسته کار با AJAX با submit.php.

script.js - قسمت 2

$ ("# feedback a.submit"). live ("click", function () (var button = $ (this); var textarea = feedback.find ("textarea"); // ما از کلاس کارگر استفاده می کنیم برای چیزی فراتر از تنظیم سبک‌ها برای دکمه ارسال، //، بلکه به‌عنوان نوعی قفل برای جلوگیری از ایجاد چندین فرم نسل‌ها.if (button.hasClass ("کار") || textarea.val (). طول< 5){ return false; } // Запираем форму и изменяем стиль кнопки: button.addClass("working"); $.ajax({ url: submitURL, type: "post", data: { message: textarea.val()}, complete: function(xhr){ var text = xhr.responseText; // این عملیاتبه کاربر کمک می کند تا خطا را شناسایی کند: if (xhr.status == 404) (text = "مسیر اسکریپت submit.php نامعتبر است."؛) // دکمه و ناحیه متن را مخفی کنید، پس از آن // پاسخ دریافتی را از دکمه submit.php نشان داد .fadeOut (); textarea.fadeOut (تابع () (var span = $ (" "، (className:" پاسخ "، html: متن)) .hide () .appendTo (feedback.find (." بخش ")) .show ();)). val ("");)))؛ بازگشت نادرست ;)))))

ما از روش jQuery برای AJAX استفاده می کنیم $ .ajax ()برای تعامل با submit.php... این روش کنترل کمی بیشتر بر اتصال می دهد $ .get ()و $ .post ().

یکی از مزایای روش، قابل مشاهده بودن ویژگی های شی در تابع فراخوانی "تمام" است. در اینجا ما وضعیت پاسخ را برای انطباق بررسی می کنیم خطای 404 (صفحه پیدا نشد)و پیامی را برای کاربر نمایش می دهد که از او می خواهد مسیر را بررسی کند ارسال URL.

اکنون زمان آن است که به قسمت پایانی برویم - PHP.

PHP

PHP داده های ارسال شده از AJAX را پردازش می کند، آن ها را تایید می کند و می فرستد پیام ایمیلدر آدرس داده شده

submit.php

// آدرس خود را در اینجا وارد کنید $ emailAddress = " [ایمیل محافظت شده]"; // از session برای جلوگیری از سیل استفاده کنید: session_name (" quickFeedback "); session_start (); // اگر آخرین فرم کمتر از 10 ثانیه پیش ارسال شده باشد، // یا کاربر قبلاً 10 پیام در یک ساعت گذشته ارسال کرده باشد. ($ _ SESSION [ "lastSubmit"] && (time () - $ _SESSION ["lastSubmit"]< 10 || $_SESSION["submitsLastHour"] >10)) (die ("لطفا قبل از ارسال مجدد پیام چند دقیقه صبر کنید.")) $ _SESSION ["lastSubmit"] = time (); $ _SESSION ["submitsLastHour"] ++; نیاز به "phpmailer / class.phpmailer.php"؛ if (ini_get ("magic_quotes_gpc")) ($ _POST ["message"] = stripslashes ($ _ POST ["پیام"]);) if (mb_strlen ($ _ POST ["پیام"]، "utf-8")< 5){ die("Ваше сообщение слишком короткое."); } $msg = nl2br(strip_tags($_POST["message"])); // Используем класс PHPMailer $mail = new PHPMailer(); $mail->IsMail (); // آدرس گیرنده را اضافه کنید $ mail-> AddAddress ($ emailAddress); $ mail-> Subject = "نامه جدید از فرم بازخورد"; $ mail-> MsgHTML ($ msg); $ mail-> AddReplyTo (" [ایمیل محافظت شده]". $ _ SERVER [" HTTP_HOST "]," فرم بازخورد در صفحه نمایشی "); $ mail-> SetFrom (" [ایمیل محافظت شده]". $ _ SERVER [" HTTP_HOST "]," فرم بازخورد در صفحه نمایشی "); $ mail-> Send (); echo" متشکرم! ";

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

ایمیل با استفاده از کلاس PHPMailer ارسال می شود. توجه!فقط با PHP5 کار می کند.

روش های چندگانه PHPMailerبرای پیکربندی استفاده می شود ایمیل خروجی... روش IsMail ()به کلاس می گوید که از داخلی استفاده کند تابع PHP پست ()... روش اضافه کردن آدرس ()آدرس گیرنده را اضافه می کند (شما می توانید بیش از یک گیرنده را با تماس های اضافی به این روش اضافه کنید). پس از افزودن موضوع نامه و متن، آدرس برای پاسخ ها مشخص شده و پیام ارسال می شود.

آماده!

نتیجه

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