Hallo liebe Fachleute,
ich bin eher Anfänger, daher habe ich Beispiele aus YouTube probiert und es hat mit einem Beispiel fast funktioniert:
Das erstellte Kontaktformular soll nach dem Absenden eine Statusmeldung für 4 Sekunden unterhalb des Buttons "ABSENDEN!" anzeigen. Je nachdem, ob die Sendung erfolgreich war, oder nicht, soll eine entsprechende Statusmeldung unterhalb des Buttons für 4 Sekunden angezeigt werden.
Diese Textmeldung ist genauso gestylt, wie das Kontaktformular.
Angewendet wurden HTML (Kontaktformular), CSS (Style des Kontaktformulars und Statusmeldung ohne Text) und JavaScript (Absenden des Kontaktformulars und Eingabe der Statusmeldungen als Text).
Und so siehts leider aus:
Nach dem Absenden wird auch eine entsprechende Statusmeldung angezeigt, aber ohne entsprechendes Styling und ohne die eingestellte Zeigedauer von 4 Sekunden. Die Statusmeldung verbleibt, bis ich die komplette Homepage neu lade (seufz).
So schauts aus...
<form action="https://form.taxi/s/jrmxmrx" method="POST" id="my-form">
<div class="inputs_container">
<input type="text" name="Name" placeholder="Name" required>
<input type="email" name="Email" placeholder="E-Mail" required>
<input type="text" name="Betreff" placeholder="Betreff">
<input type="text" name="_gotcha" value="" style="display:none;">
<textarea class="nachricht" name="Deine Nachricht" placeholder="Deine Nachricht" required></textarea>
</div>
<button type="submit">ABSENDEN!</button>
<div id="status"></div>
</form><script src="main.js"></script>
----style.css (Styling des Kontaktformulars)-----------------------
::-webkit-input-placeholder {color: #2ce1e7;}
::-moz-placeholder {color: #2ce1e7;}
::-ms-input-placeholder {color: #2ce1e7;}
:-moz-placeholder {color: #2ce1e7;}
form input:first-child {
margin-top: 10px;
}
form {
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.inputs_container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
input {
height: 45px;
width: 400px;
margin: 15px;
padding: 0px 25px;
border-radius: 10px;
border: 2px #2ce1e7 solid;
background-color: #1f2125;
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.212);
font-family: 'Big Shoulders Display';
font-weight: 400;
color: #2ce1e7;
font-size: 20px;
transition: 0.2s;
}
text {
color: #2ce1e7;
padding-left: 10px;
}
textarea {
height: 45px;
width: 400px;
margin: 15px;
padding: 0px 25px;
border-radius: 10px;
border: 2px #2ce1e7 solid;
background-color: #1f2125;
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.212);
font-family: 'Big Shoulders Display';
font-weight: 400;
color: #2ce1e7;
font-size: 20px;
transition: 0.2s;
outline: none;
}
textarea:hover {
background-color: #47505f;
}
input:hover {
background-color: #47505f;
}
textarea:focus {
outline: none;
background-color: #47505f;
width: 565px;
}
input:focus {
outline: none;
background-color: #47505f;
width: 565px;
}
input:
laceholder {
color: #2ce1e7;
}
.nachricht {
height: 170px;
width: 400px;
margin: 15px;
background-color: #1f2125;
padding: 23px;
border-radius: 20px;
border: 2px #2ce1e7 solid;
margin: 13px 0 0 0;
color: #2ce1e7;
resize: none;
}
button {
height: 44px;
width: 140px;
border-radius: 1000px;
border: none;
font-family: 'Big Shoulders Display';
font-size: 22px;
background: #2ce1e7;
transition: 0.2s;
margin: 22px;
}
button:hover {
width: 200px;
}
button:focus {
outline: none;
width: 200px;
}
@media(max-width: 650px) {
form {
height: 100%;
width: 100%;
justify-content: center;
}
.inputs_container {
margin: 80px;
}
}
#status {
width: 90%;
max-width: 500px;
text-align: center;
padding: 10px;
margin: 0 auto;
border-radius: 8px;
}
#status.success {
background-color: #47505f;
border: 2px #2ce1e7 solid;
animation: status 4s ease forwards;
}
#status.error {
background-color: #b116a9;
border: 2px #2ce1e7 solid;
color: white;
animation: status 4s ease forwards;
}
@keyframes status {
0% {
opacity: 1;
pointer-events: all;
}
90% {
opacity: 1;
pointer-events: all;
}
100% {
opacity: 0;
pointer-events: none;
}
}
-------main.js-----------------
var form = document.getElementById("my-form");
var status = document.getElementById("status");
form.onsubmit = function(event) {
event.preventDefault();
var formData = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open("POST", form.action, true);
xhr.setRequestHeader('Accept', 'application/json');
xhr.onload = function(e) {
// Response
try {
var response = JSON.parse(xhr.response);
} catch(e) {
var response = { success: false, error_msg: 'no json request' }
}
// Success
if(xhr.status === 200 && response.success == true) {
// Redirect to Success-URL
// ... or display Success-Message
form.reset();
document.getElementById("status").textContent = "Deine Nachricht wurde erfolgreich gesendet!";
}
// Error
else {
// Display Error Message
var msg = response.error;
if(response.error_msg != '')
msg = response.error_msg;
document.getElementById("status").textContent = "Leider konnte Deine Nachricht nicht gesendet werden!";
}
};
xhr.send(formData);
};
So, ich hoffe, Ihr könnt damit etwas anfangen.
Ich freue mich auf Eure Unterstützung - danke!
Gruß,
Daniel