Love our work? if you want a custom project Contact on Whatsapp
Home
Appscript
Form

How To Send HTML Form Data To Google Sheets | Patient Data Entry Form using Apps Script | R39

🎉 Welcome to our website, where exploration meets inspiration! 🌟 Join us on our journey by subscribing to our YouTube channel, fueling our motivation to craft innovative projects. 🚀

Setup Video Guide Video

Steps to Install The Google Web App in your End.

What You Exactly Need 

A Google Account / Google Sheet File

Basic Knowledge of HTML , CSS , JAVASCRIPT 

Basic Knowledge of Google Appscript

Learn How to Deploy a New Web or Manage Web App in Appscript

Important!You need to have basic programming knowledge of HTML, CSS, and JavaScript to modify the code in this post. However, I will try my best to make the code readable and editable by non-programmers too.


Please Follow The Steps Here
How to Copy a Google Sheet

Click On Make a Copy To Copy the File In your Drive


Now Click on Extension and Choose a Appscript Option


Click on Deploy and Press on New Deployment


Now Here You Need to Select Anyone and Press on Deploy


After Deploy Allow Permission After Permission Given a URL Comes Which is Used to Access Your Web App and if You change in codes after deployment You need to apply Changes Need Deploy Again or Manage Deployments,

For Custom Projects!If You want a Custom Project For Your Business then Conatct Us :  +923224083545

Important!We always deliver what we promise to our clients. Quality over quantity is our motto! Our custom projects are priced reasonably and affordably for everyone. Join us and let's create something amazing together! 🎉🚀 Conatct Us :  +923224083545

Click 'Watch Now' to learn how to get a
Google Sheet link or make a copy
and Download Code!



Make a Sheet Copy

Contact us For Project

Join Whatsapp Community

Script Code 
 $(document).ready(function() {
    $('#contact_form').bootstrapValidator({
      // BootstrapValidator configuration
    }).on('success.form.bv', function(e) {
      // Prevent form submission
      e.preventDefault();

      // Serialize form data
      var formData = {};
      $('#contact_form').find('input, select, textarea').each(function() {
        formData[this.name] = $(this).val();
      });

      // Submit form data
      google.script.run.withSuccessHandler(showSuccessAlert).withFailureHandler(showFailureAlert).patientRegistration(formData);
    });

    function showSuccessAlert(response) {
      swal("Success!", response, "success");
      $('#contact_form')[0].reset(); // Reset form after successful submission
    }

    function showFailureAlert(error) {
      swal("Error!", error, "error");
    }
  });

Code.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('home')
      .setTitle('Contact Us Form');
}

function patientRegistration(form) {
  try {
    var spreadsheet = SpreadsheetApp.openById('paste your Google sheet ID');
    var sheet = spreadsheet.getSheetByName('Patient Reg');
    if (!sheet) {
      sheet = spreadsheet.insertSheet('Patient Reg');
    }
    var rowData = [
      sheet.getLastRow() + 1, // Auto ID number
      form.patient_id,
      form.first_name,
      form.middle_name,
      form.last_name,
      form.gender,
      form.email,
      form.whatsapp,
      form.emergency_contact,
      form.city,
      form.state,
      form.country,
      form.postal_code,
      form.birth_day,
      form.birth_month,
      form.birth_year,
      form.blood_group,
      form.sugar_level,
      form.concern,
      form.donor_receiver
    ];
    sheet.appendRow(rowData);
   
    // Send email to the person
    var recipient = form.email;
    var subject = 'Confirmation: Your Form Submission';
    var message = '<html><body>';
    message += '<table style="width:100%; border-collapse: collapse;">';
    message += '<tr><td colspan="2" style="background-color: #f2f2f2; padding: 10px;
text-align: center;"><h2>Confirmation: Your Form Submission</h2></td></tr>';
    message += '<tr><td colspan="2" style="padding: 10px;"><p>Dear ' + form.first_name + ',</p><p>Thank you for submitting the form. Below are the details you provided:</p></td></tr>';
    message += '<tr><td style="width: 30%; padding: 10px; background-color: #f9f9f9;">
<b style="color: black;">Field</b></td><td style="width: 70%; padding: 10px; background-color: #f9f9f9;"><b style="color: black;">Value</b></td></tr>';
    message += '<tr><td style="padding: 10px;"><b style="color: black;">First Name:</b>
</td><td style="padding: 10px;">' + form.first_name + '</td></tr>';
    message += '<tr><td style="padding: 10px;"><b style="color: black;">Middle Name:</b>
</td><td style="padding: 10px;">' + form.middle_name + '</td></tr>';
    message += '<tr><td style="padding: 10px;"><b style="color: black;">Last Name:</b>
</td><td style="padding: 10px;">' + form.last_name + '</td></tr>';
    message += '<tr><td style="padding: 10px;"><b style="color: black;">Patient ID:</b>
</td><td style="padding: 10px;">' + form.patient_id + '</td></tr>';
    message += '<tr><td style="padding: 10px;"><b style="color: black;">Gender:</b></td>
<td style="padding: 10px;">' + form.gender + '</td></tr>';
    message += '<tr><td style="padding: 10px;"><b style="color: black;">Email:</b></td>
<td style="padding: 10px;">' + form.email + '</td></tr>';
    message += '<tr><td style="padding: 10px;"><b style="color: black;">WhatsApp:</b>
</td><td style="padding: 10px;">' + form.whatsapp + '</td></tr>';
    message += '<tr><td style="padding: 10px;"><b style="color: black;">
Emergency Contact:</b></td><td style="padding: 10px;">' + form.emergency_contact + '</td>
</tr>';
    message += '<tr><td style="padding: 10px;"><b style="color: black;">City:</b></td>
<td style="padding: 10px;">' + form.city + '</td></tr>';
    message += '<tr><td style="padding: 10px;"><b style="color: black;">State:</b></td>
<td style="padding: 10px;">' + form.state + '</td></tr>';
    message += '<tr><td style="padding: 10px;"><b style="color: black;">Country:</b></td>
<td style="padding: 10px;">' + form.country + '</td></tr>';
    message += '<tr><td style="padding: 10px;"><b style="color: black;">Postal Code:</b>
</td><td style="padding: 10px;">' + form.postal_code + '</td></tr>';
    message += '<tr><td style="padding: 10px;"><b style="color: black;">Date of Birth:</b>
</td><td style="padding: 10px;">' + form.birth_day + '/' + form.birth_month + '/' + form.birth_year + '</td></tr>';
    message += '<tr><td style="padding: 10px;"><b style="color: black;">Blood Group:</b>
</td><td style="padding: 10px;">' + form.blood_group + '</td></tr>';
    message += '<tr><td style="padding: 10px;"><b style="color: black;">Sugar Level:</b>
</td><td style="padding: 10px;">' + form.sugar_level + '</td></tr>';
    message += '<tr><td style="padding: 10px;"><b style="color: black;">Concern:</b></td>
<td style="padding: 10px;">' + form.concern + '</td></tr>';
    message += '<tr><td style="padding: 10px;"><b style="color: black;">Donor/Receiver:</b>
</td><td style="padding: 10px;">' + form.donor_receiver + '</td></tr>';
    message += '</table>';
    message += '<p>Regards,<br>Your Organization</p>';
    message += '</body></html>';

    GmailApp.sendEmail(recipient, subject, '', { htmlBody: message });

    return "Form submitted successfully! Email sent to " + form.email;
  } catch (error) {
    return "Error submitting form: " + error.toString();
  }
}

Home.html


If you Face any error in setup you can copy google sheet from above buttons.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet"/>
  <script
src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
  <script
src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
</head>
<body style="background-color: white;">
<div class="container">
    <form id="contact_form">
        <fieldset>
            <legend>Paitent Registration Form</legend>

            <div class="row">
                <!-- First Name -->
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="control-label">First Name</label>
                        <div class="input-group">
                            <span class="input-group-addon">
<i class="glyphicon glyphicon-user"></i></span>
                            <input name="first_name" placeholder="First Name" class="form-control" type="text" required>
                        </div>
                    </div>
                </div>

                <!-- Middle Name -->
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="control-label">Middle Name</label>
                        <div class="input-group">
                            <span class="input-group-addon"><i
class="glyphicon glyphicon-user"></i></span>
                            <input name="middle_name" placeholder="Middle Name"
class="form-control" type="text">
                        </div>
                    </div>
                </div>

                <!-- Last Name -->
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="control-label">Last Name</label>
                        <div class="input-group">
                            <span class="input-group-addon">
<i class="glyphicon glyphicon-user"></i></span>
                            <input name="last_name" placeholder="Last Name"
class="form-control" type="text" required>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <!-- Patient ID -->
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="control-label">Patient ID</label>
                        <div class="input-group">
                            <span class="input-group-addon">
<i class="glyphicon glyphicon-info-sign"></i></span>
                            <input name="patient_id" placeholder="Patient ID"
class="form-control" type="text" required>
                        </div>
                    </div>
                </div>

                <!-- Gender -->
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="control-label">Gender</label>
                        <div class="input-group">
                            <span class="input-group-addon">
<i class="glyphicon glyphicon-list"></i></span>
                            <select name="gender" class="form-control selectpicker" required>
                                <option value="">Please select gender</option>
                                <option>Male</option>
                                <option>Female</option>
                                <option>Other</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Email -->
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="control-label">Email</label>
                        <div class="input-group">
                            <span class="input-group-addon">
<i class="glyphicon glyphicon-envelope"></i></span>
                            <input name="email" placeholder="Email Address"
class="form-control" type="email" required>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <!-- WhatsApp -->
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="control-label">WhatsApp</label>
                        <div class="input-group">
                            <span class="input-group-addon"><i
class="glyphicon glyphicon-phone"></i></span>
                            <input name="whatsapp" placeholder="WhatsApp Number"
class="form-control" type="text">
                        </div>
                    </div>
                </div>

                <!-- Emergency Contact -->
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="control-label">Emergency Contact</label>
                        <div class="input-group">
                            <span class="input-group-addon"><i
class="glyphicon glyphicon-phone"></i></span>
                            <input name="emergency_contact"
placeholder="Emergency Contact Number" class="form-control" type="text" required>
                        </div>
                    </div>
                </div>

                <!-- City -->
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="control-label">City</label>
                        <div class="input-group">
                            <span class="input-group-addon"><i
class="glyphicon glyphicon-home"></i></span>
                            <input name="city" placeholder="City" class="form-control"
type="text" required>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <!-- State -->
            <div class="col-md-4">
    <div class="form-group">
        <label class="control-label">Province</label>
        <div class="input-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
            <select name="state" class="form-control selectpicker" required>
                <option value="">Please select your province</option>
                <option>Punjab</option>
                <option>Sindh</option>
                <option>Khyber Pakhtunkhwa</option>
                <option>Balochistan</option>
                <option>Gilgit-Baltistan</option>
                <option>Azad Jammu and Kashmir</option>
            </select>
        </div>
    </div>
</div>


                <!-- Country -->
            <div class="col-md-4">
    <div class="form-group">
        <label class="control-label">Country</label>
        <div class="input-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-globe">
</i></span>
            <select name="country" class="form-control" required>
                <option value="" disabled selected>Select Country</option>
                <option value="Afghanistan">Afghanistan</option>
                <option value="Bahrain">Bahrain</option>
                <option value="Bangladesh">Bangladesh</option>
                <option value="Bhutan">Bhutan</option>
                <option value="Brunei">Brunei</option>
                <option value="Cambodia">Cambodia</option>
                <option value="China">China</option>
                <option value="East Timor">East Timor</option>
                <option value="India">India</option>
                <option value="Indonesia">Indonesia</option>
                <option value="Iran">Iran</option>
                <option value="Iraq">Iraq</option>
                <option value="Israel">Israel</option>
                <option value="Japan">Japan</option>
                <option value="Jordan">Jordan</option>
                <option value="Kazakhstan">Kazakhstan</option>
                <option value="Kuwait">Kuwait</option>
                <option value="Kyrgyzstan">Kyrgyzstan</option>
                <option value="Laos">Laos</option>
                <option value="Lebanon">Lebanon</option>
                <option value="Malaysia">Malaysia</option>
                <option value="Maldives">Maldives</option>
                <option value="Mongolia">Mongolia</option>
                <option value="Myanmar">Myanmar</option>
                <option value="Nepal">Nepal</option>
                <option value="North Korea">North Korea</option>
                <option value="Oman">Oman</option>
                <option value="Pakistan">Pakistan</option>
                <option value="Philippines">Philippines</option>
                <option value="Qatar">Qatar</option>
                <option value="Saudi Arabia">Saudi Arabia</option>
                <option value="Singapore">Singapore</option>
                <option value="South Korea">South Korea</option>
                <option value="Sri Lanka">Sri Lanka</option>
                <option value="Syria">Syria</option>
                <option value="Taiwan">Taiwan</option>
                <option value="Tajikistan">Tajikistan</option>
                <option value="Thailand">Thailand</option>
                <option value="Turkey">Turkey</option>
                <option value="Turkmenistan">Turkmenistan</option>
                <option value="United Arab Emirates">United Arab Emirates</option>
                <option value="Uzbekistan">Uzbekistan</option>
                <option value="Vietnam">Vietnam</option>
                <option value="Yemen">Yemen</option>
            </select>
        </div>
    </div>
</div>


                <!-- Postal Code -->
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="control-label">Postal Code</label>
                        <div class="input-group">
                            <span class="input-group-addon"><i
class="glyphicon glyphicon-home"></i></span>
                            <input name="postal_code"
placeholder="Postal Code" class="form-control" type="text" required>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <!-- Date of Birth -->
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="control-label">Date of Birth</label>
                        <div class="input-group">
                            <span class="input-group-addon"><i
class="glyphicon glyphicon-calendar"></i></span>
                            <input name="birth_day" placeholder="Day" class="form-control"
type="number" min="1" max="31" required>
                            <input name="birth_month" placeholder="Month"
class="form-control" type="number" min="1" max="12" required>
                            <input name="birth_year" placeholder="Year" class="form-control"
type="number" min="1900" required>
                        </div>
                    </div>
                </div>

                <!-- Blood Group -->
               <div class="col-md-4">
    <div class="form-group">
        <label class="control-label">Blood Group</label>
        <div class="input-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-tint"></i></span>
            <select name="blood_group" class="form-control">
                <option value="">Select Blood Group</option>
                <option value="A+">A+</option>
                <option value="A-">A-</option>
                <option value="B+">B+</option>
                <option value="B-">B-</option>
                <option value="AB+">AB+</option>
                <option value="AB-">AB-</option>
                <option value="O+">O+</option>
                <option value="O-">O-</option>
            </select>
        </div>
    </div>
</div>


         <!-- Sugar Level -->
<div class="col-md-4">
    <div class="form-group">
        <label class="control-label">Sugar Level</label>
        <div class="input-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-heart"></i></span>
            <select name="sugar_level" class="form-control">
                <option value="">Select Sugar Level</option>
                <option value="Low">Low</option>
                <option value="Normal">Normal</option>
                <option value="High">High</option>
                <!-- Add more options as needed -->
            </select>
        </div>
    </div>
</div>


            <div class="row">
               <div class="col-md-4">
    <div class="form-group">
        <label class="control-label">Your Concern</label>
        <div class="input-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-comment"></i></span>
            <select class="form-control" name="concern" required>
                <option value="">Select your concern</option>
                <option value="Technical Issue">Technical Issue</option>
                <option value="Billing Inquiry">Billing Inquiry</option>
                <option value="Product Feedback">Product Feedback</option>
                <!-- Add more options here -->
            </select>
        </div>
    </div>
</div>


         <div class="col-md-4">
    <div class="form-group">
        <label class="control-label">Are you a donor or a receiver?</label>
        <div class="input-group">
            <select class="form-control" name="donor_receiver" required>
                <option value="">Select one</option>
                <option value="donor">Donor</option>
                <option value="receiver">Receiver</option>
            </select>
        </div>
    </div>
</div>


                <!-- Submit Button -->
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="control-label"></label>
                        <button type="submit" class="btn btn-warning form-control">Send
<span class="glyphicon glyphicon-send"></span></button>
                    </div>
                </div>
            </div>
        </fieldset>
    </form>
</div>

<script>
</script>

</body>
</html>

Terms of Use

If you want to use this Code in your posts, please don't remove the attributes from the codes, it will not be visible on your website.

If you want to rewrite an article on this Codebox by using these codes, you must add a Reference with visible and clickable link redirecting to our website: https://www.rameezimdad.blogspot.com. If you rewrite without Reference, Legal Actions will be taken.

Conclusion

This is all about to help uou to Automate Your Business. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in comment box. Thank you!

#Appscript #Form

Post a Comment

Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.