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> </div>
<h3 class="mb-4">Nachricht</h3> <h3 class="mb-4">Nachricht</h3>
<form class="space-y-4" @submit.prevent="handleSubmit"> <form @submit.prevent="handleSubmit">
<div v-if="submitSuccess" class="p-3 bg-green-100 text-green-700 rounded-md mb-4"> <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! Deine Nachricht wurde erfolgreich gesendet. Vielen Dank!
</div> </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 }} {{ submitError }}
</div> </div>
<div> <div class="my-4">
<input <input
type="text" type="text"
id="name" id="name"
@ -42,30 +42,30 @@
required required
minlength="2" minlength="2"
maxlength="35" 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> <div class="my-4">
<input <input
type="email" type="email"
id="email" id="email"
v-model="form.email" v-model="form.email"
placeholder="E-Mail" placeholder="E-Mail"
required 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> <div class="my-4">
<input <input
type="tel" type="tel"
id="phone" id="phone"
v-model="form.phone" v-model="form.phone"
placeholder="Telefon" placeholder="Telefon"
minlength="8" 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> <div class="my-4">
<textarea <textarea
id="message" id="message"
v-model="form.message" v-model="form.message"
@ -73,14 +73,14 @@
placeholder="Ihre Nachricht" placeholder="Ihre Nachricht"
required required
minlength="5" 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> ></textarea>
</div> </div>
<div class="flex justify-end"> <div class="my-4 flex justify-end">
<button <button
type="submit" type="submit"
:disabled="isSubmitting" :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-if="isSubmitting">Wird gesendet...</span>
<span v-else>Nachricht senden</span> <span v-else>Nachricht senden</span>
@ -155,4 +155,7 @@ const handleSubmit = async () => {
.phone-number { .phone-number {
color: var(--highlight-color); color: var(--highlight-color);
} }
.focus\:highlight:focus {
--tw-ring-color: var(--highlight-color);
}
</style> </style>

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

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