How to prevent duplicate form submissions in a CMS by tracking user responses with metadata? Answered

• 

  Jayess

  • May 23, 2023 12:18

  Hello Alican 👋

  Great question! The easiest no-code way I can think of is when they submit a form they change to another “free plan” so as they upgrade any content from the last membership automatically hides. To add the item’s ID you could create a profile form to add the item’s ID.

  You could also try and use Webflow’s filter function

  However I’m not really sure if that’s a good solution for you depending on your needs. Can you share a little more information and use-case for your users?

  0
• 

  Jayess

  • May 23, 2023 12:18

  ah okay, if you already have code for this in 1.0, we have an article here that you could guide you in converting your code to 2.0 🎉

  0
• 

  Alican Avcuoğlu

  • May 23, 2023 12:18

  Unfortunately, this situation probably requires code. My users apply for jobs, and by adding the job they applied to their metadata, I should prevent them from applying a second time for the same job. I should also show the jobs they have applied for on their profile. I had custom code on MS 1.0 that did this. Code basically worked like this, it checked if the item’s ID in member’s metadata. If it was in metadata it hid the applying form. If not it showed the form and once it was submitted it was then added to metadata.

  0
• 

  Alican Avcuoğlu

  • May 23, 2023 12:18

  I kinda need some help on the code. This is the code I came up but it doesn’t work as I wanted it to work. I manually added applied metadata in Memberstack as “applied: 12”, and

  console.log(metadata)

  shows as

   {applied: '12', fileNames: Array(0)}.

  It’s not in fileNames though. Also submitting a form doesn’t add anything to metadata. I don’t know what I’m doing wrong. If you want I can provide the older code for 1.0.

  Thank you in advance. 🙏

  const memberstack = window.$memberstackDom;
  
  memberstack.getCurrentMember().then(async ({ data: member }) => {
  if (member) {
  let metadata = member.metaData;
  
  // If no metadata exists, create it in Memberstack.
  metadata.fileNames = metadata.fileNames || [];
  
  console.log(metadata);
  console.log(metadata.fileNames);
  
  const itemID = {{Webflow Item ID}};
  
  // If they have the item ID in their profile, hide the form, show the 'completed button'
  if (metadata.fileNames.includes(itemID)) {
    document.getElementById("job-application-form").style.display = "none";
    document.getElementById("job-applied").style.display = "flex";
  }
  
  // When the button is clicked, if the itemID doesn't exist on their profile add it, then push the metadata to MemberStack.
  $("#job-application-form").click(function () {
    if (metadata.fileNames.indexOf(itemID) === -1) {
      metadata.fileNames.push(itemID);
    }
  });
  
  await memberstack.updateMember({
    metaData: {
      applied: metadata
    }
  });
  }
  });

  0
• 

  Marc Hudson

  • May 23, 2023 12:19

  Hopefully this works for you. (It’s untested but it’s based on working code).

  Here’s some helper functions for the “Footer code” region in settings (will be available site-wide on all pages):

  // Check whether Object key exists
  function checkKeyExists(obj, key) {
  return typeof obj === "object" && key in obj;
  }
  
  // get Member's JSON then fire callback function.
  function getMemberJSON(callback) {
  window.$memberstackDom.getMemberJSON().then(({ data: memberJSON }) => {
  if (!!callback) {
  var output = memberJSON || {};
  callback(output);
  }
  });
  }
  
  // update Member's JSON.
  function updateMemberJSON(json, callback) {
  window.$memberstackDom.updateMemberJSON({ json: json }).then(({ data: memberJSON }) => {
  if (!!callback) {
  var output = memberJSON || {};
  callback(output);
  }
  });
  }

  And the page code:

  // Doc ready.
  Webflow.push(function(){
  
  // Get and update JSON.
  getMemberJSON(function(memberJSON){
  if (!checkKeyExists(memberJSON, 'fileNames')){
  // If no metadata exists, create it in Memberstack.
  memberJSON.fileNames = [];
  }
  
  const itemID = {{Webflow Item ID}};
  
  // If they have the item ID in their profile, hide the form, show the 'completed button'
  if ($.inArray(itemID, memberJSON.fileNames) > -1){
    $("#job-application-form").hide();
    $("#job-applied").css('display', 'flex');
  }
  
  // ID should be on the <form> element, not the wrapper DIV.
  $("#job-application-form").on('submit.updateJSON', function(e){
    // prevent form from submitting.
    e.preventDefault();
  
    var form = $(this);
  
    if (memberJSON.fileNames.indexOf(itemID) < 0){
      // update JSON.
      memberJSON.fileNames.push(itemID);
  
      updateMemberJSON(memberJSON, function(memberJSON){
        console.log('Response:', memberJSON);
  
        // remove the custom submit handler and re-submit the form.
        $(form).off('submit.updateJSON').submit();
      });
    }
    else {
      alert("itemID already exists");
    }
  });
  
  });
  
  });

  I recommend storing things like Arrays in a Member’s JSON and not in Metadata.

  Hopefully this works first try but there might be a slight oversight. Let me know how you go.

  0
• 

  Alican Avcuoğlu

  • May 23, 2023 12:19

  Unfortunately it didn’t work.

  0
• 

  Marc Hudson

  • May 23, 2023 12:19

  Hmm, I just tested it and it worked for me, I just changed the itemID variable to

  const itemID = 1234;

  while I test it. Maybe try that. What does your browser’s console say?

  0
• 

  Alican Avcuoğlu

  • May 23, 2023 12:19

  Ha! That worked out great. Thank you so much

  0
• 

  Marc Hudson

  • May 23, 2023 12:19

  No worries

  0
• 

  Nicolas Scott

  • May 23, 2023 12:19

  If anyone else lands here, quick reminder:
  You can no longer update metadata from the front end anymore. We removed that ability a couple months ago for security.

  Also Marc is correct that storing arrays of data is best used in member JSON. 👌

  0
• 

  Memberstack Team

  • Edited March 11, 2026 22:56

  One approach you can take is to start with Script #202 – Prevent Double Form Submissions. It’s built to stop users from accidentally submitting the same form twice, and you can extend that logic to your CMS workflow. When a user submits a form, you can capture the CMS item’s ID and save it into their Member JSON (since front‑end metadata updates are no longer supported). On page load, check that JSON — if the ID is already there, hide the form so the user doesn’t see it again.

  That said, #202 by itself only prevents duplicate clicks in the moment. To fully achieve “store CMS item ID + hide form after submission,” you’ll need a small custom script layered on top of #202 that:

  1. Saves the CMS item ID to the member’s JSON when the form is submitted.

  2. Runs a check on page load to see if that ID exists.

  3. Toggles visibility so the form disappears once the user has already submitted.

  

  0

Please sign in to leave a comment.