Hugging Face's logo

Spaces:
jitware
/
btwnummerpage
Running

App Files Community
btwnummerpage
File size: 12,313 Bytes 
d4929f2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
 
<!DOCTYPE html>
<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>