https://knaf.nl/cpresources/1846829f/_main.js?v=1790172300

1var forms = document.querySelectorAll("[data-freeform-tailwind]");
2
3forms.forEach(function (form) {
4    // Handle Freeform ready
5    form.addEventListener("freeform-ready", function (e) {
6        var f = e.freeform;
7        f.setOption("errorClassList", ["mt-1", "text-sm", "text-red-600"]);
8        f.setOption("errorClassField", ["outline-1", "-outline-offset-1", "outline-red-600"]);
9    });
10
11    // Handle successful render
12    form.addEventListener("freeform-render-success", function (e) {
13        e.preventDefault();
14
15        const banner = document.createElement("div");
16        banner.classList.add("freeform-success-banner", "rounded-md", "bg-green-50", "p-4", "mb-10");
17
18        const flex = document.createElement("div");
19        flex.classList.add("flex");
20
21        const iconWrapper = document.createElement("div");
22        iconWrapper.classList.add("shrink-0");
23
24        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
25        svg.setAttribute("class", "size-6 text-green-400");
26        svg.setAttribute("viewBox", "0 0 20 20");
27        svg.setAttribute("fill", "currentColor");
28        svg.setAttribute("aria-hidden", "true");
29
30        const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
31        path.setAttribute("fill-rule", "evenodd");
32        path.setAttribute(
33            "d",
34            "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z"
35        );
36        path.setAttribute("clip-rule", "evenodd");
37
38        svg.appendChild(path);
39        iconWrapper.appendChild(svg);
40
41        const textWrapper = document.createElement("div");
42        textWrapper.classList.add("ml-2");
43
44        const heading = document.createElement("h3");
45        const msg = form.getAttribute("data-success-message") || "Form submitted successfully!";
46        heading.classList.add("text-md", "font-medium", "text-green-800");
47        heading.textContent = msg;
48
49        textWrapper.appendChild(heading);
50        flex.appendChild(iconWrapper);
51        flex.appendChild(textWrapper);
52        banner.appendChild(flex);
53
54        form.insertBefore(banner, form.firstChild);
55    });
56
57    // Handle form errors
58    form.addEventListener("freeform-render-form-errors", function (e) {
59        e.preventDefault();
60
61        const oldBanner = form.querySelector(".freeform-error-banner");
62        if (oldBanner) oldBanner.remove();
63
64        const banner = document.createElement("div");
65        banner.classList.add("freeform-error-banner", "rounded-md", "bg-red-50", "p-4", "mb-10");
66
67        const flex = document.createElement("div");
68        flex.classList.add("flex");
69
70        const iconWrapper = document.createElement("div");
71        iconWrapper.classList.add("shrink-0");
72
73        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
74        svg.setAttribute("viewBox", "0 0 20 20");
75        svg.setAttribute("fill", "currentColor");
76        svg.setAttribute("aria-hidden", "true");
77        svg.classList.add("size-6", "text-red-400");
78
79        const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
80        path.setAttribute("fill-rule", "evenodd");
81        path.setAttribute(
82            "d",
83            "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z"
84        );
85        path.setAttribute("clip-rule", "evenodd");
86
87        svg.appendChild(path);
88        iconWrapper.appendChild(svg);
89
90        const textWrapper = document.createElement("div");
91        textWrapper.classList.add("ml-3");
92
93        const heading = document.createElement("h3");
94        heading.classList.add("text-md", "font-medium", "text-red-800");
95        heading.textContent = form.getAttribute("data-error-message") || "There were errors in your submission";
96
97        const errorListWrapper = document.createElement("div");
98        errorListWrapper.classList.add("mt-2", "text-sm", "text-red-700");
99
100        const errorList = document.createElement("ul");
101        errorList.setAttribute("role", "list");
102        errorList.classList.add("list-disc", "space-y-1", "pl-5");
103

104        e.errors.forEach(function (err) {
105            const li = document.createElement("li");
106            li.textContent = err;
107            errorList.appendChild(li);
108        });
109
110        if (errorList.children.length > 0) {
111            errorListWrapper.appendChild(errorList);
112            textWrapper.appendChild(errorListWrapper);
113        }
114
115        textWrapper.prepend(heading);
116        flex.append(iconWrapper, textWrapper);
117        banner.appendChild(flex);
118
119        form.insertBefore(banner, form.firstChild);
120    });
121
122    // Handle Stripe appearance
123    form.addEventListener("freeform-stripe-appearance", function (e) {
124        e.elementOptions.appearance = Object.assign(e.elementOptions.appearance, {
125            variables: {
126                colorPrimary: "#4c3aed",
127                fontFamily:
128                    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"',
129                fontSizeBase: "0.875rem",
130                spacingUnit: "0.2em",
131                tabSpacing: "0.825rem",
132                gridColumnSpacing: "1.625rem",
133                gridRowSpacing: "1.625rem",
134                colorText: "#121827",
135                colorTextPlaceholder: "#9ba1ae",
136                colorBackground: "#ffffff",
137                colorDanger: "#d42422",
138                borderRadius: "5px",
139            },
140            rules: {
141                ".Tab": {
142                    border: "0",
143                    outline: "1px solid #d2d5db",
144                    boxShadow: "none",
145                    padding: "1rem",
146                },
147                ".Tab--selected": {
148                    border: "0",
149                    outline: "2px solid #4c3aed",
150                    boxShadow: "none",
151                },
152                ".Input": {
153                    border: "0",
154                    outline: "1px solid #d2d5db",
155                    boxShadow: "none",
156                    padding: "0.625rem 0.75rem",
157                },
158                ".Tab:focus, .Input:focus": {
159                    border: "0",
160                    boxShadow: "none",
161                    outline: "2px solid #4c3aed",
162                },
163                ".Input--invalid": {
164                    border: "0",
165                    boxShadow: "none",
166                },
167                ".Label": {
168                    fontSize: "1rem",
169                    fontWeight: "500",
170                    marginBottom: "0.5rem",
171                },
172            },
173        });
174    });
175
176    // Handle form submit cleanup
177    form.addEventListener("freeform-on-submit", function (e) {
178        var currentId = e.form.getAttribute("data-id");
179        forms.forEach(function (otherForm) {
180            var otherId = otherForm.getAttribute("data-id");
181            if (currentId !== otherId) {
182                otherForm.querySelectorAll("[data-field-errors]").forEach((el) => el.remove());
183                otherForm.querySelectorAll(".freeform-input").forEach((el) => el.classList.remove("border-red-500"));
184            }
185        });
186    });
187});
188
189// File upload UI
190var forms = document.querySelectorAll("[data-freeform-tailwind]");
191

192forms.forEach(function (form) {
193    // Handle Freeform ready
194    form.addEventListener("freeform-ready", function (e) {
195        var f = e.freeform;
196        f.setOption("errorClassList", ["mt-1", "text-sm", "text-red-600"]);
197        f.setOption("errorClassField", ["outline-1", "-outline-offset-1", "outline-red-600"]);
198    });
199
200    // Handle successful render
201    form.addEventListener("freeform-render-success", function (e) {
202        e.preventDefault();
203
204        const banner = document.createElement("div");
205        banner.classList.add("freeform-success-banner", "rounded-md", "bg-green-50", "p-4", "mb-10");
206
207        const flex = document.createElement("div");
208        flex.classList.add("flex");
209
210        const iconWrapper = document.createElement("div");
211        iconWrapper.classList.add("shrink-0");
212
213        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
214        svg.setAttribute("class", "size-6 text-green-400");
215        svg.setAttribute("viewBox", "0 0 20 20");
216        svg.setAttribute("fill", "currentColor");
217        svg.setAttribute("aria-hidden", "true");
218
219        const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
220        path.setAttribute("fill-rule", "evenodd");
221        path.setAttribute(
222            "d",
223            "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z"
224        );
225        path.setAttribute("clip-rule", "evenodd");
226
227        svg.appendChild(path);
228        iconWrapper.appendChild(svg);
229
230        const textWrapper = document.createElement("div");
231        textWrapper.classList.add("ml-2");
232
233        const heading = document.createElement("h3");
234        const msg = form.getAttribute("data-success-message") || "Form submitted successfully!";
235        heading.classList.add("text-md", "font-medium", "text-green-800");
236        heading.textContent = msg;
237
238        textWrapper.appendChild(heading);
239        flex.appendChild(iconWrapper);
240        flex.appendChild(textWrapper);
241        banner.appendChild(flex);
242
243        form.insertBefore(banner, form.firstChild);
244    });
245
246    // Handle form errors
247    form.addEventListener("freeform-render-form-errors", function (e) {
248        e.preventDefault();
249
250        const oldBanner = form.querySelector(".freeform-error-banner");
251        if (oldBanner) oldBanner.remove();
252
253        const banner = document.createElement("div");
254        banner.classList.add("freeform-error-banner", "rounded-md", "bg-red-50", "p-4", "mb-10");
255
256        const flex = document.createElement("div");
257        flex.classList.add("flex");
258
259        const iconWrapper = document.createElement("div");
260        iconWrapper.classList.add("shrink-0");
261
262        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
263        svg.setAttribute("viewBox", "0 0 20 20");
264        svg.setAttribute("fill", "currentColor");
265        svg.setAttribute("aria-hidden", "true");
266        svg.classList.add("size-6", "text-red-400");
267
268        const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
269        path.setAttribute("fill-rule", "evenodd");
270        path.setAttribute(
271            "d",
272            "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z"
273        );
274        path.setAttribute("clip-rule", "evenodd");
275
276        svg.appendChild(path);
277        iconWrapper.appendChild(svg);
278
279        const textWrapper = document.createElement("div");
280        textWrapper.classList.add("ml-3");
281
282        const heading = document.createElement("h3");
283        heading.classList.add("text-md", "font-medium", "text-red-800");
284        heading.textContent = form.getAttribute("data-error-message") || "There were errors in your submission";
285
286        const errorListWrapper = document.createElement("div");
287        errorListWrapper.classList.add("mt-2", "text-sm", "text-red-700");
288
289        const errorList = document.createElement("ul");
290        errorList.setAttribute("role", "list");
291        errorList.classList.add("list-disc", "space-y-1", "pl-5");
292

293        e.errors.forEach(function (err) {
294            const li = document.createElement("li");
295            li.textContent = err;
296            errorList.appendChild(li);
297        });
298
299        if (errorList.children.length > 0) {
300            errorListWrapper.appendChild(errorList);
301            textWrapper.appendChild(errorListWrapper);
302        }
303
304        textWrapper.prepend(heading);
305        flex.append(iconWrapper, textWrapper);
306        banner.appendChild(flex);
307
308        form.insertBefore(banner, form.firstChild);
309    });
310
311    // Handle Stripe appearance
312    form.addEventListener("freeform-stripe-appearance", function (e) {
313        e.elementOptions.appearance = Object.assign(e.elementOptions.appearance, {
314            variables: {
315                colorPrimary: "#4c3aed",
316                fontFamily:
317                    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"',
318                fontSizeBase: "0.875rem",
319                spacingUnit: "0.2em",
320                tabSpacing: "0.825rem",
321                gridColumnSpacing: "1.625rem",
322                gridRowSpacing: "1.625rem",
323                colorText: "#121827",
324                colorTextPlaceholder: "#9ba1ae",
325                colorBackground: "#ffffff",
326                colorDanger: "#d42422",
327                borderRadius: "5px",
328            },
329            rules: {
330                ".Tab": {
331                    border: "0",
332                    outline: "1px solid #d2d5db",
333                    boxShadow: "none",
334                    padding: "1rem",
335                },
336                ".Tab--selected": {
337                    border: "0",
338                    outline: "2px solid #4c3aed",
339                    boxShadow: "none",
340                },
341                ".Input": {
342                    border: "0",
343                    outline: "1px solid #d2d5db",
344                    boxShadow: "none",
345                    padding: "0.625rem 0.75rem",
346                },
347                ".Tab:focus, .Input:focus": {
348                    border: "0",
349                    boxShadow: "none",
350                    outline: "2px solid #4c3aed",
351                },
352                ".Input--invalid": {
353                    border: "0",
354                    boxShadow: "none",
355                },
356                ".Label": {
357                    fontSize: "1rem",
358                    fontWeight: "500",
359                    marginBottom: "0.5rem",
360                },
361            },
362        });
363    });
364
365    // Handle form submit cleanup
366    form.addEventListener("freeform-on-submit", function (e) {
367        var currentId = e.form.getAttribute("data-id");
368        forms.forEach(function (otherForm) {
369            var otherId = otherForm.getAttribute("data-id");
370            if (currentId !== otherId) {
371                otherForm.querySelectorAll("[data-field-errors]").forEach((el) => el.remove());
372                otherForm.querySelectorAll(".freeform-input").forEach((el) => el.classList.remove("border-red-500"));
373            }
374        });
375    });
376});
377
378// File upload UI
379document.querySelectorAll(".freeform-file-upload-container").forEach((container) => {
380    const input = container.querySelector(".freeform-file-upload-input");
381    const display = container.querySelector(".freeform-file-name-display");
382    const button = container.querySelector(".freeform-upload-btn");
383
384    if (button && input && display) {
385        button.addEventListener("click", function () {
386            input.click();
387        });
388
389        input.addEventListener("change", function () {
390            if (input.files.length > 0) {
391                const fileNames = Array.from(input.files).map((f) => f.name).join(", ");
392                display.textContent = `Selected files: ${fileNames}`;
393            } else {
394                display.textContent = "No files selected";
395            }
396        });
397    }
398});
399