CSS से ईमेल न्यूज़लेटर साइनअप फॉर्म कैसे बनाएं?

ईमेल न्यूज़लेटर फॉर्म में नाम, ईमेल और चेकबॉक्स शामिल होते हैं। सेंटर-कंटेनर, बॉर्डर, और स्पष्ट कॉल-टू-एक्शन बटन के साथ यह रूपांतरण के लिए अनुकूलित होता है।

उदाहरण

<!DOCTYPE html>
<html>
<style>
  body { font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: bold; }
  h1 { text-align: center; }
  form {
    border: 3px solid #f1f1f1;
    padding: 20px;
    background-color: #f3f3f3;
    max-width: 800px;
    margin: auto;
  }
  input[type=text], input[type=submit] {
    width: 100%;
    padding: 12px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    font-size: 30px;
  }
  input[type=checkbox] { margin-top: 16px; }
  input[type=submit] {
    background-color: rgb(236, 255, 61);
    color: rgb(0, 0, 0);
    border: none;
    font-size: 25px;
    font-weight: bolder;
  }
  input[type=submit]:hover { background-color: rgb(255, 238, 0); }
</style>
<body>
  <h1>Email Newsletter Example</h1>
  <form>
    <h2>Subscribe to our Newsletter</h2>
    <p>Subscribe to our Newsletter to get latest update in the world of technology and web</p>
    <input type="text" placeholder="Name" name="name" required>
    <input type="text" placeholder="Email address" name="mail" required>
    <label>
      <input type="checkbox" checked="checked" name="subscribe"> Daily Newsletter
    </label>
    <input type="submit" value="Subscribe">
  </form>
</body>
</html>

आउटपुट

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

मुख्य बिंदु

• max-width + margin: auto - फॉर्म को केंद्र में रखता है
• box-sizing: border-box - पैडिंग को चौड़ाई में शामिल करता है
• चेकबॉक्स डिफ़ॉल्ट चेक्ड - ऑप्ट-इन के बजाय ऑप्ट-आउट
• पीला सबमिट बटन - उच्च कंट्रास्ट कॉल-टू-एक्शन
• होवर पर गहरा पीला - विजुअल फीडबैक