Contact form #55
Contact form #55
Conversation
There was a problem hiding this comment.
Pull request overview
This PR adds contact form functionality to the Munich Maker Lab website by integrating Tailwind CSS v4 and implementing two Web3Forms-based contact forms. The changes enable users to contact the organization through form submissions instead of email links.
- Adds Tailwind CSS v4 dependencies and configuration
- Creates two contact form components (VorstandContactForm for board contact, InfoContactForm for general inquiries)
- Updates contact, imprint, and about pages to use the new contact forms
Reviewed changes
Copilot reviewed 11 out of 13 changed files in this pull request and generated 20 comments.
Show a summary per file
| File | Description |
|---|---|
| package.json | Bumps version to 0.0.2, adds Tailwind CSS v4 and @tailwindcss/vite dependencies |
| package-lock.json | Updates lockfile with Tailwind CSS v4 dependencies and related packages |
| tailwind.config.js | Adds Tailwind CSS v4 configuration file with content paths |
| astro.config.mjs | Integrates Tailwind CSS Vite plugin into Astro build |
| src/styles/contact-form.css | Defines custom CSS for form validation feedback display |
| src/components/VorstandContactForm.astro | Implements contact form for board communication with Web3Forms integration |
| src/components/InfoContactForm.astro | Implements contact form for general inquiries with Web3Forms integration |
| src/pages/imprint.mdx | Replaces email link with VorstandContactForm component |
| src/pages/contact.mdx | Adds InfoContactForm component and restructures content headings |
| src/pages/about.mdx | Updates donation receipt request to reference contact form |
| src/layouts/Layout.astro | Adds empty frontmatter section (no functional change) |
| src/layouts/Content.astro | Adds blank line (formatting only) |
| src/components/Footer.astro | Refactors footer layout with improved styling for social media links and former channels section |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| --- | ||
There was a problem hiding this comment.
The frontmatter section (---) is empty and serves no purpose. This should be removed to avoid confusion.
| --- |
| <textarea | ||
| name="message" | ||
| required | ||
| placeholder="Your Message" | ||
| class="w-full px-4 py-3 border placeholder:text-slate-400 rounded-md outline-none h-36 focus:ring-4 border-slate-300 focus:border-slate-600 ring-slate-100" | ||
| ></textarea> |
There was a problem hiding this comment.
The message textarea is missing an accessible label. While there's a placeholder, screen readers need an explicit label. Consider adding a <label for="message"> with class sr-only, or add an aria-label attribute.
| result.innerHTML = responseData.message; | ||
| } else { | ||
| console.log(response); | ||
| result.classList.add("text-red-500"); | ||
| result.innerHTML = responseData.message; |
There was a problem hiding this comment.
Using innerHTML to display the API response message creates a potential XSS vulnerability if the API returns malicious HTML/JavaScript. Use textContent instead to safely display the message, or sanitize the response before rendering.
| result.innerHTML = responseData.message; | |
| } else { | |
| console.log(response); | |
| result.classList.add("text-red-500"); | |
| result.innerHTML = responseData.message; | |
| result.textContent = responseData.message; | |
| } else { | |
| console.log(response); | |
| result.classList.add("text-red-500"); | |
| result.textContent = responseData.message; |
| import ClientRouter from 'astro/components/ClientRouter.astro' | ||
| import Navbar from '../components/Navbar.vue' | ||
There was a problem hiding this comment.
Unnecessary blank line added. This change adds no value and increases file length without improving readability.
| }) | ||
| .then(async (response) => { | ||
| let responseData = await response.json(); | ||
| if (response.status == 200) { |
There was a problem hiding this comment.
Use strict equality operator === instead of loose equality == for status code comparison to avoid type coercion issues.
| if (response.status == 200) { | |
| if (response.status === 200) { |
| e.preventDefault(); | ||
| form.classList.add("was-validated"); | ||
| if (!form.checkValidity()) { | ||
| form.querySelectorAll(":invalid")[0].focus(); |
There was a problem hiding this comment.
If there are no invalid fields (e.g., the form passes basic HTML5 validation but fails for other reasons), querySelectorAll(":invalid")[0] could be undefined, causing a runtime error when calling .focus(). Add a null check before calling focus.
| form.querySelectorAll(":invalid")[0].focus(); | |
| const invalidFields = form.querySelectorAll(":invalid"); | |
| if (invalidFields.length > 0) { | |
| invalidFields[0].focus(); | |
| } |
| } else { | ||
| console.log(response); | ||
| result.classList.add("text-red-500"); | ||
| result.innerHTML = responseData.message; |
There was a problem hiding this comment.
Using innerHTML to display the API error message creates a potential XSS vulnerability if the API returns malicious HTML/JavaScript. Use textContent instead to safely display the message, or sanitize the response before rendering.
| result.innerHTML = responseData.message; | |
| result.textContent = responseData.message; |
| } else { | ||
| console.log(response); | ||
| result.classList.add("text-red-500"); | ||
| result.innerHTML = responseData.message; |
There was a problem hiding this comment.
Using innerHTML to display the API error message creates a potential XSS vulnerability if the API returns malicious HTML/JavaScript. Use textContent instead to safely display the message, or sanitize the response before rendering.
| }) | ||
| .catch((error) => { | ||
| console.log(error); | ||
| result.innerHTML = "Something went wrong!"; |
There was a problem hiding this comment.
The generic error message "Something went wrong!" doesn't provide users with actionable information. Consider providing more specific guidance, such as "Unable to send message. Please check your connection and try again, or contact us directly at [email]."
| result.innerHTML = "Something went wrong!"; | |
| result.innerHTML = 'Unable to send message. Please check your internet connection and try again, or contact us directly at <a href="mailto:vorstand@chaostreff-flensburg.de">vorstand@chaostreff-flensburg.de</a>.'; |
| let responseData = await response.json(); | ||
| if (response.status == 200) { | ||
| result.classList.add("text-green-500"); | ||
| result.innerHTML = responseData.message; |
There was a problem hiding this comment.
Using innerHTML to display the API response message creates a potential XSS vulnerability if the API returns malicious HTML/JavaScript. Use textContent instead to safely display the message, or sanitize the response before rendering.
No description provided.