"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.
- Get the repo
- From root directory, do
yarn
Required Basic ReactJS knowledge. If repo user needs review, please read Getting Started with React
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
- 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.
- 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.
- 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
- 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)