Written by: Geoffrey Callaghan

Convert A Contact Form Into JSON format

Convert A Contact Form Into JSON format

Converting a contact form submission into JSON format can be useful for processing and handling the form data in a structured way. This tutorial will guide you through the process of converting a basic HTML contact form into JSON using JavaScript.

Step 1: Create the HTML Form

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Form to JSON</title>

  <h2>Contact Form</h2>

  <form id="contactForm">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="4" cols="50" required></textarea>

    <input type="submit" value="Submit">

  <script src="script.js"></script>

Step 2: Create the JavaScript File (script.js)

document.getElementById('contactForm').addEventListener('submit', function(event) {
  // Prevent the default form submission

  // Create an object to store form data
  var formData = {};

  // Iterate through each form element and add it to the formData object
  for (var i = 0; i < this.elements.length; i++) {
    var element = this.elements[i];

    // Check if the element has a name and is not a submit button
    if (element.name && element.type !== 'submit') {
      formData[element.name] = element.value;

  // Convert the formData object to JSON
  var jsonData = JSON.stringify(formData, null, 2);

  // Display the JSON data (you might want to send it to the server instead)

Step 3: Explanation

  • The JavaScript code listens for the form submission event using addEventListener.
  • It prevents the default form submission using event.preventDefault() to handle the submission via JavaScript.
  • The script creates an empty object called formData to store the form data.
  • It iterates through each form element and adds the element’s name and value to the formData object, excluding the submit button.
  • The JSON.stringify method is used to convert the formData object into a JSON-formatted string.
  • Finally, the JSON data is logged to the console. In a real-world scenario, you might want to send this data to a server for further processing.

Step 4: Testing

  1. Open the HTML file in a web browser.
  2. Fill out the contact form with some sample data.
  3. Open the browser’s developer tools (usually by right-clicking and selecting “Inspect” or “Inspect Element”).
  4. Go to the “Console” tab to see the JSON representation of the form data.

This simple tutorial demonstrates how to convert a basic contact form submission into JSON using JavaScript. Depending on your application’s needs, you may want to enhance this process by adding form validation, error handling, and integrating it with a backend server for data processing.