Create Bootstrap Web App Form on Google Sheets using Google Apps Script

Показать описание

In this video, I demonstrate how to create a Bootstrap Web App form on Google Sheets using Google Apps Script

Bootstrap reference:

Legacy Apps Script Editor Used in Video

Apps Script (Script Editor) is now located under tab ‘Extensions’ instead of ‘Tools’ on Google Sheets

Code With Curt

Рекомендации по теме

Комментарии

Google Apps Script Code in Video Below:

function doGet(e) {
return
}

function AddRecord(firstname, lastname, street, city, state, zip, email) {
var url = ''; //Paste URL of GOOGLE SHEET
var ss=
var webAppSheet = ss.getSheetByName("FORM DATA");
webAppSheet.appendRow([firstname, lastname, street, city, state, zip, email, new Date()]);

}

HTML and Javascript Code in Video Below:

<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function AddRow()
{
var firstname =
var lastname =
var street =
var city =
var state =
var zip =
var email =
if(firstname != '' && lastname != '' && street != '' && city != '' && state != '' && zip != '' && email != '')
{
google.script.run.AddRecord(firstname, lastname, street, city, state, zip, email);
= '';
= '';
= '';
= '';
= '';
= '';
= '';
= "";
}
else
{
= "Please Enter All Information!";
}
}
</script>
</head>
<body>
<div style="padding: 10px;" >
<form>
<div class="form-row">
<div class="form-group col-md-3">
<label for="firstname">First Name</label>
<input type="text" id="firstname" class="form-control" />
</div>
<div class="form-group col-md-3">
<label for="lastname">Last Name</label>
<input type="text" id="lastname" class="form-control" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="street">Street</label>
<input type="text" id="street" class="form-control" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-3">
<label for="city">City</label>
<input type="text" id="city" class="form-control" />
</div>
<div class="form-group col-md-2">
<label for="state">State</label>
<input type="text" id="state" class="form-control" />
</div>
<div class="form-group col-md-1">
<label for="zip" >Zip</label>
<input type="text" id="zip" class="form-control" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-3">
<label for="email" >Email</label>
<input type="text" id="email" class="form-control "/>
</div>
</div>
<div class="form-group col-md-3">
<input type="button" value="Submit" class="btn btn-primary" onclick="AddRow()" />
<div id="display_error" style="color: red" ></div>
</div>
</form>
</div>
</body>
</html>

CodeWithCurt

I copied the code, sir and try to modify it and success. Thank you very much. May God always bless you. I follow your channel..

PenaChannel

Fantastic tutorial. Very easy to understand. Thanks!! Now on to the CRUD tutorial.

JohnH-krgg

"Next I'm going to going to copy in my google app script code" 1:54 ...where did you copy this from?

benjosephblue

Looking at options for static sites and forms. I suppose an iframe is the only way to embed this form in an external html page? Thanks for the tutorial.

calvincrane

Thank you very much man.. keep up the good work 👍👍👍

lendypradhana

Can it add the geocode (longitude and latitude) and address on the spreadsheet when Submit is clicked?

sinarrejekibaru

My new row that needs to be populated will start at A8. How do you append a new row at A8 then?

jailbirdxx

Really like this video but is it posible to make dependent dropdown at city and state coloum?

tukangdleming

Looking for option to upload file in this web app form

LieNuk

Hi, how to save this form as pdf? Can you please help me with that?

wahiatasnim

Hello sir very helpful video for me.thank u but sir my sumbit button not work..so i did not put data into my sheet.. please help about that

Rustamkhan-pkkh

Hi Curt! I was wondering if you can help me get an understanding with a code. I'm using Google Forms script editor and I followed a video called "Google Forms - Email Notification Script - Send Confirmation Emails To Users" by another youtuber called Learn Google Spreadsheets. I did everything and that works fine. I found a code to send the respondents response in the email, but I inserted the code but it's not doing the action. I put it under the code that is able to send the confirmation email but it's showing "<" as undefined. I was wondering if you have a solution to this problem? Please answer ASAP Thank You.

coreymccall

Hi. When you click Submit button.How to create go to link browser External ?

aumaummizz

Hi Kurt, awesome page. I was wondering if you have tutorial on how i can have a form that looksup on a googlesheet then shows the data that you have searched back on to the page after submitting. much like for package tracking and item look up. Would help heaps. Thanks! More success!

enshoes

Can we make this type of form in paython with app script

manojrana

Sir how to create submit after redirect form using google webapp script

mayursawant

Why me write Uncaught InvalidArgumentError: Failed due to illegal value in property: 3?

ТарасБабіч-ря

how do we add radio button in this form?

imtisunuplongchar

Thanks you are a hero man it worked .... have an important and big question how to redirect someone who submitted the form to a new page after submit < let's say you embed it to Google Sites website Thanks a lot

relaxingsounds

Create Bootstrap Web App Form on Google Sheets using Google Apps Script

Create Bootstrap Web App Form on Google Sheets using Google Apps Script

Login form using bootstrap #html #css #bootstrap #css3

How To Create Registration Form Using HTML CSS & JavaScript

Learn Bootstrap in less than 20 minutes - Responsive Website Tutorial

Google Web App - Bootstrap CRUD

Creating Fully Working Forms Without Any Code

Bootstrap 4 - Create responsive login form using Bootstrap 4

Creating HTML form using bootstrap | IEMLabs

📝Build a Todo List App with MERN Stack | MERN Stack Full Course For Beginners | Part-1 | Becodewala...

Firebase Web Application 12 - Create a Modal Data Entry form in Bootstrap

Create the Perfect Login Form in Under 10 Minutes with Bootstrap 5! Responsive for mobile device...

How To Create a Login and Register Page using HTML, CSS, and JavaScript #css #html #javascript

Best example of html css javascript| code with harry| #html #css #javascript

Form Design in 2 Minutes | Sign in Form using Bootstrap 5

Modern login page using css #webdesign #webdevelopement #css #webdevelopment #html

Created Reptile | HTML | CSS | Javascript #youtubeshorts #trending #coding #animation #ai #learning

09 - Use bootstrap to format input forms in a PHP app

Complete CRUD Operations using HTML CSS Bootstrap v5 and JavaScript Local Storage. CRUD Application

Create a full Log-in page with just ChatGPT

Easy way to add bootstrap in html

Modern login form made with only HTML & CSS - Transparent Login Form | #coding #webdevelopment #...

🔥 Modern Login Form with Animated Borders – Must Try! #webdevelopment #coding #loginform #animation...

🔥 Animated Border Login Form Using HTML & CSS #webdevelopment #loginform #coding #animation #sho...

How to insert Image in HTML, #html, #html5, #htmlcss