How to Submit Custom HTML, Web Apps Script and CSS Form Data to Google Sheets? (With Full Source Code)

-



How to Submit Custom HTML, Web Apps Script and CSS Form Data to Google Sheets? (With Full Source Code).


Form:


Google Sheet:



form.HTML

<div class="container">
      <div class="row justify-content-center wrapper" id="register-box">
        <div class="col-lg-10 my-auto myShadow">
          <div class="row">
            <div class="col-lg-5 d-flex flex-column justify-content-center myColor p-4">
              <h1 class="text-center font-weight-bold text-white">Welcome Back!</h1>
              <hr class="my-4 bg-light myHr" />
              <p class="text-center font-weight-bolder text-light lead">To keep connected with us please Enter your personal info.</p>
               
            </div>
            <div class="col-lg-7 bg-white p-4">
              <h1 class="text-center font-weight-bold text-primary">Add Details</h1>
              <hr class="my-3" />
              <form id="myForm" onsubmit="handleFormSubmit(this)" autocomplete="off" class="px-3">
                <div class="input-group input-group-lg form-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text rounded-0"><i class="far fa-user fa-lg fa-fw"></i></span>
                  </div>
                  <input type="text" id="firstname" name="firstname" class="form-control" placeholder="First Name" required />
                </div>
                <div class="input-group input-group-lg form-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text rounded-0"><i class="far fa-user fa-lg fa-fw"></i></span>
                  </div>
                  <input type="text" id="lastname" name="lastname" class="form-control" placeholder="Last Name" required />
                </div>
                <div class="input-group input-group-lg form-group">
                    <div class="input-group-prepend">
                      <span class="input-group-text rounded-0"><i class="fas fa-phone fa-lg fa-fw"></i></span>
                    </div>
                    <input type="number" id="phone" name="phone" class="form-control" placeholder="Phone Number" required />
                  </div>
                <div class="input-group input-group-lg form-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text rounded-0"><i class="far fa-envelope fa-lg fa-fw"></i></span>
                  </div>
                  <input type="email" id="email" name="email" class="form-control" placeholder="E-Mail" required />
                </div>
                <div class="input-group input-group-lg form-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text "><i class="fas fa-home fa-lg fa-fw"></i></span>
                  </div>
                  <input type="text" id="city" name="city" class="form-control " placeholder="City Name" required />
                </div>
                <div class="form-group">
                  <div id="passError" class="text-danger font-weight-bolder"></div>
                </div>
                <div class="form-group">
                  <input type="submit" id="register-btn" value="SUBMIT" name="signup" class="btn btn-primary btn-lg btn-block myBtn" onclick="AddRow()"/>
                    <div id="display_error" ></div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>




style.CSS

    <style>
html {
width: 100%;
height: 100%;
background-color: red;
}

body {
position: relative;
width: 98%;
height: 96%;
margin: 1em auto;
font-family: 'Tahoma', Calibri, Arial, sans-serif;
background-color: #17a2b8;
text-align: center;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}

    @import url("https://fonts.googleapis.com/css?family=Maven+Pro:400,500,600,700,800,900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Maven Pro", sans-serif;
}
.wrapper {
  height: 90vh;
}
.myColor {
  background-image: linear-gradient(to right, #f83600 50%, #f9d423 100%);
}
.myShadow {
  box-shadow: 0 10px 10px rgba(0, 2, 0, 1);
}
.myBtn {
  border-radius: 50px;
  font-weight: bold;
  font-size: 20px;
  background-image: linear-gradient(to right, #0acffe 0%, #495aff 100%);
  border: none;
}
.myBtn:hover {
  background-image: linear-gradient(to right, #495aff 0%, #0acffe 100%);
}
.myHr {
  height: 2px;
  border-radius: 100px;
}
.myLinkBtn {
  border-radius: 100px;
  width: 50%;
  border: 2px solid #fff;
}
@media (max-width: 720px) {
  .wrapper {
    margin: 2px;
  }
}
    </style>



Get full source code:
Click Here

Comments

Post a Comment

Popular posts from this blog

How to create Menu bar, Custom Sub Menu bar in Google Sheet Using Apps Script | G-MASTERY AUTOMATION

-
Image
You can create a menu bar and a custom sub-menu bar in Google Sheets using Google Apps Script. Here are the steps to do that: Open the Google Sheet where you want to add the menu bar. Click on "Tools" in the top menu bar, and then select "Script Editor". This will open the Apps Script editor. In the Apps Script editor, click on "File" and then select "New Script File". Name the script file something like "Custom Menu". In the new script file, you can start by creating a function to add a custom menu. Here's an example code to create a "Custom Menu" with a "Sub Menu" and a "Sub-Sub Menu" in it: Save the script file by clicking on "File" and then selecting "Save". You can name the script file whatever you like. Go back to the Google Sheet and refresh the page. You should see a new menu item labeled "Custom Menu". If you click on it, you will see a sub-menu with two options la
Read more

Google form basic to advanced full tutorial with description | G-MASTERY AUTOMATION

-
Image
Below are the steps for creating a Google Form from basic to adv anced. This tutorial includes detailed descriptions to guide you throughout the process: Sign in to your Google account and go to Google Forms by visiting this link: https://docs.google.com/forms/ Click the "+" icon in the bottom-right corner to create a new form, which will create a new, blank Google Form. Add a title and description to your form in the "Form description" box. Add a question by clicking on the "Untitled Question" box and type your question. Choose a question type by clicking on the drop-down menu to choose a question type such as multiple choice, dropdown, short answer, paragraph, etc. Add answer choices for some question types, like multiple choice or dropdown, by clicking on the "Add option" button. Customize your question by clicking on the three dots on the right side of the question box to give you options to shuffle answer choices, add an "Other" op
Read more