Advanced form validation with APIs

Hi everyone!

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:

  1. The user fills in the form and hits submit
  2. 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.
  3. 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.
  4. If data is not valid, form doesn’t submit and an error message is shown.

Is there any way to achieve this?

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:

  1. 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.

  2. you can validate input data using integrated HTML validator as it offer good options check this MDN

  1. 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.


Hey Stan!

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 “” 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.

1 Like

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.

1 Like

No worries. Thanks for taking the time to respond!

1 Like

The basic approach is-

  • 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.
1 Like

Hey Michael! Thanks for always being on top of things. I noticed you also answered one of my questions a year or two ago.

What I was hoping to do was to prevent form submission on the user side completely until I validated the data.

I know I can run the data through my automation once submitted, but that wouldn’t prompt the user to correct a misspelled email address.

From what you’re saying do I take there is no way to do error prevention with an API?

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

Hey Michael!

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:

  1. Form gets filled and submitted
  2. Automation is triggered, but by this time the user is on the confirmation page
  3. How would Zapier return an error message in a webpage? :thinking:

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.

1 Like

Hi @memetican

So you are saying we need to override the default Webflow form submission? Do we need to manually submit the form using custom code?

Currently, I’m handling form submissions using an API tool and doing all of these:

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 don’t have to, I do that as a matter of practice, it solves some issues, adds security, blocks spam submissions, and gives me a lot more control over critical data.

In this case I implemented the validations with a custom API, and perform those checks immediately when the fields are edited, before the form is posted.

To make it work as part of form validation, you also need to block the form submission unless those validations succeed. This is just cleaner to do when you’re the one handling the final form submission.

1 Like