diff options
Diffstat (limited to 'themes/danix-xyz-hacker/layouts/shortcodes/contact.html')
| -rw-r--r-- | themes/danix-xyz-hacker/layouts/shortcodes/contact.html | 65 |
1 files changed, 65 insertions, 0 deletions
diff --git a/themes/danix-xyz-hacker/layouts/shortcodes/contact.html b/themes/danix-xyz-hacker/layouts/shortcodes/contact.html new file mode 100644 index 0000000..6c5748f --- /dev/null +++ b/themes/danix-xyz-hacker/layouts/shortcodes/contact.html @@ -0,0 +1,65 @@ +<form id="contact-form" x-data="contactForm()" @submit.prevent="submitContactForm" class="space-y-6"> + <!-- Name Field --> + <div> + <label for="name" class="block text-sm font-medium text-text mb-2"> + {{ i18n "name" }} + </label> + <input + id="name" + type="text" + x-model="formData.name" + required + class="w-full px-4 py-2 bg-bg border border-border/50 rounded-lg text-text placeholder-text-dim focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent transition-colors" + :aria-busy="isSubmitting" + /> + </div> + + <!-- Email Field --> + <div> + <label for="email" class="block text-sm font-medium text-text mb-2"> + {{ i18n "email" }} + </label> + <input + id="email" + type="email" + x-model="formData.email" + required + class="w-full px-4 py-2 bg-bg border border-border/50 rounded-lg text-text placeholder-text-dim focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent transition-colors" + :aria-busy="isSubmitting" + /> + </div> + + <!-- Message Field --> + <div> + <label for="message" class="block text-sm font-medium text-text mb-2"> + {{ i18n "message" }} + </label> + <textarea + id="message" + x-model="formData.message" + rows="5" + required + class="w-full px-4 py-2 bg-bg border border-border/50 rounded-lg text-text placeholder-text-dim focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent transition-colors resize-none" + :aria-busy="isSubmitting" + ></textarea> + </div> + + <!-- Status Message --> + <div + x-show="statusMessage" + x-text="statusMessage" + :class="statusClass" + class="px-4 py-3 rounded-lg text-sm transition-all" + ></div> + + <!-- Submit Button --> + <button + type="submit" + :disabled="isSubmitting" + class="w-full px-4 py-2 bg-accent text-bg font-medium rounded-lg hover:bg-accent/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors" + > + <span x-show="!isSubmitting">{{ i18n "submit" }}</span> + <span x-show="isSubmitting">{{ i18n "sending" }}</span> + </button> +</form> + |
