How to create a multi-select form field with CMS integration without manual field entry?

• 

  Chukwudi

  • November 27, 2025 22:10

  Hi Nick,I feel a good way to handle this is:

  1. Use the CMS to render your options (like checkboxes, pills, or divs).
  2. Let the user click to toggle their selections.
  3. Store those selections in a hidden input with ms-field="yourFieldName".
  4. Submit the form normally, so Memberstack saves the value.

  This keeps the UI flexible and CMS-driven, while ensuring Memberstack only sees the clean field value it expects.

  Here’s an example that can save an array into Memberstack:

  <!-- CMS items -->
   <div class="multi-select-option" data-value="Option A">Option A</div> 
  <div class="multi-select-option" data-value="Option B">Option B</div>
  <div class="multi-select-option" data-value="Option C">Option C</div> 
  
  <!-- Submit button --> 
  <button id="save-interests">Save Interests</button>
  
   <script> 
  document.addEventListener("DOMContentLoaded", function () { 
  const options = document.querySelectorAll(".multi-select-option"); 
  const saveBtn = document.getElementById("save-interests"); 
  
  if (!options.length || !saveBtn || !window.$memberstackDom) return;
   // Toggle selection UI 
  options.forEach(option => { 
  option.addEventListener("click", () => { option.classList.toggle("active");
   }); 
  }); 
  
  // On submit, collect selections and save to Memberstack 
  saveBtn.addEventListener("click", async () => { 
  const selectedValues = Array.from(options) 
  .filter(opt => opt.classList.contains("active")) 
  .map(opt => opt.getAttribute("data-value")); 
  
  try { 
  await window.$memberstackDom.updateMember({ 
  customFields: { 
  interests: JSON.stringify(selectedValues) // store as JSON string 
  } 
  }); 
  console.log("Saved interests to Memberstack", selectedValues); 
  alert("Your interests have been saved!"); 
  } catch (err) { 
  console.error("Failed to save interests", err); 
  alert("There was a problem saving your interests."); 
  } 
  }); 
  }); 
  </script>

  How it works

  • Clicking CMS items toggles their selection.
  • When the user clicks Save Interests, the selected options are collected into an array.
  • The array is converted to a JSON string and stored in the Memberstack custom field (interests).
  • No updates happen until the submit button is pressed.
  0

Please sign in to leave a comment.