Formularios Javascript

Para usar SimpleApiForm con Javascript puedes hacer request a tu endpoint creado.

1. Crea un endpoint

Empieza creando una cuenta en SimpleApiForm. Luego ingresa al dashboard y navega a la sección Mis formularios y has click en el botón crear formulario en la parte superior de tu dashboard.

Crear formulario

Ingresa el nombre con el que quieras identificar tu endpoint y click en Crear.

2. Utilizando fetch

Utiliza el método fetch() del mismo browser para hacer un request al servidor.

fetch('https://simpleapiform.com/f/{form_id}', {
  body: JSON.stringify({ 
    email: '[email protected]',
    message: 'Hello World!'
  })
})
.then(function (response) { // onSuccess
  console.log('Éxito!', response);
})
.catch(function (response) { // onError
  console.log('Falló!', response);
})
.finally(function () { // Siempre se ejecuta
  console.log('Terminé de ejecutar todo!');
});

Veamos un ejemplo completo

Empecemos creando un formulario que usaremos para capturar los datos y un div para el mensaje de respuesta

<body>
  <form id="ajaxForm" action="https://simpleapiform.com/f/{form_id}" method="POST">
    <input type="text" name="name" id=”name”>
    <input type="email" name="email" id=”email”>
    <button type="submit">Send</button>
  </form>
  <div class="message"></div>
</body>

Dado que el mensaje de éxito sólo lo queremos mostrar cuando se haya enviado correctamente el formulario

<style>
  .message {
    display: none;
    background: #E1F8ED;
    padding: 20px;
    margin-top: 16px;
    margin-bottom: 16px;
  }

  .is-active {
    display: block;
  }
</style>

Ahora enviemos la información del formulario al servidor

const form = document.getElementById('ajaxForm');
const messageDiv = document.querySelector('message');

form.addEventListener('submit', event => {

  event.preventDefault();

  fetch(form.action, {
    method: 'post',
    body: new FormData(form)
  })
  .then(function (response) { // onSuccess    
    messageDiv.textContent = 'We received your submission, thank you!';
  })
  .catch(function (response) { // onError
    messageDiv.textContent = 'There was a problem with you submission';
  });

}