Updating a CMS Item from the Actual Live Site

I’m currently outputting my CMS Collection Item Fields into an editable Input field using an HTML Embed.

Is there anything I can do for a user to edit the Input directly in the live site so that it also updates the CMS Collection Item Field with the new text?

This is a common request in Webflow and unfortunately there is currently no built-in way to update the CMS from a Webflow page or FORM directly- though I’m hopeful that the upcoming Webflow Logic feature will offer that.

Right now you can do it by posting your form to an external automation system like Make (prev. Integromat) or Zapier, and then build an automation there that updates your CMS collection item.

Thank you! Do you think a Make/Zapier integration (e.g., with Airtable) could also support updating a CMS Item with a Reference or Multi-Reference Field(s)?

1 Like

Yes. I’m more familiar with Zapier, and it’s been at least a year since I’ve done some heavy CMS integration work with it. In the past you had to get the CMS item ID’s internally through the API in order to specify them in Zapier.

It’s a bit fugly but it can be done. I’m hopeful they’ve improved on that. In your case, if your Category is meant to be a CMS-driven category selection, you’d create a dropdown SELECT list that has that internal Collection Item ID, and then pass that to your webhook in the form post.

If you need help working out the internals for that, I have a few hours free this week for consulting work, you can drop me a line here or at mike@sygnal.com.

It’s not too bad.

Here’s one approach I’ve used often:

That screencast uses Zapier, a better approach is to use Make (Integromat).

Here’s a screencast that walks through submitting native Webflow forms into the CMS with Make, instead:

Here’s a screencast with some guidance on that:

Your overall ask with everything is fairly straightforward and done often. Once you get the hang of it you can wire together solutions like this quickly.

Thank you! But this example seems to use the native Webflow Forms. I’m looking to use custom Input fields because of some limitations with Forms. I’m not sure if there are any webhooks for inputs being updated with text.

@Amir_Tehrani there isn’t any difference actually. You’ll need a FORM regardless so you can capture and post your results to the webhook.

Just use Webflow forms and you can set the action directly to a webhook URL if you prefer.

What limitations are you bumping into?

That’s correct, but if you look at timeline 5:45 on that first screencast link I posted, you’ll see that I’m adding custom inputs (via an Embed element) in a similar way to what you mentioned you are doing now.

The form is just what gives you the ability to get the data off the page and eventually into the Webflow CMS without adding a bunch of custom Javascript.

I’d encourage you to go through those tutorials. They’ll give you what you need. If not, the custom JS route (without a form) will be the approach you’d most likely want to take.

The biggest limitation is that Webflow Forms require a Success/Error message after submission. I would like for a user to:

  • View the existing entry
  • Edit the entry
  • Save the form, without the Form being dismissed (i.e., without a Success/Error message replacing the Form)

This is mainly why I was considering input and textarea fields in HTML Embeds. But I now have the challenge of getting the data off the page through a custom approach.

Again, if you review the tutorials linked above, as well and view others on the blog, you’ll find that all of the problems you just mentioned are already solved.

You can view an existing entry, you can edit the entry, and you can submit native Webflow forms without the success/error message replacing the form (or use other services mentioned to keep the form entirely without it being dismissed).

…and you can do all of this while getting the data off the page without writing a bunch of bespoke, custom Javascript.

It’s all there for you :star_struck:

:beers: Good luck!