How to Create Editable Member Profiles Page in Webflow using Webflow, Zapier and Airtable

In this video, Connor, the founder of Unicorn Factory, explains how to create editable member profile pages in Webflow using Webflow, Zapier, and Airtable. The process allows freelancers to update their own profiles on the platform.

The system works by having users click on "My Account," go to settings, and select "update profile." This redirects them to an Airtable form where they can fill out updated information. Once submitted, the automation process begins.

The setup involves creating two tables in Airtable: one for existing users and another for user updates. The user updates table is converted into a form that freelancers can fill out. An Airtable Automation is set up to populate the user and status fields when a new record is created in the user updates table.

The key to the process is triggering the override of old information with new data. This is achieved using Zapier to connect Airtable, Webflow, and other platforms. The trigger in Zapier is set when a record moves from "review" to "approved" status in the user updates table.

The Zapier workflow includes several steps:

  1. Detecting the new approved record in Airtable
  2. Converting markdown to HTML for rich text fields
  3. Updating the original user record in Airtable
  4. Updating the corresponding Webflow item
  5. Handling skills and services updates
  6. Sending an email notification to the freelancer

Connor emphasizes the importance of storing Webflow item IDs and Airtable IDs in the user table to facilitate these updates. He also mentions that while this is an advanced method, a simpler approach could involve sending users a direct link to the update form without complex automation.

Highlights:

  • The system uses Airtable forms for user input and Zapier for automating updates across platforms.
  • Storing Webflow item IDs and Airtable IDs is crucial for making updates in Zapier.
  • The process allows for scalable, self-service profile updates while maintaining admin control through an approval stage.

In this video, Connor, the founder of Unicorn Factory, explains how to create editable member profile pages in Webflow using Webflow, Zapier, and Airtable. The process allows freelancers to update their own profiles on the platform.

The system works by having users click on "My Account," go to settings, and select "update profile." This redirects them to an Airtable form where they can fill out updated information. Once submitted, the automation process begins.

The setup involves creating two tables in Airtable: one for existing users and another for user updates. The user updates table is converted into a form that freelancers can fill out. An Airtable Automation is set up to populate the user and status fields when a new record is created in the user updates table.

The key to the process is triggering the override of old information with new data. This is achieved using Zapier to connect Airtable, Webflow, and other platforms. The trigger in Zapier is set when a record moves from "review" to "approved" status in the user updates table.

The Zapier workflow includes several steps:

  1. Detecting the new approved record in Airtable
  2. Converting markdown to HTML for rich text fields
  3. Updating the original user record in Airtable
  4. Updating the corresponding Webflow item
  5. Handling skills and services updates
  6. Sending an email notification to the freelancer

Connor emphasizes the importance of storing Webflow item IDs and Airtable IDs in the user table to facilitate these updates. He also mentions that while this is an advanced method, a simpler approach could involve sending users a direct link to the update form without complex automation.

Highlights:

  • The system uses Airtable forms for user input and Zapier for automating updates across platforms.
  • Storing Webflow item IDs and Airtable IDs is crucial for making updates in Zapier.
  • The process allows for scalable, self-service profile updates while maintaining admin control through an approval stage.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.