ক্যাটাগরি সমূহ

হোম

HTML + Basic CSS ব্যবহার করে Contact Form তৈরী

GFX CLICK July 19, 2025



🧾 Contact Form-এর মূল অংশগুলো:

  • নাম লেখার বক্স

  • ইমেইল লেখার বক্স

  • মেসেজ লেখার বড় বক্স

  • সাবমিট বাটন

✅ Simple Contact Form (HTML + Basic CSS):


<!DOCTYPE html>
<html>
  <head>
    <title>যোগাযোগ ফর্ম</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f2f2f2;
        padding: 20px;
        display: flex;
        justify-content: center;
      }

      .contact-form {
        background: white;
        padding: 30px;
        border-radius: 10px;
        width: 100%;
        max-width: 400px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
      }

      .contact-form h2 {
        margin-bottom: 20px;
        color: #333;
      }

      .contact-form input,
      .contact-form textarea {
        width: 100%;
        padding: 10px;
        margin-bottom: 15px;
        border: 1px solid #ccc;
        border-radius: 5px;
      }

      .contact-form button {
        background-color: #3498db;
        color: white;
        padding: 10px;
        border: none;
        border-radius: 5px;
        width: 100%;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <div class="contact-form">
      <h2>যোগাযোগ করুন</h2>
      <form>
        <input type="text" placeholder="আপনার নাম" required>
        <input type="email" placeholder="আপনার ইমেইল" required>
        <textarea rows="5" placeholder="আপনার বার্তা..." required></textarea>
        <button type="submit">পাঠান</button>
      </form>
    </div>
  </body>
</html>

🧠 কিছু গুরুত্বপূর্ণ বিষয়:

  • input = ছোট বক্স (নাম, ইমেইল)

  • textarea = বড় বক্স (মেসেজ)

  • button = পাঠানোর জন্য

  • required = ফাঁকা থাকলে সাবমিট হবে না

🔄 এখন কীভাবে কাজ করে?

এই ফর্ম এখন শুধু ফ্রন্টএন্ড (দেখানোর জন্য)।
যদি তুমি চাও যে পাঠানো ডেটা ইমেইলে যাক বা ডাটাবেসে জমা হোক, তাহলে ব্যাকএন্ড (PHP, Node.js ইত্যাদি) দরকার।

Comments

Post a Comment