08. Online Simple Form

Admin Prayas November 27, 2023

The Simple HTML Form

Our web app starts with a no-frills HTML form. Users encounter a clean interface with input fields for relevant information. Whether it's a survey, contact details, or any other data, users can easily fill out the form without any unnecessary complexity.

Smooth Submission Process

Once users complete the form, a single click on the submit button triggers a seamless submission process. The entered data is whisked away to a designated spot, ensuring a swift and efficient user experience.

Integration with Google Sheets

Behind the scenes, our web app is integrated with Google Sheets, a widely used spreadsheet application. The entered data is neatly organized in a Google Sheet, making it easily accessible for further analysis or data management. This integration not only simplifies the backend process but also provides a secure and reliable storage solution.

Instant ID Generation

As the user hits the submit button, a unique ID number is generated on the fly. This ID serves as a reference point for the submitted data, making it easy for users to track and identify their entries. This instant feedback adds a layer of transparency to the process, assuring users that their information has been successfully recorded.

User-Friendly Confirmation

To wrap up the user journey, a confirmation screen displays the generated ID number. This ensures users know their submission was successful, providing them with a sense of accomplishment and reassurance.

Benefits

  • Simplicity: The minimalist design of the HTML form prioritizes user-friendliness.
  • Efficiency: Streamlined submission and data storage processes ensure a quick and hassle-free experience.
  • Transparency: The instant ID generation and confirmation screen enhance user trust in the system.
  • Reliability: Leveraging Google Sheets for data storage ensures a secure and robust solution.

Application Demo

Simple HTML Form
Embedded Google Apps Script

Step 1: Open Google Sheets

To get started, open Google Sheets and either create a new spreadsheet or open an existing one. This will serve as the foundation for the data manipulation and automation tasks you want to perform.

Step 2: Open Google Apps Script

Next, navigate to the "Extensions" menu and select "Apps Script." This will open the Google Apps Script editor in a new tab. This editor is where you'll be writing the code to automate your Google Sheets tasks.

Step 3: Write Google Apps Script Code

Once in the Google Apps Script editor, you'll likely see a default function. Delete any existing code, as we'll be starting from scratch. Now, let's write a simple example script that you can use as a foundation for more complex automation.


Code.gs

function doGet() {
  var output = HtmlService.createHtmlOutputFromFile('index')
      .setTitle('Employee Form');

  // Allow the content to be embedded in iframes
  output.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);

  return output;
}


function doPost(formData) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var lastRow = sheet.getLastRow() + 1;
 
  // Generate Employee ID
  var employeeId = 'E' + ("00" + lastRow).slice(-2);
 
  // Append data to the sheet
  sheet.getRange(lastRow, 1).setValue(employeeId);
  sheet.getRange(lastRow, 2).setValue(formData.name);
  sheet.getRange(lastRow, 3).setValue(formData.fathersName);
  sheet.getRange(lastRow, 4).setValue(formData.dob);
  sheet.getRange(lastRow, 5).setValue(formData.address);
  sheet.getRange(lastRow, 6).setValue(formData.doj);
  sheet.getRange(lastRow, 7).setValue(formData.designation);
  sheet.getRange(lastRow, 8).setValue(formData.agreement);
 
  // Return the generated employeeId
  return employeeId;
}

and create a html by clicking + botton, Give a name index.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <base target="_top">
    <style>
      body {
        font-family: 'Arial', sans-serif;
        margin: 0;
        padding: 0;
        background: url('https://i.imgur.com/N6v5tEB.jpg') no-repeat center center fixed;
        background-size: cover;
        color: #fff;
      }

      header {
        background-color: #3498db;
        padding: 15px;
        text-align: center;
      }

      form {
        max-width: 400px;
        margin: auto;
        background: rgba(255, 255, 255, 0.8);
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      }

      label {
        display: block;
        margin-bottom: 8px;
        color: #333;
      }

      input,
      select,
      textarea {
        width: 100%;
        padding: 10px;
        margin-bottom: 15px;
        box-sizing: border-box;
      }

      input[type="button"] {
        background-color: #2ecc71;
        color: #fff;
        border: none;
        padding: 12px 25px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        border-radius: 5px;
        cursor: pointer;
      }

      input[type="button"]:hover {
        background-color: #27ae60;
      }

      p.success-message {
        color: #27ae60;
        font-weight: bold;
        text-align: center;

       
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Employee Registration Form</h1>
    </header>

    <form id="employeeForm">
      <label for="name">Name:</label>
      <input type="text" name="name" required>

      <label for="fathersName">Father's Name:</label>
      <input type="text" name="fathersName" required>

      <label for="dob">Date Of Birth:</label>
      <input type="date" name="dob" required>

      <label for="address">Address:</label>
      <textarea name="address" required></textarea>

      <label for="doj">Date Of Joining:</label>
      <input type="date" name="doj" required>

      <label for="designation">Designation:</label>
      <select name="designation" required>
        <option value="Manager">Manager</option>
        <option value="Employee">Employee</option>
      </select>

      <label for="agreement">
  <input type="checkbox" name="agreement" required> I agree to the Terms and Conditions
</label>



      <input type="button" value="Submit" onclick="submitForm()">
    </form>

    <script>
  function submitForm() {
    var formData = {
      name: document.forms['employeeForm']['name'].value,
      fathersName: document.forms['employeeForm']['fathersName'].value,
      dob: document.forms['employeeForm']['dob'].value,
      address: document.forms['employeeForm']['address'].value,
      doj: document.forms['employeeForm']['doj'].value,
      designation: document.forms['employeeForm']['designation'].value,
      agreement: document.forms['employeeForm']['agreement'].checked,
    };

    // Call the server-side function to submit the form and get the employeeId
    google.script.run.withSuccessHandler(displayEmployeeId).doPost(formData);
  }

  function displayEmployeeId(employeeId) {
    // Show the employeeId on the web app
    var successMessage = document.createElement('p');
    successMessage.className = 'success-message';
    successMessage.innerHTML = 'Form submitted successfully! Your Employee ID is: <strong>' + employeeId + '</strong>';

    document.getElementById('employeeForm').innerHTML = '';
    document.getElementById('employeeForm').appendChild(successMessage);
  }
</script>

  </body>
</html>



Step 4: Save And Run the Script

After writing the script, save it by clicking the floppy disk icon or pressing Ctrl + S (Windows) or Command + S (Mac). To test the script, click the play button in the toolbar. You may need to authorize the script the first time you run it.

Step 4: Deploy the Script as web app and any one. Enjoy, Its Done.

Tags
Admin Prayas

Posted by Admin Prayas