ক্যাটাগরি ট্রিগার :

6/recent/ticker-posts

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

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 ইত্যাদি) দরকার।

আপনার প্রিয়জনের সাথে শেয়ার করুন

আপনার মন্তব্য পোস্ট করুন

0 Comments