gforms-submit

GForms Submit

Submit form data to Google Forms via JavaScript/TypeScript.

This project can be used to build simple serverless contact forms and mailing lists with very little overhead.

Installation

npm i gforms-submit

Usage

Create a new Google Form, click Preview, inspect the DOM, and retrieve the <form> action URL and form field name= attribute values from your Google Form.

import gformsSubmit from "gforms-submit";

// Replace this with your form's action URL
const gformActionUrl =
  "https://docs.google.com/forms/d/e/abcdefgh12345678-abcdefgh/formResponse";

// Replace the name attribute with your form's
const emailFormField = {
  nameAttribute: "emailAddress",
  value: "[e-mail]"
};

// Replace the name attribute with your form's
const messageFormField = {
  nameAttribute: "entry.12345678901",
  value: "Hello! This is my message."
};

// You can have as many form fields as you'd like!
const formFields = [emailFormField, messageFormField];

gformsSubmit(gformActionUrl, formFields)
  .then(() => {
    console.log("Sent!");
  })
  .catch(err => {
    console.log(err);
  });

CORS

Responses from Google's servers are blocked by modern browsers due to CORS restrictions. Because of this, there's no way to know whether or not the form submission succeeded, so all submissions are treated as successful. You will see a CORS error in the console, but the form will still receive the submission.

If you use/build a CORS proxy, you can turn on error handling for your request to the proxy server. Error responses can then be handled as you see fit.

You can specify handleErrors to turn on request error handling:

// ...
const handleErrors = true;
// Note: This will always fail if you're not using a proxy!
gformsSubmit(gformActionUrl, formFields, handleErrors)
  .then(() => {
    console.log("Sent!");
  })
  .catch(err => {
    console.log(err);
  });

Axios

This project uses axios to make requests.

TypeScript Support

This project is written in TypeScript and compiled to JavaScript. Type definitions are available in dist/index.d.ts.

Form fields are defined as type GFormField, like so:

import gformsSubmit, { GFormField } from "gforms-submit";

const emailFormField: GFormField = {
  nameAttribute: "emailAddress",
  value: "[e-mail]"
};

ISC License

Copyright 2019 Justin Mahar

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.