Create Form with CMS inputs

Is this possible? Basically the cms would include values like form element(checkbox), description of the element and the value(on/off). And thee form would be created from these attributes.


Here is my public share link: LINK
(how to access public share link)

Hi Tomi!
Yes, if I understand right, you want the form to have different types of inputs but with CMS items.

You can go ahead and add inside a form a CMS collection list and add something like the radios or checkboxes inside that collection.

You will need something like this to make it work for something like select fields.

Let me know if it helps and if you have any question!

Thanks!!!
I’ll check this out.

Yep Thanks!!! Works great.

Now I just need to clear the form. any idea on this.

Hi

I’m using this code that I got from here to not send unchecked checkbox values, but as a total noob I’m doing something wrong. This only clears the whole form:

<script>

document.addEventListener("DOMContentLoaded", event => {
  // define form element
  let form = document.getElementById("hc-ilmoittautuminen");
  console.log(form);
  // define submit button
  let submitButton = document.getElementById("submitButton");
  console.log(submitButton);

  // on button click
  submitButton.addEventListener("click", event => {
    console.log("button clicked");
    // prevent the form from being sent
    event.preventDefault();
    // disable empty inputs 🧠
    disableEmptyInputs();
    // submit cleaned form
    form.submit();
    /*
    // for development only
    setTimeout(function() {
      form.submit();
    }, 1000);
    */
  });
});

// disableEmptyInputs() declaration
function disableEmptyInputs() {
  // create an array of all targeted inputs
  let inputs = document.getElementsByClassName("checkbox-input");

  // for every input of the array
  for (let i = 0; i < inputs.length; i++) {
    let input = inputs[i];

    // check if the input value is empty or null
    if (input.value === false) {
      // disable empty input
      input.disabled = true;
      console.log(input);
    } // end of if statement
  } // end of for loop
} // end of disableEmptyInputs() declaration

</script>

LINKY:
https://preview.webflow.com/preview/mot-fcbca7?utm_medium=preview_link&utm_source=designer&utm_content=mot-fcbca7&preview=882c8e0f3b9edc37040d478045f4ec72&pageId=644a3762b49983e8636e941c&workflow=preview