The final episode of the Webflow Forms Masterclass series where we send our form data to a custom Node backend and a GetForm API while still using the native success and error states in Webflow.
Transcript
So, if we type in my name submit that and if we refresh Getform, my name has been submitted here. We’re able to send custom backend, custom form service our own forms, while still using the kind of native web flow functionality.
Hello and welcome to another single episode of Webflow and Code, where I teach you the underlying code you’re writing in Webflow. Today is a sad day because we’ve reached the end of our Webflow forms master class series. I know it’s been a, it’s been a great old journey if you haven’t watched any of this episodes up to date we have built multi-stage native forms so kind of passing data between different forms on different pages we’ve looked at conditional fields we just looked at the elements themselves and then more advanced elements that you can only achieve through code.
And today we land on being able to submit to a custom backend from within Webflow whilst still using the native success and error messaging that you can design within the interface, so if you’re stoked for that then please do stick around and we’ll get right into it right after this [Music]
So, if you’re new to the channel my name is Samuel Gregory and on this channel we talk about all things front-end including no code like Webflow and Pinegrow and most importantly, I love a bit of accessibility, so if that gets your juices flowing then please do hit the subscribe, where you can be up to date with everything that I do, when I do it.
Whatever that might be, so right off the bat and tell you the next section is all on back-end code and node, so if you’re not interested in that I’ll leave timestamps in the description below and hopefully on the screen now where you can jump ahead to what we actually need to do in Webflow to be able to interact with custom backend some other form based services and things like that.
Now right off the bat I want to tell you that I am not a back-end developer, I’m a front-end developer through and through, I know how to dip into back-end code I sort of as you can see know how to write basic back-end code but there are certain issues in here with regards to security and various things like that so there are libraries out there that write a lot of this code for you and to do all that production, so it’s not often recommended to write everything out from scratch.
So, let’s just take a look at what we’ve got going on here this is what we call a node server built in express, build express, express is a library that is a node package that allows us to create servers very easy. Most of this you can ignore we’re just initializing the um, the express server, we’re just, we’re setting up a few things, setting up a few headers and various things like this is stuff.
I was actually playing, with this isn’t necessary, so first of all we’ve got a, you we’ve got a URL here called success, now I’ve set this up on my own API this is built off of the base URL that you’ve uploaded your node server to so we’ve got a success um, a get request here under success and then we can just, we just respond.
We’ve got a fail um, get request here which returns a 404 message you failed we have a post request here at slash post and we return 200 with a message of success and then something funky is going on here and here we have a root URL here which was, which, what we’re going to be doing most of our playing with and um that is just doing some 400 and 200 but we’re just going to go through these now and play with them um, and I can demonstrate to you what they’re, what they’re doing.
In fact, let’s probably get this code, it’s that in there so we’ve got reference to this here and we can take a look at so the first thing we need to do is escape this and run our server so this is all online, this is all running on AWS and we can inspect what happens here the second part to this uh, demonstration is, we’re using a tool here called postman and it allows me to interact with my server and um, play around with it and send it different types of data.
It’s a good way to debug things basically so the first of all you can remember we’ve got our success URL here so in postman here we’ve got a get request and there’s the base URL which you won’t, don’t really need to worry about but you’ve got the slash success there so when we hit that we should see a return of 200 with a message, with a success message and of course there we go or spot message wrong there.
If we go to the fail, one go here then you can see that we’ve got a 404 and that you’ve failed, so we’ve got two, get requests here the success and the fail we’ve spoken about the different structure and the different formats of get data versus post data, get data, if you remember on a multi-stage form we actually pass it in the URL and it’s query parameters in the URL.
Let’s demonstrate what a get request looks like here, so I’ve got a pre-set up query here that postman allows me to do test query but you’ll see it’s rewriting that URL just like we saw in our multi-stage form, if you look here, I’m just logging out what, what the query is, so if I get our response here you can see that test query has console logged and this is, this is important because we don’t, we can’t see any of that on the frontend.
This is the, this is what the, your form or your website will see just the message whereas on the back end we’ve got access to that we can do whatever we want with that we can write it to a database you wouldn’t really do that with a get but we can write it to a database.
We can, we can return different things so I mean as an example let’s quickly nip in, in our success, we can go, “hello” space “request” “dot” “query” “dot” “name” right, so we’re just saying hello whatever the name is and run our server again and then we get back to postman. So we’ve got test this, should not respond this, should say hello space in the message because we’ve not sent it a name, hello okay undefined, so we could probably do a bit of error handling there but if we send it a name and then put it as one bat then we should see when that, in the uh, response message so we choose what we want to send back to the backend.
And we’ve given it like I say a success message of okay and a message of hello space and then you know whatever and, and then you can see the console logging there. There was the one that we sent but we didn’t do anything with and then these are the, that’s the failed one and then that’s the correctly spelled one so that’s a get request in, in a nutshell um, passing it through the URL and then seeing it in the “request.query” now let’s get into post so you can see the code here.
We’ve got a post request to slash, post and that’s all set up for us already in postman and and we’re just simply responding with 200 and a message of success but what I’m doing, I’m also, I’m console logging anything that’s sent in the body before we were sending parameters here you can see that they’re in parameters there and then the query string up here as soon as I put something in the body, send that through then, you’ll see that test wombat is right there in the body.
Okay! and just as a reminder it’s the “request.body” the difference being “request.query” we’ve got “repetquest.body” so you can see how they’re just treated differently and, and we always recommend the post being a lot more secure, a lot more secure way of sending data.
Okay! so with that now our final demonstration of the kind of differences we’ve got this post request just to the root if the name is missing from the body then return a 404 and put an error, give an error send, you did not provide a name if they do provide a name then it goes through here and obviously returns them everything’s okay.
Once again in here you could do anything you want you could write it to a database you could send someone an email anything that node allows you to do you can do, and that’s the kind of secret source to back-end code you can do a lot of stuff um, secure stuff with, with databases and such so if we go through and send an empty post request to this base URL here and we get a 400 bad request you did not provide a name.
The moment that we report provide a name and we send that this is where my lack of backend code uh, knowledge fails me because I don’t know how to fix that but uh, restart the server send through the name then we get a message everything’s hunky dory 200 and so forth so that’s, that’s a little bit on kind of behind the scenes of what’s happening in the backend code.
When you send a, a URL that’s expecting form data uh, how we can move how we can respond to it? How can we um do other things? We can reject it on all the rest of it so given that if you want to interact with a service then it should respond with conventions like this, so now we know a little bit of what’s going on behind the scenes and kind of how get and post are treated differently.
Now let’s jump into Webflow and understand what we need to be doing in Webflow to be able to achieve any kind of interaction with any custom backend or any other external service in our Webflow project here I’ve just created a simple form uh, here and the settings are as follows let’s make this right size now I’ve, I’ve added in my custom URL um, here which, which is where I’m going to be posting to, you can see, it’s the, it’s the domain name that I’ve been using and then just at the root this is where our API is going to be responding to that name parameter.
If you remember rightly and I’ve set it as post because I’ve set it up in the backend that I can only accept post if you were to send a get to this, it would fail and so we’re sending a post to it and then I’ve got your normal success and error states. Here if you are interacting with mailchimp then the next kind of steps are not necessary for some reason, if you insert your own action Webflow, it doesn’t um, send it for you um, you’ll notice, if you put your own URL on there and hit send.
It will just navigate to wherever whatever URL you put into that action if you were to put in a mailchimp URL that still works actually and there’s some documentation on webflow’s website and how you might want to submit a form to a mailchimp server because obviously a mailchimp is a popular email signup letter and it just makes your life a bit easier, so if you’re using mailchimp don’t worry about the next steps, but if you are sending it to anything else, then you’re gonna now need to follow this.
So, there’s nothing different about the form except of course the name property there, which is what I’m expecting in the back end um, if you’re interacting with a service that needs certain parameters then of course you need to make sure you’ve got those fields inside the form and then the “ma” the name matches up perfectly with the expected form fields. Okay! so basic form here, now we go into my JavaScript code here, this is something I got off of an article which I’ll link below um, like I say unfortunately because we’ve put in our own action Webflow doesn’t send our form for us, so what we’ve got to do is first of all we’ve got to create a local variable of the Webflow.
Let’s call it a library, you don’t need to worry too much about that but we’re saying if Webflow exists then set it there otherwise set it as an empty array okay then in that array we want to push a new function which we’re going to define here and the first thing we’re going to do is, is take the submit event off of the document which is what Webflow do and we’re taking the submit event off the document so now we’re even.
Though Webflow’s choosing not to respond or send our form for us this event is still there so we want to make sure it doesn’t take over or anything like that so that’s what that’s doing and now we’re getting all the forms on the page and that’s really important to remember because this is all the forms on the page. If you wanted to say um, if you wanted one form to be for Webflow another form to be a custom form then you’ll need to do some fancy, if statements and if I’m kind and I like you enough, I might actually include that in the code pen which I normally stick down in the description with all this code for you, so you can add it yourself.
So we, but for this example, we’re getting all the forms on the page and on submit of that form we’re firing this function. Okay! so any form on the page and we’ll find the submit function first thing we’re going to do is prevent the default behaviour which is the default behaviour, is to navigate to the other page right so we’re preventing that next thing. We’re going to do is get the current instance of the form so this, this allows this just enables us to do um, other things a bit easier later down the line so we’re just storing the current form that’s being submitted in a variable inside of this function and now we’re getting, getting the submit button inside of that form.
So we’re getting uh, of type submit any element with type submit which will be an input inside of the form this is kind of scope this is scoping this query um within you know the form element which we got here otherwise this would just get every single um every single type input on the page we’re just making sure that’s only inside of this form and then what we’re doing is we’re getting the original we’re getting the original text and this has become clear as we work through it, we’re just getting the value of the submit button right, which should be.
What you put here “button”, “text” submit okay and because this is only a function that’s only firing once we hit submit of that form we’re setting the value of the submit button so we’ve stored the original text now we’re setting some new text to the submit um, the submit input data attribute so if we take a look at the code here you can see our type input here and then we’ve got this data weight attribute which says please wait and you’ll notice if you use Webflow native submission, the text will change to please wait or whatever you set in here okay this is making sure that when they submit it, we’re immediately setting that text to that you can omit that you can take that out if you don’t want that to be if you don’t want to please write.
Now, this is where we actually send the form data this is kind of where all the magic happens right, and we use this function called “ajax” and I forgot my “ajax”, I think it’s like “asynchronous” JavaScript across network I don’t know something. It’s an acronym for something and this all, this is doing is taking is, is sending a request to wherever we define okay so the first argument is the location where we’re sending the data now we are using because we want to use as much of this uh, native um, settings as possible.
We’re getting the form attribute the current form that’s been submitted we’re getting the action attribute of that. Okay! so once we we don’t have to hard code that we don’t have to worry about this we can kind of set up and get set it and forget it and whatever’s in our action here that’s, what’s going to be used to send our form data to the next parameter is kind of the options of the form data so you’ll notice the method we’re doing is, we’re setting the attribute method there which is a post so again if you change that to get, it will respond accordingly.
You don’t have to worry about changing it here and the data we’re sending is of is, we’re serializing this is a special “jcrew” function which takes all of the data inside of the form and well we can basically use that we could just as easily say uh, you know “const form” data if this makes more sense to you and then we’re saying the data is form data you know really up to you how you kind of want to do it, I thought it looked cleaner just to put it in there but up to you, so this is the options.
Now we’re sending the request now, how do we respond to it, so if if it’s successful we’re going to fire this done method if it fails, we’re going to fire this fail method, so if there’s a success we get our form and we hide it, Okay! I’ve mentioned that’s optional because of course you might not want to hide it and you might want to leave the form there. In case I want to send another thing so you can you can remove that here and then we’re getting the sibling next to the form of “w” form done now jumping back into our HTML here Webflow gives you these two divs which are your success and failure states okay they’re just hidden they’re just hidden elements that’s all they are there and you can see they’re next to the form, which is why we use siblings so the sibling of the form that has a class of “w” form, done.
We want to show it because it succeeded we want to show it then we want to hide the fail sibling of that now this only makes sense if your user has sent the data and it’s failed they’ve corrected it sent it again and then it succeeded we don’t want both the error and success um states being shown at the same time so we’re just hiding it okay and then we’re setting the submit button text back to that original text which was submit and you can kind of guess what we’re going to do here on the fail is on the form we’re not hiding it because we of course want to give them the option to actually correct their mistake and then we’re getting the sibling of done and hiding it just in case you know it’s on there on the page.
It doesn’t hurt to do it, it’s not going to break the page if it’s not there and then we show the failure state um and then of course setting the submit button back to the original text there so here we go we if you remember rightly we deny this if we don’t insert a name but if we do then we allow it, so first of all we submit it oops, there was a there was a failure we’re showing that error state now.
If I put in my name submit you’ll see that now we thank the user we hide the form and we hide the error state what we can also do here is actually redirect it to a new page on the success of this form now we already know that we get that natively in Webflow but as I say if we’re interacting with a custom backend then we don’t get the native kind of interface that Webflow provides us here we don’t get access to all this, so if we want it to redirect to a page then what we need to do here is instead of showing and hiding the you know the various different uh states.
If we comment that out now we can do inside of the done function so of course if it succeeds we can go “window.location” equals and then we can actually get the I’ve done a tested data redirect so whenever we put in something here so uh I know I have a page two here so we can go form dot data redirect and this is the same as going form dot attribute data redirected whatever you feel more comfortable doing but those two basically do the same thing we’re getting the value of that so in this case it will be page two and when we submit the form it will actually redirect us using again the native Webflow interface and just for a bit of fun if I remember rightly on this page 2 we accept a query parameter of name or full name.
I think it is, and we actually use that in the multi-stage form process so you could add the query parameter of full name equals and then get the parameter that was submitted sorry this is all advanced stuff but we’re just having some fun here and then pass that value through to the form and publish that submit that then we’ve now if I just bring that down. It’s now redirected us to page two, we look at the code the full name has been inserted as Sam which is something we added from the previous step just a bit of fun there, so we’re using the native Webflow functionality there inside of our custom form so looking into a real life example here.
Now, I’ve, I’ve learned about this service called get form and it allows us to submit our own form content to this back end essentially and I’ve created a custom form here so if we go back to Webflow and I’ve got my custom form URL here which when you set yours up it will have its own custom URL too and we set that to post the unfortunate thing about Getform is actually doesn’t respond it doesn’t respond with an error if there is some form some form of an error so you’re really left to your own devices to know that you’re sending it the correct data but if we just put back our hiding of the form the showing of the done message and the failure and save that.
So if we type in my name submit that we get a thank you message and if we refresh Getform you’ll see that we are, my name has been submitted here so like I say we don’t get an error message if we were to, we were to send an msg string unfortunately we don’t get an error message but you can see how this is now.
We’re able to send custom backend a custom form service our own forms while still using the kind of native web flow functionality you can combine this with the redirection if that’s the way you want to go but here’s just a few ways that you can interact and deal with the response that you get from sending off a some form data so there we go that just about wraps up the Webflow forms master class.
If you have any questions on that we did get a bit of code heavy in that one but it was always going to be, it’s not a, um it’s not a particularly, it’s not a particularly amateur you know or even intermediate kind of um, lesson it’s more advanced for sure um but if you are dealing with other services or things like that then you probably won’t have to worry about the backend code just remember that inside of Webflow, what we need to do to actually bind our own submit method and respond accordingly uh, to those, to those submissions ourselves hopefully in time Webflow allows this to uh, you know run under its own you know use its own “ajax” function because that’s all Webflow is doing is is pretty much, just doing this um, but for whatever reason it removes it whenever we insert our own action.
So, if you enjoyed this episode then please do give it a like it really motivates me and supports the channel and if you haven’t checked out the previous episodes of the Webflow forms masterclass then I actually, have a playlist that you can go to and kind of watch them from the beginning. You have any thoughts around other form episodes that we could do then I’m more than happy to hear it let me know in the comments, let me know in the comments how you found this course and until next time happy no coding [Music]