HTML + JavaScript

Overview

Using JavaScript to submit forms in FormsLite.io allows you to keep users on the same page and perform custom form validation or integrate with other tools/services. The initial setup involves creating an access key, similar to pure HTML forms. Follow the steps below to get started.

HTML Setup

Create a form with the necessary hidden fields and custom data inputs. Use the following sample code and modify it according to your needs.

Example HTML Code

<form method="POST" id="formslite-form">
    <input type="hidden" name="access_key" value="YACCESS_KEY">
    <input type="hidden" name="subject" value="New Submission from FormsLite.io">
    <input type="checkbox" name="honeycomb" style="display: none;">
    
    <!-- Custom Form Data -->
    <input type="email" name="email" required>
    <input type="text" name="name" required>
    <input type="text" name="phone" required>
    <textarea name="message" required></textarea>
    
    <button type="submit">Submit</button>
    
    <div id="result"></div>
</form>

JavaScript Setup

Use JavaScript to handle the form submission. This script prevents the default form submission behavior, converts the form data to JSON, and sends it to the FormsLite.io API.

Example JavaScript Code

const form = document.getElementById('formslite-form');
const result = document.getElementById('result');

form.addEventListener('submit', function(e) {
  e.preventDefault();
  const formData = new FormData(form);
  const object = Object.fromEntries(formData);
  const json = JSON.stringify(object);
  result.innerHTML = "Sending...";

  fetch('https://api.formslite.io/submission', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    },
    body: json
  })
  .then(async (response) => {
    let json = await response.json();
    if (response.status === 200) {
      result.innerHTML = json.message;
    } else {
      console.log(response);
      result.innerHTML = json.message;
    }
  })
  .catch(error => {
    console.log(error);
    result.innerHTML = "Something went wrong!";
  })
  .then(function() {
    form.reset();
    setTimeout(() => {
      result.style.display = "none";
    }, 3000);
  });
});

Summary

By using JavaScript for form submission, you can provide a seamless user experience, perform custom validation, and integrate with other services while using FormsLite.io. Adjust the provided HTML and JavaScript code to fit your specific requirements.