问如何从HTML表单中收集所有值？

EN

$(document).ready(function() {

  const ApplyOpeningPayloadBuilder = function() {

    let payload = {
      "fields": []
    };

    return {
      withKeyValue: function(key, value) {
        let param = {};
        param.key = key;
        param.value = value;
        payload.fields.push(param);
        return this;
      },
      withFile: function(key, encoded_data, filename) {
        let value = {};
        value.encoded_data = encoded_data;
        value.file_name = filename;
        this.withKeyValue(key, value);
        return this;
      },
      build: function() {
        return payload;
      }
    }
  }
  let encoded_file = "aGVsbG8gd29ybGQ=";
  let apply_for_an_opening_payload_builder = new ApplyOpeningPayloadBuilder();

  $(".applicantForm input[type=text]").each(function() {
    apply_for_an_opening_payload_builder.withKeyValue(this.name, this.value);
  });

  $(".applicantForm input[type=email]").each(function() {
    apply_for_an_opening_payload_builder.withKeyValue(this.name, this.value);
  });

  $(".applicantForm input[type=tel]").each(function() {
    apply_for_an_opening_payload_builder.withKeyValue(this.name, this.value);
  });

  $(".applicantForm input[type=url]").each(function() {
    apply_for_an_opening_payload_builder.withKeyValue(this.name, this.value);
  });


  apply_for_an_opening_payload_builder.withFile("resume", encoded_file, "resume.txt");

  let payload = apply_for_an_opening_payload_builder.build();

  console.log("Log payload:", payload)


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" id="json-response">
  <div class="form-container">
    <div class="header">
      <h1>Application form</h1>
    </div>
    <form action="#" class="applicantForm">
      <div class="form-group">
        <div class="input-group">
          <label for="First Name">First Name <span>*</span></label>
          <input type="text" name="First Name">
        </div>
        <div class="input-group">
          <label for="Last Name">Last Name <span>*</span></label>
          <input type="text" name="Last Name">
        </div>
      </div>
      <div class="form-group">
        <div class="input-group">
          <label for="Email">Email <span>*</span></label>
          <input type="email" name="Email">
        </div>
        <div class="input-group">
          <label for="Phone">Phone <span>*</span></label>
          <input type="tel" name="Phone">
        </div>
      </div>
      <div class="form-group">
        <div class="input-group">
          <label for="Resume">Resume <span>*</span></label>
          <input class="form-control" type="file" name="Resume">
        </div>
        <div class="input-group">
          <label for="LinkedIn Profile">LinkedIn Profile<span>*</span></label>
          <input type="url" name="LinkedIn Profile">
        </div>
        <div class="input-group">
          <label for="Website link">Website Link <span>*</span></label>
          <input type="url" name="Website link">
        </div>
        <div class="input-group">
          <label for="In lieu of a cover letter, please tell us more about why you are interested in joining the Compass Fellowship?"> In lieu of a cover letter, please tell us more about why you are interested in joining the Compass Fellowship?<span>*</span></label>
          <input type="text" name="In lieu of a cover letter, please tell us more about why you are interested in joining the Compass Fellowship?">
        </div>
      </div>
      <button class="submit" type="submit">Apply Now</button>
    </form>
  </div>
</div>

let payload = {
  "fields": [
    { "key" : "candidate_first_name", "value" : "John"},
    { "key" : "candidate_last_name", "value" : "Doe"},
    { "key" : "candidate_email", "value" : "john.doe@gmail.com"},
    { "key" : "candidate_phone", "value" : "1234567890"},
    { "key" : "resume", "value": {
      "encoded_data" : "aGVsbG8gd29ybGQ=",
      "file_name" : "resume.txt"
      }
    }
  ]
};