COMMON SERVICE CENTRE

เค•เคฎเคฐ เคœเคจ เคธुเคตिเคงा เค•ेंเคฆ्เคฐ เค•เคŸिเคฏा เค•เคฎ्เคฎू เคถाเคนเคœเคนाँเคชुเคฐ เค‰เคค्เคคเคฐ เคช्เคฐเคฆेเคถ เคญाเคฐเคค

เคจिเคฏเคฐ เคจूเคฐी เคœเคฎा เคฎเคธ्เคœिเคฆ E-MAIL- sherjsk.khan@outlook.com
WELCOME TO KAMAR JAN SUVIDHA KENDRA

Stock Management

๐Ÿ“ฆ Stock Management Tool

ID Item Name Category Quantity Last Updated Actions
Share:

36 photo Onle Click

Passport Photo Grid Generator

Passport Photo Grid Generator (A4)





Share:

Photo ko Middle Me Adjust Karen

Passport Photo Grid Generator

Passport Photo Grid Generator (A4)





Share:

Passport Photo Grid Generator 4x6

Passport Photo Grid Generator

Passport Photo Grid Generator (A4)





Share:

Passport Photo Maker (Pro) 6x6 Download as PNG PDF

Passport Photo Maker (Pro)

Passport Photo Maker (Pro)





Share:

Passport Photo Maker

เค†เคช เคซोเคŸो upload เค•เคฐेंเค—े
Crop area เคฆिเค–ेเค—ा (square)
“Crop & Download” เคฌเคŸเคจ เคธे เคซोเคŸो เคกाเค‰เคจเคฒोเคก เคนोเค—ी 

Passport Photo Maker

Passport Photo Maker


Share:

HTML + CSS เค†เคงाเคฐिเคค responsive Admission Form (KG to 12

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 เคคैเคฏाเคฐ เค•เคฐें

  1. Google Sheets เค–ोเคฒें → เคจเคฏा เคถीเคŸ เคฌเคจाเคं

  2. เคชเคนเคฒे row เคฎें headings เคกाเคฒें เคœैเคธे:

Name | DOB | Gender | Class | Aadhaar | Religion | Caste | Blood Group | Address | Father Name | Mother Name | Mobile | Email | Previous School | Prev Class | Date

Step 2: Apps Script เคฌเคจाเคं

  1. Google Sheet เคฎें เคœाเคं → Extensions → Apps Script

  2. เคจीเคšे เคฆिเคฏा เค—เคฏा เค•ोเคก เคชेเคธ्เคŸ เค•เคฐें:

 
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 เคœैเคธा เคฐिเค•ॉเคฐ्เคก

Share:

School Management Software Test

Share:

Search This Blog

Contact Form

Name

Email *

Message *