Building a directory w/ fields update-able by users

Hey Webflow’ers!

I am in the planning stages of building a directory. In short, when the member signs up, they will be prompted to submit their listing. Once the account and listing are created within Webflow’s CMS, I would like the logged in user to have the ability to update the listing’s fields from within their account.

So far I have decided upon using outseta for user-capabilities and would prefer integromat for automation but it is not set in stone. I’ll use whatever works best.

What would be the best way to accomplish something like this? Thanks in advance!

Hi @William_Carvell1, thanks for your good post and question.

Webflow allows you to create forms that can save data into the CMS via tools such as Zapier, which allow you to send the form data to Zapier, then create an action in Zapier that sends the initial data to a cms collection on your site (with each item in that collection representing the data input by a user).

When the data is saved in the CMS, a collection item id is returned to Zapier which you can store and use in subsequent data updates using another form, where you provide the collection item id for a particular item that need to be updated and then you populate the form with new values and re-submit.

The changed data goes back to Zapier which can then create a trigger to update the original collection item based on collection item ID for a particular user.

You would probably need some way to store this collection item id for each user so that when they login and are authorized, the correct collection item id is sent along with updated info (perhaps through a hidden field).

Zapier helps you to send form data you collect from site visitors and pass that data to other applications, or back into the Webflow CMS.

Zapier is one of the custom integrations you can make in Webflow, Learn more about Zapier in the Webflow University: Zapier Integration | Webflow University

Here is a tutorial, it might be a bit dated, but gives you an idea how creating items from Zapier works: Creating CMS items with a Zapier integration | Webflow Workshop | Webflow live stream

Zapier can use triggers such as receiving a new form submission from Webflow, to trigger things like create item or update item.

I hope this helps!

1 Like

Thank you! I look forward to trying this out. I have limited experience with Zapier so it’s likely the collection id part that will get me hung up.

I appreciate the assistance!

1 Like

I’m also wondering the best structure for displaying this data.

I had wondered about having the user’s “update listing” page as a CMS template so that I could display the existing data for them to review and have an “edit” button to reveal a submit-able field to enter the new information into.

But this method would require an almost identical CMS collection being created and updated in sync so that I could have a second CMS template displaying the listings to the users for the same data.

Am I on the right track, or is there a better way and I’m over-complicating things?

Hi @William_Carvell1, thanks for your reply,

Well, there is probably a number of approaches, one that has worked for me in the past is that when I first create the initial item (lets say the first submission by a user), I create a field in the cms collection where I can store the collection item id that is returned by the initial item creation.

I get the collection item id from the initial save, then I do a quick update right after the initial field data is saved, to insert the collection item id that is returned to zapier on that initial save operation, into the custom field that I want to use to store the collection Item ID, that would also be the first update to the collection item.

The end result is that the collection item is created with a field in the collection that is used to store the collection item id.

Then on the page you use to display the already entered info to the user, you might use a jquery script to “copy” values from the fields using the dynamic field capability in custom code and copy those values in the collection fields on the page to a form on the same page with the collection item id field copied to a hidden field on the page so the user never sees it, they only see the info they originally entered, ready to be edited.

After editing, the user submits the form which goes to zapier, then zapier updates the collection item based on collection item ID with the new values coming from the update form submission.

Hopefully that makes sense the way I explained it.