表格中需要复选框。使用 EmailJS 进行反应

问：

我有一个使用 EmailJS 的 React 项目，在发送表单之前需要该复选框，或者在电子邮件模板中注册该复选框的值。它的值当前未被注册。

以下是一些代码：

const ApplyForm = (props) => {
  const [formData, setFormData] = useState({
    student_name: "",
    adress: "",
    postnr: "",
    city: "",
    birthday: "",
    otherschool: "",
    startdate: "",
    firstgrade: "",
    secondgrade: "",
    thirdgrade: "",
    fourthgrade: "",
    fifthgrade: "",
    sixthgrade: "",
    seventhgrade: "",
    mom_name: "",
    mom_adress: "",
    mom_postnr: "",
    mom_city: "",
    mom_phone: "",
    mom_email: "",
    children_age: "",
    other: "",
    why: "",
  });

  const [formError, setFormError] = useState();
  const [formSuccess, setFormSuccess] = useState();

  function validateEmail(email) {
    const regEX = /\S+@\S+\.\S+/;
    const patternMatches = regEX.test(email);
    return patternMatches;
  }

  const validateForm = () => {
    if (formData.student_name.length < 3) {
      setFormError("ERROR! Navn må inneholde minst 3 karakterer");
      setTimeout(() => {
        setFormError(null);
      }, 5000);
      return false;
    } else if (!validateEmail(formData.mom_email)) {
      setFormError("ERROR! Fyll inn en gyldig e-postadresse");
      setTimeout(() => {
        setFormError(null);
      }, 5000);
      return false;
    } else if (formData.adress.length < 3) {
      setFormError("ERROR! Adressen må inneholde minst 3 karakterer");
      setTimeout(() => {
        setFormError(null);
      }, 5000);
      return false;
    } else if (formData.postnr.length < 4) {
      setFormError("ERROR! Fyll inn et gyldig postnummer");
      setTimeout(() => {
        setFormError(null);
      }, 5000);
      return false;
    } else if (formData.city.length < 2) {
      setFormError("ERROR! Fyll inn poststed");
      setTimeout(() => {
        setFormError(null);
      }, 5000);
      return false;
    } else {
      return true;
    }
  };
  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const onSubmit = (e) => {
    e.preventDefault();
    if (validateForm()) {
      send("service_loremipsum", "template_loremipsum", formData, "loremipsum")
        .then((response) => {
          console.log("SUCCESS!", response.status, response.text);
          setFormSuccess("Søknaden har blitt sendt!");
          setFormData({
            student_name: "",
            adress: "",
            postnr: "",
            city: "",
            birthday: "",
            otherschool: "",
            startdate: "",
            mom_name: "",
            mom_adress: "",
            mom_postnr: "",
            mom_city: "",
            mom_phone: "",
            mom_email: "",
            children_age: "",
            other: "",
            why: "",
            consent: "",
          });
          setTimeout(() => {
            setFormSuccess(null);
          }, 5000);
        })
        .catch((err) => {
          console.log("FAILED...", err);
        });
    }
  };

  return (
    <>
      <h1>Søk skoleplass</h1>
      <Container fluid>
        <Row className="justify-content-center align-items-center">
          <Col md={6}>
            <h2 className="form_h2">Opplysninger om eleven</h2>
            {formError && <p className="setFormError">{formError}</p>}
            {formSuccess && <p className="setFormSuccess">{formSuccess}</p>}
            <form className="apply_form" onSubmit={onSubmit}>
              <fieldset>
                <label htmlFor="student_name" id="student_name">
                  Fullt navn
                </label>
                <input
                  className="apply_input"
                  type="text"
                  id="student_name"
                  name="student_name"
                  value={formData.student_name}
                  onChange={handleChange}
                />
                <label htmlFor="adress" id="adress">
                  Adresse
                </label>
                <input
                  className="apply_input"
                  type="text"
                  id="adress"
                  name="adress"
                  value={formData.adress}
                  onChange={handleChange}
                />
                <div className="post_group">
                  <label htmlFor="postnr" id="postnr">
                    Postnummer
                  </label>
                  <input
                    className="apply_input"
                    type="text"
                    id="postnr"
                    name="postnr"
                    value={formData.postnr}
                    onChange={handleChange}
                  />{" "}
                </div>
                <div className="post_group">
                  <label htmlFor="city" id="city">
                    Poststed
                  </label>
                  <input
                    className="apply_input"
                    type="text"
                    id="city"
                    name="city"
                    value={formData.city}
                    onChange={handleChange}
                  />
                </div>
                <label htmlFor="birthday" id="birthday">
                  Fødselsdag
                </label>
                <input
                  className="apply_input"
                  type="date"
                  id="birthday"
                  name="birthday"
                  value={formData.birthday}
                  onChange={handleChange}
                />
                <label htmlFor="otherschool" id="otherschool">
                  Skal barnet meldes ut av en annen skole? Hvilken?
                </label>
                <input
                  className="apply_input"
                  type="text"
                  id="otherschool"
                  name="otherschool"
                  value={formData.otherschool}
                  onChange={handleChange}
                />
                <label htmlFor="startdate" id="startdate">
                  Dato for ønsket oppstart
                </label>
                <input
                  className="apply_input"
                  type="text"
                  id="startdate"
                  name="startdate"
                  value={formData.startdate}
                  onChange={handleChange}
                />
                <label className="class_section">Søker til klassetrinn:</label>
                <section className="grade">
                  {" "}
                  <section className="class">
                    {" "}
                    <input
                      type="checkbox"
                      id="firstgrade"
                      name="firstgrade"
                      value={formData.firstgrade}
                      onChange={handleChange}
                    />
                    <label
                      className="inline_label"
                      htmlFor="firstgrade"
                      id="firstgrade"
                    >
                      1. klasse
                    </label>
                  </section>
                  <section className="class">
                    {" "}
                    <input
                      type="checkbox"
                      id="secondgrade"
                      name="secondgrade"
                      value={formData.secondgrade}
                      onChange={handleChange}
                    />
                    <label
                      className="inline_label"
                      htmlFor="secondgrade"
                      id="secondgrade"
                    >
                      2. klasse
                    </label>
                  </section>
                  <section className="class">
                    {" "}
                    <input
                      type="checkbox"
                      id="thirdgrade"
                      name="thirdgrade"
                      value={formData.thirdgrade}
                      onChange={handleChange}
                    />
                    <label
                      className="inline_label"
                      htmlFor="thirdgrade"
                      id="thirdgrade"
                    >
                      3. klasse
                    </label>
                  </section>
                  <section className="class">
                    {" "}
                    <input
                      type="checkbox"
                      id="fourthgrade"
                      name="fourthgrade"
                      value={formData.fourthgrade}
                      onChange={handleChange}
                    />
                    <label
                      className="inline_label"
                      htmlFor="fourthgrade"
                      id="fourthgrade"
                    >
                      4. klasse
                    </label>{" "}
                  </section>
                  <section className="class">
                    {" "}
                    <input
                      type="checkbox"
                      id="fifthgrade"
                      name="fifthgrade"
                      value={formData.fifthgrade}
                      onChange={handleChange}
                    />
                    <label
                      className="inline_label"
                      htmlFor="fifthgrade"
                      id="fifthgrade"
                    >
                      5. klasse
                    </label>
                  </section>
                  <section className="class">
                    {" "}
                    <input
                      type="checkbox"
                      id="sixthgrade"
                      name="sixthgrade"
                      value={formData.sixthgrade}
                      onChange={handleChange}
                    />
                    <label
                      className="inline_label"
                      htmlFor="sixthgrade"
                      id="sixthgrade"
                    >
                      6. klasse
                    </label>{" "}
                  </section>
                  <section className="class">
                    {" "}
                    <input
                      type="checkbox"
                      id="seventhgrade"
                      name="seventhgrade"
                      value={formData.seventhgrade}
                      onChange={handleChange}
                    />
                    <label
                      className="inline_label"
                      htmlFor="seventhgrade"
                      id="seventhgrade"
                    >
                      7. klasse
                    </label>
                  </section>
                </section>
                <h2 className="form_h2">Opplysninger om foresatte - mor</h2>
                <label htmlFor="mom_name" id="mom_name">
                  Fullt navn
                </label>
                <input
                  className="apply_input"
                  type="text"
                  id="mom_name"
                  name="mom_name"
                  value={formData.mom_name}
                  onChange={handleChange}
                />
                <label htmlFor="mom_adress" id="mom_adress">
                  Evt annen adresse
                </label>
                <input
                  className="apply_input"
                  type="text"
                  id="mom_adress"
                  name="mom_adress"
                  value={formData.mom_adress}
                  onChange={handleChange}
                />
                <div className="post_group">
                  <label htmlFor="mom_postnr" id="mom_postnr">
                    Postnummer
                  </label>
                  <input
                    className="apply_input"
                    type="text"
                    id="mom_postnr"
                    name="mom_postnr"
                    value={formData.mom_postnr}
                    onChange={handleChange}
                  />{" "}
                </div>
                <div className="post_group">
                  <label htmlFor="mom_city" id="mom_city">
                    Poststed
                  </label>
                  <input
                    className="apply_input"
                    type="text"
                    id="mom_city"
                    name="mom_city"
                    value={formData.mom_city}
                    onChange={handleChange}
                  />
                </div>
                <label htmlFor="mom_phone" id="mom_phone">
                  Telefon
                </label>
                <input
                  className="apply_input"
                  type="text"
                  id="mom_phone"
                  name="mom_phone"
                  value={formData.mom_phone}
                  onChange={handleChange}
                />
                <label htmlFor="mom_email" id="mom_email">
                  Epost
                </label>
                <input
                  className="apply_input"
                  type="text"
                  id="mom_email"
                  name="mom_email"
                  value={formData.mom_email}
                  onChange={handleChange}
                />
                <h2 className="form_h2">Andre opplysninger</h2>
                <label htmlFor="children_age" id="children_age">
                  Alder på andre barn i familien
                </label>
                <input
                  className="apply_input"
                  type="text"
                  id="children_age"
                  name="children_age"
                  value={formData.children_age}
                  onChange={handleChange}
                />
                <label htmlFor="other" id="other">
                  Andre opplysninger som er relevante for søknaden:
                </label>
                <textarea
                  className="apply_textarea"
                  id="other"
                  name="other"
                  value={formData.other}
                  onChange={handleChange}
                />
                <label htmlFor="why" id="why">
                  Hvorfor ønsker dere plass hos oss?{" "}
                </label>
                <textarea
                  className="apply_textarea"
                  id="why"
                  name="why"
                  value={formData.why}
                  onChange={handleChange}
                />{" "}
                <legend>Samtykke</legend>
                <section className="class">
                  <input
                    className="checkbox"
                    type="checkbox"
                    id="consent"
                    name="consent"
                    value={formData.consent}
                    onChange={handleChange}
                  />
                  <label className="inline_consent">
                    lorem ipsum
                  </label>
                </section>
                <button
                  className="apply_btn"
                  type="submit"
                  id="button"
                  value="Submit"
                >
                  Send søknad
                </button>
              </fieldset>
            </form>
            {formError && <p className="setFormError">{formError}</p>}
            {formSuccess && <p className="setFormSuccess">{formSuccess}</p>}
          </Col>
        </Row>
      </Container>
    </>
  );
};

我是否需要为复选框设置状态，或者是注册值的另一种方式？ 该值未注册，因此输出不会显示在 Emailjs 模板中，即使我使用了 {{consent}} id。