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.
Nice tutorial. It would be helpful if you add search option.
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".
If you can code then you can do that.
Love it Bro. Can u make appointment web form (with set date/time) + google sheets + google calendar
It's already in the line of videos.😊
🎉🎉🎉❤❤❤ you are creating wonderful content
Thanks for your lovely comments
Thank you for the video! When is the premium version app link will be posted?
Soon. Thanks for watching the video 😊
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
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.
@@tech-leverthank you so much
mam you are the Great
Thanks a lot
amazing app thank you very much we would like more similar apps
Thank you very much. More will come...
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?
Yes. You will have to drag the formula down. Instructions are given in the video. Thanks for showing interest in the video.😊
how can i change to multiple option selection?
Its simple. Please browse buefy docs. There you will find how to do it.
amazing.. bro can you create e-document?
Sorry. Not in this version. You can tell your requirements in more detail. I will see if I can post the video on that.
@@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
Do you accept request for gig work? I wouldn't mind paying for the service
Please contact me. You can get me email in About me section
wow thankyou very much.
I am glad you liked it 😊
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.
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
Please watch the video full you will get to know the instructions
Thanks
❤❤❤
Dynamic table view app script
my request 🙏
Can you tell me little bit more? I mean what it should be able to do?