I’ve been looking for a solution to this, but no luck. I’m hoping to do some advanced form validation before a Webflow form is submitted.
Here’s what I’m hoping to achieve:
The user fills in the form and hits submit
Usual form behavior is suspended while data is verified with APIs. For example, email can be checked with ZeroBounce API, and phone numbers can be checked with Clearoutphone API.
If data is valid, the form gets submitted as usual and triggers all integrations and all the good stuff. I have several Zapier zaps running based on form submission.
If data is not valid, form doesn’t submit and an error message is shown.
hi @raduvucea why to use 2 different API’s when inputs fields can be verified on client side using build in HTML 5 validators.
I will start from the end:
easier way will be : Submit button has init state “disabled” and if data in any input are not present or not valid, submit button persist its “disabled” state. For this you will need simple JS.
you can validate input data using integrated HTML validator as it offer good options check this MDN
best practice is to inform client about error (error msg or color, best will be both with icon for color blind people) on blur and not on form submit.
email validation is basically done with regex
Phone validation pattern will vary on expected format and you need to lead or inform your clients how phone number format should look like. Do you will have country code options dropdown?
Do you will expect mobile to also line phone numbers? Do you will have only one input field for operator (line) number and second for phone number it self? etc. etc. There is many variables that can go wrong to push client out from subscription not able fill out number in exact form you will require to succeed input form.
Make it for clients simple and use regEx. you can always mangle data to expected format on server or before they are send.
Finally custom errors. you can check this article or find one of many on internet
If you still require an external validator as build in HTML 5 validators will not fulfil your needs, the most popular validator these days is ZOD but I have used it only outside of WF.
Thanks for the detailed response. The reason why I’m looking past basic regex validation is that we seem to have a lot of bots and people mis-filling our forms, despite CloudFlare managing traffic.
The address “person@gmail.com” might be 100% valid from a syntax POV, but a service like ZeroBounce can determine is not a valid inbox.
Same for phone numbers. +12022022222 might be valid syntax-wise but might not be an actual number.
This is the reason why I was looking to validate forms with APIs rather than regex.
That is a valid point as fake emails are generated on farms and keeping most of it under control in “white” list is quite impossible. Sorry I can’t help more.
Build your validation API. It should take a form submission, do all checks, and return a success/fail response.
If you want to use an automation platform for this, you need one that supprots Webhook responses. Zapier does not. Make/Integromat does, also Pipedream, n8n, etc.
On submit, client-side code grabs the form data, converts it to JSON, posts it to your API. If there is an error, it returns an HTTP error code. If it succeeds, I’d recommend you have your automation handle the form data capture as well, e.g. into Airtable, Salesforce, Pipedrive, whatever. This will save you spam issues since Webflow’s form submission handler is frequently targeted by spammers.
When you build your validator at the automation level, you have full control over whether the form data “submits” anywhere. You can definitely return “email is not valid” if the email fails your validation test.
There are a few reasons I prefer this design approach-
Keeps the client side JS clean and manageable, and no one can disable it. Spambots typically ignore JS.
You can store the form data if you want, even if it fails, for stats and recordkeeping. You just don’t submit it to your final system for processing.
All API keys to your validation services are hidden.
It’s easier to set restrictions like “only accept submissions from domain X”
You can, but in the ideal UX I’d combine it with basic client side validation. e.g. I’d make sure it looks like an email client-side, and then make certain it’s a valid email through my automation.
That’s exactly what you’re doing in this design.
You’re trying to figure out if you can do all of your API calls directly from JS, and the answer is maybe, but you have downsides;
You can’t call API’s that are CORS restricted
Your API keys are public
Client-side JS can be easily thwarted
You have to play games with the form submission event, if you’re trying to use Webflow’s form submission handler, e.g. hide the submit button, provide your own, have it trigger your JS validation, then on success, perform the actual submit… messy
I would love to not mess with Webflow’s submission handler. I think the only missing puzzle piece in my mind is how do I get to prompt the user that the email is wrong, and ask them to input it again, through an automation?
The order of the events that I see is:
Form gets filled and submitted
Automation is triggered, but by this time the user is on the confirmation page
How would Zapier return an error message in a webpage?
If you mean you want to continue using it, you can but in a sense that’s the most complicated situation ( two form submit handlers competing ) and it won’t stop spam.
With Javascript handling the form submission, the flow is;
Form gets filled and user begins the submit
Javascript intercepts this, performs the validation ( as covered above, I recommend server-side for the best capability ).
If there is an error, you display the error and prevent submission
If everything passes validation, you allow the submission to continue
The design here is quite straightforward but I can see you’re struggling a bit to understand how the pieces fit together, and this will require a fair bit of code. I build these types of systems regularly for clients so if you need some pro work done on this, drop me a message by clicking my name and I’ll send you my details.
Otherwise if you have the time an inclination, you should be able to iron it out with my design approach above, a few pots of coffee, chatgpt, and some trial-and-error.
