JSFiddle - React, Tailwind, and code Playground

by wisegorilla

HTML

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

    <title>Mautic Form Test</title>
    


    
   

  </head>
  <body>

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

        <h2>Mautic Test</h2>

        <form id="mautic" method="post" action="https://bonmedico-health.com/mautic/form/submit">

        <input type="hidden" name="mauticform[formId]" id="mauticform_embeddedform_id" value="1">
        <input type="hidden" name="mauticform[return]" id="mauticform_embeddedform_return" value="">
        <input type="hidden" name="mauticform[formName]" id="mauticform_embeddedform_name" value="embeddedform">

          <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="email">Email Address</label>
            <input type="email" class="form-control" id="email" name="email" placeholder="Email Address" required value="[email protected]">
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>

      </div>
    </div>



  </body>
</html>

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');
            },
          });
        });
      });