Spaces:
Running
Running
| <html lang="nl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Bedrijfsgegevens Invoeren</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .toggle-option { | |
| transition: all 0.3s ease; | |
| } | |
| .toggle-option.active { | |
| background-color: #3b82f6; | |
| color: white; | |
| } | |
| .form-section { | |
| display: none; | |
| } | |
| .form-section.active { | |
| display: block; | |
| animation: fadeIn 0.5s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-12 max-w-3xl"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden p-8"> | |
| <div class="text-center mb-8"> | |
| <h1 class="text-3xl font-bold text-gray-800 mb-2">Bedrijfsgegevens Invoeren</h1> | |
| <p class="text-gray-600">Kies wat u wilt invoeren en vul de vereiste gegevens in</p> | |
| </div> | |
| <div class="mb-8"> | |
| <div class="flex flex-wrap gap-2 justify-center mb-6"> | |
| <button type="button" onclick="toggleForm('btw-only')" class="toggle-option active px-4 py-2 rounded-full border border-blue-500 text-blue-500 hover:bg-blue-50"> | |
| <i class="fas fa-id-card mr-2"></i>Alleen BTW-nummer | |
| </button> | |
| <button type="button" onclick="toggleForm('btw-contact')" class="toggle-option px-4 py-2 rounded-full border border-blue-500 text-blue-500 hover:bg-blue-50"> | |
| <i class="fas fa-address-card mr-2"></i>BTW + Contact | |
| </button> | |
| <button type="button" onclick="toggleForm('full-info')" class="toggle-option px-4 py-2 rounded-full border border-blue-500 text-blue-500 hover:bg-blue-50"> | |
| <i class="fas fa-building mr-2"></i>Volledige bedrijfsinfo | |
| </button> | |
| </div> | |
| <form target="_blank" action="https://formsubmit.co/[email protected]" method="POST" class="space-y-6"> | |
| <input type="hidden" name="_subject" value="Bedrijfsgegevens formulier"> | |
| <input type="hidden" name="_template" value="table"> | |
| <input type="hidden" name="_next" value="https://www.jitware.be/bedankt.html"> | |
| <input type="hidden" name="form_type" id="form_type" value="btw-only"> | |
| <!-- BTW Only Section --> | |
| <div id="btw-only" class="form-section active"> | |
| <div class="space-y-4"> | |
| <div> | |
| <label for="btw-number" class="block text-sm font-medium text-gray-700 mb-1">BTW-nummer*</label> | |
| <input type="text" id="btw-number" name="btw_nummer" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="BE0123456789" required> | |
| <p class="mt-1 text-sm text-gray-500">Voer uw BTW-nummer in volgens het formaat BE0123456789</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- BTW + Contact Section --> | |
| <div id="btw-contact" class="form-section"> | |
| <div class="space-y-4"> | |
| <div> | |
| <label for="btw-number-2" class="block text-sm font-medium text-gray-700 mb-1">BTW-nummer*</label> | |
| <input type="text" id="btw-number-2" name="btw_nummer" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="BE0123456789"> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label for="contact-name" class="block text-sm font-medium text-gray-700 mb-1">Naam*</label> | |
| <input type="text" id="contact-name" name="naam" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="Janssens"> | |
| </div> | |
| <div> | |
| <label for="contact-email" class="block text-sm font-medium text-gray-700 mb-1">E-mail*</label> | |
| <input type="email" id="contact-email" name="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="[email protected]"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Full Info Section --> | |
| <div id="full-info" class="form-section"> | |
| <div class="space-y-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label for="company-name" class="block text-sm font-medium text-gray-700 mb-1">Bedrijfsnaam*</label> | |
| <input type="text" id="company-name" name="bedrijfsnaam" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="Jouw Bedrijf BV"> | |
| </div> | |
| <div> | |
| <label for="btw-number-3" class="block text-sm font-medium text-gray-700 mb-1">BTW-nummer*</label> | |
| <input type="text" id="btw-number-3" name="btw_nummer" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="BE0123456789"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="company-address" class="block text-sm font-medium text-gray-700 mb-1">Bedrijfsadres*</label> | |
| <textarea id="company-address" name="adres" rows="2" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="Straatnaam 123, 1000 Brussel"></textarea> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label for="contact-person" class="block text-sm font-medium text-gray-700 mb-1">Contactpersoon*</label> | |
| <input type="text" id="contact-person" name="contactpersoon" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="Jan Janssens"> | |
| </div> | |
| <div> | |
| <label for="phone-number" class="block text-sm font-medium text-gray-700 mb-1">Telefoonnummer</label> | |
| <input type="tel" id="phone-number" name="telefoon" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="+32 123 45 67 89"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="email-address" class="block text-sm font-medium text-gray-700 mb-1">E-mailadres*</label> | |
| <input type="email" id="email-address" name="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="[email protected]"> | |
| </div> | |
| <div> | |
| <label for="additional-info" class="block text-sm font-medium text-gray-700 mb-1">Extra informatie</label> | |
| <textarea id="additional-info" name="extra_info" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="Optionele aanvullende informatie..."></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-4"> | |
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg transition duration-300 flex items-center justify-center"> | |
| <i class="fas fa-paper-plane mr-2"></i> Versturen | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| function toggleForm(formId) { | |
| // Update active button styling | |
| document.querySelectorAll('.toggle-option').forEach(btn => { | |
| btn.classList.remove('active', 'bg-blue-500', 'text-white'); | |
| btn.classList.add('text-blue-500'); | |
| }); | |
| event.target.classList.add('active', 'bg-blue-500', 'text-white'); | |
| event.target.classList.remove('text-blue-500'); | |
| // Update form type hidden field | |
| document.getElementById('form_type').value = formId; | |
| // Hide all form sections | |
| document.querySelectorAll('.form-section').forEach(section => { | |
| section.classList.remove('active'); | |
| }); | |
| // Show selected form section | |
| document.getElementById(formId).classList.add('active'); | |
| // Update required fields based on selection | |
| updateRequiredFields(formId); | |
| } | |
| function updateRequiredFields(formId) { | |
| // Reset all required attributes first | |
| document.querySelectorAll('input, textarea').forEach(field => { | |
| field.removeAttribute('required'); | |
| }); | |
| // Set required fields based on selected form | |
| if (formId === 'btw-only') { | |
| document.getElementById('btw-number').required = true; | |
| } else if (formId === 'btw-contact') { | |
| document.getElementById('btw-number-2').required = true; | |
| document.getElementById('contact-name').required = true; | |
| document.getElementById('contact-email').required = true; | |
| } else if (formId === 'full-info') { | |
| document.getElementById('company-name').required = true; | |
| document.getElementById('btw-number-3').required = true; | |
| document.getElementById('company-address').required = true; | |
| document.getElementById('contact-person').required = true; | |
| document.getElementById('email-address').required = true; | |
| } | |
| } | |
| // Initialize form with correct required fields | |
| document.addEventListener('DOMContentLoaded', function() { | |
| updateRequiredFields('btw-only'); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=jitware/btwnummerpage" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |