ReactJS: SimpleForm

"SimpleForm" is sample code of a Form, as a React Component, using Axios.

The business use case is to capture leads/emails for marketing, sales, or service use. This repo is for Web built using create-react-app (see docs). It can be used as is or combined with a monorepo, like SimpleLanding for Mobile use on iOS & Android.

Installation

• Get the repo
• From root directory, do yarn
  Required Basic ReactJS knowledge. If repo user needs review, please read Getting Started with React

Run

For web, from the root directory, do

• node_modules/.bin/webpack -p --progress
• node_modules/.bin/webpack-dev-server --content-base public/ --config ./webpack.config.js --inline --hot --colors
• Manually open a browser to localhost:8080 to see webapp
• Inspect browser window = open console to see shared code working on button click

Demo & Animated GIFs

• Live Demo at Firebase Hosting
• Google PageSpeed Analysis
  Note The demo will record email_addresses BUT will not send you email.
  This prevents bad actors from sending SPAM or using the demo to disable or deny service.

Notes - Development

• To save on final bundle/file size, individual SVGs used
• Form has single input; repo user can expand as needed
• Axios is used to transfer FormData via Post to an internal API
  Note The API uses Google Apps Script, a Cloud Function service
• Data is stored in a Google Spreadsheet and processed via this (old) gist
  Note A copy of the gist has been updated for internal use and it is private.

Notes - Miscellaneous

• The form is a simple Call-to-Action (CTA)
• The modified graphic is an SVG, as background (in component)
• Axios can be replaced by Fetch API ; repo user can reference this gist

Inspiration

• ReactJS Lead Form (missing post and missing data storage)
• Existing landing page repo missing form; decided to build one
• Needed data flow from Browser to Google Spreadsheet; this repo
  complements Managing Firebase Database with Google Sheets (using this library)