JSFiddle - React, Tailwind, and code Playground

HTML

<form name="forms" id="forms">

  <label>Do you know javascript?
    <input name="lang[js]" type="checkbox" />
  </label>
  <label>Do you know python?
    <input name="lang[py]" type="checkbox" />
  </label>
  
  <label>Do you know javascript?
    <input name="languages" type="checkbox" value="javascript" />
  </label>
  <label>Do you know python?
    <input name="languages" type="checkbox" value="python" />
  </label>

  <button type="submit">Submit</button>
</form>

CSS

body {
  background: #D2E4FC
}

label {
  display: flex;
  flex-direction: column;
  text-align: left;
}

input {
  border: 1px solid #DDDDDD;
  border-radius: 3px;
  background: #FFFFFF;
  padding: 10px;
}

input::placeholder {
  color: #DDDDDD;
}

JavaScript

// get the form element from dom
const formElement = document.querySelector('form#forms')

// convert the form to JSON
const getFormJSON = (form) => {
  const data = new FormData(form);
  return Array.from(data.keys()).reduce((result, key) => {
    if (result[key]) {
      result[key] = data.getAll(key)
      return result
    }
    result[key] = data.get(key);
    return result;
  }, {});
};

// handle the form submission event, prevent default form behaviour, check validity, convert form to JSON
const handler = (event) => {
  event.preventDefault();
  const valid = formElement.reportValidity();
  if (valid) {
    const result = getFormJSON(formElement);
    // handle one, multiple or no languages selected
    const languages = [result.languages || []].flat();

    // use spread function, but override the keys we've made changes to
    const output = {
      ...result,
      languages,
    }
    console.log(output)
  }
}

formElement.addEventListener("submit", handler)