GDPR Compliant Forms in Webflow using Formspark and Botpoison

[Music] what's up YouTube Welcome Back to the channel today we're going to go over how to create gdpr compliant forms in webflow so as a standard when you create form in webflow and use somebody filter out and send you an email the form data gets stored in on a server in the US which is protected by the us privacy Shield I believe which for gdpr compliance is not strict enough so what we need to do is we need to take that form data to stop it from going to the US and send it somewhere where it will be gdpr compliant the best way to do this we've found that rstudio is to hook it up to formsmark this is a really great solution and the pricing is great and the data is then stored in Ireland which is apparently gdpr compliant which is great and if we have a look at the pricing here on formspark for free zero dollars you get 250 form submissions which is quite a lot and then if you want to upgrade it's just a 25 one-time purchase for 50 000 submissions which I feel isn't more than enough for a lifetime so there's no kind of monthly fee here a lot of these Solutions do charge you a monthly fee and we found this one is really great and the UI is really good so when you receive an email into your inbox it's formatted really nicely it's really easy to see the dashboard is great it's really easy to operate and then in terms of spam prevention we're going to configure bot poison which is quite a simple setup as well we'll go through it here and this the pricing for bot poison you get 250 verifications per month which is quite a lot and then you can see it's quite cheap to go up to the next tiers should you need to so let's jump into formspark webflow and Bot poison and get cracking so here we are inside formspark I've just signed in with our account all you'll need to do is just click click create an account and then you'll be in this workspaces we currently have one workspace for our website but you will have an option to create a workspace so we'll create a workspace and we'll give it a name so you just call it the name of your website sites will say YouTube test account we'll create this workspace and there we go and here we go we're going to create our first form here which is sort of the default page you'd land on and let's say this is YouTube form one and we could give it a description this is good for clients you can say this is the form on the contact page of your website or something like that maybe you've got multiple forms maybe you might want you know this is the lead gem form on the marketing landing page for example and we're going to click webflow and then create here we are you can see you've got this kind of tabs feature here so this is where all your submissions will live you've got some analytics you can export the data of CSV and stuff like that if you need to and then here we've got our settings so you can send email notifications to whoever you want so if you've got multiple members in your team so you can easily just come here and add multiple people into this account at no additional charge and you can configure different people to receive notifications for different forms you can have email threading which I don't really like so I'm going to turn that off um and then you've got zapier staff and you've got spam protection down here so we're going to hook up for poison here and what that's now asking us for is a bot Poison Secret Key which we will generate shortly so we'll just make sure we save and if we have a look at the how to tab it says set your forms action attribute to the following value make sure all of your form elements have a name attribute and they will through webflow make sure your form contains a button with the type attribute set to submit and just the submit button in the webflow form is that so that's absolutely fine and you can see here in the code it's giving you some suggestions all we need to do is copy this form action we'll come back into our form inside webflow we'll set the action to this and we'll change it from get to post and that's all we need to do there so we can publish that and that's literally it that is form spark setup now what's going to happen when somebody submits the form on the website and it's now configured to form spark it's going to give us a really Naf submit message success that's the one so we've just published that let's refresh our page and let's fill that in some info comment example so let's see what happens when we press send there you go your form has been submitted now this looks Jank so we're gonna just come back and what we want to do is we want to override that functionality right so all we're going to do is we're going to put a hidden field inside our form so we're going to open up our form and we're just going to put an embed inside our form I'm just going to save that I'm going to move it above the button I don't think that really makes a difference and what we're going to do here is we just need to put an input basically that is a redirect so I've got a little bit of code here so input the type is hidden the name is a redirect so it's telling you what happens we're going to redirect this form what's the value this is where we're going to redirect it to so we can copy this come back into webflow we'll just paste it in here I'll zoom in a little bit and we need to therefore we need to have a design for a thank you page or a sent page so we have got one here so we can just grab this URL here so it's the one that we've created we'll just paste this in here so now we're saying when somebody submits this form we're going to redirect you to this page we're going to press save we're going to publish so now when we submit this form should in theory redirect there we go who message sent and then you know thanks to email blah blah blah you can obviously customize this as much as you like back to home so we're now set up if we have a look inside formspark now here we go we've got our two submissions that came through you can see this looks great and you can kind of Select these and delete them or do whatever we need to so formspark is set up next step is to protect it by bot poison so here we are inside the formspark documentation under the bot poison section and it says go to botpoison.com start create a new configuration and then integrate the public key on your website and there's a link to instructions so once you've created an account there'll be a button to create the configuration we'll call this YouTube test you would put in the name of your website we press create and that's all we needed to do we've now got a public key and a secret key so it said and we opened this new tab here we go so this is the link for integrating the public key on your website so basically it says import the browser script so that's this one so what we want to do is we want to put that in the the settings of our project into the head tag so we can come to settings custom code and we'll just paste that in there that looks good to me and we'll come back to designer and then it says add your public key to the data bot poison public key attribute so this is on side in the form so you can see here we've got a form with the action set to we know we've overridden that perform spark and then it says give it an attribute of this and then your public key would be the value so if we come back to webflow we grab our form so you could I think you can do this on the form or the inner wrapper of the form I always do it on this form section here where we can put the action it'll go custom attributes and zoom in a little bit for you there's the thing and we'll just type this for now and we'll come and grab r public key it says put the public key there put poison public key here we go so we'll just come in here and we will add the public key done we can publish that and then we copy the secret key oh copy and what does it say to do it says it doesn't say anything else there but we can come back here so we've integrated the public key on our website that's done copy the secret key open form spark inform settings select bot poison paste the secret key in so we come back to form Spark settings on this YouTube form we come down we're going to put in bot poison and now we can put in the secret key press save and we are done guys the form is now configured it redirects to a custom page lovely and I will put a link to that lovely Lottie see here because we didn't create this Lottie we found this on Lottie files and we customized it so I'll put a link in the description to the person who created that because it's just a lovely animation and that's it your forms are now gdpr compliant I always recommend kind of saving these instructions somewhere quick and easy for you know future reference we put all of our stuff in motion and any questions give us a shout in the comments and have a wonderful day happy designing and webflowing [Music] [Applause] [Music]

Channel: Tonic

Views: 1,711

Keywords:

Id: X6LEJsNMpDc

Length: 9min 37sec (577 seconds)

Published: Tue Feb 21 2023