Better Webflow Forms with Formspark

hello and welcome my name is Rory co-founder and webflow developer at propeller digital and in this video I'm going to show you how to improve your forms in webflow using a external service called formspark to handle all of your form submissions so why might we want to do this well the bottom line is there's a lot of issues with forms in webflow a couple of them that you're likely familiar with first of all it only works with recaptcha V2 which frankly sucks that's the one where you have to tick the Box you have to pick out the traffic lights or the crossings or the motorbikes in the photo which isn't ideal for conversions it slows down the user it forces them to have to go through this thing that they've seen so many times on the internet and the issue is there are much better Alternatives vcapture V3 runs in the background it's invisible Bosch webflow just doesn't support it and they also don't give you any fine-grained control you either turn on recapture for all of your webflow forms or none of them and maybe you have a particular form you want to use recapture on but now you also have to have recapture on your newsletter signups if you're using the webflow forms for those not ideal we can't send different forms to different email addresses let's say you're working on a fairly big site for a client that has six forms for example one form needs to go to the accounts Department one form needs to go to the sales department so on and so forth you cannot do that in webflow all of the forms have to go to the same list of email addresses not ideal we can't change the format of the notification email it's going to put in all your fields and some other information that's it no control there and the submission limits quite frankly also suck it's a couple of thousand but again if you're on a a bigger site if you're doing a big site for a client and you go past what the limits are in the business plan your only option is to move the Enterprise plan which is not ideal so this is part of a general way that I like to use webflow which is to only use it for what it's really good at which is the designer the CMS the editor it's top class in those fields but once you start getting into logic and memberships and forms the limitations of webflow start to show so the solution here that I'm now going to take you through is a service called formspark so formstar formspark is a form to email service it removes all of those issues that webflow forms have which we're going to see it's simple to use gives us a lot of control and also has a very generous pricing plan so it's on sale at the minute I don't know how long for but for 25 dollars you get 50 000 form submissions on unlimited forms so let's do the math on that let's say you're getting 500 form submissions on your website a month then this is going to last you for 100 months quite a lot of time so I've been using it recently I really like it the free plan gives you 250 submissions to test it out so let's go ahead and set this up so we have three things open here we have webflow where I just have a simple form set up we have formspark where I have logged in and created an account and we also have cloudflare because in this instance we are going to stop Bots with turnstile which is cloudflare's smart recapture alternative works great runs in the background no cost so I have literally just dragged in a form element here and popped it onto the page and if we don't do anything that's going to go through webflows form submission Handler and what we want to do is replace it with formspark so over in formspark I'm going to click create new form and call it webflow tutorial form you'll see here there are a range of different Technologies or platforms we can integrate it with everything from HTML and WordPress over to a whole bunch of JavaScript Frameworks static site generators like 11t and Gatsby what we want is webflow so we'll click create and this is going to show us the range of options that we have so first of all you're going to see all your submissions in here you're going to get analytics on total number of form submissions by day by week by month the countries that they come from you're going to be able to export out all of your submissions as CSV or Json and do that within a date range the settings we have the name of the form the description email notifications is where we can select who this form will sense missions to you so this is the first really powerful feature that webflow does not have you can set this on a perform basis and again if you pay for this you can make as many forms as you like email threading groups notifications from the same form into one email thread so you may or may not want that we're not going to be using web hooks or zapier here but you can integrate those if you so desire you can collect a slack Channel you can set up a custom honey pot to stop Bots you can set up custom spam words that you don't want people to be able to enter in and we have spam protection which we will get to in a moment so if we go to how to this is going to show us how to integrate this with webflow and it is very simple we're going to copy this value and set our forms action attribute to the following value what that means is we go into the form and we click on our form block over here we go to element settings in the top right and we have a action field here now you might not have used this before if you leave this blank it defaults to webflow and they handle the form submissions and we're going to paste that in there like so next up all of our form elements have to have a name attribute so that simply means when we click our field and we're in element settings under field settings that's just this option here and that's what that value or that field is going to show up as in your email submissions and we have emails set here as well lastly we need a form button with the type attribute set to submit that is already set up as part of webflow's forms that has the submit action on it already we can't change that just has it already which is fine that will work fine for us and down here they give you some templates these are for if you want to use HTML if you were to for example copy that in drop it into a HTML embed but we don't want to do that the designer for the forms in webflow is really good we can make some very nice forms the issue is just the submissions so let's go ahead and publish this and we'll just fill it out on the front end we'll see what happens we'll see the submission come through to formspark okay over we go and we fill out our form and it's going to take us to formspark's thank you page which we will deal with afterwards there we go your form has been submitted now obviously we almost never are going to want to show a screen like this to people so we're going to fix that next but if we go over to submissions we can see that our submission has come in we can delete it Mark it a Spam we can reply to them from here so that's the basics setup so next we want to have a thank you page so we are going to go over here and just duplicate this and call it cute oops and we will just say that'll do for now and a button to go back to the home page back to home and set that to go to my home page like so so we're going to publish this and while that's publishing we're going to go over to formspark and go to their guides they have excellent easy to use documentation and we're going to search redirect redirection and we can specify a custom redirect URL to go to so this can be handy if you are tracking conversions you can set up your conversion tracker to count as a conversion in something like Google analytics when they hit this page so that's a potential use case for this so what we're going to do is we're going to copy this input this code here and we're going to go back over to the form and a handy thing about forms in webflow is you're not just limited to the fields that they give you such as check boxes such as select drop-downs you can also make your own fields in this case an invisible one by dragging it in like so and pasting in that code and all we need to do here is replace this with the value of the thank you page the URL rather of the thank you page that we want to go to so we'll go over to this we will get the link to this page like so just go back and click in here and we want to get that HTML embed and we want to put in our link there we want to save and close and we want to publish that so there's a variety of other options that we have in here that we can set up on formspark documentation is great everything is in there for now let's just check that our redirect is working successfully okay so over we go to the page fill it out again and some mesh and now we get redirected to our thank you page and we can go back home so far so good the last thing we need to handle here is those pesky Bots that are going to be flooding your inbox with absolute rubbish unless we turn this on so we'll go back over to our form and into settings and they have a number of Integrations strangely they also don't support recapture V3 but no worries I prefer turnstile and Turn Style is entirely invisible so we'll select it here and you will go over to cloudflare if you haven't heard of cloudflare it lets you manage the DNS for your websites also speeds up secures protects your website does a whole bunch of stuff highly recommend it and when you make a new account there's an option over here called turnstile which is their recapture alternative entirely free so we're going to click add site and we're going to call this my tutorial site and we're going to put in the domain without the HTTP stuff at the start oh and actually you need to put it in you need to wait for it to pop up down here and just click add custom domain there are a number of different ways that you can put this on your website you can give the option of making it interactive if cloudflare wants to challenge the user I like going for invisible this seems to work for me and click create and bingo here is our code so what we're going to do is we're going to copy this secret key and we are going to enter that in to formspark in the back end and click save now again there is a little bit of coding here so I'm just going to put this also inside this HTML embed we want to copy the script that loads in turnstile onto our page and we also want to go to client-side integration and basically all we have to do after that is copy this and put it in below that like so and we need to replace our this text here with our site key so the secret key is what goes into the back end down here which you don't want to let anyone uh find out so I'm going to be deleting that after this video and we will go into here into Turn Style click our site and we will view Turn Style keys and copy the site key and we are going to put that in here like so okay so far so good we'll save and close that and we will publish this now the beauty of the invisible recaptcha is the user probably isn't going to know that it's even on the website they're not going to have to uh help Google train their AI systems to pick out traffic lights and mountains out of photos and you're going to get the benefits of Bot protection without annoying your users so it's a win-win and almost free of charge turns out free of charge formspark 50 000 submissions for 25 is pretty good so we'll go over to this again and if we've set that up correctly we won't even notice if there's an issue with the way we've set it up it's going to give an error but let's go ahead and see and it is working perfectly we will just check that that registered over here um actually it doesn't have enough data to tell us if it's working but if it goes through to the thank you page without giving you any sort of errors on the page or in the console then it is good to go so that's it we have set up a way to use forms in webflow without having to use recapture V2 but still getting protection from Bots we're able to send different forms to different email addresses and we're also able to lastly if we wanted to create a custom template for the email notifications so just to show you how that looks here is the submission if you wanted to change any of the information in there you can do that by creating a new template if you wanted to put a message on it Etc and that's it so we set up our form to recap we added in a action over here to use formspark instead of webflow our form is set up in the back end the how-to section gives us the integration settings for formspark under settings we select a Turn Style for spam protection we register with cloudflare created a turnstile site we put the secret key in here we put the site key in here and also loaded in the API return style and lastly we set a hidden input that the user won't see that can redirect us to any thank you page of our choosing so that's all thank you very much for watching if you have any comments on this or if you have any suggestions for further videos please leave a comment below if you're a business or agency and would like assistance setting up formspark or any other email API endpoint for your website please get in touch using my email in the description and hope this is of use to you hope this will supercharge your webflow websites help you to get around some of the limitations with webflow forms and give you a better web design and development experience using webflow thanks again and see you in the next video

Channel: Ruairi McNicholas

Views: 2,555

Keywords:

Id: sQHXRJY-tlI

Length: 16min 46sec (1006 seconds)

Published: Fri Mar 31 2023