test123

<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #333;
}
.form-container {
max-width: 600px;
margin: 0 auto;
background: white;
padding: 40px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.form-group { margin-bottom: 20px; }
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #555;
font-size: 0.95rem;
}
.form-group input {
width: 100%;
padding: 12px 16px;
border: 2px solid #e1e8ed;
border-radius: 6px;
font-size: 0.95rem;
transition: all 0.3s ease;
}
.form-group input:focus {
outline: none;
border-color: #c0965a;
box-shadow: 0 0 0 3px rgba(192,150,90,0.1);
}
.file-upload-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: #6c757d;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 0.9rem;
transition: all 0.3s ease;
}
.file-upload-btn:hover { background: #5a6268; }
.submit-btn {
background: #c0965a;
color: white;
border: none;
padding: 14px 32px;
font-size: 1rem;
font-weight: 600;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
}
.submit-btn:hover {
background: #a8834e;
}
.loading {
display: none;
text-align: center;
color: #c0965a;
margin-top: 20px;
}
.success, .error {
display: none;
padding: 12px;
border-radius: 6px;
margin-top: 20px;
}
.success {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.error {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
</style>

<div class="form-container">
<form id="contactForm" method="POST">
<div class="form-group">
<label for="firstname">Uw voornaam</label>
<input type="text" id="firstname" name="firstname" required>
</div>
<div class="form-group">
<label for="lastname">Uw achternaam</label>
<input type="text" id="lastname" name="lastname" required>
</div>
<div class="form-group">
<label for="email">Uw e-mailadres</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="telefoon">Uw telefoonnummer</label>
<input type="tel" id="telefoon" name="telefoon">
</div>

<div class="form-group">
<label>Foto uploaden (voorzijde)</label>
<input type="file" id="attachment1" name="attachment1" required>
</div>
<div class="form-group">
<label>Foto uploaden (achterzijde)</label>
<input type="file" id="attachment2" name="attachment2" required>
</div>
<div class="form-group">
<label>Foto uploaden (bovenzijde)</label>
<input type="file" id="attachment3" name="attachment3" required>
</div>

<button type="submit" class="submit-btn">Beoordeling Ontvangen</button>
<div class="loading" id="loading">Uw bericht wordt verzonden...</div>
<div id="success" class="success"></div>
<div id="error" class="error"></div>
</form>
</div>

<script>
document.getElementById('contactForm').addEventListener('submit', async function (e) {
e.preventDefault();

const loading = document.getElementById('loading');
const success = document.getElementById('success');
const error = document.getElementById('error');
success.style.display = 'none';
error.style.display = 'none';
loading.style.display = 'block';

try {
const payload = {
firstname: document.getElementById('firstname').value,
lastname: document.getElementById('lastname').value,
email: document.getElementById('email').value,
telefoon: document.getElementById('telefoon').value,
};

const files = [];
for (let i = 1; i <= 3; i++) {
const f = document.getElementById('attachment' + i).files[0];
if (f) files.push(f.name);
}
payload.files = files;

const res = await fetch('https://c289d01ac11b4ce187835af718b7b9.c3.environment.api.powerplatform.com:443/powerautomate/automations/direct/workflows/037fe83ca33a4702b522ab14d67c6d8e/triggers/manual/paths/invoke?api-version=1&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=vxiRkT_BlDMkqUWyFxHgEA3UwDYead0obgozjI4dg3Y', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(payload)
});

loading.style.display = 'none';

if (res.ok) {
success.innerHTML = '✅ Uw formulier is ingediend.';
success.style.display = 'block';
e.target.reset();
} else {
throw new Error('Foutcode ' + res.status);
}
} catch (err) {
loading.style.display = 'none';
error.textContent = '❌ Fout bij verzenden: ' + err.message;
error.style.display = 'block';
}
});
</script>