JSFiddle - React, Tailwind, and code Playground

by peseotni

HTML

<section class="s_website_form pt16 pb16 o_colored_level" data-vcss="001" data-snippet="s_website_form" data-name="Form" style="">
        <div class="o_container_small">
          <form action="/website_form/" method="post" enctype="multipart/form-data" class="o_mark_required" data-mark="*" data-success-mode="redirect" data-success-page="/contactus-thank-you" data-model_name="crm.lead">
            <div class="s_website_form_rows row s_col_no_bgcolor">
              <div class="form-group s_website_form_field col-12 s_website_form_required" data-type="char" data-name="Field">
                <div class="row s_col_no_resize s_col_no_bgcolor">
                  <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="firstname">
                    <span class="s_website_form_label_content">Vorame</span>
                    <span class="s_website_form_mark"> *</span>
                  </label>
                  <div class="col-sm">
                    <input type="text" class="form-control s_website_form_input" name="firstname" value="" required="1" id="firstname"/>
                  </div>
                </div>
              </div>
              <div class="form-group s_website_form_field col-12 s_website_form_required" data-type="char" data-name="Field">
                <div class="row s_col_no_resize s_col_no_bgcolor">
                  <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="lastname">
                    <span class="s_website_form_label_content">Nachname</span>
                    <span class="s_website_form_mark"> *</span>
                  </label>
                  <div class="col-sm">
                    <input type="text" class="form-control s_website_form_input" name="name" value="" required="1" id="lastname"/>
                  </div>
                </div>
              </div>
              <div class="form-group s_website_form_field col-12    " data-type="tel"...

JavaScript

const formData = new FormData()
formData.append('mauticform[formId]', 5)
formData.append('mauticform[messenger]', 1) // required

// form inputs names
formData.append('mauticform[vorname]', document.getElementById('firstname'))
formData.append('mauticform[nachname]', document.getElementById('lastname'))
formData.append('mauticform[email]', document.getElementById('email'))

fetch('https://mautic.otnielpesel.com/form/submit', {
  method: 'POST',
  headers: {
    'X-Requested-With': 'XMLHttpRequest'
  },
  body: formData,
})
.then(response => response.text())
.then(result => {
  if (result.includes('results')) {
    console.log('Thank you for a message')
  } else {
    console.log('Error')
  }
})
.catch(() => {
});