ایجاد یک فرم تماس تعاملی با HTML، CSS و جاوا اسکریپت

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

طراحی فرم با HTML و CSS

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

<form id="contactForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <label for="message">Message:</label>
  <textarea id="message" name="message" required></textarea>
  <button type="submit">Send</button>
</form>

در مرحله بعد، اجازه دهید مقداری CSS اضافه کنیم تا فرم خود را از نظر بصری جذاب کنیم:

form {
  display: flex;
  flex-direction: column;
}
input, textarea {
  margin-bottom: 15px;
  padding: 10px;
}
button {
  padding: 10px 20px;
}

تعاملی کردن فرم با جاوا اسکریپت

اکنون، بیایید فرم خود را با جاوا اسکریپت تقویت کنیم تا تعاملی تر شود. ما اعتبار سنجی فرم را اضافه می کنیم تا مطمئن شویم کاربر ورودی معتبری ارائه می دهد:

document.getElementById('contactForm').addEventListener('submit', function(event) {
  var name = document.getElementById('name').value;
  var email = document.getElementById('email').value;
  var message = document.getElementById('message').value;

  if (name == "" || email == "" || message == "") {
    alert("All fields must be filled out");
    event.preventDefault();
  } else if (!email.includes("@")) {
    alert("Please enter a valid email address");
    event.preventDefault();
  }
});

این یک شکل ساده اعتبارسنجی و فقط یک نقطه شروع است. اگر به دنبال ایجاد فرم های پیچیده تر هستید، ممکن است به اعتبارسنجی پیچیده تری نیاز داشته باشید. شرکت‌های حرفه‌ای طراحی وب، مانند GetSmartWebsite، اغلب از کتابخانه‌هایی مانند jQuery Validate استفاده می‌کنند تا ضمن ارائه یک تجربه کاربرپسند، از صحت داده‌های فرم اطمینان حاصل کنند.

اتصال فرم به سرور با Fetch API

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

document.getElementById('contactForm').addEventListener('submit', function(event) {
  event.preventDefault();

  var name = document.getElementById('name').value;
  var email = document.getElementById('email').value;
  var message = document.getElementById('message').value;

  fetch('https://your-server.com/contact', {
    method: 'POST',
    body: JSON.stringify({
      name: name,
      email: email,
      message: message
    }),
    headers: {
      'Content-Type': 'application/json'
    }
  }).then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  }).then(data => {
    console.log('Success:', data);
  }).catch((error) => {
    console.error('Error:', error);
  });
});

این اسکریپت هنگام ارسال فرم، داده های فرم را به سرور شما ارسال می کند. حتما تعویض کنید https://your-server.com/contact با URL واقعی نقطه پایانی سرور شما.

نتیجه

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

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