Submitting all form fields as JSON to API using jquery

I'm a bit of a novice with Javascript and jquery. I am trying to create a simple contact form which submits all of the inputs to an API in JSON.

When I submit the form to my API I get an empty JSON string, such as {}

I've spent an age on Stack Overflow and Google trying to work this out and have completely failed!

My javascript is:

$("#contact-form").submit(function(e) {
    e.preventDefault();
    
    var formData = $(this).serializeObject();

    $.ajax({
        type: "POST",
        url: "http://localhost:8000/",
        data: JSON.stringify(formData),
        dataType: 'json',
        contentType: 'application/json; charset=utf-8'
    }).done(function(response) {
        // handle a successful response
    }).fail(function(xhr, status, message) {
        // handle a failure response
    });
});

And the HTML is:

<form id="contact-form" class="probootstrap-form" method="POST">
  <div class="form-group">
    <label for="name">Your Name</label>
    <input type="text" class="form-control" id="name">
  </div>
  <div class="form-group">
    <label for="email">Your Email</label>
    <input type="text" class="form-control" id="email">
  </div>
  <div class="form-group">
    <p>Will you attend?</p>
    <label for="yes"><input type="checkbox" id="yes"> Yes, I will be there</label> <br>
    <label for="no"><input type="checkbox" id="no"> Sorry, I can't come</label> <br>
  </div>
  <div class="form-group">
     <label for="note">Note</label>
     <textarea name="" id="note" cols="20" rows="5" class="form-control"></textarea>
  </div>
  <div class="form-group">
     <input id="submit" type="submit" class="btn btn-primary btn-lg" value="Send RSVP">
  </div>
</form>

Thanks in advance!