How to Connect Webflow to Airtable with Logic in 10 min

hey what is going on today I'm going to show you how to use webflow logic to connect a webflow form over to airtable just a very simple API request we're going to send a name an email and a message over to airtable so that it populates in the database like this hey there web bae all right so starting out looking at our air table base we see it's called email form and then I have a tab of a lead generation form and we have an email field a name field and a message field so the airtable base is a very simple setup over in webflow we also have a simple setup I'm using a form right here and the form element has a name of email form and then make sure that you click through and give names to all of your inputs so the names here we have name is name and that's of type plain text the email address is name email and that's of type email and then we have a message here which is of name message so let's go ahead and look at using logic now to push this data over to airtable so the very first thing I'm going to do is I'm going to create a new flow and I want this flow to trigger not on an HTTP request on a where is it oh I just double click it yeah so let's double click it and we'll say on a form submission and we'll just call this uh I don't know two airtabled and we'll select our form and we want to use the email form that I have on the home page not the password page so let's grab that one and that's really all we need to do for our trigger and now the next step is going to be to make an HTTP request and airtable requires a personal access token so we're gonna have to work with authentication first and there's a couple little gotchas here that you want to look out for so let's call this um post to airtable we're going to make a post request here and all that means is we're sending data to here table if I click on authentication we'll select API token and we're going to add it to the headers here and the header I don't have the name for that yet because I need to ask airtable what it is so let's come on over here and I'm going to go to this is airtable.com developers so up here welcome developers we come down and let's go to the API Docs now if I'm looking at the API docs I want to work in the Workspace Email form so I've got email form here and it's going to actually populate the docs with a lot of the stuff that I need like the ID of the base and all that so I don't have to do a lot of the work and as I scroll down it's going to give me some info I'm looking at the left here so authentication uh it looks like they're using personal access tokens which can be created at slash create tokens now they used to use API tokens but those are being deprecated uh January 2024 I believe so you can see I've already got one here from what I tested but they only show it to you once so we're gonna have to create a new token here so let's go ahead and create a new token and this token's name will be uh webflow to air table demo something like that and we're going to add a scope and the main thing we want our form to do is to write so I'm going to add it the ability this is like permissions basically scope is the ability to write to airtable and this let's see this token can access the following bases in workspaces so I want to give it access to my email form workspace let's go ahead and create the token and you can see your token is created your token has been created and it will only be shown once so I'm going to copy but I'm going to leave this dialog box up or you could store it in like a you know one password or if you have any of those password managers that would be a good place to put this but I'm not planning to save it for a long term anyway so let's go back to webflow and then the header here so what do I put in the header now it may be different depending on what API you're connecting to but usually they're called authorization on these headers where we pass API tokens and I want to use the airtable developers so let's go to airtable developers the web API and actually I want to get the specific one for this base so I'm going to go back to the main page and then scroll down and I'll get the email form one here so our documentation is all good to go and we can see okay authentication it's taking authorization this is the header right here and we're in the curl tab here don't worry about the JavaScript this is if you're using the airtable SDK which we're not doing in this case so we're just making an HTTP post request however webflow decided to do that on their backend anyway so the header is called authorization and then the key or the value to the key here is actually our API token but with the string Bearer before that this I screwed this up almost every time and that I come here and so I know this needs to be authorization should probably copy paste that but let's go ahead and add our credential and so we'll call this airtable p-a-t personal access token and we're just going to say that it's an API token and now normally I would just okay the token goes here copy paste right no that is wrong so come back here and then we're going to type Bearer right there with a space and then our token so it needs to match exactly what we're seeing in the documentation there let's go ahead and create and now I have my request method will be post so I have my credential I have my header I have my request method and now I need the URL so let's go back to our documentation and we're going to come down what we want to do is we want to create a record so this gives us all the code basically that we're going to need and now we can see up here is the URL that we're going to use and we can see this percent 20 is just an encoded um it's the space encoded to something that can fit in the URL because we can't use spaces in URLs right and then we can see the table ID is there so this has everything that we need in order to make our request now we can see that header of authorization and then content type application Json we may need to add this we probably won't but let's go ahead and copy that URL come back over to webflow and in the URL I am just going to paste the URL there so that is good to go there I'm not going to add any additional headers at the moment and lastly we need to supply a body we need to tell airtable what data we are sending so let's come back here and the body is kind of what's this is called um Json right here Json or JavaScript object notation and this is the data that we have to send from webflow to airtable and we can see that it's got one object here or JavaScript object with fields and we're sending the email the name and the message so what we can do is we can just copy this whole thing so I'm going from this curly bracket to this curly bracket and I'll copy and we could just drop this right into webflow however I don't really prefer this thing like this editor has no kind of editing for so if we screw something up then we're we're just kind of screwed here so what I like just grab some sort of Json editor online and paste everything in there and the reason I'm going to do that is because I want to delete actually we can see we're opening an array of records that we're sending but we just are going to send one record at a time we're not going to send multiple records so let's go ahead and get rid of this first this second object here so we just have one object inside of our array and then we have the fields key and the fields key has another object and we're sending email name and message and notice the casing on these that's important email is capital E and if we go back to our airtable base email is capital E here so back in our Json editor we can just go ahead and let me change this just a little bit so we know Rick boss and yeah that's good so I'm gonna I did the editing that I want to do I'm going to copy that come back to webflow and paste this in my body here and so now let's go ahead and run test to complete and see what I got wrong so we're running the test and the test has been completed successfully with status 200 so let's come into our form and see we've got hello mm.com rickboss and yes every day is really the perfect day to boss up so our flow seems to be working I'm going to click apply data what that does is it like tells logic kind of what output to expect from this but we're just doing really one step we're not adding anything else so no big deal there the last thing we want to do is that rather than send this hard-coded data in between the quotation marks here I'm going to add our properties so I'm clicking this purple thing up here and then I'm going to come to form fields and I want to send email as the email field and then Rick boss we want to send the name as the name and as the message we're going to delete all that and we are going to add the message there and now this little yellow gear icon says I need to provide a fallback kind of uh data here so we'll just say none for our name and for message we'll also say none okay and that's because these weren't marked as required on wefo if we mark them on as required for name and message then you know the post request wouldn't even happen so we wouldn't have to provide fallback anyways let's go ahead and run the test again and see what we get and so this is kind of our logic test interface we can choose to say no message but we'll provide a name and the email will be.com and let's go ahead and run the test all right we've had another success let's come over to airtable and we see that our data is all populating over here the final test will be to see if this works on our published site so let's come back to webflow we'll apply the data we'll publish we'll say stage flow for publish we will go back we'll come back to our site and we'll publish again all right and let's say finish did it dot work question mark no question marks in an email address and uh none no uh great submit okay submission has been received we come back to airtable and we see we've got all of our information here so that is how to push information from webflow forms to airtable really simple with logic I really like Logic for just small little things like this anything where you're manipulating the data along the way or sometimes I've had issues like if I have multiple people working on the project or I'm staging public like staging some published stuff it'll unpublish the flow so be really careful with what you're doing it I would just recommend doing something really simple to start and then go from there as always you've got to like And subscribe to the channel because I'm trying to grow big alright it's a perfect day to boss up so I'll see you outside later

Channel: Web Bae

Views: 3,897

Keywords: webflow tutorial, airtable tutorial, no code, webflow forms, webflow to airtable, webflow automation, webflow tutorial for beginners, webflow tutorial 2023

Id: kIsJHYf4j28

Length: 10min 27sec (627 seconds)

Published: Sat Jul 15 2023