Verify Emails on Member Signup with Webflow and MemberStack

"Someone can just type in a total nonsense email...and it works. People add bogus emails and successfully signup as a member to my site."

Picture this…

You’re using MemberStack to lockdown your internal company knowledge base on Webflow, only people with company emails can become members.

Problem is…right now, anyone can become a member with a fake company email.

There are no verify emails sent to the address confirming it’s legitimate, first, before signing up 😡

"If we don’t have an option to make them confirm their email people could use whatever email they please to create an account."

This is a problem for any email, not just company emails…

While this feature doesn’t exist today in any of the tools that we use, what if you could add it yourself? 🤔

What if you could use the tools you’re already familiar with to quickly add this feature to any of your MemberStack sites? 🙌

I know, I know…it’s too complicated. Too difficult. Right?

Can't I just use MailChimp and their double opt-in feature instead?

No, no you most definitely cannot 😕

But never fear! I’m going to walk you through exactly how to set this up, step-by-step 😍 in just 33 minutes.

For this walk through you’ll use…

• • Webflow
• • Integromat
• • Memberstack
• • Campaign Monitor (emails)

Part 1: Here’s what you’re building…

This works much like a double opt-in feature, but instead…it’s integrated into your Webflow/MemberStack site and stops visitors from signing up with bogus emails.

Watch Part 1 for the quick walk through of this feature. Then check out Part 2 and get started setting up Integromat…

Part 2: Setup Integromat - Email Form

In this walk through you’ll…

• Setup an Integromat Module to receive a form submission.
• Create a Lookup Table and auto-generate a confirmation token.
• Send an email with this confirmation token added to a link within the email.
• Send a reply back to the web browser letting the visitor know to check their email account.

Up next, in Part 3, you’ll copy & paste some custom code that glues together a smooth user experience…

Part 3: Add Custom Code - Home Page

Give the visitor a better user experience by adding some Custom Code to the form submission.

You can find all of my Custom Code listed here, and the Custom Code specifically for the Home Page here.

I’ve also created some helpful doc’s with screenshots detailing exactly which elements on the page get bound to this Custom Code.

Part 4: Confirm Page

This is the page that displays the “Confirm your account…” button. In the Advanced Section below, I talk about how you can remove this button and instead trigger the confirmation process on page load.

Part 5: Add Custom Code - Confirm Page

When a visitor receives and email, clicks the confirmation link within it, you land on this Confirm Page with the confirmation token passed in the URL.

You need to add a bit of glue code to grab the confirmation token, from the URL, and add it to a hidden form field.

The confirmation token is what you’ve saved in our lookup table within Integromat, so you need to pass this through when submitting the form.

Here is the Custom Code needed. And here is the helpful doc with screenshots detailing what elements to bind with this Custom Code.

Part 6: Expiring Confirmation Tokens

This video details how we are going to expire confirmation tokens.

You don’t want a confirmation token to last forever. Anybody could get this token and reuse it, bypassing the entire verification flow.

Instead, you are going to expire this token after 15 minutes.

Part 7: MemberStack Signup Form

Once a visitor has receive and email, clicked the confirmation link within it, and verified that it’s a legit address…you need to show the visitor a MemberStack signup form.

This video walks through how you create this signup form.

How you make it impossible for anyone else - other than the visitor going through this process - to access it.

And how you expire it (delete it) after 15 minutes.

Part 8: Setup CMS Collection

We need a Webflow CMS Collection to hold our temporary MemberStack signup form for the 15 minutes we make it available.

Part 9: Confirm Your Email Address

Let’s watch Integromat flow through the process of confirming your email address, everything we just walked through in Parts 6 & 7 above.

Then we’ll pick apart what each module within this Integromat scenario did.

Part 10: Setup MemberStack Signup Form

Now we can setup the signup form within your CMS Template Page and bind it to MemberStack.

Part 11: Expire Confirmation Token

You’ve gone through the entire confirmation flow. Now, you need to expire the token and delete the MemberStack signup form after 15 minutes.

This video walks through exactly how to do just that.

Advanced

You can go in so many different directions with this. What I’ve just shown you is the basic setup that get’s you going…

Here are a few more thoughts about how you could extend this.

Since you are using a scheduled Integromat Scenario, and performing a calculation based upon time (subtract 15 minutes from the current time), you may want to consider removing any possible time zone issues between Webflow & Integromat.

You can very easily sync both Webflow & Integromat’s time zone settings…

• Webflow: Project Settings –> General Tab –> Time Zone field
• Integromat: Profile –> Time Zone Options Tab –> All Time Zones listed

You may want to check, within the Lookup Table, that the member who just signed up with MemberStack used the same email address.

If not, you can delete that member from MemberStack.

To do this, you’d add a new Integromat Scenario, with a MemberStack module triggered on new member creation.

Check the email address for this new member against the Lookup Tables email address.

After the visitor clicks the confirmation link, within the email sent to them, they land on the Confirm Page and are presented with a form button.

You may not want this…

Instead, you could hide this form and auto-submit it with some Custom Code when the page loads.

This way, the visitor would land on this page and only see a loading spinner waiting for their email to be confirmed.