Form submission to include CMS collection item it relates to

https://csc-conversation-from-template.webflow.io/resources

Hi all, I am building a site with a list of recommendations that I want users to be able to submit their views on. I have managed to create a feedback form within the CMS collection list item that then repeats for each recommendation. Is there any way for the feedback form data to include an identifier for which recommendation it is in relation to? Also is there a way for the feedback form data to include the identity of the logged in user?

Thanks!
Steve

Hi Stephen :wave:

Yes, fairly straightforward. Add an embed element to your form block. Once you do, you have access to that CMS’s items:

How are you creating logged in users?

1 Like

Thanks for this, I can see that it is working on the console. But how do I then include the “item” field when I use a logic flow to create a CMS item to record the responses in the feedback form?

Chris’s suggestion won’t work for logic, because logic currently does not recognize form inpute type=“hidden” fields as part of the trigger data.

Instead, you can create a regular input field, give it the name you want, and then populate the value of that field using script on page load. That will load fine in Logic, and you can hide the field so it’s not visible to the user;

Give your input a unique ID ( if there’s one instance of the form on the page ), and then set the value, e.g.;

$(function() {
$("#myInputID").val(" YOUR FIELD VAL HERE ");
});

Place the code in the /body custom code area, and use +Add Field to insert your item slug.

Hi Michael, thanks for this response. I’ve tried to implement it but can’t get it to work, so let me check my understanding?

  1. No need to add an embed element to the form block
  2. Add a regular input field to the form block, give it the ID “rec-name”
  3. Add the following to the page /body custom code area:
$(function() {
$("rec-name").val("  *** ");
});

I don’t know what I’m supposed to put in ***, and I don’t understand where you are saying I should use +Add Field to insert my item slug. Sorry to be so ignorant, but I’ve been messing about with this for a couple of hours and haven’t managed to understand it!

No problem, it’s a lot to absorb when you’re getting started.

In .val("x"), you want x to be the value you’re wanting to pass to Logic. Yours is coming from the CMS, so you need to insert the content of the CMS field you’re wanting the contents from. Have a look at Chris’s screenshot above. In the top right corner is where you see + Add Field.

In Webflow, that’s how you insert dynamic values from the current CMS item into the custom code record. It will appear as a purple pill-shaped field name in the code editor. Make sure you don’t have spaces between that and the double-quotes ( or you’ll get those spaces, too, in Logic ).

I’m afraid I still can’t get it to work. I can access the + Add Field selector in the embed element code editor, but it isn’t there in the /body custom code area for the page. Am I pasting the code in the wrong place?

Hey Stephen,

I suspect you’ve changed what you’re trying to do from your original request, let me walk through that and make some design recommendations that will make this much easier for you.

Read Only Link

Hi Michael, thank you so much for taking the time to explain this with your video, which was very helpful. You will see from the link that the Recommendations page has a feedback form in each collection list item, which was what I was trying to submit to the CMS “rec views” with the script to include the name of the recommendation. Anyway, I think doing it through the form in the CMS Collection Page - Review Recommendations Template, as you’ve suggested, makes more sense. I was able to add the input box inside a hidden div, and this shows up on the form submission (using chrome inspector tools I can see the payload). I was able to use the script to select the CMS field (Recommendation Name) and I can see that this correctly returns the name in the function. I still can’t, however, get the rec-name field to populate with the Recommendation Name.

Hopefully now that you can actually see into my project, you will be able to solve this! Thank you so much for your help so far!

ps. the Syngal video has a ‘buy me a beer’ option - does this go to you?

Steve

Hi Stephen, yes it does!

Nice work, you’re very close,
ID’s are case-sensitive so these need to match.

Hi Michael, just to confirm that this has worked at last! I’m realising that it’s a bit tricky to move data across collections in lots of ways in webflow so I’m putting my project on hold for a bit and looking into either linking with an external source or maybe trying out bubble, which seems to be more flexible in how it works with user data.

The approach you were taking was a bit challenging, there are MUCH easier approaches with Webflow.

Your original ask “form submission to include CMS collection item it relates to” becomes trivially easy if you skip using Webflow Logic and custom code.

Webflow Logic is in beta, and should be treated as such. It’s not yet full featured enough to meet your needs. Going down the custom code route is almost always the more difficult approach. Hence, no code.

My original reply started you down that easy path. You took a detour :smile:

With Bubble, your ability to do this is native so the experience (in some cases) can be much more friendly for sure. But that comes at a cost in other areas which may not be obvious until you’re invested into that platform.

If you’re looking for external sources to try with Webflow you’ll want to use a glue service like Make (Integromat) or Zapier.

Here are a couple of screencasts walking through how to set that up, it’s very straightforward.

If you’re looking to use an alternate datastore (or storage to accompany the Webflow CMS) the popular choice is Airtable or Google Sheets.

Here are some tutorials walking through using both with Webflow:

You can also do super fun things like automatically transfer data from the Webflow CMS into alternate data stores using Webhooks.

Here’s a tutorial using Webhooks to automatically sync the CMS to Airtable, swap in Google Sheets or any other datastore easily:

This is all accomplished with Webflow and a free Make (Integromat) account as your base stack.

Anyhow… good luck with your future plans once they are resumed!