تگ های موضوع ساخت فرم تماس با ما با

ساخت فرم تماس با ما Ajax با PHP و جاوا اسکریپت

در دنیای توسعه وب، یکی از موارد مهم و حیاتی که به شدت بر روی تجربه کاربری تأثیر مستقیم دارد، ایجاد فرم‌های تماس یا تماس با ما است. این فرم‌ها، راهی سریع و موثر برای ارتباط کاربران با صاحبان سایت هستند. اما، طراحی یک فرم تماس معمولی، که پس از ارسال، صفحه مجدداً بارگذاری شود، ممکن است کمی آزاردهنده باشد و باعث کاهش رضایت کاربران شود. بنابراین، راه حل مناسب و کارآمد، استفاده از فناوری‌های پیشرفته مانند Ajax است، که امکان ارسال داده‌ها بدون نیاز به رفرش صفحه را فراهم می‌کند.
در این مقاله، قصد داریم به طور کامل و جامع به ساخت یک فرم تماس با ما با بهره‌گیری از Ajax، PHP و جاوا اسکریپت بپردازیم. این فرآیند شامل چندین مرحله مهم است: طراحی فرم HTML، استایل CSS، نوشتن اسکریپت جاوا اسکریپت برای ارسال داده‌ها به صورت آسنکرون، و در نهایت، پردازش داده‌ها در سمت سرور با PHP.

طراحی فرم تماس HTML

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

html  

<form id="contactForm" action="send.php" method="POST">

  <input type="text" name="name" placeholder="نام خود را وارد کنید" required>

  <input type="email" name="email" placeholder="ایمیل شما" required>

  <input type="text" name="subject" placeholder="موضوع" required>

  <textarea name="message" placeholder="متن پیام" required></textarea>

  <button type="submit">ارسال پیام</button>

</form>

<div id="formResponse"></div>

در اینجا، فرم با شناسه `contactForm` مشخص شده است، که در ادامه برای ارتباط با جاوا اسکریپت به کار می‌رود. همچنین، یک div با شناسه `formResponse` برای نمایش پیام‌های موفقیت یا خطا در هنگام ارسال فرم قرار داده‌ایم.

استایل CSS برای زیباسازی فرم

برای جذاب‌تر کردن ظاهر فرم، می‌توانید از استایل‌های CSS بهره ببرید. مثلا:

css  

#contactForm {

  width: 400px;

  margin: 50px auto;

  display: flex;

  flex-direction: column;

}

#contactForm input, #contactForm textarea {

  margin-bottom: 15px;

  padding: 10px;

  border-radius: 5px;

  border: 1px solid #ccc;

}

#contactForm button {

  padding: 10px;

  background-color: #4CAF50;

  color: white;

  border: none;

  border-radius: 5px;

  cursor: pointer;

}

#contactForm button:hover {

  background-color: #45a049;

}

#formResponse {

  margin-top: 20px;

  font-weight: bold;

}

این استایل‌ها، فرم را در وسط صفحه قرار می‌دهند و ظاهر جذابی به آن می‌دهند.

نوشتن اسکریپت جاوا اسکریپت برای ارسال آسنکرون

حالا، باید اسکریپتی بنویسیم که پس از کلیک بر روی دکمه ارسال، داده‌های فرم را به صورت آسنکرون به سرور ارسال کند، بدون اینکه صفحه رفرش شود. برای این کار، می‌توان از `XMLHttpRequest` یا Fetch API استفاده کرد. در اینجا، از Fetch API بهره می‌بریم:

javascript  

document.getElementById('contactForm').addEventListener('submit', function(e) {

  e.preventDefault(); // جلوگیری از رفرش صفحه  

  const formData = new FormData(this);

  fetch('send.php', {

    method: 'POST',

    body: formData  

  })

  .then(response => response.text())

  .then(data => {

    document.getElementById('formResponse').innerHTML = data;

    document.getElementById('contactForm').reset(); // ریست کردن فرم پس از ارسال  

  })

  .catch(error => {

    document.getElementById('formResponse').innerHTML = 'خطا در ارسال پیام!';

    console.error('Error:', error);

  });

});

در این اسکریپت، پس از کلیک بر روی دکمه ارسال، از تابع `preventDefault()` استفاده می‌کنیم تا از رفرش صفحه جلوگیری کنیم. سپس، داده‌های فرم را با `FormData` جمع‌آوری و به سمت فایل `send.php` در سرور ارسال می‌نماییم. پیام‌های پاسخ سرور، در div `formResponse` نشان داده می‌شوند.

پردازش داده‌ها در سمت سرور با PHP

حال، باید فایل `send.php` را بنویسیم تا داده‌های ارسالی را پردازش کند، در صورت صحت، ایمیل یا هر عملیات دیگر را انجام دهد و در نهایت، پیام مناسب را برگرداند.

php  

<?php  

if ($_SERVER['REQUEST_METHOD'] === 'POST') {

    $name = trim($_POST['name']);

    $email = trim($_POST['email']);

    $subject = trim($_POST['subject']);

    $message = trim($_POST['message']);
// اعتبارسنجی اولیه  

    if (empty($name) || empty($email) || empty($subject) || empty($message)) {

        echo 'لطفا تمامی فیلدها را پر کنید!';

        exit;

    }
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {

        echo 'ایمیل وارد شده معتبر نیست!';

        exit;

    }
// ارسال ایمیل یا ذخیره در دیتابیس  

    $to = 'your_email@example.com'; // ایمیل مقصد  

    $headers = "From: " . $email . "\r\n" .

               "Reply-To: " . $email . "\r\n" .

               "Content-Type: text/plain; charset=UTF-8";
$mailSent = mail($to, $subject, $message, $headers);
if ($mailSent) {

        echo 'پیام شما با موفقیت ارسال شد.';

    } else {

        echo 'متأسفانه در ارسال پیام خطایی رخ داده است.';

    }

}

?>

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

نتیجه‌گیری و نکات مهم

همانطور که مشاهده کردید، ساخت فرم تماس با ما با بهره‌گیری از Ajax، PHP و جاوا اسکریپت، امکان ایجاد تجربه کاربری بهتر و سریع‌تر را فراهم می‌آورد. این روند، نه تنها از نظر ظاهری جذاب‌تر است، بلکه کاربر را درگیر فرآیندهای غیرضروری مانند رفرش صفحه نمی‌کند، و در نتیجه، رضایت آن‌ها را افزایش می‌دهد.
در کنار این، نکات مهمی وجود دارد که باید رعایت شوند: امنیت، جلوگیری از حملات CSRF و XSS، و همچنین، اعتبارسنجی سرور و کلاینت. توصیه می‌شود، برای پروژه‌های بزرگ‌تر، از فریم‌ورک‌ها و کتابخانه‌های معتبر بهره ببرید و سیستم‌های لاگ‌گیری و مدیریت خطا را در نظر داشته باشید.
در نهایت، با رعایت همه این موارد، می‌توانید یک فرم تماس عالی و کارآمد بسازید که هم قابل اعتماد باشد و هم تجربه کاربری بی‌نظیری را فراهم کند.