andrekutianski/form.html

## form.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">

    <title>Mautic Form Test</title>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" type="text/css" />

  </head>
  <body>

    <div class="container">
      <div class="col-md-6 col-md-offset-3">

        <h2>Mautic Test</h2>

        <form id="mautic" method="post" action="http://mautic.test/form/submit">

          <input type="hidden" name="formId" value="284" />
          <input type="hidden" name="return" value="this-must-exist" />

          <div class="form-group">
            <label for="first_name">First Name</label>
            <input type="text" class="form-control" id="first_name" name="first_name" placeholder="First Name" value="John">
          </div>
          <div class="form-group">
            <label for="last_name">Last Name</label>
            <input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name" required value="Linhart">
          </div>
          <div class="form-group">
            <label for="company">Company Name</label>
            <input type="text" class="form-control" id="company" name="company" placeholder="Company Name" required value="Mautic">
          </div>
          <div class="form-group">
            <label for="email">Email Address</label>
            <input type="email" class="form-control" id="email" name="email" placeholder="Email Address" required value="jan@linhart.email">
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>

      </div>
    </div>

    <script type="text/javascript">
      $(() => {
        $('#mautic').on('submit', (e) => {
          e.preventDefault();

          let form = $('#mautic');
          let values = {mauticform: form.serializeArray().reduce((obj, val) => { obj[val.name] = val.value; return obj; }, {})};

          $.ajax({
            url: form.attr('action') + '?formId=' + form.find('[name=formId]').val(),
            data: $.param(values),
            type: 'POST',
            headers: {'X-Requested-With': 'XMLHttpRequest'},
            success: (content, status, xhr) => {
              console.log('The submission was successful.');
            },
            error: (xhr) => {
              console.log('An error occured when submitting the form');
            },
          });
        });
      });
    </script>

  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">

	<title>Mautic Form Test</title>

	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" type="text/css" />

	</head>
	<body>

	<div class="container">
	<div class="col-md-6 col-md-offset-3">

	<h2>Mautic Test</h2>

	<form id="mautic" method="post" action="http://mautic.test/form/submit">

	<input type="hidden" name="formId" value="284" />
	<input type="hidden" name="return" value="this-must-exist" />

	<div class="form-group">
	<label for="first_name">First Name</label>
	<input type="text" class="form-control" id="first_name" name="first_name" placeholder="First Name" value="John">
	</div>
	<div class="form-group">
	<label for="last_name">Last Name</label>
	<input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name" required value="Linhart">
	</div>
	<div class="form-group">
	<label for="company">Company Name</label>
	<input type="text" class="form-control" id="company" name="company" placeholder="Company Name" required value="Mautic">
	</div>
	<div class="form-group">
	<label for="email">Email Address</label>
	<input type="email" class="form-control" id="email" name="email" placeholder="Email Address" required value="jan@linhart.email">
	</div>
	<button type="submit" class="btn btn-primary">Submit</button>
	</form>

	</div>
	</div>

	<script type="text/javascript">
	$(() => {
	$('#mautic').on('submit', (e) => {
	e.preventDefault();

	let form = $('#mautic');
	let values = {mauticform: form.serializeArray().reduce((obj, val) => { obj[val.name] = val.value; return obj; }, {})};

	$.ajax({
	url: form.attr('action') + '?formId=' + form.find('[name=formId]').val(),
	data: $.param(values),
	type: 'POST',
	headers: {'X-Requested-With': 'XMLHttpRequest'},
	success: (content, status, xhr) => {
	console.log('The submission was successful.');
	},
	error: (xhr) => {
	console.log('An error occured when submitting the form');
	},
	});
	});
	});
	</script>

	</body>
	</html>