Jamstack Friday with T&T: Netlify Forms & Google sheets with Next.js

it is friday again and welcome back to gemstack fridays with tnt how are you tony i am great how about yourself awesome it's a real friday we've done so much i love working at startups man we just go full force ahead yeah a lot of a lot of work yeah a lot of work a lot of work we did you did some really cool stuff today right so i think why don't we just share that however let's run our intro first and after that you can actually explain what you did and then we'll just share the screen and show some cool stuff how about that let's do it alrighty then this is gem stack friday with tnt [Music] [Music] that's such a fun intro i want more of the song but then we get copyright stricken so anyways um why don't you explain a little bit what you did and then let's share some screen yeah definitely so had a requirement one of the projects wanted to collect data from the website through a form and there's multiple parties involved in this project so they all wanted to get access to people who are submitting information so instead of having a person in place who is copying emailing sending it's a big list that everyone can access i decided that we can leverage netlify forms yeah and google sheets and a tool called zapier to send the data from google form it's not google forms with netlify forms so google sheets and then everyone can just go in and read the list and that's it nobody has to give like marketers and business folks don't have to get into netlify dashboard and download csv file none of that it's all clean and ready to go and what i like about this it sounds like to me like look ma no servers but we actually do some stuff now with free tools without servers in the gemstack world that used to cost us thousands before right with with um server based or managed hosting and all these software things we now just click it together and code a little so yeah i'm pretty excited for you to show us what you can do in the gemstack world without servers and actually get this whole thing to work yeah it's amazing technology evolves and the tools are just so advanced now in nowadays and documentation is so easy and even beyond documentation sometimes just super simple to get it going so i'll be showing you some some code uh how we add like netlify forms to a next.js project like no there's nothing there just like two lines of code but two two pieces of text and that's it it's a brave new world okay let's hear your screen here we go all right so what do we do next yes yeah so we got some form dispatching that we're gonna be doing here um this is next just starter basic next year starter and we're going to navigate to a forms page so this is hosted on netlify already right yep so i have multiple tabs here open so i'm going to go through one of each one of those in a second but first let's go ahead and submit a form so let's do this it would be the demo effect right let's see if it works that would be awesome here we go i don't know i don't know what i'm doing i don't know what i'm doing tt fine email all good and this needs to be proper because if i put some bad email netlifeforms will throw it to spam and then the data will never come through so it's already built in the uh the anti-spam filters that's cool that's cool let's do something like hello no not hello john rob gmail.com i like it [Music] hopefully it works sam yeah exactly so send so and okay so it was successfully submitted yeah so another thing here as you can see i went to thank you page so i'll also show you how you can have that success page as well built out super simple and next as well as how you define that in your form so next we're going to go to our forms within netlify so i have it my my site forms right here and and contact the data is already here bam there you go so netlify offers you kind of a forms service just out of the box yep that's pretty amazing and it's free certain amount of form submissions are free so yeah i think you have like 100 a day or something um yeah something like that i yeah exactly so data is here now next thing is uh we have to push that data now to google sheets and we're going to be leveraging notifications so forms have if you're going to form um and into your site settings on the forms you have a different okay there we go the billing so we have total of 100 per billion we have 100 per period so 100 per month i guess so not bad actually no it's actually fine and then we have some outgoing notification that we can post to a in our case we're going to be using zapier so this is a web hook after each successful post submission or form submission it's called sap here with some information correct that's right okay and the form obviously we're specifying which form and you can add different notifications so you can do outgoing work nice whatever you want slack and email yeah cool so next we're gonna go to zapier and see how it's all structured here so in zapier there's different zaps that you can just go ahead and grab out of the box and obviously zapier netlify have some ready to go zaps oh this exists so you didn't have to code anything you kind of just select hey this is the sap i like and it just that's cool so what do we have here is we have a netlify and trigger event is new form submission that's step one step two is obviously my account then trigger is going to be from my site from the form yeah and we can test it but it's skipped we don't care about that now no next let's go into google sheets and see what we have here so now create a row in a google sheet based on a submission here okay correct correct let's actually see if it uh we'll go there in a second so what we do here is the google sheet we're selecting an application google sheets yeah and it says create spreadsheet row and you can change it to something else create like if you want to create a new like a spreadsheet and yeah you can go crazy account same thing my account yeah setup action the form the medley platform is an actual spreadsheet and then inside of it i'm taking the worksheet sheet1 and inside of it i'm designing here how i want my data to come through because there's a lot of data that's coming in but i have defined the the columns already and i'm saying put in each column specific data that i'm collecting from so it's submission it found these columns already because you put them in the sheet correct correct this is so easy crazy yeah yeah and then that's it and then i just save it and i activate it and that's it so let's go and see in the zapier kind of uh i let's see zap history yeah so i think it just ran yeah just one steps around yeah exactly 10 a.m 10 a.m no i think so yeah i think this is yeah so it just ran right now let's see if it's here so now i am in my google sheets yeah and row number 14. there it is yep it just came through uh it actually was much faster but due to uh so it's instantaneously showing up here so now yeah at this moment we're done kind of with the requirement what has to be happening but i went ahead and went little extra extra step of course we are tnt man we need a bit of extra yeah so um there's a way for you to expose this data as an api endpoint to consume it on the site so for example let's say i want to even simplify it more so people don't have to come to a google spreadsheet and they want to consume that data in another application or like a website or whatever exactly correct yeah so so one thing just to run through it real quick we have metlife forms the name and then sheet number one and we have row abcd with id name email and timestamp so here you have tools and you just click on script editor okay and it will open up a new tab for me where i can design this code or build this code that will expose my data for me to consume on the uh on my web app so what am i doing here i'm just pretty much using it's a think of it as a uh a function that you're creating like a serverless function so this is javascript right or is it yeah it is or not yes i don't actually it is a javascript with their uh oh you're we're interacting with their library okay and we're hosting this on on google so it's all hosted on google ah they do this for you this is awesome so here when i go to deploy i'll actually deploy and that end point will be available for me yeah so here we grabbing sheet 1 then we're grabbing the ranges and then we're just going through uh all of the uh columns and we're just outputting the data as a json array and that's how kind of straightforward it is and then on the outside yeah once i deployed it i have an i have a url that they provide me okay okay and as you can see it's hosted on google and as soon as i do a get request i should see the latest data here there it is so now you basically created another api that's running on google that they host for you so it's kind of like a lambda function style thing or i don't even know how they would call this but that's nice you could yeah if you think about somebody's watching it's like why would you go all of this route if you can just go the website netify forms and then just consume that data through yes that's why api sure you can do that because netlify has a forms api that you can get this data from as well exactly but the purpose here was a little different was to push it to google sheets and in case somebody makes changes here and adjust data and let's say let's just adjust this to 22 and it automatically i'm going to save and i'm going to consume this data i should see that data updated right away whoa there it is that's pretty cool though yep so you're actually the origin of truth actually now became the form no i mean the google sheet rather than the netlife form which is actually good because most people that we will work with in this project will be going to the sheet and dealing with it right yep exactly so cool the power is it's like the power power of web okay so next is what i wanted to walk through is the some code and to show you how it is all wired so on the form side this is an xjs app and kind of to show that kind of the tree the structure of our application very simple out of the box nothing special here so we have components and we have pages and that's it so the first thing is a component that had to be created a contact form and there's nothing special here it's basic html with a few things that we have to add into the form action uh in order to uh integrate with netflix so method once you push this code into metlify servers they automatically identify that this is a metallify form and we need to yeah based on the data property right that's why they know it's in netlify form yep yep yep that's cool and so html4 in the label that's actually a react thing right not something special uh on the label you normally do a four property but you have to do html4 here oh yeah yeah no it's uh it's just jsx yeah that's that's yeah nothing still getting used to uh to jsx on my end there you go yeah yeah sup super simple super just yeah easy nothing's nothing special here and the action for tanks is a post step when you saw the thank you your form has been successful submitted and this is where i have my thank you page so now let's move from components to pages so in our index no not an index in our form page yeah we are calling our contact form and that's sure there's nothing special here exactly and thanks we're just it's basically just a next page that is static where you say hey thank you that was awesome submitted exactly okay cool and then if you at some point decide that hey i want to consume that data and output it so we're going to fetch the url with uh obviously that end point that i was just testing in um what is it called in postman postman yeah exactly yeah and then you can reiterate through it as well so i'm outputting the data to console so let's just kind of look at it real quick and inspect consoles go to the console here we go and that's it here oh there it is data oh yeah 22. so everything we've been updating there in am i in the google sheets it's already here available i'm surprised how fast the response also is from google that's great it feels basically instant so now we are in a jam stack site where we actually have dynamic data of the form we just submitted through all the hoops but we now have people that actually use google sheets that's great yep yep and this was basically all free stuff like anyone watching this could do this right now and then impress marketing people all over the globe because we've wanted this stuff and it's like oh yeah but i need a server and buy this and that's license and blah blah blah and now this you just did this how long did it take you to build this uh i probably spent the most time on figuring out the google sheets export uh yeah of course yeah everything else maybe like 10 15 minutes seriously i mean next year's out of the box yes sure this is it's not the most polished thing just yet it just works right yeah the the the hardest not hardest part but they had to go through the documentation of reading uh how uh the how do you ex expose that data yeah exactly so that's the only thing that was the only learning curve but overall i don't know a few hours maybe that's it nice awesome so thanks dude for showing us this and i hope that this shows a little bit that kind of like you can go for it and whatever you come up with in your mind you can likely connect it with lambda functions and netlify stuff or for sale stuff and just get it going without surfers or at least without origins so that's great thank you very much and if you liked what you saw please leave a comment if you have your own ideas go for it and let us know what you did and if you have any questions you can just reach out to tony on twitter and so he can explain more if you wanted to yeah and to add it up uh this uh project or this little um poc that i did is gonna be on github so we'll add a link in the description so you can grab it yeah so you can actually see exactly how it was done awesome cheers tony and i will see you next week bye all right bye