layout

src/components/ContactForm.css

@@ -21,6 +21,7 @@ input[type=email], select, textarea
   cursor: pointer;
   width: auto;
   height: 25px;
+  align-self: end;
 }
 
 div.flexCenter
@@ -87,11 +88,19 @@ div.flexCenter
   .rowForm
   {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     justify-content: space-between;
     width: 100%;
-}
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
   
+  .label
+  {
+    font-size: 14px;
+    font-weight: 500;
+  }
+
   .row
   {
     display: flex;

src/components/DogContactForm.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { notificationError, notificationSuccess } from "../services/Notifications";
 import { foundMsg, logFormData } from "../services/PhpApi";
+import { Textarea, TextInput } from '@mantine/core';
 import './ContactForm.css';
 
 export default function DogContactForm(
@@ -85,28 +86,31 @@ export default function DogContactForm(
         <div>Bitte schreib eine Email:</div><div></div>
     </div>
     <div className="rowForm">
-        <div className="col-30">
-            <label htmlFor="email">Email</label>
-        </div>
-        <div className="col-70">
-            <input type="email" id="fromEmail" name="fromEmail" placeholder="Deine Email.." onChange={onChangeInput} required />
-        </div>
+        <TextInput
+            label = 'Email:'
+            type="email" 
+            name="fromEmail" 
+            onChange={onChangeInput} 
+            placeholder="Deine Email" 
+            id="email" 
+            required />
     </div>
     <div className="rowForm">
-        <div className="col-30">
-            <label>An</label>
+        <div className='label'>
+            <label>An:</label>
         </div>
-        <div className="col-70">
+        <div>
             <label>{toEmail}</label>
         </div>
     </div>
     <div className="rowForm">
-        <div className="col-30">
-            <label htmlFor="msg">Nachricht</label>
-        </div>
-        <div className="col-70">
-            <textarea className="textArea" id="msg" name="msg" placeholder={`Ich habe ${name} gefunden! Bitte rufen Sie mich an, Telefon:(bitte angeben...)`} onChange={onChangeInputTextArea} required/>
-        </div>
+        <Textarea
+            label = 'Nachricht:'
+            name="msg" 
+            onChange={onChangeInputTextArea} 
+            placeholder={`Ich habe ${name} gefunden! Bitte rufen Sie mich an, Telefon:(bitte angeben...)`}
+            id="msg" 
+            required />
     </div>
         <div className="rowForm">
         <div></div><input type="submit" value="Nachricht senden!"/>