How to build a Contact Form in Node.js and Google Sheets?

แชร์
ฝัง
  • เผยแพร่เมื่อ 16 มิ.ย. 2024
  • Hello, my friends and fellow developers!
    In this video, we cover how you can build a contact form that integrates with Google Sheets and all the details are stored in the sheet once the form is submitted! We will use Node.js, Express and Google Sheets API to make it work.
    Let me know in the comments below if you want more Node.js content or something else.
    This tutorial is heavily inspired by ‪@Fireship‬. His video on using Google Sheets as a database helped me build this and many other cool projects.
    Links mentioned in the video:
    Google Dev Console - console.cloud.google.com/apis...
    GitHub Repo - github.com/max-programming/co...
    Fireship's video - • Google Sheets… Your Ne...
    🔥 Timestamps Start 🔥
    00:00 - Intro & Demo
    01:23 - Creating the project
    02:17 - Installing dependencies
    03:32 - package.json changes
    03:54 - Set up Google Sheets API
    07:08 - Download key file
    08:09 - Create and configure the sheet
    09:32 - Back-end coding starts
    16:17 - Set up sheet client in code
    22:15 - Appending test data to sheet
    26:49 - Adding user's info to sheet
    30:49 - Front-end coding starts
    36:24 - Outro
    🔥 Timestamps End 🔥
    Other Tutorials:
    ⚛️ React and Material UI Todo App: bit.ly/reactmattodo
    🟨 Other JavaScript videos: bit.ly/jstutorials
    📘 Visual Studio Code videos: bit.ly/vscodevids
    🔋 Build a Battery App in JS: • 🔋 Build a Battery Info...
    Connect 🔗 :
    Twitter: / maxprogramming1
    Facebook: / max-programming-103081...
    GitHub: github.com/max-programming/
    VS Code Theme used: Default Dark+
    Font used: Cascadia Code
    Suggest, ask doubts in the comments and share these videos to help!
    Thanks for Watching!
    #nodejs #javascript #programming

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

  • @adgancodes
    @adgancodes ปีที่แล้ว +4

    This is what I was looking for!
    Thanks!

  • @eurekaadvisor1944
    @eurekaadvisor1944 ปีที่แล้ว +1

    great. i am not a back end person and I am not either a front end developer, but you video has changed my life :) well done Usman. I hope I can see more videos like this one in the same direction

  • @user-gk8hn3xd6q
    @user-gk8hn3xd6q ปีที่แล้ว +1

    This worked!, Thanks

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

    works, thank you

  • @shivangsharma2562
    @shivangsharma2562 ปีที่แล้ว +2

    Nice video 🔥🔥🔥

  • @conaticus
    @conaticus ปีที่แล้ว +2

    keep it up :)

  • @mdhasninesheak792
    @mdhasninesheak792 ปีที่แล้ว +2

    Thanks Brother
    Make some videos on Next js 13.

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

    Amazing Brother, can we retrieve data through excel to nodeJs and then show data using any frontend framework.

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

      Yep. You can make an API with Node and fetch data from Excel there.
      Then you can fetch data from the Node API in your frontend framework

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

      @@MaxProgramming it would be great for us if you make a video on this.
      Thanks a lot!

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

      @@Abdulazizweb Thank you. I'd love to do that. Thanks for the suggestion

  • @joaquincardillo
    @joaquincardillo ปีที่แล้ว +1

    I've not been able to run the server. Localhost:5000 returns a white screen wwith a message that reads 'Cannot GET /'. I swear I've followed you step by step

    • @MaxProgramming
      @MaxProgramming  ปีที่แล้ว

      Hey come over to my discord. Let's fix your problem there. usmans.me/discord

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

    How to deploy the app to Netlify?

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

      You can't deploy a nodejs app to Netlify. You'd have to deploy it to a node server provider like Railway, Render, Fly, Heroku
      Or else you can use Netlify serverless functions (that is nodejs code Netlify can run - check the documentation), the code might be a little bit different but it's possible and free as well
      Here's a short tutorial on Netlify serverless functions: th-cam.com/video/NZRZJqChwa8/w-d-xo.html

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

      @@MaxProgramming Ah, got it! Its straightforward to deploy with Heroku , though due to Google auth library with Node v18 issues, process.env.PRIVATE_KEY should be process.env.PRIVATE_KEY .replace(/\
      /g, '
      ')

  • @DMC888
    @DMC888 7 หลายเดือนก่อน

    Just a small thing. You can skip putting the values in const values, just use the body object.
    requestBody: {
    values: [[body.name, body.email, body.message]],

    • @MaxProgramming
      @MaxProgramming  7 หลายเดือนก่อน +1

      Yeah that works too. Thanks for sharing 😄