JS function to send by AJAX a form data to Netlify Forms

form-netlify.css

.result {
  display: none;
}

.active {
  display: block;
}

.inactive {
  display: none;
}

form-netlify.html

<form class="my-form" name="form-name" netlify>
  <input type="text" placeholder="Your name" id="name-field" name="name-field" required>
  ...
</form>
<div class="result post-sent">
  <h3>Success!</h3>
</div>
<div class="result post-error">
  <h3>Error...</h3>
</div>

sendNetlifyFormData.js

function sendFormData() {

  function sendData() {
    var XHR = new XMLHttpRequest()
    var FD = new FormData(form)
    XHR.addEventListener('load', function(event) {
      form.classList.add('inactive')
      var success = document.querySelectorAll('.post-sent')[0]
      success.classList.add('active')
    })
    XHR.addEventListener('error', function(event) {
      form.classList.add('inactive')
      var error = document.querySelectorAll('.post-error')[0]
      error.classList.add('active')
    })
    XHR.open('POST', '#')
    XHR.send(FD)
  }

  var form = document.querySelectorAll('.my-form')[0]
  form.addEventListener('submit', function (e) {
    e.preventDefault()
    sendData()
  })

}

export default sendFormData

This is nice have you tested it for long forms?

no but it shouldn't have problems at all

the codes you shared look so simple, i think it's as simple as poppy playtime chapter 3 but can you share with me about this usage

This code for sending form data to Netlify Forms looks pretty cool! I like how it neatly separates the CSS and HTML parts. https://quordlegameonline.github.io/