Prevent Webflow Form SPAM With Formspark & Botpoison

right now webflow forms have three problems number one the spam protection is not that great number two there are some concerns regarding gdpr compliance because the form data is sent to the United States and number three the email notifications that we receive when someone submits a form they don't look that great and to solve these problems today I'm going to show you a tool called form spark and a complimentary spam Protection Service called bot poison and form spark is an external service that will handle your web flow form submissions and the great thing about form spark is that it works silently in the background so your website visitors they will not notice a difference and also for you as a webflow developer not that much will change you can still style the form like you're used to inside of webflow you can edit the individual Fields fields and you can also access the success and error states of the field the only thing that will be different is the processing of the data in the background will no longer be done by webflow but we will kind of offload it to this external service called form spark which has much better spam protection is regarded to be more compliant with gdpr and also has much better looking email notifications and in this video I'm going to show you how you can set up the integration it is super easy so let's get started okay right here I have a super basic demo setup inside of webflow with a form and before we start with the integration we have to do a little bit of preparation so um if I click on a field for example this company field you can see that the name of this field inside of the text field settings is called company which is a useful and descriptive name so make sure that all of your Fields have these useful and descriptive names in the field settings because if you use something uh generic like field one or field 2 this is not good as later inside of form spark these field names will be used to display the data the form data that has been submitted once you've done that once you made sure that all of your Fields have a descriptive name then you can go to the website forspark forms spark. and create a free account just click on the blue button try it free and then you have to have to enter your email address inside of this field uh and click create the cool thing about form spark is it doesn't use a password so you just will receive a signup link inside of your email account and the signup email looks like this and here you can just click the the blue button click here to sign in and now your account has been created and um there's nothing else that you have to do for the account setup that's what I call a frictionless sign up process so right here we are in the dashboard and and before I show you how to create a form I want to say a few words about um about form spark and especially the pricing model forms spark uh is not a subscription service which is great we have enough of those already um with forms spark everybody that signs up will receive 250 free form submissions and once you run out of these form submissions you have to purchase a package of submissions uh well that basically means that if you receive one form submission per day this will last you almost 8 or 9 months once you've run out of submissions you have to go to purchase submissions and they have quite an affordable pricing you can buy 50,000 submissions for a one-time payment of $25 for the average website that receives about 5 to 10 submissions per day this will last you like 10 to 20 years until you would have to buy uh a refill package so I think that's a great and fair pricing model um that forspark uses also forspark is a European company with servers in the European Union and as of right now this is regarded to be uh a lot better for gdpr and you can read about that uh on your own uh on the form spark website let's create our first form we can do that by clicking the green button create your first form then we can give the form a name so so make sure that this is something descriptive so that you know which website this belongs to I'm going to call this forms spark tutorial and I usually put the name of the website in parentheses that I know exactly what this form is all about if you want you can create a nice description and then you have to choose the technology in our case this is webflow so I click on it and then click create and now the form has been created and we are inside uh the the form dashboard I'm going to give you a quick walk through the first tab is the submissions tab later on this is the place where we will see all of the form submissions with the form data and information the second tab is the analytics tab where we will find the form statistics so how many submissions you received per day or per week and stuff like that the next tab is called the exports tab here you can export your form data as CSV or Json if that is relevant for you uh the next tab is the settings tab which we're going to take a very deep look uh in a few moments and the last tab is called the howto tab this is uh just a tab with general information not too relevant for us but there's one thing that we absolutely need from this tab and this is the URL that you can see right here so we have to copy this link by clicking this copy icon and go back to webflow and select the form that we want to connect to forms spark you can just click on any field inside of the form and here inside of the form settings where it says action we have to paste this URL as our action URL and then set the method from get to post and now we've shown this webflow form where it should send the data to this is what this link is all about let's go back to form spark and take a detailed look at the settings tab here inside of the settings tab you can change the name of the form if you want you can change your description and you can also uh decide who will receive the email notifications with the form data whenever your form is submitted by default this will be filled out with the account email um but you can also remove this email and type in a different email for example the email of your client or you could even type in multiple emails if multiple people should receive a notification whenever the form is submitted the next setting the email threading I have never touched that I just leave it at the default same for the email notification template uh the web hook URL you can use that if you want to do some automations uh or some Integrations the same with the zapier key if you want to connect zapier to forpark you could even connect the slack Channel if you want to the custom honey pod I'm going to to walk you through that a little later and the last field and also the most important field is called spam protection see the great thing about forms spark is that it uses some Advanced spam analysis tool in the background and this works out of the box without you having to do any setup but on top of that uh forms Spar offers a few options a few methods for additional spam protection so we have bot poison which we are going to set up in a few moments then we have Google recapture uh H capture which is a more private privacy focused Google recapture and we have Turn Style which is basically Cloud flares Google recapture but we are going to use bot poison today and the reason for that is bot poison does not get in the way of your user so your user will not notice that bot poison is working in the background and is not going to be annoying like all of these other capture options where a user have to click this I'm not a robot field and then they have to click 10 fields and decide which image has a traffic light on it you all you all know that which is very annoying and Bot poison doesn't have all of that it works silently in the background without much um problems and without much annoyance when you select bot poison you have to uh enter a bot Poison Secret Key now where do we get that secret key from well you just go to the website botp po.com this website uh belongs to the same company as forspark so there this is one company that provides these two services and um if we take a look at the pricing you can see that the bot poison offers 250 submissions or 250 bot verifications for free but every month so for most people or a lot of people that are watching this you are never going to have to pay for bot poison as at least with the current payment payment and pricing plan and if you need more submissions and more bought verifications per month it's also quite affordable with $2 per month so click on stop spam now and enter your uh email address I'm going to type in my email address for this tutorial and click on sign in and Bot poison also has a super frictionless signup process you just enter your email address go to your email account open the welcome email click the sign up link and boom your account is already set up I just love this frictionless sign up process to create a secret and public key for bot poison we have to click on this button create configuration um and then we have to type in a name usually I just take I just copy the name of this form that I want to connect bot poison to um and paste this in as the configuration name click on Create and now we have these two keys public and secret key let's start with the secret key we have to copy that go back to form spark and now where it says bot Poison Secret Key we have to paste that and click on Save and now bot poison is set up for this form the next thing we have to do is we have to enter some JavaScript on our webflow site now don't worry this is you don't have to write the JavaScript yourself form spark already provides that so you click on guide up here at the top and this will take you to the site documentation. forspark doio and here you just type in uh type in webflow and there's only one result you click on that and on this page you have two code Snippets we need the second one where it says with bot poison and we copy this entire code snippet go to the page setting where the form is located click on settings and paste this code into the uh footer code section so before the closing body tag what this code does it activates the form spark functionality so that it works exactly like a native webflow form with this code you can still use your uh error and success state that web flow offers and the the end user the website visitor will not notice that the form process processing is offloaded to a different service so it's quite a seamless user experience as well which is great uh if we take a look at this code you can see here it says your public key uh inside of the bot cois poison configuration this is obviously a placeholder so we have to go to our bot poison account and this time copy our public key and go back to webflow and paste it in right here make sure when you paste it in that you don't delete these double quotes uh in front and in the back of this string because otherwise you're going to break the code and it's not going to work anymore click on Save then click on publish and now our basic setup is complete so let's open the website and test this I'm going to type in my name my name is Mike Mike's company paste in my email address and what type of work am I looking for just select something random here um my message I'm going to type out a little bit of placeholder text and then I'm going to send the message submit the form and now you can see thank you your submission has been received and uh what's also important to notice this is the default web flow uh success ESS State and you could style it however you want that's what I was referring to in the beginning when I said the website visitor will not Noti this a difference and let's take a look in my email account you can see that I have received this notification email with this nice and clean table new submission the name is Mike company Mike's company email this weird email for the tutorials I want webflow development I want SEO optimization I want a monthly partnership and this is my very sophisticated message if we go to the forms spark dashboard to the form itself you can see inside of the submissions tab this form data is also now visible and we can take a look at it here and just to make sure everything is set up 100% correctly I also want to check bot poison so I'm going to reload the bot poison page and now inside of this graph you can see that there is now an entry 17th of February which is today there has been a successful and a solved uh bot verification so the bot poison setup is working as well okay with this setup that we just configured we already have a great protection against spam Bots but there's one additional technique that we can use to improve our spam protection and this technique is called the Honeypot technique and uh by the way just as a little side note is if anything of this is too complicated for you or you don't want to do this setup yourself or you need help with it then you can go to my website Mike pia.com I offer these types of Integrations as a service and uh then you can just contact me on my website and I can help you with that okay so let's talk about the honey pod technique the honey pod technique involves a so called Honeypot field a Honeypot field is a field that we add to our form that is only visible to robots to spam Bots but not visible to humans and thus a human cannot fill out this form because a human will not see it but because of the way a robot a Spam bot reads an HTML page this robot will see the form and in a lot of cases will actually fill out this form so we know that whenever this honey poot field has been filled out that it must have been a Spam bot and we can just delete the the form submission and can ignore it and in fact that's what form spark does for us automatically in the background without us having to do anything to enable this honey pod functionality we have to just do a little bit of setup we have to go to the settings tab of the form again then scroll down the page where it says custom honey pod and here you can or you have to choose a name for the Honeypot field you can type in whatever you want you can choose some random letters or you can type in the name of your cat it's not really that important because the field will be hidden anyway just make sure that you don't call it Honeypot because a lot of spam Bots actually check if the name of a field is Honeypot and uh if that is the case they will ignore it and find a way around it so make sure it's not called Honeypot I'm just going to call it Kash custom Dash field but as I said it is not that important uh then we click save once you've saved the name of the custom Honeypot you have to click on guide again up here and this will take us to the documentation of forms spark here you have to search again for Honeypot and then select the second result where it says spam protection custom Honeypot and here we have to copy the code but important not the entire code only this first input field right here this this is what we have to copy so I copy it go back to webflow select uh the form and add an HTML embed to do that I'm going to use the quickfinder with command K or or control K uh on Windows command K on Mac and type in embed and then I can add the embed to the page here you just paste the this input field and uh replace the name uh with the name that we just configured inside of the form settings in my case this was was custom- field click save and close and now if we preview it the field is not visible and that's exactly the point the field is not visible to humans and thus humans cannot fill it out but a robot can see it and if they fill it out they will automatically be detected and for spark will categorize the submission as spam one more thing that I have to mention here regarding the Honeypot Fields is that while this is a nice additional spam protection especially against very simple spam Bots um you shouldn't use this as a soul and as your only spam protection method because a lot of bots are quite Advanced and will be able to detect such a honey pod field but as an additional layer of security uh on top of the other configuration that I showed you today this is a really nice setup I'm going to put a link uh to the clonable of this demo page inside of the video description so you can uh clone it inside your own webflow account and play around with this a little bit and if you're interested in more webflow form tutorial you can check out this playlist that I created about webflow forms and if you need someone to help you with these kinds kinds of web flow setups then go to my website Mike pia.com and contact me me have a nice day bye

Channel: Mike Pecha

Views: 3,461

Keywords: Mike Pecha

Id: C80hhcwPX3o

Length: 19min 31sec (1171 seconds)

Published: Sat Feb 18 2023