Webflow to Airtable Easy - Webflow Logic!

hey guys my name is Josiah I'm going to be doing a pretty deep walkthrough with web for logic and building out a I would say a fairly simple workflow using webflow logic nothing too special or crazy about it but I wanted to just do something that's a little bit more in depth take you through a use case scenario something you might want to build for yourself or use so essentially I'm building myself a CRM you know using web for logic and airtable I kind of went through a similar ish real shrunk and down version you can go watch that one if you want but if you want to see all the Nitty Gritty details what I'm doing an airtable and bringing all this stuff in then this is going to be a good one to watch I didn't show that in the last one and so I'm just showing that here and from here you can get some ideas and some ball under here now the cool thing about this is this just eliminates the need for zapier and using other things to go ahead and get a lot of that data in and now later I would actually like to integrate this stuff with stripes maybe I can do a part two in this but that would not be able to work with logic because of a limitation with logic only using Json and not being able to use performing code so that would be something I'd have to show you outside of your table if you're interested in that let me know and I can go ahead and dig into that because something I do need to build out without further Ado enjoy this video a little bit of a longer one and let me know if you have anything you want to build you want to build a specific use case for this stuff um there are lots of things I can see this working out and and doing and of course it integrates with these apis you have to know these apis okay so we do have the site here now this is pretty Bare Bones and basic right now I am have not done like major design on it because it's not the point of this video right now there's other content stuff I need to put in here but essentially it is going to be a sign up for uh catering so for copy catering and stuff like that and so my my wife and I we have a coffee company and we do a lot of stuff out in the community and outside of all this other work that I do here so we're designing something for that right now and so we just have a couple of things in here for right now but I have the pricing and um essentially it's going to be a pop-up form that will maybe get started here to go ahead and do that so I'm going to use web for Logic on this form and have this go into air table do a little bit of calculation and also be able to shoot out an email as well so we're going to go ahead and do that now I do have this here and that this form is not customized so we are going to need to customize this here um because essentially what Phil logic is going to grab this form so I just want to make sure this is set up all correctly uh the form itself the modal let's go ahead and go here so I can see this Perfect all right I'll have the form let's see here okay so I do have I think I might do this um fin Suite attribute for this okay so we have a first name last name email phone number good I do need this stuff here all right now I do need a couple of let's see here I don't know if I need to do an option okay let's just do them a great for now how about that for the sake of this so first and last name phone number all this fun stuff this will all be required all right email um let's do catering email then catering phone number and then delivering last name and first name okay so here we have to I think I'm going to keep this because on this form this will give me what I need to know so this would be um catering option so we'll choose one and then we're going to have full service and then we're going to have value full service second one is blending a hand thing okay I'll take away that one that is going to be required okay so now that should work here and then I want to do what options or let me see here I don't think I think the menu will can't tell okay let me just dial this stuff out okay well that'll work so I'm not doing the radio because I don't need the radio icons oh I'm just deleting that's what I'm doing okay so we need to do espresso taste drinks you can do Blended drinks Refreshers old Brew and drip okay do that for now see if what they're interested in okay um giving them this for now because later on in this page when I add more into it I'm actually going to show the menu what we provide um it's kind of like a baseline for everything but then they can kind of choose what they do and don't want here in terms of coffee itself okay and then we do have our message but we don't need to have a message in here at all so but what we do need is the amount of people so let's do another form field okay attendees under only okay because as this comes in this is going to be a number so X 200. okay and it's going to be number boom and it's required now this is going to be uh dates of events this is going to be I think I spelled that right all right now again I don't need this one here so I'm going to get rid of that for now I accept the terms I don't really have terms here but all right cool and let's get my normal style here it's the fun part about using relum is that it um duplicates classes once you've already styled them okay so we now have uh this here now I do need to name this form as well so let's go ahead and name this catering form all right cool now we can go to logic here and we have no floats so we're gonna go ahead and do new flow and I think I might be able to zoom this in for y'all so let's see a little bit better so we're doing new flow and we're going to name this one uh catering get in contact let's do that okay this will go to our database someone looking for a catering events all right cool so now we want to do a form submission so someone is going to do this on our catering form all right and output here okay now we have all of this stuff here so catering options with three options okay I only have check box two so let's go ahead and fix that really quick so this is going to be espresso drinks custom oh that's why so let's do this comply okay so this one's espresso drinks this one will be Blended drinks okay here we have Refreshers oh Siri and then we have cold brew and drift coffee all right great so that should help us out with our form here so let's go back to our flows and let's look back at the output data boom there you go we have all of our all of our data points here so what we're going to do is add a block and essentially we want to at this point I want to make an HTTP request okay and send any modification at the second one here so I'll do that so what this is going to do this is going to go to our air table so go to their table now so I'm not putting keys everywhere I will actually well we need to make our database so we will go ahead and make our databases right now and let's do that together so I do know how this works already um so we're going to do let's see here name well you know we are missing some Fields here okay because I do need to know the address as well let's grab the two column and let's move this bad boy up here let's put you right here maybe or not okay so what we want to do here actually is added another label this is just kind of like a design thing so we'll do um let's do this location so I would actually see this okay so you got City our street the address we got street address two okay form field wrapper and then inside of this top one okay there's a column here okay so let's just do text block see what happens okay let's get zipper in here so let's do this let's put this here perfect to your event location okay and I'm going to do or event details so we can do name that's fine let's do text size large okay and now this is something with client first version two so we're going to do a div block and I'm actually just gonna place it above right here oh well this is the set spacing stuff never mind so let's go ahead and give this a div here and let's do adding let's do this event details and then we do have one more we want to do here first in the contact and then event details great um so let's do some more of these because then we have City States and then you won't have one here but we will have a zip all right there we go now I will need to okay street address your address too we'll have City and then we're going to have States oops and then that's it all right I want the zip to be a number only so they can only put a number okay now we have that another way um I do also need to know the time but let's just uh let's do this for now all right so now we have the name you need to have this we'll do status you can also do a let's do duplicate fields and we'll do catering option and so here we have full service then we have okay good got that save that and then right here we'll do status would have to be I have to do new inquiry and then we'll have to do reached out and booked [Music] all right save that okay now we do have to do insert rights and here we can do a single line text and we can do last name all right this one will do first name and then let's do single line text for now we'll do date of events and I can see if I can do a date here but I don't I don't think I can go first and last name catering option date of events and then we need to have the single line text because you need to have street address you need to have the city of Street dress too you need to have the city state and okay and we also need to have the 10ds which this one we can do a number okay um we'll just do integer shouldn't be half ones here um what else do we have in our form you got attendees we got uh zipped every vents oh and then we have our items so here we're gonna have our uh link here Okay so there's a better way to do this but we can go ahead and do oh I guess we can do multiple select maybe so here we can do beverages see if I can map this out so base drinks got Blended drinks we have Refreshers cold brew drip coffee five total right so one two three four five yeah let's try that okay and so I think I'm gonna put the name of the attendees right here and then we'll do insert right let's do formula or uh total bid or event cost here we will do a formula there you go and I am not a database wizard here guys so I'm going to just do the attendees send these times six and that should be good very field uh we'll do initials type formatting the currency and Save there you go so if you have by four okay that doesn't work oh 144 there you go so we'll kind of just do the math for us and just give us already a number there that we can create an invoice for so I think later on we can do some more I made more of this but uh we are not doing that right now now there probably is a way I can do this with stripe and I don't know maybe we can explore that I'll have to do some test data with stripe and I have some stripe Keys involved but I think we can save that for a different video okay now that we got all this so essentially what I would want to do would be to do an Automation and when a web Hook is received it's the grab this web hook here add this into here and the reason why I like doing this is because I don't have to at least here map out all this stuff because I can do some stuff inside of air table but you can definitely do working with the airtable API and actually putting in your your API key authorizing all that fun stuff but I'm just not doing that here in this one I find this to be slightly simpler I still have to enter in all my Json content but if you do need to get more granular and how that stuff is getting input and you definitely do that I don't need to do that here now Jason your type is in manually so on this one essentially we have we need to have name uh first name which is like a code editor first name and then we'll go ahead and do our form fields catering first name boom and then we have a comma don't forget the comma do that okay a lot of fields here so there's a lot of stuff I'm going to do so to save myself trouble so we have first name is this uh we need to have last name and then we need to have email we're gonna have catering email I have phone catering option here will be boom it's your street one Street two which doesn't look like it's in here actually so I need to check in on that uh we have City we're gonna have States and we have zip date so we're gonna have date here uh boom and then here we need to have attendees okay let's have some more Fields here so this one used to be espresso this one is Blended we got drip and very freshers I totally spelled that wrong oh no so now that should work run tests let's just do true for all because I want it all let's do this 30. uh date of events um 10 24 22. [Music] zip 78415 States right Miss Texas first thing let's do fully service three six one two three eight zero five zero cool carrying last one is just aside all right let's see did I mess this up yes it sure did I think I added a comma and my supposed to is pesky commas so back here I also want to test this trigger and boom true for everything again 30 . 10 24 28. okay shoot address full service all right one two three four five six seven eight nine zero [Music] one is just side all right I'm missing something because I cannot apply the data oh run test all right there you go uh it says an error bad requests oh I can still play the data anyways because now here all I got to do is [Music] content application slash Json okay so now I'll do it all again I guess okay yep here we go cool catering you know boom run it let's see come on man there you go success is true this is the what it gave me apply data boom and boom I ain't got a web body hey look at that we got we got data so here in an air table now is is I'm going to go ahead and create a record all right now we will need to essentially do this table oh right now I've got it I guess okay choose field you got first name this is going to be a body first name we got the last name is going to be our body last name so now we've got to go to the tedious option of doing all this stuff uh this one is going to be a new inquiry choose field catering option okay body okay eight of events eight let me see you let me see if it'll work this way that'll be pretty cool if it does straight dress um I need to fix that shoe address too but we'll get there um City then we got States and then we're gonna have our ZIP well your body or zip here boom and what else here beverages okay this might be the interest so we'll do dynamic and then I need to do you do coffee or espresso cold Brew and you do drip see if this works and we need to do what else Refreshers and then we need to do we got one more um oh Blended that's right boom okay let me write a preview it's good preview let's see okay well this is all working now I think I'm missing phone number chill I don't know where we got here first thing last name catering option Dave event street address city state ZIP over to this juice field so now I don't need to do sending emails here because I already have all that um so that's good essentially what needs to happen now is when this is done now an email so notify us all right and I have boom and boom well hey her name should change now someone let's do the name actually so form fields do the catering first name is looking to have us posts and events okay is looking to have us do our I am wrong I guess okay our blank option here on date of events reach out to then and then we'll get catering email we'll work here and then we'll do the phone number more transformation is an entire table okay there we go so now we can send give us a data here piece of piece of data here so the downside about this is I still need to figure out somehow how we can get this but I can essentially turn this on so this is now on and what I would probably need to do is they want espresso equals and one more okay so here we can do espresso equals true um Blended or cold brew I guess all through it goes true Blended equals true then we got drip hole is true then we got uh Refreshers equal true okay there we go so now that that is saved um we cannot turn this on or off because this thing has to be published so we need to go here go here and then I need to put this back in its proper place actually you might want to go to from Suites attributes um I'll give them Suites disable scrolling okay I never use this before so let's go ahead and do this so we're going to want to do is add this to our head as usual um as the head of our body here okay disable strolling I'm Gonna Save that okay okay so disable scroll I want this button to disable scrolling on the page so that was element disable Okay so boom now that we have this here let's go back to our webflow form and let's get rid of that so we want this button so let's give it an action view this is disable boom and boom and then I imagine you will have this be any I want this button to nice Nick okay cool all right okay hide that again awesome okay now I do need to make sure that this can also start this animation as well which I hope and it can cool all right so they both do it that's what I like to see and this is going to element trigger Mouse click tap we're going to start an animation and close all right boom back to the components and let's go ahead and have that again okay now we need to publish this now I'm not worried about it because this page isn't like clickable anywhere like no one can get to it yet so it's okay um but I can always make it a draft and I'll publish it a little later because we need to do this put our flow here and then go here and then apply changes and then have it on okay there you go all right guys I'm gonna stop it here so again thank you for watching hope you got some value out of this I'm going to keep doing my webflow logic stuff I've just been in the weeds with work and growing pains with the company and all that good stuff so more content will be coming for me I'm testing a lot of these features that that workflow is releasing and getting and so I'm having fun doing this stuff um just got some really really big client projects that I am trying to get out so that I can also showcase here with some really cool stuff but I will see y'all in the next video guys have fun designing

Channel: Gamma Design Co

Views: 11,109

Keywords: branding, how to learn branding, webflow, no code, nocode, learn nocode, learn webflow, how to design a site in webflow, identity design, startup, launching your startup, Webflow logic, Webflow Beta, New webflow features, webflow 2022, Webflow to airtable, how to go from webflow to airtable, webflow forms to airtable, webflow automation, external data webflow

Id: ET2d7hG_DnM

Length: 38min 21sec (2301 seconds)

Published: Mon Nov 14 2022