Web Forms with File Uploads 🔥 using Google Sheets and Google Drive

แชร์
ฝัง
  • เผยแพร่เมื่อ 15 พ.ย. 2024
  • #htmlforms #fileupload #webforms
    Hey there, amazing folks! 👋 In today's video, I'm super excited to build web forms using Google sheets and google Drive with File uploading functionalities.
    What's in store for you:
    📁 Record Creation with File Uploads:
    I'll guide you on using this web app, leveraging Google Spreadsheet as the database and Google Drive for file storage. Customize it effortlessly to suit your requirements, whether it's for tracking expenses, managing inventory, or any other data collection need.
    🖋️ Flexible Form Customization:
    Dive into the nitty-gritty of the form - header, footer, and form sections are all customizable. Multiple form sections with unique titles, various input types (text, number, date, file, and more), and even the ability to tweak prefixes and suffixes for a personalized touch.
    🚀 Seamless File Upload Process:
    Witness a smooth file upload process that happens before form submission. The system ensures your uploaded file seamlessly links to the created record. I'll show you how it works step by step.
    🔍 Effortless Record Viewing and Editing:
    Explore the table view feature, allowing you to view and manage your records effortlessly. Edit, delete, and view options are just a click away. I'll demonstrate how you can navigate through the detailed views and make changes seamlessly.
    📊 Behind the Scenes - Spreadsheet and Drive:
    Take a peek behind the scenes as we explore the Google Spreadsheet where all your data gets recorded. A custom function, named PARSE, simplifies data processing. Plus, a quick tour of the Google Drive folder where your uploaded files reside.
    🛠️ Making it Yours - Customization Guide:
    Learn how to make this web app yours by making a copy of the provided Spreadsheet. I'll guide you through the process of deploying the app, customizing the code, and adapting it to your needs. Remember to grab that working URL for future reference.
    💻 Code Customization for Front-end Developers:
    For the tech-savvy folks, I'll show you how to tweak the HTML, CSS, and Vue.js code to fully customize the appearance and theme of the form. It's based on the Vue JS project and utilizes the Bulma CSS framework.
    🚀 Premium Version Sneak Peek:
    Exciting news! I'll drop a link to the premium version of this app, which goes above and beyond. It handles user invitations, authentication, and more advanced features. Perfect for those looking to take it to the next level.
    ------------ Buy me a coffee -----------------------
    buymeacoffee.c...
    -------------------------------------------------------------------
    Links:
    Spreadsheet : docs.google.co...
    Bulma CSS: bulma.io/docum...
    Buefy Docs: buefy.org/docu...
    👍 Final Thoughts and Next Steps:
    If you find this video helpful, don't forget to hit that Subscribe button to stay updated with more content. Feel free to experiment with the provided Spreadsheet, and check the description for all the relevant links and references.
    Thanks for tuning in! 🚀 See you in the next one.

ความคิดเห็น • 34

  • @sajinj2457
    @sajinj2457 8 หลายเดือนก่อน

    Nice tutorial. It would be helpful if you add search option.

  • @darvzglen14344
    @darvzglen14344 5 หลายเดือนก่อน

    I love the video. Just a question, is there a way that we can have an automated pop filled. For example, if we choose number 1 on the 1st filled, the second textbox will show "Me". Then if I will choose 2 on the 1st filled, then the second textbox will show "Yours".

    • @tech-lever
      @tech-lever  5 หลายเดือนก่อน

      If you can code then you can do that.

  • @mewyawww926
    @mewyawww926 9 หลายเดือนก่อน

    Love it Bro. Can u make appointment web form (with set date/time) + google sheets + google calendar

    • @tech-lever
      @tech-lever  9 หลายเดือนก่อน

      It's already in the line of videos.😊

  • @girishyanamala9361
    @girishyanamala9361 4 หลายเดือนก่อน

    🎉🎉🎉❤❤❤ you are creating wonderful content

    • @tech-lever
      @tech-lever  4 หลายเดือนก่อน

      Thanks for your lovely comments

  • @DontWantToShare
    @DontWantToShare 9 หลายเดือนก่อน

    Thank you for the video! When is the premium version app link will be posted?

    • @tech-lever
      @tech-lever  9 หลายเดือนก่อน

      Soon. Thanks for watching the video 😊

  • @keerthyvardhan
    @keerthyvardhan 8 หลายเดือนก่อน

    Hi, its a great video
    for the uploaded files in the form, i want to show the download link beside copy link button after submission
    with disabling some features in table view such as edit&delete only view is enough with download links
    if possible please do a video for that
    Thank you

    • @tech-lever
      @tech-lever  8 หลายเดือนก่อน

      That's easy. Try commenting out the code blocks that is responsible for rendering edit and delete buttons. You will find those in the response table file. Or you can search for the edit and delete keywords and then comment it out.

    • @keerthyvardhan
      @keerthyvardhan 8 หลายเดือนก่อน

      @@tech-leverthank you so much

  • @trending18-ds4ny
    @trending18-ds4ny 2 หลายเดือนก่อน

    mam you are the Great

    • @tech-lever
      @tech-lever  2 หลายเดือนก่อน

      Thanks a lot

  • @dimitrisvoudouris
    @dimitrisvoudouris 9 หลายเดือนก่อน

    amazing app thank you very much we would like more similar apps

    • @tech-lever
      @tech-lever  9 หลายเดือนก่อน

      Thank you very much. More will come...

  • @Thaidude101
    @Thaidude101 9 หลายเดือนก่อน

    Modify form submit data is working fine. But somehow "Parsed Data" sheet doesn't update as new data added. Do I need to do anything on that sheet?

    • @tech-lever
      @tech-lever  8 หลายเดือนก่อน +1

      Yes. You will have to drag the formula down. Instructions are given in the video. Thanks for showing interest in the video.😊

  • @MuradAli-g8h
    @MuradAli-g8h 7 หลายเดือนก่อน

    how can i change to multiple option selection?

    • @tech-lever
      @tech-lever  7 หลายเดือนก่อน

      Its simple. Please browse buefy docs. There you will find how to do it.

  • @shahrizuanosman9089
    @shahrizuanosman9089 9 หลายเดือนก่อน

    amazing.. bro can you create e-document?

    • @tech-lever
      @tech-lever  9 หลายเดือนก่อน

      Sorry. Not in this version. You can tell your requirements in more detail. I will see if I can post the video on that.

    • @shahrizuanosman9089
      @shahrizuanosman9089 9 หลายเดือนก่อน

      @@tech-lever Sir can you create e-document like document library.? it same like this video but the system will have person who update the file (this is auto based on the signed in person),description, file name ,file category and etc.. If possible can you have a filter so that i can filter or search file based on the client file,file category and ettc

  • @LuluBaker
    @LuluBaker 9 หลายเดือนก่อน

    Do you accept request for gig work? I wouldn't mind paying for the service

    • @tech-lever
      @tech-lever  9 หลายเดือนก่อน

      Please contact me. You can get me email in About me section

  • @Pormodtanoy
    @Pormodtanoy 9 หลายเดือนก่อน

    wow thankyou very much.

    • @tech-lever
      @tech-lever  9 หลายเดือนก่อน +1

      I am glad you liked it 😊

    • @donadowlan1128
      @donadowlan1128 4 หลายเดือนก่อน +1

      Are you ai or real person? If real, I have form choice limit code that I would like to integrate with the code in this video. Is it possible to receive your help with this.

  • @mohammadsameer4427
    @mohammadsameer4427 9 หลายเดือนก่อน

    Sorry but when i clicked on spreadsheet link I am getting sheet with view only options, So i am not able to use as per my need

    • @tech-lever
      @tech-lever  9 หลายเดือนก่อน

      Please watch the video full you will get to know the instructions

    • @mohammadsameer4427
      @mohammadsameer4427 9 หลายเดือนก่อน

      Thanks

  • @TechnoSahid
    @TechnoSahid 9 หลายเดือนก่อน

    ❤❤❤

  • @TechnoSahid
    @TechnoSahid 9 หลายเดือนก่อน

    Dynamic table view app script
    my request 🙏

    • @tech-lever
      @tech-lever  9 หลายเดือนก่อน

      Can you tell me little bit more? I mean what it should be able to do?