IT4Change/IT4C.dev
3
0
Fork 0
mirror of https://github.com/IT4Change/IT4C.dev.git synced 2025-12-13 09:25:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

- fixed contact form (#295)

Browse Source
This commit is contained in:
sebastian2357 2025-03-18 15:36:08 +01:00 committed by GitHub
parent ed3a46b5dc
commit 7a31a79d86
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
docs/.vuepress/components/ContactForm.vue
View File

@ -24,16 +24,16 @@
</div>
<h3 class="mb-4">Nachricht</h3>
<form class="space-y-4" @submit.prevent="handleSubmit">
<div v-if="submitSuccess" class="p-3 bg-green-100 text-green-700 rounded-md mb-4">
<form @submit.prevent="handleSubmit">
<div v-if="submitSuccess" class="my-4 p-3 bg-green-100 text-green-700 rounded-md mb-4">
Deine Nachricht wurde erfolgreich gesendet. Vielen Dank!
</div>
<div v-if="submitError" class="p-3 bg-red-100 text-red-700 rounded-md mb-4">
<div v-if="submitError" class="my-4 p-3 bg-red-100 text-red-700 rounded-md mb-4">
{{ submitError }}
</div>
<div>
<div class="my-4">
<input
type="text"
id="name"
@ -42,30 +42,30 @@
required
minlength="2"
maxlength="35"
class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:highlight focus:border-transparent"
>
</div>
<div>
<div class="my-4">
<input
type="email"
id="email"
v-model="form.email"
placeholder="E-Mail"
required
class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:highlight focus:border-transparent"
>
</div>
<div>
<div class="my-4">
<input
type="tel"
id="phone"
v-model="form.phone"
placeholder="Telefon"
minlength="8"
class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:highlight focus:border-transparent"
>
</div>
<div>
<div class="my-4">
<textarea
id="message"
v-model="form.message"
@ -73,14 +73,14 @@
placeholder="Ihre Nachricht"
required
minlength="5"
class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:highlight focus:border-transparent"
></textarea>
</div>
<div class="flex justify-end">
<div class="my-4 flex justify-end">
<button
type="submit"
:disabled="isSubmitting"
class="bg-green-700 text-white py-2 px-6 rounded-md hover:bg-green-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 disabled:bg-green-300 disabled:cursor-not-allowed"
class="bg-green-700 text-white py-2 px-6 rounded-md hover:bg-green-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:highlight focus:ring-offset-2 disabled:bg-green-300 disabled:cursor-not-allowed"
>
<span v-if="isSubmitting">Wird gesendet...</span>
<span v-else>Nachricht senden</span>
@ -155,4 +155,7 @@ const handleSubmit = async () => {
.phone-number {
color: var(--highlight-color);
}
.focus\:highlight:focus {
--tw-ring-color: var(--highlight-color);
}
</style>

1
docs/.vuepress/styles/index.scss
View File

@ -9,6 +9,7 @@
--highlight-color: #3894b3;
--highlight-color-light: #a5e3f7;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-family-heading);
}