Convert HTML Form Data to JSON Without Libraries

Last updated: October 14, 2026

Forms are everywhere on the web. When users submit a contact request, a signup, or a survey, developers need a reliable way to grab that data and do something useful with it. Sending form data as a JavaScript object—rather than as a traditional form submission—opens up all sorts of possibilities: storing it locally, sending it to an API, or feeding it into your app's logic. The good news is you do not need any third-party libraries. Every modern browser ships with the FormData API built in.

• FormData is a native browser API for accessing form fields as key-value pairs
• It works with both text inputs and file uploads without extra dependencies
• Object.fromEntries() converts FormData to a plain JavaScript object in one step
• You can also use forEach loops for more granular control over data transformation
• The API works across all modern browsers and mobile devices

Why Convert Form Data to JSON?

Plain HTML forms submit data as key-value pairs encoded in the URL or as multipart bodies. That works fine for traditional page reloads, but modern single-page apps and mobile-first sites need the data as structured objects. JSON slots neatly into localStorage, database calls, and REST endpoints. It is also human-readable, which makes debugging less painful.

The traditional form submission model expects a server round-trip. You fill out a form, click submit, and the page reloads with a new response. This pattern dates back decades and served the web well when servers rendered every page. Today, users expect instant feedback. They want forms that validate in real-time, submit without page reloads, and display confirmation messages inline. Achieving that requires intercepting the submission, extracting the data, and handling it client-side.

JSON fits this model perfectly. Once your form data becomes a JavaScript object, you can stringify it for an API call, store it for offline use, or pass it to other functions in your application.

Using the FormData API

Grab the form element using querySelector or getElementById. Attach a submit listener and call preventDefault to stop the page reload:

“`javascript

Const form = document.getElementById('contact-form');

Form.addEventListener('submit', handleSubmit);

Function handleSubmit(event) {

Event.preventDefault();

Const myFormData = new FormData(event.target);

}

“`

Logging myFormData directly shows an odd result—an apparently empty object. That is because FormData stores its key-value pairs internally. You need to extract them into a plain object manually.

The event.target property gives you the actual form element that triggered the event. This is important when dealing with forms inside larger components or when multiple forms exist on the same page. FormData reads every named input field from that element, including text fields, dropdowns, checkboxes, and hidden inputs.

Two Ways to Extract the Data

The first approach uses a forEach loop. Create an empty object, then iterate over each entry in the FormData and assign key-value pairs:

“`javascript

Const formDataObj = {};

MyFormData.forEach((value, key) => {

FormDataObj[key] = value;

});

Console.log(formDataObj);

“`

This method gives you full control. Inside the forEach callback, you can transform values, skip certain fields, or combine multiple inputs into a single output. Say you need to normalize phone numbers or trim whitespace from text fields. You add that logic right inside the loop.

The second approach is more concise: Object.fromEntries() converts the FormData's iterator directly into a plain object in one line:

“`javascript

Const formDataObj = Object.fromEntries(myFormData);

“`

Both methods produce identical output. The forEach version gives you more room to transform values if needed; Object.fromEntries is faster to write and cleaner to read.

Our Analysis: What This Means for You

No dependencies means smaller bundles and faster load times. If you are building a landing page or a lightweight app, adding a library just to parse form data creates unnecessary overhead. FormData ships with every browser your users already have.

The tradeoff is browser support. FormData and Object.fromEntries work in all modern browsers, but if you need to support Internet Explorer 11, you will need a polyfill or fall back to the forEach approach with manual iteration.

For Android developers working with WebViews or progressive web apps, FormData handles mixed content smoothly. Text inputs and file selectors coexist without special configuration. This matters when building mobile-first tools that collect photos, documents, or voice recordings alongside text data.

Developers often reach for jQuery or libraries like Lodash to handle form serialization. The FormData approach accomplishes the same task with zero external dependencies. This simplifies your dependency tree, reduces update maintenance, and eliminates potential security vulnerabilities from third-party code.

Practical Example: Building a Contact Widget

Say you are adding a contact form to a portfolio site or a small business landing page. You want users to fill in their name, email, and message, then receive a confirmation without the page reloading.

First, create your HTML form with name attributes matching the fields you want to capture. Attach the submit listener, extract the data with FormData, and send it to a backend endpoint using fetch. Display a success message once the request completes. Users never leave the page, and the form data arrives at your server as structured JSON ready for processing.

This pattern scales. The same code handles a simple contact form or a complex multi-step wizard. Each step collects data into the same object, and the final submission sends everything at once.

What to Watch Next

FormData also supports appending individual fields programmatically. This means you can build dynamic forms that add or remove fields based on user input, then serialize the entire set without changing your JavaScript logic. If your app lets users create custom forms or surveys, FormData handles that complexity gracefully.

For most form-to-JSON tasks, Object.fromEntries() is the quickest path forward. Keep forEach in your toolkit for cases where you need to transform or filter data during extraction. Either way, you are working with standard browser APIs that will remain supported for years to come.

Key takeaways

• FormData(event.target) pulls every named field from your HTML form automatically
• Object.fromEntries() converts FormData to a plain object in a single line
• Call preventDefault inside your submit handler to prevent page reloads
• The forEach method offers more control for transforming values during extraction
• FormData handles file inputs and mixed content without extra libraries