یک فرم بازخورد تنظیم کنید. طراحی وب و بهینه سازی موتورهای جستجو. فرم تماس php - ساختار

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

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

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

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

فرم بازخورد در PHP

پیام بگذارید:

اسم شما:



پست الکترونیک:

شماره تلفن:

پیام:

ناحیه متن می تواند شامل تعداد نامحدودی کاراکتر --> باشد

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

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

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

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

سلام دوستان! در این درس در مورد آن صحبت خواهیم کرد ایجاد یک فرم بازخورد، یا همانطور که مردم می گویند "فرم تماس".

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

من سعی خواهم کرد تا آنجا که ممکن است تمام مراحل تنظیم یک فرم تماس را با جزئیات توضیح دهم و از این نظر، درس بسیار طولانی خواهد بود 🙂

ایجاد فرم تماس در وردپرس

در همان ابتدا می خواهم به این نکته اشاره کنم که افزونه فرم تماس 7 روسی شده است و هیچ مشکلی با آن نخواهید داشت. به عنوان گواه حرف من، دانلود شدن این افزونه می تواند باشد بیش از 25 میلیون بار!!!

و بنابراین، بیایید شروع کنیم. برای ایجاد یک فرم بازخورد باید موارد زیر را انجام دهید:

1. افزونه Contact Form 7 را نصب و فعال کنید. چگونه می توانید افزونه ها را نصب کنید.

2. پس از فعال سازی به فرم تماس 7 -> فرم ها.

3. در پنجره باز شده خط را کپی کنیدبا کد تعبیه شده

4. کد کپی شده را در صفحه ای که می خواهیم فرم بازخورد اضافه کنیم، قرار دهید. پس از درج کد، فراموش نکنید که تغییرات را با کلیک بر روی دکمه ذخیره کنید "به روز رسانی".

مثل این نتیجهبا افزودن یک فرم تماس، دریافت می کنیم:

آماده!شما نصب کردید لباس کاربازخورد به سایت شما!

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

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

برای این کار باید فیلدهای زیر را در فرم پر کنید:

• نام (فیلد الزامی)
• نام خانوادگی
• تلفن (فیلد الزامی)
• میدانی با انتخاب زمان مناسب برای تماس

پس از تصمیم گیری در مورد فیلدها، اقدام به ایجاد فرم می کنیم:

1. برو به فرم تماس 7 -> افزودن جدید.

2. در پنجره باز شده دکمه را فشار دهید "جدید اضافه کن". در صورت لزوم، یک زبان را از لیست کشویی زیر انتخاب کنید. توسط زبان پیش فرض روسی خواهد بود.

3. پس از فشار دادن دکمه، به صفحه ای هدایت می شوید که در آن ویرایشگر فرم.

در بالای صفحه فیلدی است که در آن می نویسیم عنوان فرم جدید . AT قالب فرمفیلدهای فرم استاندارد را می بینیم که به طور پیش فرض ایجاد می شوند.

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

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

5. اکنون باید فیلدهای جدیدی ایجاد کنیم: نام(اجباری) نام خانوادگی, تلفن(اجباری) زمان تماس مناسب.

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

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

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

پس از افزودن فیلدهای نام، نام خانوادگی و تلفن، ویرایشگر فرم به شکل زیر خواهد بود:

7. حالا یک فیلد ایجاد می کنیم زمان تماس مناسببرای انجام این کار، فشار دهید "تولید برچسب"و انتخاب کنید "فهرست کشویی".

در زمینه انتخابما در هر خط یک گزینه می نویسیم، در مورد ما این زمان از 8-00 تا 18-00 در فواصل دو ساعت است. پس از پر کردن، خطوط کد مربوطه را در قالب فرم و الگوی نامه کپی کنید.

در پایان، شما باید به چیزی شبیه به این پایان دهید:

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

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

آماده!در اینجا ما با شما ایجاد کرده ایم فرم سفارش پاسخ به تماس از ابتدا.

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

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

امیدوارم این آموزش برای شما مفید بوده باشد و افزونه فرم تماس ۷ را کشف کرده باشید.

اگر در حین ایجاد فرم سؤالی دارید یا چیزی کار نمی کند - در نظرات بنویسید و سوال بپرسید.

و این را به خاطر بسپار فرم بازخورد در سایت - یک ویژگی مورد نیاز در صفحه تماس.

سلام دوستان! در این درس در مورد ایجاد فرم بازخورد یا به قول مردم «فرم تماس» صحبت خواهیم کرد. امروز ما به شما نشان خواهیم داد که چگونه می توانید با استفاده از افزونه فرم تماس ۷ مورد علاقه من در عرض چند دقیقه یک فرم بازخورد سبک، زیبا و کاربردی ایجاد کنید. من سعی می کنم تمام مراحل تنظیم فرم تماس را با جزئیات تا حد امکان توضیح دهم. و در ارتباط با این، درس بسیار طولانی خواهد بود :) ایجاد فرم تماس در وردپرس در همان ابتدا، می خواهم توجه داشته باشم که افزونه فرم تماس 7 روسی شده است و هیچ مشکلی با آن نخواهید داشت. . به عنوان گواه حرف من، این واقعیت است که این افزونه ...

مرور

به درس رای دهید

100

مقطع تحصیلی

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

یکی از متداول ترین وظایف در عمل، اجرای فرم بازخورد است. توبیش کد HTML خود را می نویسد، آن را در CSS استایل می دهد، ایجاد می کند اسکریپت PHPاما، که داده های دریافتی از کاربر را پردازش می کند و آنها را به ایمیل ما ارسال می کند، با نوشتن یک اسکریپت JS که فرم را برای کفایت داده های ورودی بررسی می کند، فرزندان ما را از هرزنامه محافظت می کند، به طوری که ما صندوق پستیاز حملات ربات سقوط نکرد.

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

بنابراین، بیایید شروع به ایجاد یک فرم بازخورد کنیم:

HTML

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

< form method= "post" action= "mail.php" > < div class = "left" > < label for = "name" >نام: < input maxlength= "30" type= "text" name= "name" /> < label for = "phone" >تلفن: < input maxlength= "30" type= "text" name= "phone" /> < label for = "mail" >پست الکترونیک: < input maxlength= "30" type= "text" name= "mail" /> < div class = "right" > < label for = "message" >پیام: < textarea rows= "7" cols= "50" name= "message" > < input type= "submit" value= "ارسال" />

و از نظر بصری اکنون به این شکل است:

موافقم، تا اینجا همه چیز زشت است و هیچ چیز مشخص نیست، اما ما تازه شروع کرده ایم.

کد بالا را با جزئیات در نظر بگیرید:

• < form method= "post" action= "mail.php" > …

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

• < input maxlength= "30" type= "text" name= "name" />

  
  بعد ما ورودی داریم. اینها در واقع خود فیلدهای فرم هستند که کاربران اطلاعات مورد نیاز ما را در آنها وارد می کنند (نوع = "متن" نشان می دهد که متن خواهد بود). ویژگی maxlength مشخص می کند که کاربر چند کاراکتر می تواند در فیلد فرم داده شده وارد کند. مهمترین ویژگی نام است - نام یک فیلد خاص را مشخص می کند. با این نام ها است که اسکریپت PHP اطلاعات وارد شده به آن را بیشتر پردازش می کند. در صورت تمایل، می‌توانید ویژگی placeholder را نیز تنظیم کنید، که متنی را در داخل فیلد نمایش می‌دهد که با قرار دادن مکان‌نما در داخل آن ناپدید می‌شود. یکی از مشکلات مربوط به مکان نگهدار این است که توسط برخی از مرورگرهای قدیمی پشتیبانی نمی شود.

• < label for = "name" >نام:

  
  اگر دارای متغیرهایی رها شده باشیم استفاده می شود. برچسب فیلد منظم، ویژگی for می گوید که به کدام فیلد اشاره دارد امضا داده شده. مقدار نشان دهنده نام رشته مورد علاقه ما است.

• < textarea rows= "7" cols= "50" name= "message" >

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

• < input type= "submit" value= "ارسال" />

  
  Type="submit" به ما می گوید که این دکمه ای برای ارسال فرم است و مقدار متنی را که در داخل این دکمه قرار خواهد گرفت را مشخص می کند.

• < div class = "right" >

  
  فقط برای طراحی بصری بیشتر فرم استفاده می شود.

css

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

ما از این کد استفاده کردیم:

فرم (پس‌زمینه: #f4f5f7؛ padding: 20px; ) فرم. سمت چپ، فرم سمت راست (نمایش: بلوک درون خطی؛ تراز عمودی: بالا؛ عرض: 458 پیکسل؛ ) فرم. سمت راست ( padding- چپ: 20px; ) برچسب (نمایشگر: بلوک؛ اندازه قلم: 18px؛ تراز نوشتاری: مرکز؛ حاشیه: 10px 0px 0px; ) ورودی، textarea ( حاشیه: 1px solid #82858D; padding: 10px; اندازه قلم: 16px؛ عرض: 436px؛ ) textarea (ارتفاع: 98px؛ margin- bottom: 32px; ) input[ type= "submit" ] (عرض: 200px؛ شناور: سمت راست؛ حاشیه: هیچ؛ پس زمینه: #595B5F; رنگ: #fff؛ تبدیل متن: بزرگ؛ )

من دلیلی در توصیف جزئیات CSS نمی بینم، فقط توجه شما را به نکات کلیدی جلب می کنم:

1. نیازی به نوشتن طرح برای هر تگ در فرم نیست. سعی کنید انتخابگرهای خود را به گونه ای بسازید که بتوانید تمام عناصر مورد نیاز خود را در چند خط کد استایل دهید.
2. برای شکستن خطوط و ایجاد تورفتگی از برچسب های اضافی بر اساس نوع استفاده نکنید < br>, < p> و غیره، این وظایف کاملاً توسط CSS با نمایش ویژگی انجام می شود: بلوک و حاشیه با padding. بیشتر در مورد اینکه چرا نباید استفاده کنید < br> در طرح بندی، به طور کلی، می توانید تگ br را در مقاله بخوانید، اما آیا واقعاً به آن نیاز است؟ .
3. از طرح بندی جدولی برای فرم ها استفاده نکنید. این برخلاف معنایی این برچسب است و موتورهای جستجو عاشق کد معنایی هستند. برای تشکیل ساختار بصری سند، تگ‌های div برای ما کافی است و نمایش: ویژگی‌های بلوک درون خطی تنظیم شده در CSS (بلوک‌ها را در یک ردیف مرتب می‌کند) و تراز عمودی: بالا (از پخش شدن آنها در صفحه جلوگیری می‌کند. )، ارتفاع و ویلای لازم را برای آنها تنظیم می کنیم، هیچ چیز اضافی نیست و همه چیز همانطور که نیاز داریم مرتب شده است.

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

PHP

خوب، وقت آن است که فرم خود را قابل اجرا کنیم.

ما به دایرکتوری ریشه سایت خود می رویم و فایل mail.php را در آنجا ایجاد می کنیم که قبلاً مسیر آن را در ویژگی action تگ form مشخص کرده ایم.

در نهایت کد او به شکل زیر خواهد بود:

\"javascript: history.back()\" >برگردید

" ; اگر (! خالی ($_POST [ "نام" ] ) و ! خالی ($_POST [ "تلفن" ] ) و ! خالی ($_POST [ " نامه" ] ) و ! خالی ($_POST [ "پیام" ] ) ) ($name = trim (strip_tags ($_POST ["name" ] ) ) ) ; $phone = trim (strip_tags ($_POST [ "phone" ] ) ) ; $mail = trim (strip_tags ($_POST [ "mail" ] ) ) ؛ $message = trim (strip_tags ($_POST [ "message" ] ) ) ؛ mail (, , "Sent to you: " . $name . "
شماره او: " . $phone ."
نامه او: ". $mail . "
پیام او:. $message , ) ; اکو "پیغام شما با موفقیت ارسال شد!
به زودی پاسخ دریافت خواهید کرد
$بازگشت"; خروج؛ ) else (echo ; exit ; ) ?>

می توانید از بحث در مورد بخش های HTML و CSS این سند صرف نظر کنید. در اصل، این یک صفحه معمولی از سایت است که می توانید آن را به دلخواه و نیاز خود طراحی کنید. بیایید مهمترین بخش آن را در نظر بگیریم - اسکریپت PHP برای پردازش فرم:

$back = "

\"javascript: history.back()\" >برگردید

" ;

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

اگر (! خالی ($_POST [ "نام" ] ) و ! خالی ($_POST [ "تلفن" ] ) و ! خالی ($_POST [ " نامه" ] ) و ! خالی ($_POST [ "پیام" ] ) ) ( // بخش داخلی هندلر) else (پژواک "لطفاً تمام فیلدها را برای ارسال پیام پر کنید! $back"; خروج؛ )

در اینجا چک فرم را برای پر بودن فیلدها محکم می کنیم. همانطور که حدس زدید، در قسمت $_POST["name"]، مقدار ویژگی name ورودی های خود را در گیومه می نویسیم.

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

در مرحله بعد، آن را در قسمت داخلی کنترل کننده فرم قرار دهید:

$name = trim (strip_tags ($_POST [ "name" ] ) ; $phone = trim (strip_tags ($_POST [ "تلفن" ] ) ; $mail = trim (strip_tags ($_POST [ "mail" ] ) ; $message = trim (strip_tags ($_POST [ "پیام" ] ) ;

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

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

من توصیه نمی‌کنم که حفاظت از فرم در سمت سرور را به نفع JS کنار بگذارید، زیرا اگرچه بسیار نادر است، اما افراد منحصر به فردی با JS غیرفعال در مرورگر وجود دارند.

پس از تمیز کردن برچسب ها، پیام ارسال پیام را اضافه کنید:

پست ( "[email protected]", "ایمیل از your_site_address", "تو نوشت: " . $name . "
شماره او: " . $phone ."
نامه او: ". $mail . "
پیام او:. $message، "Content-type:text/html;charset=windows-1251") ;

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

1. "[email protected]" - نامه خود را بین نقل قول ها در اینجا قرار دهید
2. "ایمیل از your_site_address" موضوع پیامی است که به ایمیل ارسال می شود. شما می توانید هر چیزی را در اینجا بنویسید.
3. "برای شما نوشت: ".$name." < br /> شماره او این است: ".$phone." < br /> نامه او: ".$mail." < br /> پیام آن: ".$message - ما متن خود پیام را تشکیل می دهیم. $name - اطلاعات پر شده توسط کاربر را از طریق دسترسی به فیلدهای مرحله قبل درج می کنیم، در نقل قول معنی این فیلد را با تگ توضیح می دهیم. < br /> ما یک خط شکسته می کنیم تا پیام به طور کلی قابل خواندن باشد.
4. Content-type:text/html;charset=windows-1251 - در پایان یک نشانه صریح از نوع داده ارسال شده در پیام و رمزگذاری آن وجود دارد.

مهم!

رمزگذاری مشخص شده در "سر" سند ( < meta http- equiv= "Content-Type" content= "text/html; charset=windows-1251" /> )، رمزگذاری از پیام Content-type:text/html;charset=windows-1251 و به طور کلی رمزگذاری فایل PHP باید مطابقت داشته باشد، در غیر این صورت در پیام های دریافتی از طریق پست، به جای حروف روسی یا انگلیسی، "کلمات دیوانه کننده" " نمایش داده خواهد شد.

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

بررسی فرم برای کفایت داده های ورودی

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

این را می توان هم در PHP در سمت سرور و هم با JS در سمت مشتری انجام داد. من از گزینه دوم استفاده می کنم، زیرا به این ترتیب فرد می تواند فوراً متوجه شود که چه اشتباهی انجام داده و بدون انجام انتقال اضافی صفحه، اشتباه را تصحیح کند.

کد اسکریپت در همان فایلی که قسمت HTML فرم را داریم درج می شود. برای مورد ما، به این صورت خواهد بود:

< script>تابع checkForm(form) (var name = form. name. value; var n = name. match(/ ^[ A- Za- zA- Za-z] * [ A- Za- zA- Za-z] + $/ ) ؛ اگر (! n) ( هشدار( "نام اشتباه وارد شده است، لطفا خطا را اصلاح کنید") ؛ بازگشت نادرست ; ) var phone = فرم. تلفن. مقدار؛ var p = تلفن. match(/ ^[ 0 - 9 + ] [ 0 - 9 - ] * [ 0 - 9 - ] + $/ ); اگر (! p) ( هشدار( "تلفن اشتباه وارد شده است") ؛ بازگشت نادرست ; ) var mail = فرم. پست مقدار؛ var m = نامه . match(/ ^[ A- Za- z0- 9 ] [ A- Za- z0- 9 \. _- ] * [ A- Za- z0- 9 _] *@ ([ A- Za- z0- 9 ] + ([ A- Za- z0- 9 - ] * [ A- Za- z0- 9 ] + ) * \. ) + [ A- Za- z] + $/ ) ; اگر (! m) (هشدار( "ایمیل وارد شده اشتباه است، لطفا خطا را اصلاح کنید") ؛ بازگشت نادرست ; ) بازگشت true ; )

خوب، اکنون تحلیل معمول:

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

< form method= "post" action= "mail.php" onSubmit= "return checkForm(this)" >

اکنون، نقطه به نقطه، ترکیب چک را در نظر می گیریم:

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

فرم بازخورد برای سایتکه به شما نشان خواهم داد بر اساس استفاده از تکنولوژی Ajax است. اما نگران نباشید، لازم نیست این را بدانید، همه چیز آماده است، تنها چیزی که باقی می ماند این است که این فرم را نصب کنید و آن را برای خودتان سفارشی کنید!

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

فرم تماس php با ایمیل

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

1. JQ Transform- افزونه ای که به شما امکان می دهد فرم بازخورد ما را زیبا کنید!

2. formValidator- و این افزونه فرم تماس را از نظر صحت اطلاعات وارد شده بررسی می کند و در این صورت راهنمای ابزار را نمایش می دهد!

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

نکته برای افراد باهوش:

فرم بازخورد برای سایت را می توان در HTML ساخت! اما فقط زمانی کار خواهد کرد کمک PHP! و دیگر هیچ!

این من برای کسانی هستم که به دنبال فرم تماس فقط HTML هستند. شما این کار را انجام خواهید داد، اما کار نمی کند!

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

من این فرم بازخورد را در سایت www.tutorialzine.com پیدا کردم، پیوند مستقیماً به صفحه اصلی منتهی می شود، یعنی. سایت نویسنده این فرم!

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

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

1. این فرم بازخورد برای بورژوازی طراحی شده است، و از آنجا دانلود می شود، بنابراین به جای کاراکترهای معمولی روسی - krakozyably برای شما ارسال می کند. رمزگذاری را درک کنید. و به طور کلی، تمام "مهرها" با این همراه خواهند بود!

2. اسکریپت اعتبار سنجی در ابتدا حروف ما را درک نمی کند، بنابراین آنها باید در آنجا نوشته شوند!

3. حتی بعد از این اقدامات، اگر موضوع نامه را به زبان روسی مشخص کنید، نامه با موضوع می آید - بدون موضوع (امیدوارم درست نوشتم)، اگر کدگذاری را در فایل کلاس PHPMailer مشخص کنید، این مشکل برطرف می شود.

4. در شکل اصلی، متن در قسمت های ورودی به پایین فشار داده شده است، و نه در وسط. این یک نقص پلاگین JQTransform است.

خوب، مانند همه نقاشی شده و هشدار داد. بیایید جلوتر برویم!

در پاسخ به چنین سوالاتی اولین چیزی که به ذهن می رسد این است: "راحت و کار". و این به طور کلی منطقی است. راستی وگرنه داشتن یک فرم بازخورد زیبا در سایت که استفاده نمی شود چه فایده ای دارد؟ اما اول از همه.

بسیاری از اشکال - یک هدف

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

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

این به طور منطقی منجر به نتیجه ای می شود که قبلاً در بالا بیان شده است - فرم های بازخورد باید راحت باشند و باید کار کنند!

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

فرم‌های بازخورد بسیار متنوعی می‌تواند وجود داشته باشد («سفارش تماس»، «پرسش یک سؤال»، «بازخورد بگذارید»، «فرم سفارش را پر کنید»، «تماس با مدیر»، و غیره) و می‌توان از آنها استفاده کرد. برای کارهای مختلف اما هدف برای همه اساساً یکسان خواهد بود - ایجاد ارتباط بین بازدیدکننده سایت و مدیر یا مالک آن، برای به دست آوردن مخاطبین بازدیدکننده برای تعامل بیشتر با او.

هفت نکته که باید به خاطر بسپارید

بیایید چند قانون ساده را به یاد بیاوریم که باید هنگام توسعه و ارسال یک FOS در یک وب سایت در نظر بگیرید.

فرم باید طوری قرار گیرد که بازدید کننده بتواند به راحتی آن را پیدا کند.

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

به طور سنتی، فرم ها را می توان در هدر سایت یا در صفحه تماس قرار داد.

می‌توانید به‌صورت اختیاری فرم‌های کلیدی را در فوتر کپی کنید تا بازدیدکنندگانی که کل صفحه را مشاهده کرده‌اند مجبور به پیمایش مجدد به بالا نشوند:



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

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

فرم باید در همه دستگاه ها و در همه مرورگرها به طور یکسان نمایش داده شود و به درستی کار کند.

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

فرم باید کوتاه و واضح باشد.

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

اگر خدمات شامل دریافت کاملاً باشد اطلاعات دقیق، کار را برای مشتری ساده کنید (البته در صورت امکان). چند فیلد کلیدی را که باید پر کنید برجسته کنید:



به نظر راحت تر از مثلاً:



بهتر است تماس بگیرید و هر آنچه را که نیاز دارید به صورت شفاهی روشن کنید، اما پر کردن فرم را برای بازدیدکننده آسان تر کنید. و در نتیجه شانس تماس او با شما را افزایش دهید!

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

فرم باید طراحی دلپذیر و کاربردی داشته باشد.

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

بهتر است از ترکیب تیره روی تاریکی خودداری کنید. برای مثال، اگر روی پس‌زمینه آبی تیره یک نوشته قرمز تیره یا سبز تیره ایجاد کنید «پیام شما ارسال شد»، به سادگی قابل مشاهده نخواهد بود.

فرم باید حاوی یک فراخوان برای اقدام باشد.

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

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

فرم باید به راحتی رول شود.

بنابراین، فرم به راحتی پیدا می شود، طراحی زیبایی دارد و به راحتی پر می شود. چه چیز دیگری؟

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



به نظر می رسد یک چیز بی اهمیت است، اما تصویر کلی می تواند خراب شود.
به عنوان مثال، یک بازدیدکننده درخواستی را در سایت گذاشته و می خواهد به مشاهده سایت بازگردد. ولی! فرم آویزان است، ناپدید نمی شود، نحوه بستن آن مشخص نیست. یا گزینه دیگری - بازدید کننده نظر خود را در مورد نوشتن یک برنامه تغییر داد، اما تصمیم گرفت با خود تماس بگیرد. می تواند ناخوشایند باشد.

تنظیم پیام پاسخ



یه چیزی شبیه اون…

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

خلاصه کردن

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