How to Get File Uploads on Native Webflow Forms Without a Business Plan

hey guys in this video i want to show you how to get file uploads and forms in webflow using native webflow forms without having to upgrade to the business plan and it's pretty easy so here's the issue let's say you're on a basic plan or a cms plan and you're paying 12 or 16 bucks and you just want to the only thing you want is just a simple file upload well paying an extra you know going up to the business plan to that could be 20 plus dollars a month can be quite a bit of money now the other options are you know go go with a third party form company but then you can't use like native forms and styling looks weird it can't be consistent with your design so it'd be nice to be able to use webflow forms this is what we're gonna do and we're gonna do that by integrating with getform okay so here's how it goes so here i am in webflow and i've just got a native web flow form and normally what i would do is i would come over here and i would dump in the file upload but of course i'm not on that plan so we got to do it a different way so what we have to do is we have to do it with some custom code embed okay so the first step is i'm just using that shortcut command e and i'm typing in embed all right and i'm embedding this custom code right here and all this all that we're going to dump in it first is just this input all right this is just a normal input of the type file upload the other thing for this is we're gonna have to link this up using ids so put the id file right here save it and close it there boom there's our our file upload now you can we can work on styling some other time if you want to make it look better and you can just search for you know file upload styling and you can get stuff on that so the next thing we're going to have to do is we're going to have to actually put the code to do this and so we're just going to dump this inside of our body tag so the first thing we have to do is we have to set up some variables and the first two is we're going to have to grab the form element which is just what this is doing and we're going to have to grab that file element okay so this right here is what we did before where you've got the id on the file okay so we've already got that done we're just throwing it into a variable the next one is we're grabbing the form element okay so we're going to grab this i'm grabbing by the id and so we're just going to go over to our form i'm going to save those changes so add this ajax form id onto the form here not on the form block but the form the first that first child okay okay the next thing is uh instantiating a form object thingy so all this is saying is i'm doing the new form data so when you're submitting forms with fetch um and if you don't know what that is don't worry about it you can just search for it we're just going to walk through it here really quickly it'll work you don't have to understand it but this is this is the object that you're going to send all the data in okay the next thing is this chunk of code right here let me just make this a little bit bigger and this is listening to the change event on let me get over here on this so when that is to say when you when someone clicks on this and they add a file it's just listening to that so it's saying hey when it changes um deal with these files this is just making this this dot files and that i got a note to myself now you can work with the the files file list that's just how you work with these okay and let's say these are drawings that people are submitting and i'm just saying append this to the form data object throw that in there okay so what what you have to do here is is to add because essentially you're going to be throwing all this data into the form data object and then sending the form data object out to wherever you need to which i'll show you in a second this right here what you're appending is you're appending a name so if you think about it like as a variable this is just the name of the variable or if you think about in terms of a spreadsheet this is just like the column name okay and so this could be anything it could be drawings maybe you're submitting um an invoice it doesn't really matter and i'm just grabbing and and and this is just saying oh what what is the actual content of the thing and that's just looking inside of this thing and it's just grabbing the file okay um then the next thing we're going to do is we're going to handle our submit okay because we're not going to be submitting with webflow this is not going to be running through webflow forms this is going to be running through this get form service okay so the first thing we do is we're going to prevent default so this is saying add add an event listener on our form which is this right here and the first thing we're going to do is prevent default and what preventdefault does is it says don't do the normal thing that you do as a form don't do that because we're not we're not using um webflow's forms and so we don't want to do the normal thing we say don't do anything we will deal in our code with the with the file with the form upload we're going to deal with it all you browser don't worry about that all right the next thing is grabbing the actual variables for the dom elements for um whatever we're submitting so here i just have a name and an email okay and to get this we've got um these ids here on name and email and it's just grabbing the value out of there so i'll show you how to set that up so you just come in here this is our name id name it's already in there so i don't have to add it in and here is email that's already added ins but if it's not just dump it in there and so then we've got those and that's how that's how we're gonna access to get whatever people their name and their email address and get it in there okay the next thing we're gonna do is we're gonna grab these variables for um success and failure or error so um i'm i'm grabbing these this is part of how to work with native web flow forms these w dash is what um you don't see these classes inside of webflow these are classes that webflow creates and adds automatically to forms and those are these things let me show you if you go into here we see the success message and this error message and this technique here is what is what is part of what is allowing us to use native forms so we have this success message and we don't see this on here we don't see any class and we don't see any class on this error message but what happens is and you can see this is that this is hidden right now and this is hidden right now but if i want to see it show the state it's these right and so all you're doing is this part of the code that we're adding in is going to allow us to just use those like normal so you just style your your error state and you style your success state like normal and then um this will this will allow us to use those so i'm just grabbing those so while you don't see those on there if you were to publish this and then like inspect it these would be the classes that were on there okay the next thing is we're just going to start we're we're going to append this uh data so we've already appended up here the actual file and we appended it when we ch i'm not when we change it so when they actually uploaded it on submit we're gonna append the form data of the name and the email so this works the same as over there so remember these things are just those variable names are just the top of the columns and then here name is just this right it's the value of it so for our name it would be like um here's our names our list of names and it's bill and kathy and their emails and then the last step is to actually send this off and this is this long function and then i'm just closing the um this this guy right here so let's just dump this in here and um you know there's tons of great tutorials on using fetch um it can be a little bit confusing but if you just copy and paste this in it should be easy there's only there's only a few things you got to know about and this is the most important thing we want to fetch we're saying where is this going where are we sending this form and so it needs a url here so let's go over to get form and get this set up so on get form there's a great free tier okay and i've already set up an account here now i'm ready to set up a form now they have options for uploading files with ajax that is to say if um you don't want the page to refresh which is like the standard procedure for webflow forms is that they normally don't redirect you anywhere after it's just nothing okay that's what you typically want to do sending people to other pages that's some people do it but that's fairly uncommon nowadays and that's typically what people want to do now the code they've given you here doesn't actually work and so that's why part of the reason why i've made this tutorial is to kind of update the code that they have because uh it just doesn't work so um we're going to make a new form here we're just going to say we'll call this let's say invoice as i'm going to create a form okay so it's given you all this stuff you don't care about any of this stuff all we care about is this url here and notice it is a post that has to be as a post so just put that url right in here and make sure it's at post but you can handle these if you want to automate other things with it of course getform is on zapier and so you can you can do that like normal so there's nothing really sort of left out and we also have to set the method to post okay so we've got our url we dump it in there the method is post the body that is what are we actually sending is that form data object that we made up here and then we dumped a bunch of stuff in here dumped a file dumped an email dumped a name and now we're saying okay now just send this big bundle of information over there okay so when when i call this fetch that's what's happening so here we're just doing some like error checking and this is what's gonna deal with the styling so if the response is okay it's it's what it's going to do if if it's going to i'm just console logging but we can we can take that out we don't need that then it's going to say the success that's up here the style display block and the error and the and and all of these are i just looked at what um webflow does when there's a successor failure and all they do is just change these display properties and so right here is just doing what webflow normally does and that's what allows us to work with those success and error uh things in the form okay and if it's an error it just shows that stuff up and that's it okay so that's that's everything we've set up our form it's super easy okay now there is one more uh thing that we've got to do and i'm going to show you that right now so okay we also have to add a custom attribute onto the form and that is this ink type and this thing and they give you this in get form and this value slash form-data and save and then we can publish this so there's one more step we have to do to ensure that there's not a redirect and in the action you have to add a hash why i have no idea but that's what you gotta do okay we also have to add a custom attribute onto the form and that is this ink type and this thing and they give you this in get form and this value multi-part slash form dash data and save and then we can publish this then we can publish this and go to our form and fill it out pick a file submit and there are natural webflow things and if we look in our get form there is our form john the moon designer this is my date and here is my file that i uploaded where i can actually see it if you come over here right there all right so i hope that's helpful for you let me know if you have any questions the code is a little bit tricky to to set up but it's it's not too bad um and but it's not too bad and uh this really saves you a little bit of money all right let me know if you have any questions

Channel: Moon Design

Views: 1,456

Keywords: webflow, webflow forms, file uploads, get form, design, html, css, javascript

Id: C9u26xe7Fvs

Length: 14min 17sec (857 seconds)

Published: Tue Feb 02 2021