Improve contact us form

- Better feedback, while sending and after sending
- Clear form once the request is sent
- Disable send button while sending
- Refactor form code

Author: marcoacierno

package.json

@@ -21,7 +21,8 @@
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-helmet": "^5.2.1"
+    "react-helmet": "^5.2.1",
+    "react-use-form-state": "^0.13.1"
   },
   "devDependencies": {
     "prettier": "^2.0.5"

src/components/form/index.css

@@ -94,4 +94,9 @@
       }
     }
   }
+
+  &--feedback-message {
+    font-size: 1.9rem;
+    font-weight: bold;
+  }
 }

src/components/form/index.js

@@ -1,52 +1,65 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useRef } from 'react';
 import classnames from 'classnames';
+import { useFormState } from 'react-use-form-state';
 
 import './index.css';
 
-const encode = data => {
+const encode = (data) => {
   return Object.keys(data)
-    .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
+    .map((key) => encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
     .join('&');
 };
 
-export default props => {
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-  const [message, setMessage] = useState('');
-  const [city, setCity] = useState('');
+export default (props) => {
+  const [formState, { text, email, textarea }] = useFormState();
   const [feedbackMessage, setFeedbackMessage] = useState('');
-
-  const onChangeName = useCallback(e => setName(e.target.value), []);
-  const onChangeEmail = useCallback(e => setEmail(e.target.value), []);
-  const onChangeMessage = useCallback(e => setMessage(e.target.value), []);
-  const onChangeCity = useCallback(e => setCity(e.target.value), []);
+  const [sendingMessage, setSendingMessage] = useState(false);
+  const formRef = useRef();
 
   const onSubmit = useCallback(
-    async e => {
+    async (e) => {
       e.preventDefault();
 
+      if (!isFormValid(formState)) {
+        setFeedbackMessage('Please complete all required fields');
+        return;
+      }
+
+      if (sendingMessage) {
+        return;
+      }
+
+      setFeedbackMessage('Sending your message now 🚀');
+      setSendingMessage(true);
+
       try {
         const response = await fetch('/', {
           method: 'POST',
           headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
           body: encode({
             'form-name': 'contact',
-            name,
-            email,
-            city,
-            message,
+            name: formState.values.name,
+            email: formState.values.email,
+            city: formState.values.city,
+            message: formState.values.message,
           }),
         });
 
-        console.log('response', response);
+        if (response.status !== 200) {
+          throw new Error('unable to send message');
+        }
 
         setFeedbackMessage('Thank you!');
+        formState.clear();
+        formRef.current.reset();
       } catch (e) {
         console.error('error', e);
         setFeedbackMessage('Unable to send the message, please try again');
+      } finally {
+        setSendingMessage(false);
       }
     },
-    [name, email, city, message]
+    [formState.values, sendingMessage]
   );
 
   return (
@@ -55,69 +68,46 @@ export default props => {
       onSubmit={onSubmit}
       className="Form"
       name="contact"
+      ref={formRef}
     >
       <input type="hidden" name="form-name" value="contact" />
 
-      <Input
-        component="input"
-        type="name"
-        name="name"
-        value={name}
-        onChange={onChangeName}
-        required
-        label="Name*"
-      />
-
-      <Input
-        component="input"
-        type="email"
-        name="email"
-        value={email}
-        onChange={onChangeEmail}
-        required
-        label="Email*"
-      />
-
-      <Input
-        component="input"
-        type="text"
-        name="city"
-        value={city}
-        onChange={onChangeCity}
-        label="City"
-      />
-
-      <Input
-        required
-        name="message"
-        component="textarea"
-        value={message}
-        onChange={onChangeMessage}
-        label="Message*"
-      />
+      <Input {...text('name')} required label="Name*" />
+
+      <Input {...email('email')} required label="Email*" />
+
+      <Input {...text('city')} label="City" />
+
+      <Input {...textarea('message')} type="textarea" label="Message*" />
+
+      {feedbackMessage && (
+        <p className="Form--feedback-message">{feedbackMessage}</p>
+      )}
 
       <div className="Form--submit-container">
-        <button type="submit">Send</button>
+        <button disabled={sendingMessage} type="submit">
+          Send
+        </button>
       </div>
-
-      {feedbackMessage && <p>{feedbackMessage}</p>}
     </form>
   );
 };
 
-const Input = props => {
-  const { component, label, className, ...others } = props;
+const Input = (props) => {
+  const { type, label, className, ...others } = props;
   let input;
 
-  switch (component) {
+  switch (type) {
+    case 'text':
+    case 'email':
     case 'input':
-      input = <input {...others} />;
+      input = <input type={type} {...others} />;
       break;
     case 'textarea':
-      input = <textarea {...others} />;
+      input = <textarea type={type} {...others} />;
       break;
     default:
-      throw new Error('Ops');
+      throw new Error(`Ops: ${type}`);
   }
 
   const classes = classnames(className, {
@@ -131,3 +121,8 @@ const Input = props => {
     </label>
   );
 };
+
+const isFormValid = (formState) =>
+  formState.validity.name &&
+  formState.validity.email &&
+  formState.validity.message;

yarn.lock

@@ -11155,6 +11155,11 @@ react-side-effect@^1.1.0:
   dependencies:
     shallowequal "^1.0.1"
 
+react-use-form-state@^0.13.1:
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/react-use-form-state/-/react-use-form-state-0.13.1.tgz#891e678cf6248e4668bfffc1112833c2d98a2e82"
+  integrity sha512-h0b+KFykqihTpjHKOi8fKZ3aaFqZofkAMof4K2rkCgC8FaU7JnkjzCAPv9lVJjDuf9AAmFHFM1PPMzPtzdwY3Q==
+
 react@^16.13.1, react@^16.8.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"