131 lines
5.8 KiB
HTML
131 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Kontaktformular - Profice</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; margin: 20px; background: #f5f5f5; }
|
|
.form-container { max-width: 600px; margin: 0 auto; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
|
|
.form-group { margin-bottom: 20px; }
|
|
label { display: block; margin-bottom: 5px; font-weight: bold; }
|
|
input, textarea, select { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px; }
|
|
textarea { height: 100px; resize: vertical; }
|
|
button { background: #007bff; color: white; padding: 12px 24px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; }
|
|
button:hover { background: #0056b3; }
|
|
.success { color: green; text-align: center; padding: 20px; }
|
|
.error { color: red; text-align: center; padding: 20px; }
|
|
.backup-info { background: #fff3cd; border: 1px solid #ffeaa7; padding: 15px; border-radius: 5px; margin-bottom: 20px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="form-container">
|
|
<h2>Kontaktformular (Backup)</h2>
|
|
|
|
<div class="backup-info">
|
|
<strong>Hinweis:</strong> Dies ist eine Backup-Version des Kontaktformulars. Wenn das Hauptformular nicht funktioniert, können Sie dieses verwenden.
|
|
</div>
|
|
|
|
<form id="backupForm">
|
|
<div class="form-group">
|
|
<label for="name">Name *</label>
|
|
<input type="text" id="name" name="name" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="organisation">Organisation</label>
|
|
<input type="text" id="organisation" name="organisation">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="contact">E-Mail oder Telefonnummer *</label>
|
|
<input type="text" id="contact" name="contact" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="service">Gewünschte Dienstleistung *</label>
|
|
<select id="service" name="service" required>
|
|
<option value="">Bitte wählen...</option>
|
|
<option value="website">Website</option>
|
|
<option value="ki-integration">KI Integration</option>
|
|
<option value="automatisation">Automatisation</option>
|
|
<option value="unabhaengige-wahl">Unabhängige Wahl</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="budget">Budget (€)</label>
|
|
<input type="text" id="budget" name="budget" placeholder="z.B. 5000 - 10000">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="description">Beschreibung *</label>
|
|
<textarea id="description" name="description" required placeholder="Beschreiben Sie Ihr Projekt oder Ihre Anfrage..."></textarea>
|
|
</div>
|
|
|
|
<button type="submit">Anfrage senden</button>
|
|
</form>
|
|
|
|
<div id="result"></div>
|
|
</div>
|
|
|
|
<script>
|
|
document.getElementById('backupForm').addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
|
|
const formData = new FormData(this);
|
|
const data = Object.fromEntries(formData);
|
|
data.type = 'contact';
|
|
|
|
const resultDiv = document.getElementById('result');
|
|
resultDiv.innerHTML = '<p style="text-align: center;">Sende Anfrage...</p>';
|
|
|
|
try {
|
|
// Try main PHP endpoint first
|
|
const response = await fetch('scripts/add/send.php', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(data)
|
|
});
|
|
|
|
if (response.ok) {
|
|
const result = await response.json();
|
|
if (result.success) {
|
|
resultDiv.innerHTML = '<div class="success">Vielen Dank! Ihre Anfrage wurde erfolgreich gesendet. Wir melden uns bald bei Ihnen.</div>';
|
|
this.reset();
|
|
} else {
|
|
throw new Error(result.message || 'Unknown error');
|
|
}
|
|
} else {
|
|
throw new Error(`HTTP ${response.status}`);
|
|
}
|
|
} catch (error) {
|
|
// Fallback: Create mailto link
|
|
const subject = encodeURIComponent('Kontaktanfrage von Profice Website');
|
|
const body = encodeURIComponent(
|
|
`Name: ${data.name}\n` +
|
|
`Organisation: ${data.organisation || ''}\n` +
|
|
`Kontakt: ${data.contact}\n` +
|
|
`Dienstleistung: ${data.service}\n` +
|
|
`Budget: ${data.budget || ''}\n` +
|
|
`Beschreibung: ${data.description}`
|
|
);
|
|
|
|
const mailtoLink = `mailto:info@profice.de?subject=${subject}&body=${body}`;
|
|
|
|
resultDiv.innerHTML = `
|
|
<div class="error">
|
|
<p>Leider konnte die Anfrage nicht automatisch gesendet werden.</p>
|
|
<p>Bitte klicken Sie auf den untenstehenden Link, um Ihre E-Mail zu öffnen:</p>
|
|
<p><a href="${mailtoLink}" style="color: #007bff; text-decoration: underline;">E-Mail öffnen</a></p>
|
|
<p>Oder senden Sie eine E-Mail an: <strong>info@profice.de</strong></p>
|
|
</div>
|
|
`;
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|