How to Set Up User Profile and User Settings Pages For Public Profiles in Webflow
We are going to create pages for user profiles and settings, add links to them on the site navigation, and set up automations for when users update their user data.
We are going to create pages for user profiles and settings, add links to them on the site navigation, and set up automations for when users update their user data.
Add two new buttons to your website's navigation menu: Profile and Settings.
Give the profile button the custom attribute data-ms-action="login-redirect'. This will set the destination url of the profile button to the url created in the previous step.
In addition, add the custom attribute data-ms-content="members" to the settings button to hide it when logged out.
Create a new page and name it Settings. Add navigation and body sections, then copy and paste the Unstyled Profile Form Memberstack Component onto your page. Change the fields and corresponding custom attributes to match the fields on your signup form.
You can also add the ‘username’ custom attribute to the second part of the header text, which will display the logged in user’s username on the page.
Return to your navigation bar, click on the Settings button, and set the link to the new Settings page.
Webflow automatically creates template pages for each CMS collection that you create, however they will initially be blank. We’re going to create a simple profile page by dynamically displaying data collected during sign up with Collection List Wrappers.
On the Users CMS Template page, add navigation and body sections, then add a collection list wrapper. Double click the element to connect it to the Users CMS collection.
Within the filtered collection item, we can now build out a simple user profile. Add text blocks for each value that you want to display (username, first name, last name, email).
Select any part of the collection item in the navigator, then click add filter on the right side panel. Add the filter “User is Current User” and save.
On each text block, click the plus icon on the upper left of the text input window and select a matching data field to link to.
Save and publish your pages, then test your work by signing up and logging in as different users. Each user will have their own profile pages, each with a unique url.
You should now have the framework set up for basic public user profiles in Webflow. Learn how to add user images with the next tutorial, How to Add User Profile Images to Public Profiles in Webflow.