Custom Form Submission - Only allow submit after successful API-based phone number validation

[vertic (Benedikt Wakonig)]

Hi everyone,

I need help with a custom form submission that is currently triggered on the following code:

<script  type="text/javascript">
  function store(){
     var inputEmail= document.getElementById("email-input");
     var inputPhone= document.getElementById("phone-input");
     localStorage.setItem("email", inputEmail.value);
     localStorage.setItem("phone", inputPhone.value);
    }
</script>

<input type="submit" onclick="store()" value="Jetzt Vergleich erhalten →" class="form-submission"/>

Besides storing email and phone input to localstorage, I want to make sure that the phone input is being validated by a phone number validation API (in my case, numlookupapi or twillio). If the API returns true, I’d like to have successfull submit, if false, I want the phone number input validation to pop-up and hinder submission.

How would you solve this problem?

[ChrisDrit]

Hi @vertic welcome to the forums!

I’d simplify this by approaching it in a different way…

1. I’d setup a native Webflow form to submit to Make.com via a Webhook.

2. When the form submission arrives at Make (with your email, phone number, and whatever else), I’d pop off an API request to Twilio to do my check.

3. If the response is successfully, continue with the form submit.

4. If the response fails (not a valid phone number) redirect the users browser to a failure page describing the issue.

5. If you’re set on the failure message being a popup, have Make’s Webhook response module return JSON that a small bit of custom Javascript consumes and handles for display.

[memetican (Michael Wells)]

Hey @ChrisDrit , is that accurate? I had always expected that Webhooks for Make and Zapier returned immediately ( with success ) on data capture, regardless of the following process steps.

Is it actually possible to make the browser wait, and to return an error / failure code that Webflow will recognize and display from the JSON response? That would be exceptionally cool.

[ChrisDrit]

@memetican

That would be exceptionally cool.

Be prepared for “the exceptionally cool”

@memetican

Hey @ChrisDrit , is that accurate? I had always expected that Webhooks for Make and Zapier returned immediately ( with success ) on data capture, regardless of the following process steps.

With Zapier, you are 100% correct sir.

Zapier Webhooks are weak & feeble in this department. They do indeed return as you’ve described. Immediately with success regardless of the following process steps

It’s a limitation and one (of many) reasons I’ve personally moved away from Zapier for most things.

Make Webhooks on the other hand… are filled with mighty awesomeness

If you use Make Webhooks, they make available to you you a special “response” Webhook.

So the flow is…

1. Send something to a Make Webhook

2. Do a bunch of processing steps on Make. Call external API’s. CRUD your way through their Datastore. Whatever!

3. Return an HTTP response, via a Make Webhook response, to the browser.

This is the magic.

The browser has been waiting for a response from the Webhook. You can now (mostly) send back whatever any ordinary HTTP response can send back.

• Send back a “Location” header with a new url the browser should redirect to.

• Send back (and you’ll like this part!) a JSON blob that a Javascript snippet can react to

Let’s do a quick build!

Open up your free Make.com account:

Search for and select Webhooks:

Choose Custom webhook (ignore the magic response Webhook for now, even though I know you want to click it!):

Grab the url and tap the OK button:

Head over to your Webflow account. Create a basic, generic, but native Webflow form.

Paste in your Make Webhook URL and choose the POST method:

Back to your free Make account:

Add another module, choose Webhooks:

Yes! Now click the Webhook response module (sweet!):

Now you get most everything you need for an HTTP response:

Toggling show advanced settings get’s you the good stuff.

For this quickie run through, just add a 301 redirect header with the URL https://example.com for now:

Tap the run once button:

Back to your Webflow Designer, Publish your project, open the live site, fill out the form, submit it:

Back to your Webflow Designer, publish the site, open the live site, fill out the form:

…and et voilà:

Yes, yes, yes… I know.

You want to return JSON blobs to some Javascript that triggered it in the first place.

Here’s a screencast walking you through how to do exactly that, along with Javascript snippets (though I know @memetican, you won’t need the JS snippets ):

Simple Webflow form submissions with Integromat

Post questions, I’m here to answer them!

[memetican (Michael Wells)]

Thanks for the tour Chris, that’s very slick. I have perhaps 100 production zaps on Zapier, but I’ve been waiting for something better to come along. Make might just be that platform.

Zapier has generally been too limited in its linear logic flow, the initiate-only Webhooks, and its limited support for code steps and external libraries. Sometimes that’s needed for more advanced workflows.

I will definitely run some experiments!