How to Submit an HTML Form to Google Sheets…without Google Forms

Question

I found this site: https://medium.com/@dmccoy/how-to-submit-an-html-form-to-google-sheets-without-google-forms-b833952cc175

I am trying to create the form as they stipulated but I got undefined in the google sheets for the form fields. Here is my code

var $form = $('form#test-form'),
    url = 'https://script.google.com/macros/s/AKfycbxLarVG8hcqD6DTXAd5FITK9lZhy_zF-DsBtEVCdAOfah5yT04/exec'

$('#submit-form').on('click', function(e) {
  e.preventDefault();
  var jqxhr = $.ajax({
    url: url,
    method: "GET",
    dataType: "json",
    data: $form.serializeObject()
  }).success(
    // do something
  );
})

<div>
    <label>Field 1</label>
    <input type="text" name="form_field_1" placeholder="Field 1"/>
  </div>

  <div>
    <label>Field 2</label>
    <input type="text" name="form_field_2" placeholder="Field 2"/>
  </div>
  
  <div>
    <label>Field 3</label>
    <input type="text" name="form_field_3" placeholder="Field 3"/>
  </div>
  
  <div>
    <label>Field 4</label>
    <input type="text" name="form_field_4" placeholder="Field 4"/>
  </div>

  <div>
    <button type="submit"id="submit-form">Submit</button>
  </div>

</form>