Web App - Google Sheets - Form Example

Build a Web App in Google Sheets. We'll create a Form using Metro UI metroui.org.ua/intro.html and then connect it to Google Sheets as backend.
00:00:00 Google Sheets Web App Example
00:02:50 Google Web App Form with Metro UI
00:27.39 Send HTML Form Data to Google Sheets
00:43:22 Reset HTML Form
00:50:54 Confirmation Message
00:57:35 Web Form Validation
01:07:53 Add Progress/Loading Spinner
01:14:18 Populate Dropdown in Form Using Spreadsheet Data
#webapp #googlesheets

Пікірлер: 72

  • @humayunahmadrajib9451
    @humayunahmadrajib94517 ай бұрын

    This video was very helpful and informative. I learned a lot from it and was able to create my own web app form using Google sheets. You explained everything clearly and patiently, and the Metro UI design was awesome. Thank you for sharing this amazing tutorial! 💖💖💖

  • @bradlegassick9327
    @bradlegassick9327 Жыл бұрын

    Thanks great content.

  • @kyle943
    @kyle943 Жыл бұрын

    Excellent as usual! I’m going to be making a scheduler project for a barber shop that will look super similar to this. I’m planning to feed the drop down with the available times that will update as other times get taken away by other users. The list of available times will remove those that have been taken for that day.

  • @getitdonetube

    @getitdonetube

    Жыл бұрын

    Fantastic!

  • @DanKulibert
    @DanKulibert Жыл бұрын

    Great tutorial as always! Also, you can format the document with Shift+Option+F or right-click a blank spot in the code editor and select 'Format Document'

  • @getitdonetube

    @getitdonetube

    Жыл бұрын

    Somehow those auto-formatters never worked for me, like for example beatify in vscode. I would have to probably grab one of them and modify them to the exact way I like things formatted in order to be satisfied with the results. This is just "me" problem though, I'm sure those tools work great for most people.

  • @yogeshchaudhary4306
    @yogeshchaudhary4306 Жыл бұрын

    Hi I started learnt from you and now I have done 100s of projects including advance web apps and add-ons too Thanks man

  • @getitdonetube

    @getitdonetube

    Жыл бұрын

    Great 👍

  • @scotolivera8207
    @scotolivera8207 Жыл бұрын

    Thanks a lot

  • @bulbulahmed3098
    @bulbulahmed30985 ай бұрын

    great.

  • @calidadsed4713
    @calidadsed4713 Жыл бұрын

    Muchas gracias por su gran ayuda, que mi Dios lo bendiga 🙏 por siempre.

  • @getitdonetube

    @getitdonetube

    Жыл бұрын

    👍

  • @phuctran-dh3le
    @phuctran-dh3le Жыл бұрын

    Thank you for sharing this

  • @getitdonetube

    @getitdonetube

    Жыл бұрын

    👍

  • @AdelAbdoh060
    @AdelAbdoh060 Жыл бұрын

    excellent i wish if you make more vedio about google sheet script

  • @MichaelDaniels
    @MichaelDaniels7 ай бұрын

    Fantastic video. Is there a way to make the results page of the Google sheet where you collect the data to display as a data table on the web. Maybe have them as a list of times and dates. Like a TV guide type list where the time would show in in increments of an hour each? Thanks

  • @pkmcimaragasofficial7351
    @pkmcimaragasofficial73519 ай бұрын

    Thanks bro! I'm waiting for a way to display that data in webapps with tables

  • @carlosnavatojr9296
    @carlosnavatojr9296 Жыл бұрын

    Hi sir Get_it Done! Thank you iit very clear and clean tutorial.. i have one request please make a tutorial regarding FILE INPUT to upload files direct to Google Drive. using Metro UI.. thank yoyu

  • @maximusadrem
    @maximusadrem Жыл бұрын

    👍

  • @getitdonetube

    @getitdonetube

    Жыл бұрын

    👍

  • @nunomarques6106
    @nunomarques6106 Жыл бұрын

    Hi. I've made a form following this example and it works just fine. Can you tell me how i can add an automatic ID for each record i get when i click the submit button? Thank you.

  • @nunomarques6106
    @nunomarques6106 Жыл бұрын

    Hi. I have made one form using google sheets and metro ui and it works really nice. In the form i have 2 droplist fields: a worker name and its ID. This data is obtained through a google sheet named "workname". This sheet have 2 columns: one with worker name and other with its id. Its possible to add on the form the possibility to, when i select a name, the field for ID to be automatically filled with worker ID? Thank you for your help. Keep going with nice job!

  • @nunomarques6106
    @nunomarques6106 Жыл бұрын

    Hi. I finished my form and its works just fine. I would like to use data stored in google sheet to deploy it in a datatable, to consult and search results. Can i do this two tasks in same google sheet and same script? I can i do it to after deploy diferent web pages? Is already any video that goes over this? Thank you.

  • @andreaguerri.educational
    @andreaguerri.educational7 ай бұрын

    Great! But I integrate the Choice file form is not working. Why?

  • @hermanjohnson2105
    @hermanjohnson2105 Жыл бұрын

    How did you get the value of the Categories Select Menu with the option value being set?

  • @cliffcarroll5898
    @cliffcarroll58986 ай бұрын

    Great video, not a programmer but able to recreate what I need with this!! I do have a problem I need help with. I am trying to create a button that will allow for multiple additional drop boxes to be created which will appear as a "Add Product" box. I also will need to be able to have this data submit to the google sheet. Can someone help me with this?

  • @lapneto
    @lapneto Жыл бұрын

    Awesome as usual. Thank you for this! One question: I have a similar "notes" field that is used as an email body. Any way to keep the line breaks inside my GS code? Thanks again, love your work. Learned so much from you! Keep it up!

  • @getitdonetube

    @getitdonetube

    Жыл бұрын

    Line breaks should be included when you get the value from textarea. I assume how you later use that is the issue.

  • @lapneto

    @lapneto

    Жыл бұрын

    @@getitdonetube Exactly. I put it into a variable, but all I get is a string that concatenates the line breaks... any thoughts? Thanks!

  • @getitdonetube

    @getitdonetube

    Жыл бұрын

    If you're emailing HTML then you probably need to replace with

  • @getitdonetube

    @getitdonetube

    Жыл бұрын

    something like this const htmlTextareaValue = textareaValue.replace(/(?: | | )/g, '')

  • @lapneto

    @lapneto

    Жыл бұрын

    @@getitdonetube Worked like a charm! Thank you for this, much appreciated! Love your work!

  • @timdewin
    @timdewin4 ай бұрын

    Great tutorial! How can i make adependent dropdown with metro ui?

  • @bloggerkickstart9060
    @bloggerkickstart906011 ай бұрын

    Howt to put upload file function in the form as well

  • @tongthokworld5466
    @tongthokworld5466 Жыл бұрын

    Is this possible to show user picture with data by ID number?

  • @asimkumarchakraborty2456
    @asimkumarchakraborty2456 Жыл бұрын

    Hi sir, how do I create a dependent drop-down? Like you share here.

  • @JBAhmad-vu2lr
    @JBAhmad-vu2lr9 ай бұрын

    How to create two independent groups of radio buttons?

  • @edgregorio2
    @edgregorio2 Жыл бұрын

    Good day.. How about if instead of resetting the form, I want the user to be redirected to another site after Clicking the submit button? How would I do that?

  • @nunomarques6106
    @nunomarques6106 Жыл бұрын

    Hi. I already finish myy app with multipages using this example and it just works fine. I want to deploy it to a google sites but it doesn´t allow to run it by security reasons. Can you show how we can deploy this exemple (multipages with buttons) on google sites? Another question is how can i make a donation? Thank you.

  • @nunomarques6106

    @nunomarques6106

    Жыл бұрын

    Help Please :)

  • @dadonrami3884
    @dadonrami38849 ай бұрын

    thanks, can you help why the doesn't work for me. the {} are in Red

  • @SohamShreeTravels
    @SohamShreeTravels Жыл бұрын

    I have Google Apps Script Web App. Need a login function with Google means Google OAuth 2, authorised user will open app with app link & app ask to login with Google, dont want to give them sheets access

  • @user-pf8ts6dl5e
    @user-pf8ts6dl5e8 ай бұрын

    How could I add a favicon to my web app using an image from my google drive?

  • @sktrading8027
    @sktrading8027 Жыл бұрын

    Thanx I need script for copying defind range from sheet 1 to paste in defind range in sheet 2 in every new blank row I am making weather date time data project from live feeding link

  • @netboy1102

    @netboy1102

    Жыл бұрын

    .getRange("").getValue() - sheet1 .getRange(sheet2.getLastRow(), 1).setValue() Something like that. If you have watched previous videos from the channel you should know how to do it

  • @nunomarques6106
    @nunomarques6106 Жыл бұрын

    Hi. I completed my web app sucessfully. I just want to take away google banner on header. Can you help to do that in this example? Thank you.

  • @getitdonetube

    @getitdonetube

    Жыл бұрын

    Try this kzread.info/dash/bejne/hH6ow6-DhM-4mKg.html

  • @nunomarques6106

    @nunomarques6106

    Жыл бұрын

    @@getitdonetube Hi. Thanks for your kindly answer. To apply this do i have to create render function? Since the code for dropdowns is a little bit diferent than this example, can you help me to apply it on this form? Thanks.

  • @immankJie
    @immankJie6 ай бұрын

    Can't connect to google sheet, why?

  • @nurasian7355
    @nurasian7355 Жыл бұрын

    Please share your code, thank you.

  • @getitdonetube

    @getitdonetube

    Жыл бұрын

    Code is available for Patrons

  • @boredomindex3353
    @boredomindex3353 Жыл бұрын

    What's your donation link? Possibly PayPal

  • @getitdonetube

    @getitdonetube

    Жыл бұрын

    www.paypal.com/donate/?hosted_button_id=SAH4HWG6M7G86 Thank You!

  • @boredomindex3353

    @boredomindex3353

    Жыл бұрын

    @@getitdonetube I learn a lot from you. I wish I could contribute more. Just a note: you should add the donation link to your video descriptions.

  • @boredomindex3353

    @boredomindex3353

    Жыл бұрын

    @@getitdonetube It says "donations to this recipient aren't supported in this country" ☹️

  • @getitdonetube

    @getitdonetube

    Жыл бұрын

    I asked them to change some settings. Could you try again?

  • @boredomindex3353

    @boredomindex3353

    Жыл бұрын

    @@getitdonetube Sadly, it didn't work. Do you have any active classes I can buy?

  • @mypulsatermurah-ys8qu
    @mypulsatermurah-ys8qu28 күн бұрын

    Hello can you help me? I got 2 error in console: 1. Unchecked runtime.lastError: The message port closed before a response was received 2. Third-party cookie will be blocked. Learn more in the Issues tab And when I debug acceptData Function there is info undefined My code below

  • @mypulsatermurah-ys8qu

    @mypulsatermurah-ys8qu

    28 күн бұрын

    const basokaForm = document.getElementById("basoka-form") basokaForm.addEventListener("submit",submitData) function submitData(e){ e.preventDefault() console.log("Form Anda Telah Terkirim") console.log(this) google.script.run.acceptData(this) }

  • @mypulsatermurah-ys8qu

    @mypulsatermurah-ys8qu

    28 күн бұрын

    function doGet() { const htmlService = HtmlService.createTemplateFromFile("index") const html = htmlService.evaluate().addMetaTag("viewport","width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no") return html } function acceptData(formData){ console.log(formData) }

  • @nunomarques6106
    @nunomarques6106 Жыл бұрын

    Hi. I have finished my form with success. Now i want to add a button at right of "web form" to return to my home page. I already had the button but by some reason i am not abble to put "webform" on left and home button align to right. Here is the code: EPI Webform

  • @nunomarques6106
    @nunomarques6106 Жыл бұрын

    Hi. I've followed your steps but when i reach reset form, it doen´t work for me and after click submit button form desapear and data doen't save on sheet. const epiForm = document.getElementById("epi-form") epiForm.addEventListener("submit",submitData) function submitData(e){ e.preventDefault() console.log("Form Submitted") console.log(this) google.script.run.withSuccessHandler(() => { epiForm.reset() }).withFailureHandler(() => { })collectData(this) } Can you help me to see whats wrong? Thanks

  • @getitdonetube

    @getitdonetube

    Жыл бұрын

    .collectData(this)

  • @nunomarques6106

    @nunomarques6106

    Жыл бұрын

    @@getitdonetube Thank you

  • @netboy1102

    @netboy1102

    Жыл бұрын

    Dot dot dot

  • @amarkantmishra
    @amarkantmishra Жыл бұрын

    Getting SyntaxError: Unexpected identifier (line 8, file ”Code") const html = htmlService.evaluate().addMetaTag("viewport", "width=device-width, inital-scale=1.0, maximum-scale=1.0, user-scalable=no")

  • @getitdonetube

    @getitdonetube

    Жыл бұрын

    What's in your previous and next line?