آموزش ایجاد فرم تماس برای وبسایت ها و وبلاگ ها

[saberi]

فرم تماس با ما یکی از ضروری ترین صفحات هر وبسایت یا وبلاگ است. لازمه ی ساخت یک فرم تماس استفاده  از زبان نشانه گذاری HTML و CSS و یک زبان برنامه نویسی مانند PHP است. هرچند می‌توان از جاوا اسکریپت هم استفاده کرد.

در این مطلب نحوه‌ی ساخت فرم تماس با ما با استفاده از HTML و PHP (با استفاده از تابع mail)  آموزش داده شده است.

قابلیت های فرم تماس با HTML و PHP

• دریافت اطلاعات مخاطب شامل: نام و نام خانوادگی، پست الکترونیک
  
• دریافت آدرس آی پی (IP) مخاطب
  
• دریافت پیام مخاطب
  
• اعتبارسنجی (Validation) اطلاعات تکمیل شده توسط کاربر
  
• ارسال تمام این موارد به آدرس پست الکترونیک شما
  

مرحله اول - ساخت فرم تماس با کدهای HTML

خب اول نگاهی میندازیم به کدهای HTML در فرم تماس

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

اولین مرحله برای ساخت هر نوع فرمی مربوط میشه به کدهای HTML که البته میشه اونو با استفاده از CSS زیباتر کرد (فعلا اینجا با css کاری نداریم)

برای ایجاد فرم در زبان HTML به تگ شروع  یعنی<Form> نیاز داریم که خصوصیات مختلفی داره

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

اگه توجه کنین می بینین که در تگ <Form> از خاصیت method و action استفاده شده که به ترتیب نحوه‌ی ارسال اطلاعات و مکان ارسال اطلاعات رو واسه پردازش شدن تعیین می‌کنه

در این فرم از متد <Post> برای ارسال اطلاعات فرم به صفحه‌ی example.php استفاده کردیم.

از دیگر تگ‌هایی که برای ساخت فرم میشه ازش استفاده کرد تگ <Input>هست:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

اولین فیلد اطلاعاتی رو ساختیم و از کاربر نام و نام خانوادگیش رو درخواست کردیم.

خاصیت name نام و نام خانوادگی مخاطب رو با برچسب Name به صفحه  example.php که در تگ  <Form> مشخص کردیم، جهت پردازش ارسال می‌کنه. خاصیت type هم مقدار text رو دریافت کرده که نشون میده این فیلد یک فیلد متنی است.

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

در اینجا هم مثل فیلد قبل عمل کردیم اما به جای " name=" Name از " name=" Email استفاده کردیم.

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

تگ  <textarea> برای وارد کردن اطلاعاتی که بیش از یک سطر هستن استفاده مشه و تگ پایانی اون <textarea/> است.

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

برای فیلد پیام به جای تگ  <Input> از تگ <textarea> استفاده کردیم تا فضای بیشتری واسه نوشتن پیام در اختیار کاربرقرار بگیره .
برای تغییر اندازه‌ی فیلد می تونین مقدار cols و rows رو کم و زیاد کنین.

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

در قسمت آخر فرم، دکمه ارسال رو با استفاده از " type= " submit  نشون میدیم تا اطلاعات فرم به صفحه‌ example.php ارسال شه.


مرحله دوم - ساخت فرم تماس با کدهای PHP

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

کدهای بالا، محتویات صفحه‌ی example.php هست.

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

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

و بجای نوشته‌ی قرمز رنگ، آدرس ایمیل خودتان یا آدرسی که تمایل دارید اطلاعات به آن ارسال شوند را وارد نمایید.
در فرم تماس از تابع () mail در php استفاده کردیم. ممکنه این تابع تو هاست لینوکس شما غیرفعال باشه، که تو این حالت دو راه دارین: یا اینکه از مدیر سرورتون بخواین براتون فعالش کنه یا اینکه از SMTP استفاده کنین تا ایمیل ها ارسال شه.

دو تا کدی که توضیح دادم رو اینجا پیوست کردم که می‌تونین دانلودش کنین و تو سایت یا وبلاگتون ازشون استفاده کنین.

موفق باشین