How to control form submission success based on existence of Airtable record

[lenaa (Lena Anderson)]

Hello!

I’ve been researching different ways how to accomplish this, looking into Make/Zapier, and custom code, but my custom code knowledge is more limited.

Here’s what I’m trying to accomplish.

On the new native memberships Sign Up page, I have a custom field form asking for a 6-digit member ID (a member ID completely unrelated to Webflow memberships).

When a user puts in their member ID, I want the form to only show a success status IF the 6-digit number is found in my Airtable database record. When the form is submitted and the 6-digit number the user entered is NOT in my Airtable database record, the form needs to say “Sorry we couldn’t find your member ID in our records” (or something like that).

I’ve managed to set up a zap where the form submission was validated in Airtable with “Find Records” and it found my 6-digit number I entered in my Webflow form, but I’m stuck on how to get Airtable to confirm back to Webflow that “Yes! This 6-digit number does exist in Airtable, the user may proceed in creating an account”.

I do not want users to be able to create a user account if we can’t verify a specific field is associated with them in our Airtable database. I’m guessing this requires custom code with an event listener (show sign-up form, IF membership-id-form is successful), but I only want the membership-id-form to be successful if we can verify we have a record of what the user inputted.

Any ideas? MUCH appreciated!!

[memetican (Michael Wells)]

Interesting use case.

You have two possible approaches on sign-up, which is self-enrollment at /sign-up or, invitation via the API. Both can work here but either way, the /sign-up page is central to onboarding. I’d stay aligned with that to keep things simple.

The most compatible way should to to leverage the self-enrollment flow;

• Add a custom MyMemberID user data field to your memberships
• Add that field to the Sign Up page form, as a required field
• On new account creation events, have Zapier verify that ID and then assign appropriate access groups to that user.
• Gate all of your content to those access groups

In this scenario, I can sign up with an ID of askdjfwekfj, and Webflow will still create an account- however I won’t have access to anything I shouldn’t.

This is the easiest to build, involves no custom code, and will work correctly with Webflow’s onboarding process and ecom memberships as well.

Here are the API features you need;

The memberships_user_account_created or memberships_user_account_updated webhook events.

Create Webhook

The Update User Access Groups endpoint;

Update User Access Groups

You can add script to add a second (insecure) level of guidance, pre-verifying the ID during sign-up - but scripts are easy to circumvent and the user may not have javascript enabled.

If you want to pursue that, Make.com is a better choice than Zapier here because it supports Webhook responses, which means you can return the result of your lookup as JSON, and then have custom code process it and display messages accordingly.

Keep in mind this doesn’t prevent anyone from creating an account- especially bots, so don’t rely on it as a form of security. Use access-groups instead.

[ChrisDrit]

@lenaa

but I’m stuck on how to get Airtable to confirm back to Webflow that “Yes! This 6-digit number does exist in Airtable, the user may proceed in creating an account”.

Unfortunately you can’t (reasonably) do that.

The problem is Webflow controls that specific form. It’s special.

If this was a regular form element you could do what you’ve asked (very easily). Here’s a screencast walking through how to do exactly that with a form element.

The reason it works with a form element is because the forms action field (the destination that the form submits to) is exposed by Webflow:

The action field of a form is telling the form where to go when a user submits the form.

If you control the destination of the form submit, you can control how it responds.

In your case, with a regular form element you could:

1. Do an Airtable lookup for any form field.
2. Based upon that lookup respond with a success / fail message.

It’s a standard approach.

But…

With a Memberships signup form (screenshot above), it must be submitted to Webflow in order to handle signups on their backend.

Notice how the form settings differ.

There is no action field.

This form is special.

If you can’t control where the form is submitted to, you can’t (reasonably) control the response.

@lenaa

…but my custom code knowledge is more limited.

With software engineering experience, and backend infrastructure skills, it is possible when using Webflow Memberships and their forms. But it doesn’t sound reasonable to walk through that, here.

There are some fun things you can do without coding knowledge, but none of them fully meet the goals you’ve talked about.

You could use the Webflow Webhook Creator tool to create a Webhook.

If you didn’t already try this, a Webhook is a fun little no code thing that allows you to capture events and send them to any destination you choose (much like the forms action field).

So capture when a new membership is created and send that to Zapier / Make (Integromat) to do your Airtable lookup.

The problem is that you’ve broken the connection between the users web browser and the success / fail response.

• The user submits a memberships signup form.
• The form is submitted to Webflow.
• Webflow responds to the form submit with a success / fail message.

Then, on the backend server…

• Webflow triggers a Webhook (if you’ve set it up).
• Webflow sends that info to the Webhook destination that you setup.
• Zapier / Make receive that Webhook call.
• You lookup in Airtable your info.
• Zapier / Make responds to Webflow’s backend server with a success / fail message.

I know this isn’t the answer you were looking for, but this is what it is.

[lenaa (Lena Anderson)]

Wow! This is really helpful! So, my screenshot above is actually a regular form element that is separate from Webflow’s sign-up form, but it is on the Webflow signup page. Following your screencast, could I somehow make the Webflow sign-up appear based on the success or failure of the regular form element?

[lenaa (Lena Anderson)]

This is an interesting approach! I hadn’t thought it through this way before and this could possibly work. We want only people who are “members” (again, not related to Weblow memberships) to only be able to create an account, but I think if they don’t know their 6-digit member number and it’s a required field that will keep people who aren’t members from creating accounts (obviously). I just don’t want it to hold up the user experience for people who aren’t sure what their 6-digit member number is.

My solution to that is giving the user easy ways to know where to look for it, like maybe a tooltip on Webflow’s signup page.

Again, we only want members of this 3rd party org to be able to make an account with webflow memberships, so we need Airtable to recognize if their number exists or not in the database.

[ChrisDrit]

@lenaa

Following your screencast, could I somehow make the Webflow sign-up appear based on the success or failure of the regular form element?

that’s a great idea. I’ve never tried, or even thought about this.

I think it’s totally doable.

Here’s how I’d approach it:

• See if you can hide the Memberships form.

• Following my screencast, when the response returns from Make (and it’s successful) unhide the Memberships form and hide your form.

• Let the user continue with a Memberships signup.

This would only “hide” the Memberships signup, so someone could bypass this, but most won’t.

Update:

You had an interesting idea, so I tried it!

It works

This is just a quickie test, but:

• Here’s a working demo.

• Here’s the shared project link.

• Here’s the Make Blueprint for you to download and import.

I didn’t add the Airtable part, but that’s easy enough:

Just add an Airtable module that searches your base in between the 2 Webhook modules. You return a “200” when you’ve found it and something else (like a “400”) status code when it’s not found.

This is all based on the screencast. I slightly modified the Javascript.

This is all a quick demo, you’ll want to improve it all, but this should get you what you need

Some thoughts on improvements:

1. The Javascript code needs a little bit more love.

2. You could confirm after signup (via a Webhook) that they signed up via an access code to verify they didn’t bypass (and just unhide the form).

3. Add back in better error messaging controls. You can use my screencast and the custom code in it to help guide you.

[lenaa (Lena Anderson)]

Wow, I’m really excited about this! Thank you for taking the time to dig in and test it. This is totally new territory for me (using Make), so your screencasts are SUPER helpful!

Are there any other modules I’d need to add to Make other than an Airtable “search records” module? The screencast makes perfect sense to update a CRM record, but I’m struggling to have the Airtable search record simply confirm that the number exists and report back to the webhook.

Update

I was trying to follow this tutorial (How to search for an item in your Airtable and give it to your chatbot using Integromat / Make) but with a webhook from Webflow instead of a chatbot. I’m getting stuck, why is this so hard? lol