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

hey friends welcome back to the channel

my name is connor i'm the founder of the

unicorn factory and today

i am going to be breaking down how i

allow freelancers on the unicorn factory

to update their profiles themselves

this has been one of the most requested

tutorials the most asked question ever

since i've posted my how to build a

marketplace without code tutorial

and i am happy to say that after

hours of filming and editing this i am

ready

to show you how it works so please

put your phone on flight mode get a pen

and paper

you might have to watch this a few times

but

let's dive into it so let's start off by

me showing you how it works so

right now we're looking at one of the

freelancer profile pages which is my own

actually

and we have here some dynamic content

which is the rates that a user can

update

the uh availability the bio case studies

that are listed in the user's profile

and the individual skill tags or service

tags

um that a freelancer can list in their

profiles

so if a user wants to update their

profile all they need to do is click on

my account go to the settings tab

click on update profile and then click

on refresh profile what that will do is

it will redirect them to an ear table

form where they can just go ahead

and fill out all the information that

they want to update including their

profile picture their job title

their bio what services they offer their

linkedin

link and their portfolio link if a user

decides that they do not want to change

their profile picture then all they need

to do is just leave the attachment file

for the profile picture in the update

form

blank so once a user has filled out the

update profile form all they need to do

is click on submit for review

and that is where the automation starts

cool so now that the freelancer has

submitted all that information

now what we need to do is approve it and

then once approved

trigger the automation that overrides

the existing webflow content the

existing air table content

and potentially also the member stack

content for that particular user but

before we start with the automation side

of things i'm going to need to show you

how you actually set up the form and how

you set up the back end of ear table in

order to make sure that the data

transfer

between web flow air table and member

stack

happens smoothly cool so this is a view

that you might be looking at

for your freelancers right now it's only

me in here

and the table is currently set up the

way

that i explained it in the freelancer

onboarding system so you've got a user's

current status

you've got the email you've got your

first name you've got your job title

photo

webflow item id and airtable item id

which is going to be super important for

the next few steps then we've also got

the bio skills and locations so

a user will fill out all of this

information when they sign up initially

so the secret to allowing a user

to update their profile is to basically

trigger the overriding of old

information

in order to figure out what information

to override we need to ask the user

which is where we create the ear table

form

and so i'm going to start off by showing

you how to create your table form so

first create a brand new table and we're

going to call this table

user updates now inside of this table

we want to add all the fields that we

want to allow the user to override

so once you've added all the fields that

you want to allow your user to update

your table should look

somewhat like this and it should

actually be quite similar

similar to your original user table now

there are two more fields that

are super important to add firstly we

want to add a linked

field referencing the original profile

that we are going to update so we're

going to create a link

field that links back to the original

table and when they ask you to add a

lookup field

just pick webflow item id and pick

air table id and then just click add two

fields

and you should be all good next what you

need to do

is you need to add a drop down for the

status

next you want to give the status three

options

one's gonna be review the next one's

gonna be approved

and this one and the last one is let's

call it

done once we've completed all those

steps what we wanna do is we want to

convert this table here into a form

so just click on form call it update

form

and then your form should look something

like this now the first tip that i'll

give you is

remove the user because

if a user is looking at the form

they will be able to see all of the

users that are currently sitting in your

database so say on the unicorn factory i

have 550 freelancers which means that

they'll automatically see this and

they'll also automatically see all the

other ones

so the way we get around it is by

removing the user field

and instead adding a new field

called email i like to move the email

field to the top

i will also remove the name field

because that is not the actual user's

name it's the name of the

record id and then i'm also going to

remove the status field which should

leave you with a form that allows a user

to add their email

add their new updated job title add

their photo

add an updated bio and select the skills

and location

so that is the first important step that

you've done so now that this form is

created you can in theory put it on your

freelancer dashboard

like i have or you can even send it to

your users by email

and whenever they fill out that form you

can take them through the process of

updating their profile so i'm going to

show you specifically what the user

experience looks like when they fill out

the form

now so let's assume that conor test

gmail

wants to update their profile now this

is what they would do

they would update their job title add an

image

they would add a bio and all the new

skills that they want added to their

profile as well

as a location

and then all they need to do is click

the submit button and all of that

information that they just submitted

will be sent to the user updates table

inside of your table one thing that i am

going to quickly show everyone

is what i do to create record ids

so we're going to call this one updates

id

all you need to do is click on formula

click

wreck select record id and what that

will do

is it will automatically populate the

ear table

record id for this particular record in

that particular table

now you might have noticed that the user

table and the status field

is currently empty and so we need to

populate that somehow so you can do that

manually or

you can use air table automations to

automatically populate it so all you

need to do to create the ear table

automation is click on automations click

on create

automation and then go populate

update record fields

now again the way the air table

automations works is very similar to

zapier

in fact you could use zapier to do the

same thing

however because it's still running

inside of air table and you're only

updating a record within the air table

and not on any other platforms it

actually makes more sense just to use

ear table automations so the way you do

it you pick your trigger

and the trigger that we're gonna pick is

when a record is created

then we pick the table which in our case

is user updates

we run a test uh test ran successfully

you can actually see down here

what required it was and we can already

see yep it's got all of our

information in there so i'm going to

click done and then what we want to do

is we want to add an action and the

action that we're going to choose is

we're going to update a record

then it asks us what table is that

record in it's in user updates

and then it asks us to dynamically

populate the record id

so all we need to do is click the blue

plus button go back to step one

because it is this record that we want

to update and that is the record that

triggered

the automation then we just click on

record id and it will automatically

populate now the question is what fields

do we want to update

so the first field that we want to

update is the

user field so we just scroll down select

user

and then when it asks us to choose the

field

what we want to use is in step

one the email

field so the email field is what the

user submitted

right when they filled out the form and

now we want to send

this information here into the user

field

because that user already exists

in the user table with that particular

email

another field that we want to update is

the status field

so we're gonna just change that into

review

so you can just type in review then we

click done

then we click run test and then you can

see how it automatically

populates the information cool so now

we've pretty much

got the basics set up we've got a user

table with all the information of our

existing users

and we've got a user update table which

means that when a freelancer fills out

the profile update form that all that

information gets sent there

now what we need to do is we need to

figure out a way to get that information

from the user update table

into the user table in air table but

also into web flow and all the other

platforms that you want to update

and in order to do that we're going to

be using zapier and again

with zapier we need to define a trigger

in an action

so the next step that we need to focus

on is defining the trigger inside of ear

table

cool one last thing actually before we

go to setting up the trigger

one thing that i do recommend doing is

when you are setting your actions

always add a select message as a

notification

that you can send to one of your

channels only because that way you can

get notified

when a freelancer or one of your users

requests a profile

update and also make sure that the

automation is turned on because if it's

not turned on people will be

filling out all the information and

airtable won't be updating it so it's

that button in the top

right corner cool so next up we need to

define our trigger

and our trigger is going to be when a

record moves from the

review stage into the approved stage

so let's go and set that up firstly i

like to move the status right to the

beginning

because i kind of feel like it's where

it belongs

but you can leave it wherever you want

so what we want to do is we want to

create a new view by clicking on the

grid button in the bottom left

and what we're going to call this is

we're going to call this the approved

view and now in order

to make sure that only the relevant

records

are in this view we want to apply a

filter and we want to say that

the status is

approved so now what it will do is it

will filter out all records

that are currently not in the approved

stage

and then and this is where the magic of

views happens

when i change the update record here

that connor test that gmail submitted

from review

to approved what happens is it moves it

into that view

and now i can use zapier to make that

the trigger

and that's what we're going to do now

cool so now we're back in my actual

zapier account with the existing zap

set up as it's currently running and i

just want to talk you through each

individual step

so as we defined we have a new record in

view

which is in the profile updates table

when a record

is moved into the approved view now

if you saw last week's video with my

freelance onboarding process

you'll know that if you want to send

rich text

or to web flow what you need to do is

you need to convert the air table mark

down from the bio section

into html and that is what happens in

step number two

now someone asked how exactly i do it um

it is you just choose the formatter by

zapier event you choose

action as your text as your

your action event is your text um

and then when you select the transform

you select convert markdown to html

and then in the input you just drop from

the

record number one uh from your first

step in the trigger

the bio field so in my case here

it would be this field here

that i would convert from markdown into

html and then you can send that data

to webflow so the third step that i want

to take is i want to

update the original record

inside of here table so in our example

we want to

update this user here now the reason

why it's important to update that record

is because when you use tools like

parabola to sync platforms between each

other

you want to make sure that this

information is up

as up to date as it could possibly be so

that includes

any updates that a user requests get

sent over there

once airtable has updated now what i

want to do is i want to update the

webflow item

and now the way that that works is that

you

just go ahead select the update live

item in

webflow and it will ask you to select

your site

your profile and then also your webflow

item id

you will have to dynamically populate

that webflow item id that but you can

get it

from your user updates field that you

got in step one

from the webflow item id lookup and it's

for that reason friends

that you need to store your webflow item

id inside of webflow

up inside of airtable otherwise you will

not be able to update it

so always make sure that when you

linking your users to also

use a lookup for the webflow item id and

for the ear table id

so that you can make these updates in

zapier next up i have set up a custom

request

for the um skills and services that i

now want to send

to um webflow

again this is a bit more of an advanced

thing that i'll cover in a future video

and then last but not least i just send

an email notification to the freelancer

letting them know that i have

made the update to their profile and

they'll be good to go

cool so that is how i do user profile

updates through

unicorn factory on my webflow site and

you know it does the trick

um it's a bit of a hack clearly but

as long as it works it works and i think

that if

allowing users to update their profile

is something that is incredibly

important

then this is hopefully a way that you

can do it

now one thing that i would say about

profile updates is you know this is like

a real

fancy way of doing it or a highly

automated way of doing it

but you know before setting up all of

the automation like one thing that you

could do is just send people a link to

the form

instead of hiding it behind um like

membership sites and all that kind of

stuff and just follow that

methodology of collecting information

and then using that information to

override certain fields

i also use a similar strategy when it

comes to updating case studies but that

there is a bit more complicated because

one user can have multiple case studies

but i'll cover that sometime

in 2027 or something like that but i

hope that you enjoyed this video

um thanks for sticking around to the end

um i

would love to know what you thought

about it like if you

if this is how you thought i did it if

you have any other ways that you want to

do it

um if there was any parts of it that

confuse you then

yeah just let me know in the comments a

i love answering these questions and b

i hear comments is fantastic for the

search algorithm be sure to have liked

and subscribed

this video and subscribe to the channel

and i look forward to seeing you back

here for the next one

bye