hope/dog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

contact

Browse Source
This commit is contained in:
Peter Hoppe
2023-02-07 00:25:30 +01:00
parent 6939273d6b
commit 37977c6066
6 changed files with 247 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/components/ContactForm.css Normal file
View File

@ -0,0 +1,90 @@
/* Style inputs, select elements and textareas */
input[type=email], select, textarea{
width: 100%;
padding: 3px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
background-color: #f26e0a;
}
input[type=submit] {
background-color: #aa0404;
color: white;
padding: 6px 10px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 50%;
height: 25px;
}
/* Style the label to display next to the inputs */
label
{
padding: 2px 12px 2px 0;
display: inline-block;
}
.flexCenter
{
display: flex;
flex-direction: row;
justify-content: center;
}
.containerForm
{
display: flex;
flex-direction: row;
border-radius: 5px;
background-color: #f6602e;
padding: 20px;
justify-content: center;
width: 400px;
}
.formForm
{
display: flex;
flex-direction: column;
max-width: 600px;
}
/* Floating column for labels: 25% width */
.col-25
{
float: left;
width: 25%;
margin-top: 6px;
}
/* Floating column for inputs: 75% width */
.col-75
{
float: left;
width: 75%;
margin-top: 6px;
}
.rowForm
{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.row
{
display: flex;
flex-direction: column;
}
.textArea
{
height: 100px;
}

60
src/components/ContactForm2.css Normal file
View File

@ -0,0 +1,60 @@
/* Style inputs, select elements and textareas */
/* Style the label to display next to the inputs */
label
{
padding: 12px 12px 12px 0;
display: inline-block;
}
.formForm
{
display: flex;
flex-direction: column;
}
/* Style the container */
.containerForm
{
display: flex;
flex-direction: row;
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
width: 600px;
}
/* Floating column for labels: 25% width */
.col-25
{
float: left;
width: 25%;
margin-top: 6px;
}
/* Floating column for inputs: 75% width */
.col-75
{
float: left;
width: 75%;
margin-top: 6px;
}
.rowForm
{
display: flex;
flex-direction: column;
}
.row
{
display: flex;
flex-direction: column;
}
.textArea
{
height: 200px;
}

5
src/components/Dog.css
View File

@ -5,6 +5,11 @@
margin: 5px;
}
.text
{
margin: 5px;
}
button
{
max-width: 30%;

69
src/components/DogContactForm.tsx
View File

@ -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>
</>
);
}

6
src/components/DogNameTxt.tsx
View File

@ -6,13 +6,11 @@ export default function DogNameTxt(
{name: string, email: string, phone: string, qr_id: string}) {
return (
<div>
<p>Hallo ich bin
<p className='text'>Hallo ich bin
<p className='Content'>{name}!</p>
</p>
<DogContactForm toEmail={email} name={name} qr_id={qr_id} />
<p>
schreib eine Mail an
<p className='Content'>{email}</p>
<p className='text'>
oder ruf
<div className='neben'>
<div className='Content'>{phone}</div>

39
src/components/test.html Normal file
View File

@ -0,0 +1,39 @@
<html>
<head>
<link href="./ContactForm.css" rel="stylesheet">
</head>
<body>
<div class="flexCenter">
<div class="containerForm">
<div style="position: fixed; z-index: 9999; inset: 16px; pointer-events: none;"></div>
<form class="formForm" id="idForm">
<p>Bitte schreib eine Email:</p>
<div class="rowForm">
<div class="col-25"><label for="email">Email</label></div>
<div class="col-75"><input type="email" id="fromEmail" name="fromEmail" placeholder="Deine Email.."
required=""></div>
</div>
<div class="rowForm">
<div class="col-25">
<label>An</label>
</div>
<div class="col-75">
<label>a@q.q</label>
</div>
</div>
<div class="rowForm">
<div class="col-25"><label for="msg">Nachricht</label></div>
<div class="col-75"><textarea class="textArea" id="msg" name="msg"
placeholder="Ich habe Ursula gefunden! Bitte rufen Sie mich an, Telefon:(bitte angeben...)"
required=""></textarea></div>
</div>
<div class="rowForm"><input type="submit" value="Nachricht senden!"></div>
</form>
</div>
</div>
</body>
</html>