Hilfeleistung erfassen
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: linear-gradient(to bottom right, #eff6ff, #dcfce7);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 800px;
margin: 40px auto;
background: white;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.header {
padding: 32px 32px 16px;
border-bottom: 1px solid #e5e7eb;
}
.header h1 {
font-size: 24px;
font-weight: 600;
color: #111827;
margin-bottom: 8px;
}
.header p {
font-size: 16px;
color: #6b7280;
}
.form-content {
padding: 32px;
}
.form-group {
margin-bottom: 24px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 768px) {
.form-row {
grid-template-columns: 1fr;
}
}
label {
display: block;
font-size: 14px;
font-weight: 500;
color: #374151;
margin-bottom: 8px;
}
.required {
color: #dc2626;
}
input[type="text"],
input[type="date"],
input[type="time"],
input[type="number"],
select,
textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 14px;
font-family: inherit;
transition: border-color 0.2s;
}
input:focus,
select:focus,
textarea:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
input.error,
select.error,
textarea.error {
border-color: #dc2626;
}
.error-message {
color: #dc2626;
font-size: 13px;
margin-top: 6px;
display: none;
}
.error-message.show {
display: block;
}
textarea {
resize: vertical;
min-height: 100px;
}
select {
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23374151' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
appearance: none;
}
input::placeholder {
color: #9ca3af;
}
.submit-btn {
width: 100%;
padding: 14px 24px;
background-color: #dc2626;
color: white;
border: none;
border-radius: 6px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s;
}
.submit-btn:hover {
background-color: #b91c1c;
}
.submit-btn:active {
transform: scale(0.98);
}
.field-note {
text-align: center;
color: #6b7280;
font-size: 13px;
margin-top: 16px;
}
.success-screen {
display: none;
text-align: center;
padding: 80px 32px;
}
.success-screen.show {
display: block;
}
.success-icon {
width: 64px;
height: 64px;
margin: 0 auto 20px;
color: #16a34a;
}
.success-title {
font-size: 24px;
font-weight: 600;
color: #166534;
margin-bottom: 20px;
}
.success-message {
background-color: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: 6px;
padding: 16px;
color: #166534;
font-size: 15px;
line-height: 1.6;
max-width: 600px;
margin: 0 auto;
}
Vielen Dank!
Vielen Dank für die online gemeldeten Informationen zu Ihrer Hilfeleistung.
Die Daten wurden erfolgreich übermittelt.
// Captcha generieren
let captchaAnswer = 0;
function generateCaptcha() {
const num1 = Math.floor(Math.random() * 10) + 1;
const num2 = Math.floor(Math.random() * 10) + 1;
captchaAnswer = num1 + num2;
document.getElementById('captchaNum1').textContent = num1;
document.getElementById('captchaNum2').textContent = num2;
}
// Beim Laden der Seite Captcha generieren
generateCaptcha();
// Fehler entfernen, wenn Benutzer tippt
const inputs = ['helferName', 'empfaengerName', 'datum', 'uhrzeitVon', 'uhrzeitBis', 'hilfeTyp', 'beschreibung', 'captcha'];
inputs.forEach(inputId => {
const element = document.getElementById(inputId);
element.addEventListener('input', function() {
this.classList.remove('error');
document.getElementById(inputId + '-error').classList.remove('show');
});
});
// Formular absenden
document.getElementById('hilfeForm').addEventListener('submit', function(e) {
e.preventDefault();
let isValid = true;
// Alle Felder validieren
inputs.forEach(inputId => {
const element = document.getElementById(inputId);
const errorElement = document.getElementById(inputId + '-error');
if (inputId === 'captcha') {
const captchaValue = parseInt(element.value);
if (!element.value || captchaValue !== captchaAnswer) {
element.classList.add('error');
errorElement.classList.add('show');
isValid = false;
}
} else {
if (!element.value.trim()) {
element.classList.add('error');
errorElement.classList.add('show');
isValid = false;
}
}
});
if (isValid) {
// Formulardaten sammeln
const formData = {
helferName: document.getElementById('helferName').value,
empfaengerName: document.getElementById('empfaengerName').value,
datum: document.getElementById('datum').value,
uhrzeitVon: document.getElementById('uhrzeitVon').value,
uhrzeitBis: document.getElementById('uhrzeitBis').value,
hilfeTyp: document.getElementById('hilfeTyp').value,
beschreibung: document.getElementById('beschreibung').value,
zielEmail: 'buero@nachbarschaftshilfe-idstein.de'
};
console.log('Formular-Daten:', formData);
// Hier würde der E-Mail-Versand erfolgen
// In WordPress können Sie dies mit einem AJAX-Call an eine PHP-Funktion machen
// Erfolgsanzeige
document.getElementById('formContainer').style.display = 'none';
document.getElementById('successScreen').classList.add('show');
// Nach 5 Sekunden Formular zurücksetzen
setTimeout(function() {
document.getElementById('formContainer').style.display = 'block';
document.getElementById('successScreen').classList.remove('show');
document.getElementById('hilfeForm').reset();
generateCaptcha();
}, 5000);
} else {
// Zum ersten Fehler scrollen
const firstError = document.querySelector('.error');
if (firstError) {
firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}
});
