summaryrefslogtreecommitdiffstats
path: root/themes/danix-xyz-hacker/layouts/shortcodes/contact.html
diff options
context:
space:
mode:
Diffstat (limited to 'themes/danix-xyz-hacker/layouts/shortcodes/contact.html')
-rw-r--r--themes/danix-xyz-hacker/layouts/shortcodes/contact.html65
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>
+