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

storeEmail

Browse Source
This commit is contained in:
Peter Hoppe
2023-02-07 15:56:46 +01:00
parent 37977c6066
commit adfbe17f38
8 changed files with 159 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/ContactForm.css
View File

@ -1,30 +1,37 @@
/* Style inputs, select elements and textareas */
input[type=email], select, textarea{
.contactInput
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;
background-color: white;
}
input[type=submit] {
.formForm input[type=submit]
{
background-color: #aa0404;
color: white;
padding: 6px 10px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 50%;
width: auto;
height: 25px;
}
div.flexCenter
{
display: flex;
}
/* Style the label to display next to the inputs */
label
.flexCenter label
{
margin-left: 0;
padding: 2px 12px 2px 0;
display: inline-block;
}
@ -34,6 +41,8 @@ input[type=submit] {
display: flex;
flex-direction: row;
justify-content: center;
text-align: left;
}
.containerForm
{
@ -43,30 +52,31 @@ input[type=submit] {
background-color: #f6602e;
padding: 20px;
justify-content: center;
width: 400px;
width: 60%;
}
.formForm
{
display: flex;
flex-direction: column;
max-width: 600px;
width: 100%;
align-items: flex-end;
}
/* Floating column for labels: 25% width */
.col-25
.col-30
{
float: left;
width: 25%;
width: 30%;
margin-top: 6px;
}
/* Floating column for inputs: 75% width */
.col-75
.col-70
{
float: left;
width: 75%;
width: 70%;
margin-top: 6px;
}
@ -75,6 +85,7 @@ input[type=submit] {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
}
.row

60
src/components/ContactForm2.css
View File

@ -1,60 +0,0 @@
/* 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;
}

16
src/components/DogContactForm.tsx
View File

@ -81,28 +81,30 @@ const data = {
<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">
<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-75">
<div className="col-70">
<input type="email" id="fromEmail" name="fromEmail" placeholder="Deine Email.." onChange={onChangeInput} required />
</div>
</div>
<div className="rowForm">
<div className="col-25">
<div className="col-30">
<label>An</label>
</div>
<div className="col-75">
<div className="col-70">
<label>{toEmail}</label>
</div>
</div>
<div className="rowForm">
<div className="col-25">
<div className="col-30">
<label htmlFor="msg">Nachricht</label>
</div>
<div className="col-75">
<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>
</div>

24
src/components/test.html
View File

@ -10,27 +10,35 @@
<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.."
<p>Bitte schreib eine Email:</p>
<div>
</div>
</div>
<div class="rowForm">
<div class="col-30"><label for="email">Email</label></div>
<div class="col-70"><input class='contactInput' type="email" id="fromEmail" name="fromEmail" placeholder="Deine Email.."
required=""></div>
</div>
<div class="rowForm">
<div class="col-25">
<div class="col-30">
<label>An</label>
</div>
<div class="col-75">
<div class="col-70">
<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"
<div class="col-30"><label for="msg">Nachricht</label></div>
<div class="col-70"><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>
<div class="rowForm">
<div></div>
<input class='contactInput' type="submit" value="Nachricht senden!">
</div>
</form>
</div>
</div>