Connecting Webflow forms to MemberStack
Let's start with the Signup form.
I have a Signup page set up in advance in Webflow.
Open Memberstack site –> your project –> “Form and Fields” and select the Signup tab.
By default there are Email and Password forms. So we should add a Name field (or as many fields as you need).
Click the “Add custom fields” button and save the field.
Now we need to add some custom attributes to our Signup form in the Webflow site.
Select Form block –> go to Custom attributes –> click Plus button and add in the Name field “data-ms-form” and in the Value field – “signup”. Save the changes.
Next step: set up all over fields.
I will start the Password field.
Select the Password field in your project and click the plus button. Add in the Name field “data-ms-member” and in the Value – “password”. Then save the changes.
Next field – Email Address.
The algorithm is the same: select the Email Address field and click the plus button. Add in the Name field “data-ms-member” and in the Value – “email”. Then save the changes.
And the last field in our case is the Name field. Follow the same algorithm.
Now we should test how this works.
Scroll the Memberstack site page down and you will see the Signup form type section.
The “Pop-up modal” setting is selected by default. But to be able to test our Signup page we should select the “Build a custom signup form” setting.
Then scroll up the page and you will see the new button – Test signup page.
Next step: we need to copy our Webflow site domain. So go to your published site and copy the URL.
Return to the Memberstack page and click “Test signup page” –> click on the “Add a Testing Domain” button in the window that pops up and then paste the copied domain in the field below.
Note that you should delete the extra “https”. Save the changes.
Now click the “Test signup page” button.
Everything should be green like on the screen.
Then go to your signup page. Refresh and enter the data.
After that press the “Submit” button and you will see the modal popup like on the screen.
Click the “Confirm and Pay” button and you will be redirected to the site.
Let’s check our test member in Memberstack.
Go to “Members” and you will see your test member right here.
Also you can click on it. In the modal popup you can see more information and manage some of that.
That's all! Thank you for reading and good luck ;)