عملی: ساخت یک فرم تماس با ما ساده

عملی: ساخت یک فرم تماس با ما ساده! 💌

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

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

کد HTML فرم تماس با ما:

بیایید خط به خط این فرم رو بسازیم:

<!-- شروع تگ فرم اصلی -->
<form action="/submit-contact.php" method="post"> <!-- فرض می‌کنیم اطلاعات به submit-contact.php ارسال می‌شه با متد POST -->

  <h3 style="color: #deb887; margin-bottom: 20px;">ارتباط با ما</h3> <!-- عنوان فرم -->

  <div style="margin-bottom: 15px;"> <!-- یک div برای گروه‌بندی هر فیلد و برچسب -->
    <label for="contact-name" style="display: block; margin-bottom: 5px; color: #d2691e;">نام و نام خانوادگی:</label>
    <input type="text" id="contact-name" name="contact_name" placeholder="نام شما" required style="width: 95%; padding: 8px; border: 1px solid #deb887; border-radius: 4px;">
    <!--
      - type="text": برای گرفتن نام
      - id="contact-name": برای اتصال به label
      - name="contact_name": نامی که به سرور فرستاده می‌شه
      - placeholder: متن راهنما
      - required: این فیلد باید پر بشه تا فرم ارسال بشه
      - style: استایل‌های ساده برای ظاهر بهتر
    -->
  </div>

  <div style="margin-bottom: 15px;">
    <label for="contact-email" style="display: block; margin-bottom: 5px; color: #d2691e;">آدرس ایمیل:</label>
    <input type="email" id="contact-email" name="contact_email" placeholder="your.email@example.com" required style="width: 95%; padding: 8px; border: 1px solid #deb887; border-radius: 4px;">
    <!--
      - type="email": برای گرفتن ایمیل (مرورگر اعتبارسنجی اولیه انجام می‌ده)
      - name="contact_email": نام برای ارسال
      - required: این فیلد هم اجباریه
    -->
  </div>

  <div style="margin-bottom: 15px;">
    <label for="contact-message" style="display: block; margin-bottom: 5px; color: #d2691e;">پیام شما:</label>
    <textarea id="contact-message" name="contact_message" rows="5" placeholder="پیام خود را اینجا بنویسید..." required style="width: 95%; padding: 8px; border: 1px solid #deb887; border-radius: 4px; resize: vertical;"></textarea>
    <!--
      - textarea: برای وارد کردن متن‌های طولانی‌تر
      - rows="5": ارتفاع پیش‌فرض (۵ خط)
      - resize: vertical: اجازه می‌ده کاربر ارتفاع کادر پیام رو تغییر بده
    -->
  </div>

  <div style="margin-top: 20px;">
    <button type="submit" style="padding: 10px 20px; background-color: #deb887; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 1em;">ارسال پیام</button>
    <!--
      - button type="submit": دکمه برای ارسال فرم
      - style: استایل ساده برای دکمه
    -->
  </div>

</form> <!-- پایان تگ فرم -->

توضیحات بخش‌های مهم:

• <form action=”/submit-contact.php” method=”post”>: فرم ما اطلاعات رو به یه فایل به اسم submit-contact.php در همون پوشه سایت می‌فرسته و از متد POST استفاده می‌کنه که امن‌تره.
• <label for=”…”>: با خصوصیت for، هر برچسب رو به فیلد ورودی مربوطه‌اش وصل کردیم تا کلیک روی برچسب، فیلد رو فعال کنه.
• <input type=”text” …> و <input type=”email” …>: فیلدهای نام و ایمیل رو ساختیم. خصوصیت required باعث می‌شه کاربر نتونه فرم رو بدون پر کردن این فیلدها ارسال کنه.
• <textarea …>: برای گرفتن پیام کاربر، از تگ textarea استفاده کردیم که فضای بیشتری برای نوشتن داره.
• <button type=”submit”>: دکمه ارسال پیام رو ساختیم.
• استایل‌های Inline: برای اینکه فرم کمی ظاهر بهتری داشته باشه، از استایل‌های درون‌خطی (Inline CSS) استفاده کردیم. در پروژه‌های واقعی، بهتره این استایل‌ها رو در یک فایل CSS جداگانه بنویسید.

**نکته مهم:** این کد فقط بخش HTML فرم رو ایجاد می‌کنه. برای اینکه واقعاً پیام کاربر دریافت و پردازش بشه، باید یک اسکریپت سمت سرور (مثل PHP, Python, Node.js) در آدرس /submit-contact.php بنویسید که اطلاعات رو از فرم بگیره و مثلاً به ایمیل شما ارسال کنه.

حالا شما یه فرم تماس اولیه دارید! می‌تونید با اضافه کردن فیلدهای دیگه یا تغییر استایل‌ها، اون رو کامل‌تر کنید. آفرین به شما که قدم بزرگی برداشتید! 🚀