Using Webflow with Zapier - Intro tutorial - Stream clip

so what are we going to be doing today so today's stream is all about automation and I'm going to try to make it as simple as possible for everyone to understand because automation kind of sounds like you need code and in the no code space you don't you know for some stuff you don't and I'm gonna go over three I'm going to go over three different platforms that helps web flow sites become more automated we're gonna go over a zapier we're gonna go over integral mat and we're gonna go over parabola all right so that's what we're doing let's get to it I made a new website so there we go okay so let's go ahead and let's do this I'm gonna go to whimsical comm and we're just gonna flowchart this out real quick yeah here's a scenario a super simple scenario okay and I'm gonna draw it out for everyone a user comes to the website and then fills out a form user fills out user fills out form a form all right after it feels after the user fills out a form then the user what do we want to do with with this foreign data so someone goes to our web flow site and then this form information goes where hmm it can go anywhere you can go to Google sheets it can go to air table you can go a text message to your mom whatever but we'll make this simple we'll just send send data to a Google sheet cool so that but also we can send in hey Andrew so yeah we can send an email instant email to ourselves with that data so this is simple automation rather than having to take the data out of your web flow site form settings page and then copy and paste that into a Google sheet and then copy and paste that data over to an email and then sending that email nope you can just say when this happens then do all this and this is simple to do inside of inside of you know inside of zapier okay so this is what we're gonna try to do in zapier real quick okay so I'm gonna make a form do let's do this we can actually use layouts contact form cool first name last name how about we just do name and we'll do location that's it let me delete everything else oh this is grid huh nice delete cool and then yeah let's do message - okay cool publish okay now let me gonna let me set up my Google sheet and so we have name location and let's put message cool now that we have that we want to send data from this web flow page over to this Google sheet so A to B super simple and again I say simple simple is relative it's your first time doing automations I understand alright so we're here now we're gonna go to zapier and zapier has a free account plan so you can play around with it and so when you get into zapier you can say from web flow to Google sheets and then when this happens when a form submission happens then create a new spreadsheet row news app alright so from that UI you get into this one now may look scary at first as with all things new that are scary you just go through the process from top to bottom okay so let me connect to my web flow account let me see here which one did I use I think it's no using zero zaps oh this one it says use this one yeah I named it that okay continue site name and I'm going to search for and I named it pixel geek automation there we go automation stream for name and look at this no options available so when you're trying to automate something zapier is saying hey I need data but I can't find data inside of this website so I don't know what to do so this is why when you go here you need to submit data because what zapier is actually doing it's going to your project settings and then it's going into your forms and then it's looking for data in here but since we have no data zapier is like I don't know what to do what do you what do you want I can't find anything so you have to give it data so I'm just gonna put Nelson location there we go and then message hello world submit yay and so where does this go if i refresh that data is here so now that we have some test data if I go here back to zapier and refresh the fields and I click form name it doesn't work dang it come on it's supposed to load more yeh let me refresh the whole page there we go ok so i refresh the page and now my contact form is in there alright so I'm gonna press continue test trigger and so you see it's just you just go one step after another after another after another okay and now you can see that hey we found a submission and again it's just pulling that data from my web flow site press Continue alright next step we're done with this first step now we want to send this over to the Google sheet so Google sheet is the app I want I want it to create a new spreadsheet row and now I need a Google sheets there we go oh I gotta reconnect it hold on reconnect it here hold on [Music] what there we go so after you let zapier connect to your account you can press Continue and then now we just go into the Google Drive and we find the spreadsheet what did I call it I called it Stream example well it's right there so Stream example and then the worksheet sheet one alright so you just go down the list and this is just like connecting a string from one end to another all right so I'm connecting the name field of the the name column of my worksheet with the name in the form submission I connect the location with Oh what did I name sorry if this is getting confusing there we go oh I first so last name is actually so I I didn't name this correctly but we'll keep going so we'll pretend last name is location so let's see here show all options there we go so name name is Nelson location is San Francisco and again let me know if I'm going too fast or if you have any questions and then message is hello world okay I'm gonna press continue and test and continue cool so now that it's been tested I can go here and check it out it's actually oops let me not make it bold there we go there you go so I've sent data here if I'm happy with the results I can just go back to zapier and turn it on see random Germany hi yay it worked so yeah that's automation the kid thank you ran Jen from Brussels again hello so yeah automation I'm not doing it I'm not taking any of the data and copy and pasting you into this Google sheet yeah I love you to see simple from A to B now what if you want to do a to B to C like I've done here you know okay I don't get email spam so maybe we can change this step to I don't know let's oh let's put this into a web flow collection add data into web flow CMS all right so we can do that we can someone submits the form it submits a Google sheet and then also submits to a web flow CMS that is possible okay so now I'm gonna go back to my web flow site going to the designer and let's create a collection and like we've learned I think two weeks ago what is a collection it's basically a Google sheet you're just creating another Google sheet just like I did here where I have the names of the fields you're doing the same thing inside a web flow so let's go ahead and make a collection and we'll just call this stream collection and we have name so we're done with that let's add another plain text for location and then we'll add another plain text and make this multi-line for message save field create collection and publish and I'm done so now I can go back to zapier press Plus and start typing webflow and here I go so choose an action I want to create a live item so you have two ways to create an item inside of your web flow collection creating the item just saves it as a draft it's kind of like when you make a new CMS item inside of a web flow collection it's not published yet however if you want it to automatically be live and published on your site so you don't have to press the publish button you can click on create live item so I'm gonna click that one and press Continue choose my web flow account use this one continue find the site and its stream no pixel yiq automation stream and now it's going to look for a collection now if you don't see your collection here that means you didn't publish your site yet so you have to publish it so the the web flow servers when it when it talks is a peer it knows oh it has a cut it has a collection okay so click on collection and now just like I said you're connecting one end of a string to another one side to another I'm gonna connect location with location I'm going to connect messages message with message and then I'm going to connect name with name that's it for slug you don't have to put anything you can leave the slug as is because the slug what automatically does is just like how web flow does it it automatically creates a slug if I go like this and say John Smith and notice how a slug is automatically made that's what's happening inside of this automation as well okay it lowercases everything it removes spaces and replaces it with dashes okay so slug keep it blank archives do you want to make this item archived or do you want to you know you you so you don't have to touch this nor do you have to touch draft unless you want to but that's it oh it says required okay so false and false so I don't want it archived and I don't want it set to draft continue awesome test and continue and there we go we can go here and notice how there's no items if i refresh and open up my collection there we go automation you want to try it out go ahead and go to that link again and submit let me see we yes putting it in a collection awesome yeah so if you want to make your own like commenting system for your blog or something like that where someone submits on a form and then that data gets passed right back into web flow it doesn't have to go to Google sheet it can go from web flow back into web flow you can do that you know so I turn the Zap back on did I oh I didn't okay now I turn this that back on go ahead and start submitting add to the collection let me see here did that work refresh I'm getting all these notifications of form submissions to items the kid yeah there we go so it's going in here and let's go ahead and put that data on this page so let me put in another layout let's turn the layout do we want to put huh nothing let's just put it in here let's put a div and then we'll put in a collection lists well what nope collection lists pull that data and we can go ahead and add a grid to this grid three columns one row and in each one we can put a piece of texts this text is going to connect with name oh wow look at that so are you pulling in let me even refresh the page I didn't know that's possible that's amazing okay and then after that you can put a text block for location and then another text block or maybe we'll put a paragraph because this is message there we go and then for each collection item we can go ahead and go like that and then there you go so if I publish and refresh your information is going here so let me go to Nelson test location California hello world test to submit thank you so miss your submission has been received refresh and there we go at the top and that's what happens automation super simple is the data coming from the form or the Google sheet right now we're this one I here we're getting the data from web flow and we're sending the data to Google sheet and so this is taking data from here for this one we're pulling data as you can see the green icon right here that's a Google sheet icon we're pulling data from the Google sheet we don't have to pull data from the gold machine we can pull it from the form submission if we want but just for just to show you the three steps that you can do again you can remove this this part but this is just for example yeah so that's zapier simple now if you're wondering how does this all work and I hope you do wonder this is what's happening in the background so developers dot web flow comm is our API to let you add update and delete items from your web flow CMS that's what it's doing but zapier makes it at a nice no code way because if you were to code it you would have to look like this create new live collection item you would have to curl X put out the written mmm I don't know no yeah what no yes much easier no yeah okay so zapier actually have one of their shirts so they gave me one of their shirt it's super awesome I met one of the support team members over at a conference and he sent me over a shirt it says zapier makes you happier so yes that beer makes you happier

Channel: pixelgeek

Views: 2,395

Keywords: webflow zapier instagram, web design, graphic design, web development, no code, content management system, webflow tutorial, web design tutorial, webflow tutorial 2020, pixel geek, how to, zapier

Id: 0m3LAbwf56g

Length: 21min 55sec (1315 seconds)

Published: Tue May 12 2020