contact

src/components/DogContactForm.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import toast, { Toaster } from "react-hot-toast";
 import { foundMsg, logFormData } from "../services/PhpApi";
-
+import './ContactForm.css';
 
 export default function DogContactForm(
     {toEmail, name, qr_id}: 
@@ -20,6 +20,16 @@ export default function DogContactForm(
         })
 
         
+    }
+
+    const onChangeInputTextArea = (e: React.FormEvent<HTMLTextAreaElement> ) => 
+    {
+        setFormData({
+            ...formData,
+            [e.currentTarget.name]:e.currentTarget.value
+        })
+
+        
     }
 
     const submitForm = async (e: React.FormEvent<HTMLFormElement>) => 
@@ -41,8 +51,6 @@ export default function DogContactForm(
         {
             const index = keys.indexOf(key);
             sendData.append(key, values[index]);
-
-            console.log(key + ' ' + sendData.get(key));
         }
 
         sendData.append('toEmail', toEmail);
@@ -51,11 +59,11 @@ export default function DogContactForm(
 
         logFormData(sendData);
 
-        const data = await foundMsg(sendData);
-// const data =    {
-//                     success:0,
-//                     message: 'yyy'
-//                 };
+        //const data = await foundMsg(sendData);
+const data =    {
+                    success:0,
+                    message: 'error'
+                };
 
         if(data.success)
         {
@@ -68,18 +76,43 @@ export default function DogContactForm(
     }
 
     return (
-        <form id='idForm' onSubmit={submitForm}>
-        <Toaster toastOptions={{ position: "top-center" }} />
-        <div className='neben'>
-            <label htmlFor="email">Email: </label>                    
-            <input type="email" name="fromEmail" onChange={onChangeInput} placeholder="Deine Email" id="fromEmail" required />
+        <>
+<div className="flexCenter">
+    <div className="containerForm">
+    <Toaster toastOptions={{ position: "top-center" }} />
+    <form className="formForm" id='idForm' onSubmit={submitForm}>
+    <p>Bitte schreib eine Email:</p>
+    <div className="rowForm">
+        <div className="col-25">
+            <label htmlFor="email">Email</label>
+        </div>
+        <div className="col-75">
+            <input type="email" id="fromEmail" name="fromEmail" placeholder="Deine Email.." onChange={onChangeInput} required />
+        </div>
+    </div>
+    <div className="rowForm">
+        <div className="col-25">
+            <label>An</label>
+        </div>
+        <div className="col-75">
+            <label>{toEmail}</label>
+        </div>
+    </div>
+    <div className="rowForm">
+        <div className="col-25">
+            <label htmlFor="msg">Nachricht</label>
+        </div>
+        <div className="col-75">
+            <textarea className="textArea" id="msg" name="msg" placeholder={`Ich habe ${name} gefunden! Bitte rufen Sie mich an, Telefon:(bitte angeben...)`} onChange={onChangeInputTextArea} required/>
+        </div>
+    </div>
+        <div className="rowForm">
+        <div></div><input type="submit" value="Nachricht senden!"/>
         </div>
-        <div className='neben'>
-            <label htmlFor="msg">Passwort: </label>
-            <input type="text" name="msg" onChange={onChangeInput} placeholder='Ich habe ${name} gefunden. Bitte rufen Sie mich an! Meine Telefonnummer: (bitte eintragen)' id="msg" />
-        </div> 
-        <button type="submit">Nachricht senden!</button>
     </form>
+    </div>
+</div>
+    </>
 );
 
 }