How to create a custom sign up page in Webflow for your Tangram app

‍

Summary:

To set up a signup form in Webflow, follow these steps:

1. Form Setup: Add a TG-signup-form attribute to the form element.
2. Required Fields: Include name, email, password, and role_id.
   • Use square brackets for field names, e.g., user[password], user[email], user[name].
   • Password confirmation is optional (user[password_confirmation]).
3. Role Selection:
   • Add a select element for user roles (user[role_id]).
   • Retrieve role IDs from the admin panel (e.g., 1369 for seller, 1368 for buyer).
4. Custom Errors: Custom attributes can define error messages (covered in an advanced tutorial).
5. Integration:
   • Publish the page and copy the Webflow URL.
   • Paste it into the Webflow integrations tab under the signup form URL.
   • This redirects /registration to the custom signup form.

This setup allows customization of the form while ensuring proper user registration.
‍

Video Transcript:

" For the signup pages on the form element itself, you have a single attribute, a TG attribute equals signup form with a tack in between signup and form. You'll need to pass the name, the email, the password, and the password confirmation fields. You'll have user in square brackets with the password underscore confirmation.

As the field name for the password company confirmation field, and you'll want the type and what flow to be password same for the initial password fields, user square brackets, password, you don't have to have the password confirmation. If you don't want it there, you can also use custom attributes to add custom error messages.

We'll put that in an advanced video later on for email. We would do the same thing. It would be user square brackets. And then we'd find on the fields table, the email field. Go back to Webflow and paste it inside the square brackets. Name, same deal, we'd find the name field in the fields table, copy it, put it inside of the square brackets, like this.

The required fields on the signup form will be a name, I believe, an email, and a password, and role ID. And usually if you just have a single signup form, which is included in the 1. 99 per month plan, you will go to the form section of Webflow and add a select element, you can just drag it in there. And the values in that select would be your roles, your different roles, that you want people to be able to sign up for.

We would have seller, and the value would be the ID of the seller, which we'll find in a second, and the buyer, and what you put for the name of the field is user, square brackets, role underscore ID. This is a mandatory field, you do need this on the page in order for the registration page to work. And we'll find the values for seller and buyer within your admin account if we go to the roles tab in the admin account.

And go to the page override section, you can copy this numeric ID for whatever role you're looking to connect to the registration page. For provider it's, looks like it's 1369, for the seller 1369, and for buyer or customer it is 1368, and we'll paste it as the value here. If we were to publish this page, copy the Webflow version of the URL, and then paste it into that.

Integrations tab for Webflow for the signup form URL, just like we did for the login form. That would reroute the slash registration link to go to this custom design form and it will function properly and you can add whatever fields you want to the signup form.

"