HTML + CSS आधारित responsive Admission Form (KG to 12 ~ JAN SUVIDHA KENDRA KATIA KAMMU

HTML + CSS आधारित responsive Admission Form (KG to 12

यह रहा एक HTML + CSS आधारित responsive Admission Form (KG to 12) वेब पेज — जिसमें फोटो/सिग्नेचर अपलोड, दस्तावेज़ विकल्प, और बेसिक फॉर्मेटिंग शामिल है:

Features:

Responsive layout for mobile and desktop
Hindi labels for rural/vernacular use
Photo & signature upload
Document checklist
Declaration section

HTML Code

<!DOCTYPE html>
<html lang="hi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Admission Form - KG to 12</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background: #f0f4f8;
    }
    h2 {
      text-align: center;
      color: #2c3e50;
    }
    form {
      background: #ffffff;
      padding: 20px;
      border-radius: 10px;
      max-width: 800px;
      margin: auto;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    label {
      font-weight: bold;
    }
    input, select, textarea {
      width: 100%;
      padding: 8px;
      margin: 5px 0 15px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    .form-group {
      margin-bottom: 15px;
    }
    .row {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
    }
    .col-half {
      flex: 1 1 48%;
    }
    .col-full {
      flex: 1 1 100%;
    }
    .submit-btn {
      background: #27ae60;
      color: #fff;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
      border-radius: 5px;
      font-size: 16px;
    }
    .submit-btn:hover {
      background: #219150;
    }
  </style>
</head>
<body>

<h2>विद्यालय प्रवेश प्रपत्र (KG से 12 तक)</h2>
<form>

  <div class="row">
    <div class="col-half">
      <label>छात्र का नाम:</label>
      <input type="text" required>
    </div>
    <div class="col-half">
      <label>जन्म तिथि:</label>
      <input type="date" required>
    </div>

    <div class="col-half">
      <label>लिंग:</label>
      <select required>
        <option value="">चयन करें</option>
        <option>पुरुष</option>
        <option>महिला</option>
        <option>अन्य</option>
      </select>
    </div>
    <div class="col-half">
      <label>कक्षा (जिसमें प्रवेश चाहिए):</label>
      <select required>
        <option value="">चयन करें</option>
        <option>KG</option>
        <option>Nursery</option>
        <option>1</option>
        <option>2</option>
        <!-- Add up to 12 -->
        <option>12</option>
      </select>
    </div>

    <div class="col-half">
      <label>आधार नंबर:</label>
      <input type="text" maxlength="12">
    </div>
    <div class="col-half">
      <label>धर्म:</label>
      <input type="text">
    </div>

    <div class="col-half">
      <label>जाति:</label>
      <select>
        <option>General</option>
        <option>OBC</option>
        <option>SC</option>
        <option>ST</option>
        <option>अन्य</option>
      </select>
    </div>

    <div class="col-half">
      <label>रक्त समूह:</label>
      <input type="text">
    </div>

    <div class="col-full">
      <label>स्थायी पता:</label>
      <textarea rows="2"></textarea>
    </div>
    <div class="col-full">
      <label>वर्तमान पता:</label>
      <textarea rows="2"></textarea>
    </div>

    <div class="col-half">
      <label>पिता का नाम:</label>
      <input type="text" required>
    </div>
    <div class="col-half">
      <label>माता का नाम:</label>
      <input type="text" required>
    </div>

    <div class="col-half">
      <label>संपर्क नंबर:</label>
      <input type="tel" required>
    </div>
    <div class="col-half">
      <label>ईमेल आईडी:</label>
      <input type="email">
    </div>

    <div class="col-half">
      <label>पिछला विद्यालय (यदि कोई हो):</label>
      <input type="text">
    </div>
    <div class="col-half">
      <label>पिछली कक्षा:</label>
      <input type="text">
    </div>

    <div class="col-half">
      <label>फोटो अपलोड करें:</label>
      <input type="file" accept="image/*">
    </div>
    <div class="col-half">
      <label>हस्ताक्षर अपलोड करें:</label>
      <input type="file" accept="image/*">
    </div>

    <div class="col-full">
      <label>संग्लग्न दस्तावेज़:</label>
      <input type="checkbox"> जन्म प्रमाणपत्र
      <input type="checkbox"> TC
      <input type="checkbox"> मार्कशीट
      <input type="checkbox"> आधार कार्ड
    </div>

    <div class="col-full">
      <label>घोषणा:</label>
      <p>मैं घोषणा करता/करती हूँ कि उपरोक्त दी गई जानकारी सत्य एवं सही है।</p>
    </div>

    <div class="col-half">
      <label>अभिभावक के हस्ताक्षर:</label>
      <input type="text" placeholder="नाम भरें">
    </div>
    <div class="col-half">
      <label>दिनांक:</label>
      <input type="date">
    </div>
  </div>

  <center>
    <button type="submit" class="submit-btn">प्रवेश के लिए आवेदन करें</button>
  </center>

</form>
</body>
</html>

आप जो Admission Form HTML में बना रहे हैं, उसे Google Sheet से जोड़ने के लिए आप Google Apps Script Web App और JavaScript fetch() का उपयोग कर सकते हैं। नीचे पूरे सेटअप की प्रक्रिया दी गई है:

✅ Step-by-Step: Google Sheet Integration for Admission Form

Step 1: Google Sheet तैयार करें

Google Sheets खोलें → नया शीट बनाएं
पहले row में headings डालें जैसे:

Step 2: Apps Script बनाएं

Google Sheet में जाएं → Extensions → Apps Script
नीचे दिया गया कोड पेस्ट करें:

function doPost(e) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
  var data = JSON.parse(e.postData.contents);
  sheet.appendRow([
    data.name,
    data.dob,
    data.gender,
    data.class,
    data.aadhaar,
    data.religion,
    data.caste,
    data.bloodGroup,
    data.address,
    data.father,
    data.mother,
    data.mobile,
    data.email,
    data.prevSchool,
    data.prevClass,
    new Date()
  ]);
  return ContentService.createTextOutput("Success");
}

Deploy → Manage Deployments → + New Deployment Select Web App, Name it, and: Execute as: Me Who has access: Anyone Click Deploy → Allow Permissions → Copy Web App URL Step 3: HTML Form से JavaScript Integration फॉर्म में onsubmit="submitForm(event)" जोड़ें और नीचे JavaScript स्क्रिप्ट डालें:

<script>
  function submitForm(e) {
    e.preventDefault();

    const form = e.target.form || document.querySelector('form');

    const data = {
      name: form[0].value,
      dob: form[1].value,
      gender: form[2].value,
      class: form[3].value,
      aadhaar: form[4].value,
      religion: form[5].value,
      caste: form[6].value,
      bloodGroup: form[7].value,
      address: form[8].value + " " + form[9].value,
      father: form[10].value,
      mother: form[11].value,
      mobile: form[12].value,
      email: form[13].value,
      prevSchool: form[14].value,
      prevClass: form[15].value,
    };

    fetch("YOUR_WEB_APP_URL", {
      method: "POST",
      body: JSON.stringify(data),
      headers: { "Content-Type": "application/json" },
    })
    .then(res => res.text())
    .then(msg => {
      alert("फॉर्म सफलतापूर्वक सबमिट हुआ!");
      form.reset();
    })
    .catch(err => {
      alert("Error! कृपया पुनः प्रयास करें।");
      console.error(err);
    });
  }
</script>

Note: Note: "YOUR_WEB_APP_URL" की जगह Google Apps Script से मिले वेब ऐप URL को पेस्ट करें।

✅ Features You Get:

सीधे Google Sheet में ऑटो डेटा सेव
कोई Backend server की ज़रूरत नहीं
Offline Excel जैसा रिकॉर्ड

महत्वपूर्ण सूचना

प्रिय कमर जन सुविधा केन्द्र के पाठको हमारे द्वारा सभी जानकारी विभिन्न सम्बिन्धित योजना की आधिकारिक वेबसाइड तथा समाचार पत्रो से एकत्रित की जाती है। इन्ही सभी स्त्रोतो के माध्यम से हम आपको लोगो को सभी राज्य तथा केन्द्र सरकार की योजनाओं के बारे सही प्रकार की जानकारी प्रदान करते है और कमर जन सुविधा केंद्र सदेव यही प्रयास करता है की आपको अपडेटड खबरे और सत्य बात आप तक सबसे पहले पहुंचे योजना की आधिकारिक वेबसाइट पर एक बार विजिट कर सत्यापन करने की सलाह देते हैं|

JAN SUVIDHA KENDRA KATIA KAMMU

कमर जन सुविधा केंद्र कटिया कम्मू शाहजहाँपुर उत्तर प्रदेश भारत