<div class="p-2">
  <form onsubmit="return handleData()" method="post" action="https://postman-echo.com/post">
  <div>
  <input type="checkbox" name="send_newsletter" id="send_newsletter" />
  <label for="send_newsletter">Send me newsletter</label>
  </div>
  <div>
  <input type="checkbox" name="agree" id="agree" value="yes agree"/>
  <label for="agree">Agree</label>
  </div>
    <div>
    <input type="submit" name="submit" value="Submit"/>
    </div>
  </form>
</div>
function handleData()
{
    var form_data = new FormData(document.querySelector("form"));
    console.log("form data: ");
    for(var pair of form_data.entries()) 
    {
        console.log(pair[0]+ ' : '+ pair[1]);
    }
 return true;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.