javascriptroom blog

How to Submit Multiple Forms with One Submit Button: A Guide Including Google Spreadsheet Integration

In web development, forms are the backbone of user interaction—collecting data, preferences, and feedback. But what if you need to gather information from multiple independent forms (e.g., a contact form, a preferences survey, and a payment form) on a single page and submit them all with one click? By default, HTML forms submit individually when their internal submit button is clicked, which can break user flow and complicate data handling.

This guide will walk you through the process of submitting multiple forms with a single submit button. We’ll cover:

  • The challenges of multi-form submission.
  • Techniques to collect and validate data from multiple forms.
  • Merging form data into a single payload.
  • Integrating with Google Spreadsheets to store submissions (no backend required!).

By the end, you’ll have a functional example and the skills to implement this in your projects.

2026-02

Table of Contents#

  1. Understanding the Challenge: Why Multiple Forms Need Special Handling
  2. Prerequisites
  3. Step 1: Structuring Multiple Forms in HTML
  4. Step 2: Adding a Single Submit Button
  5. Step 3: Validating All Forms Client-Side
  6. Step 4: Collecting and Merging Form Data
  7. Step 5: Submitting Data to Google Spreadsheets
  8. Full Example Code
  9. Troubleshooting Common Issues
  10. Best Practices
  11. References

Understanding the Challenge#

By default, an HTML <form> element submits only its own data when its <input type="submit"> is clicked. This is controlled by the action and method attributes, which define where and how data is sent. When working with multiple forms, clicking a submit button inside one form ignores data in other forms.

To solve this, we need to:

  • Bypass the default form submission behavior.
  • Validate all forms before submission.
  • Collect data from every form into a single dataset.
  • Send the merged data to a storage destination (e.g., a server or Google Sheets).

Prerequisites#

  • Basic knowledge of HTML, CSS, and JavaScript.
  • A Google account (for Google Spreadsheet integration).

Step 1: Structuring Multiple Forms in HTML#

First, create your multiple forms. For this example, we’ll use two forms:

  • Form 1: Contact Information (name, email).
  • Form 2: Preferences (interests, newsletter subscription).

Each form will have a unique id to target it with JavaScript later. Avoid nested forms (HTML does not support them), and ensure all input fields have unique name attributes (to avoid data conflicts when merging).

<!-- Form 1: Contact Information -->
<form id="contactForm">
  <h3>Contact Details</h3>
  <div class="form-group">
    <label for="name">Full Name:</label>
    <input type="text" id="name" name="name" required>
  </div>
  <div class="form-group">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
  </div>
</form>
 
<!-- Form 2: Preferences -->
<form id="preferencesForm">
  <h3>Preferences</h3>
  <div class="form-group">
    <label>Interests (select all that apply):</label>
    <div>
      <input type="checkbox" id="interest-tech" name="interests" value="tech">
      <label for="interest-tech">Technology</label>
    </div>
    <div>
      <input type="checkbox" id="interest-design" name="interests" value="design">
      <label for="interest-design">Design</label>
    </div>
  </div>
  <div class="form-group">
    <label for="newsletter">Subscribe to Newsletter?</label>
    <select id="newsletter" name="newsletter" required>
      <option value="">Select</option>
      <option value="yes">Yes</option>
      <option value="no">No</option>
    </select>
  </div>
</form>

Step 2: Adding a Single Submit Button#

Add a submit button outside all forms (since it will trigger submission for all). Give it an id (e.g., submitAll) to attach a click event listener.

<!-- Single Submit Button -->
<button id="submitAll" class="submit-btn">Submit All Forms</button>

Step 3: Validating All Forms Client-Side#

Before submitting, validate all forms to ensure required fields are filled and data is formatted correctly (e.g., valid email). Use the HTML5 required attribute for basic validation, but add custom JavaScript validation for edge cases (e.g., checkbox selection).

JavaScript Validation Logic:#

Loop through all forms, check their validity, and display errors if any form is invalid.

const submitButton = document.getElementById('submitAll');
 
submitButton.addEventListener('click', function(e) {
  e.preventDefault(); // Prevent default button behavior
 
  // Get all forms by ID
  const contactForm = document.getElementById('contactForm');
  const preferencesForm = document.getElementById('preferencesForm');
  const allForms = [contactForm, preferencesForm];
 
  // Validate all forms
  let isAllValid = true;
  allForms.forEach(form => {
    if (!form.checkValidity()) {
      form.reportValidity(); // Show browser's default validation messages
      isAllValid = false;
    }
  });
 
  if (!isAllValid) return; // Exit if any form is invalid
 
  // Proceed to collect and submit data (next step)
});

Step 4: Collecting and Merging Form Data#

Once validation passes, collect data from each form and merge it into a single object. Use the FormData API to extract data from each form, then convert it to a plain object for easy manipulation.

Merging Form Data:#

// Inside the submit button click handler (after validation)
 
// Function to convert FormData to object
const formDataToObject = (formData) => {
  const obj = {};
  formData.forEach((value, key) => {
    // Handle checkboxes (store as array if multiple values)
    if (obj[key]) {
      obj[key] = Array.isArray(obj[key]) ? [...obj[key], value] : [obj[key], value];
    } else {
      obj[key] = value;
    }
  });
  return obj;
};
 
// Collect data from each form
const contactData = new FormData(contactForm);
const preferencesData = new FormData(preferencesForm);
 
// Convert to objects and merge
const mergedData = {
  ...formDataToObject(contactData),
  ...formDataToObject(preferencesData)
};
 
console.log('Merged Data:', mergedData);
// Output: { name: "John Doe", email: "[email protected]", interests: ["tech", "design"], newsletter: "yes" }

Step 5: Submitting Data to Google Spreadsheets#

Now, send the merged data to a Google Spreadsheet for storage. This avoids needing a backend server—we’ll use Google Apps Script to create a web app that accepts POST requests and appends data to a sheet.

7.1 Setting Up the Google Spreadsheet#

  1. Go to Google Sheets and create a new spreadsheet.
  2. Rename the sheet (e.g., "Form Submissions").
  3. Add column headers matching your merged data keys (e.g., name, email, interests, newsletter).

7.2 Creating a Google Apps Script Web App#

Google Apps Script lets you write server-side code to interact with Google Sheets. We’ll create a doPost function to handle form submissions and append data to the sheet.

  1. Open your spreadsheet, click Extensions > Apps Script to open the script editor.
  2. Delete the default myFunction and paste the following code:
// Google Apps Script to handle form submissions
function doPost(e) {
  try {
    const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Form Submissions');
    const data = JSON.parse(e.postData.contents); // Parse incoming JSON data
 
    // Define the order of columns (must match sheet headers)
    const columns = ['name', 'email', 'interests', 'newsletter'];
    const row = columns.map(key => data[key] || ''); // Map data to columns
 
    sheet.appendRow(row); // Append data to the sheet
    return ContentService.createTextOutput(JSON.stringify({ status: 'success' }))
      .setMimeType(ContentService.MimeType.JSON);
  } catch (error) {
    return ContentService.createTextOutput(JSON.stringify({ status: 'error', message: error.message }))
      .setMimeType(ContentService.MimeType.JSON);
  }
}
  1. Save the project (click the floppy disk icon) and name it (e.g., "MultiFormSubmit").

7.3 Deploying as a Web App#

  1. Click Deploy > New deployment.
  2. Select "Web app" as the type.
  3. Configure settings:
    • Execute as: Me (your email).
    • Who has access: Anyone (even anonymous) (for testing; restrict to "Anyone with Google account" in production).
  4. Click "Deploy" and authorize access when prompted (you may need to allow permissions for "unverified apps").
  5. Copy the Web app URL (e.g., https://script.google.com/macros/s/.../exec)—this is where we’ll send the merged data.

7.4 Sending Merged Data to Google Sheets via AJAX#

Use the Fetch API to send the merged data (as JSON) to your Google Apps Script web app URL.

// Inside the submit button click handler (after merging data)
 
const googleScriptURL = 'YOUR_WEB_APP_URL'; // Replace with your web app URL
 
fetch(googleScriptURL, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(mergedData), // Send merged data as JSON
})
.then(response => response.json())
.then(data => {
  if (data.status === 'success') {
    alert('All forms submitted successfully!');
    // Reset forms after submission
    allForms.forEach(form => form.reset());
  } else {
    alert('Error: ' + data.message);
  }
})
.catch(error => {
  alert('Submission failed. Please try again later.');
  console.error('Error:', error);
});

Full Example Code#

HTML (with CSS for Styling):#

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Multi-Form Submission</title>
  <style>
    .form-group { margin-bottom: 1rem; }
    label { display: block; margin-bottom: 0.5rem; }
    input, select { width: 100%; padding: 0.5rem; margin-bottom: 0.25rem; }
    .submit-btn { 
      margin-top: 1rem; 
      padding: 0.75rem 2rem; 
      background: #2196F3; 
      color: white; 
      border: none; 
      border-radius: 4px; 
      cursor: pointer; 
    }
    .submit-btn:hover { background: #0b7dda; }
    form { 
      border: 1px solid #ddd; 
      padding: 1.5rem; 
      margin-bottom: 1.5rem; 
      border-radius: 8px; 
    }
  </style>
</head>
<body>
  <h2>Submit Multiple Forms with One Button</h2>
 
  <!-- Form 1: Contact Information -->
  <form id="contactForm">
    <h3>Contact Details</h3>
    <div class="form-group">
      <label for="name">Full Name:</label>
      <input type="text" id="name" name="name" required>
    </div>
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required>
    </div>
  </form>
 
  <!-- Form 2: Preferences -->
  <form id="preferencesForm">
    <h3>Preferences</h3>
    <div class="form-group">
      <label>Interests (select all that apply):</label>
      <div>
        <input type="checkbox" id="interest-tech" name="interests" value="tech">
        <label for="interest-tech">Technology</label>
      </div>
      <div>
        <input type="checkbox" id="interest-design" name="interests" value="design">
        <label for="interest-design">Design</label>
      </div>
    </div>
    <div class="form-group">
      <label for="newsletter">Subscribe to Newsletter?</label>
      <select id="newsletter" name="newsletter" required>
        <option value="">Select</option>
        <option value="yes">Yes</option>
        <option value="no">No</option>
      </select>
    </div>
  </form>
 
  <!-- Single Submit Button -->
  <button id="submitAll" class="submit-btn">Submit All Forms</button>
 
  <script>
    // JavaScript code here (validation, data collection, submission)
    const submitButton = document.getElementById('submitAll');
 
    submitButton.addEventListener('click', function(e) {
      e.preventDefault();
 
      // Get forms
      const contactForm = document.getElementById('contactForm');
      const preferencesForm = document.getElementById('preferencesForm');
      const allForms = [contactForm, preferencesForm];
 
      // Validate forms
      let isAllValid = true;
      allForms.forEach(form => {
        if (!form.checkValidity()) {
          form.reportValidity();
          isAllValid = false;
        }
      });
      if (!isAllValid) return;
 
      // Convert FormData to object
      const formDataToObject = (formData) => {
        const obj = {};
        formData.forEach((value, key) => {
          if (obj[key]) {
            obj[key] = Array.isArray(obj[key]) ? [...obj[key], value] : [obj[key], value];
          } else {
            obj[key] = value;
          }
        });
        return obj;
      };
 
      // Collect and merge data
      const contactData = new FormData(contactForm);
      const preferencesData = new FormData(preferencesForm);
      const mergedData = {
        ...formDataToObject(contactData),
        ...formDataToObject(preferencesData)
      };
 
      // Submit to Google Sheets
      const googleScriptURL = 'YOUR_WEB_APP_URL'; // Replace with your URL
      fetch(googleScriptURL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(mergedData),
      })
      .then(response => response.json())
      .then(data => {
        if (data.status === 'success') {
          alert('Submitted! Check your Google Sheet.');
          allForms.forEach(form => form.reset());
        } else {
          alert('Error: ' + data.message);
        }
      })
      .catch(error => alert('Submission failed: ' + error));
    });
  </script>
</body>
</html>

Troubleshooting Common Issues#

  • Data not appearing in Google Sheet?
    Check the Google Apps Script logs: View > Executions in the script editor. Look for errors in the doPost function.

  • CORS Errors?
    Ensure your web app is deployed with "Anyone, even anonymous" access (temporarily for testing).

  • Validation not working?
    Verify all forms have the required attribute and form.checkValidity() is called.

  • Checkbox values not merging?
    The formDataToObject function handles arrays for checkboxes—ensure checkboxes share the same name attribute (e.g., name="interests").

Best Practices#

  1. Server-Side Validation: Client-side validation is not foolproof. Add validation in your Google Apps Script (e.g., check for valid email format).
  2. Secure Data: Avoid sending sensitive data (e.g., passwords) via Google Sheets. Use a backend server with encryption for sensitive info.
  3. User Feedback: Show success/error messages after submission (e.g., alert or a DOM element).
  4. Test Across Browsers: Ensure compatibility with Chrome, Firefox, and Safari.

References#

With this guide, you can now submit multiple forms with one button and store the data in Google Sheets. Adapt the code to your use case (e.g., add more forms, custom validation, or a backend server for production). Happy coding! 🚀