How to custom design a user edit form in Webflow x Tangram using Relume

‍

Summary:

The video explains how to connect a custom-designed user profile edit page in Webflow instead of using Tangram’s default design. The key steps include:

1. Creating the Form – Use a Webflow form (e.g., a modified Relume.io form) and ensure the form element has a custom attribute: tg-attribute = user-form.
2. Mapping Fields – Assign field names using user[FieldID], where FieldID is copied from Tangram’s admin fields table or use the following default field IDs (e.g., user[display_name], user[email]), user[zip] for the default user address field, user[phone_number], user[role_id], user[avatar])
3. Dropdowns & Custom Fields – For dropdowns, set the name as user[FieldID] and ensure option values match exactly with Tangram’s backend. Multiple selections require custom code.
4. Avatar Upload – File uploads need a custom embed code from Tangram’s team.
5. Publishing & Linking – Once the Webflow page is ready, publish it, copy its URL, and paste it under "Edit Profile Source URL" in Tangram’s admin role settings to override the default profile edit page.

For advanced customization like pill-style multi-select or file uploading, contact Tangram’s support team for additional code snippets.

Transcript:

" Hey, everybody. In this video, we'll be showing you how to connect a custom design user profile edit page within Webflow instead of using the default design user profile edit page within Tangram, which will look something like this, depending on what fields and what action buttons you have enabled.  You can take things like the display name, email, any custom fields, and move that into a custom design form within Webflow.

For the purpose of this demo, I'll just be copying one of the application UI forms from relume.io to make it easier. I copied, I think, form four and deleted some fields there. And the only attributes that you need to connect in Webflow to make this form actually save the data to your Tangram app is on the form element itself.

In the navigator, that will be this form four underscore block. You'll go to the settings tab, go to custom attributes and do tg-attribute = user-form. If I spell that correctly. And as long as we have that attribute, we can set the names for the fields just to be user, square brackets, the field ID of the fields in your platform.

Let me return to the admin account  we can go to the fields table of this demo service marketplace. And we want the display name,  I'll search display name. Copy the ID, like go to this display name field on the form, and change the text field setting name right here underneath the settings panel in Webflow to lowercase u, user, square brackets, and then inside of the square brackets, paste that friendly field ID.

And that's all you have to do. You do the same thing for email address, except, I believe you can just put in user, square brackets, email, and you don't need to copy the exact ID in In from the fields table, if we wanted to do phone number, I could copy and paste that field, rename it to phone number, and change the placeholder text to the user, or not the placeholder text, the field name to the user, phone underscore number.

The type would need to be a phone number field instead of an email field, and you would probably want to change the icon to a phone number field, but I'll just delete it for now.

And for the about field, that would be usually called about or description,  copy description, paste that in, to user, square brackets, description. You don't need to attach anything to the save button, we don't have the ability to cancel, if you just leave the page it'll save it as a draft if there are values saved.

And then the last caveat is if you need to upload the avatar photo we have to give provide you with a embed code snippet to make that file upload achievable it requires a little bit of custom code currently for that avatar upload  feel free to contact our team for that but all the other field types like text areas drop downs Number fields, text areas, text strings, anything really that you want to connect or a custom field to this form will work except for the file upload field without custom code.

And let's say you want to connect a dropdown. I would go to the form element section of Webflow and drag in a select field.

And we would do the name, user, square brackets, then you paste in whatever the drop down field is.  If I wanted to look for like category maybe, copy that category field, paste it inside of the square brackets, and then you would just make the text here and the value match for the multi select options in category.

Maybe do web design as an option and copy that, and it has to match exactly. The value and the tangram backend, the casing and everything I think matters.  We do web design. Web development, if these are the different categories that you want to offer in that drop down,

like so. And if you want to enable multiple selection, the default design in UX and Webflow isn't very pretty. It requires you to hold shift and like click to, or something like that, to select multiple at a time. We do have a bit of custom code that we can enable on your platform if you contact a member of our team to make it so it's like pill selection within Tangram.

If we go back to the user. the default user edit profile page. You'll see what I mean.  If I log in as this provider, we can make it such that in Webflow, it looks like this, where you select multiple at a time as pills, contact a member of your team if you want that code snippet. But hopefully this video is helpful.

And as soon as you have your design done in Webflow, you would just publish it, copy the URL of the published version of the page, go into your admin account, and underneath the role settings, you can set the new custom design route for the provider edit page. And that will be in page overrides at the very right, edit profile source URL you paste in there, hit save, and everything's good to go."