CSS से कॉन्टैक्ट फॉर्म कैसे बनाएं?

कॉन्टैक्ट फॉर्म में नाम, ईमेल, और संदेश (टेक्स्टएरिया) फील्ड होते हैं। साफ लेआउट, पीला बैकग्राउंड, हरा सबमिट बटन, और होवर इफेक्ट के साथ यह उपयोगकर्ता-अनुकूल होता है।

उदाहरण

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    * { box-sizing: border-box; }
    body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
    label { font-size: 15px; }
    input[type=text], textarea {
      width: 100%;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
      margin-top: 6px;
      margin-bottom: 16px;
    }
    input[type=submit] {
      background-color: #4CAF50;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    input[type=submit]:hover { background-color: #45a049; }
    form {
      border-radius: 5px;
      background-color: #feffc6;
      padding: 20px;
    }
  </style>
</head>
<body>
  <h1 style="text-align:center">Contact Form</h1>
  <form>
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Enter your firstname">
    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Enter your surname">
    <label for="email">Email Id</label>
    <input type="text" id="email" name="Email" placeholder="Enter your emailId">
    <label for="contact">Contact</label>
    <textarea id="contact" name="contact" placeholder="Write your message here" style="height:200px"></textarea>
    <input type="submit" value="Submit">
  </form>
</body>
</html>

आउटपुट

उपरोक्त कोड निम्नलिखित आउटपुट उत्पन्न करेगा:

मुख्य बिंदु

• टेक्स्टएरिया - बहु-पंक्ति संदेश के लिए height: 200px
• बॉर्डर-रेडियस - सभी फील्ड और बटन पर 4px
• पीला फॉर्म बैकग्राउंड - #feffc6 हल्का क्रीम रंग
• हरा सबमिट बटन - #4CAF50, होवर पर #45a049
• प्लेसहोल्डर टेक्स्ट - उपयोगकर्ता मार्गदर्शन के लिए