Form action optional config

src/components/ui/Form.astro

@@ -2,14 +2,30 @@
 import type { Form as Props } from '~/types';
 import Button from '~/components/ui/Button.astro';
 
-const { inputs, textarea, disclaimer, button = 'Contact us', description = '' } = Astro.props;
+const { inputs, textarea, disclaimer, button = 'Contact us', description = '', form } = Astro.props;
 ---
 
-<form>
+<script is:inline>
+  function handleSubmit(e) {
+    if (!document.getElementById('disclaimer').checked) {
+      e.preventDefault();
+      alert('Please accept the terms.');
+    }
+  }
+
+  document.addEventListener('DOMContentLoaded', () => {
+    const formElement = document.querySelector('form');
+    if (formElement) {
+      formElement.addEventListener('submit', handleSubmit);
+    }
+  });
+</script>
+
+<form {...form}>
   {
     inputs &&
       inputs.map(
-        ({ type = 'text', name, label = '', autocomplete = 'on', placeholder = '' }) =>
+        ({ type = 'text', name, label = '', autocomplete = 'on', placeholder = '', required }) =>
           name && (
             <div class="mb-6">
               {label && (
@@ -23,6 +39,7 @@ const { inputs, textarea, disclaimer, button = 'Contact us', description = '' }
                 id={name}
                 autocomplete={autocomplete}
                 placeholder={placeholder}
+                required={required}
                 class="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900"
               />
             </div>
@@ -41,6 +58,7 @@ const { inputs, textarea, disclaimer, button = 'Contact us', description = '' }
           name={textarea.name ? textarea.name : 'message'}
           rows={textarea.rows ? textarea.rows : 4}
           placeholder={textarea.placeholder}
+          required={textarea.required}
           class="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900"
         />
       </div>

src/components/widgets/Contact.astro

@@ -13,6 +13,7 @@ const {
   disclaimer,
   button,
   description,
+  form,
 
   id,
   isDark = false,
@@ -33,6 +34,7 @@ const {
           disclaimer={disclaimer}
           button={button}
           description={description}
+          form={form}
         />
       </div>
     )

src/pages/contact.astro

@@ -16,22 +16,34 @@ const metadata = {
 
   <ContactUs
     id="form"
+    form={{
+      action: '#',
+      name: 'formName',
+      id: 'formId',
+      method: 'POST',
+      enctype: 'multipart/form-data',
+    }}
     title="Drop us a message today!"
     subtitle="For quicker answers, explore our FAQs section. You may find the solution you're looking  for right there! If not, our support team is delighted to help you."
     inputs={[
       {
         type: 'text',
         name: 'name',
         label: 'Name',
+        placeholder: 'Your Name',
+        required: true,
       },
       {
         type: 'email',
         name: 'email',
         label: 'Email',
+        placeholder: '[email protected]',
+        required: true,
       },
     ]}
     textarea={{
       label: 'Message',
+      required: false,
     }}
     disclaimer={{
       label:

src/types.d.ts

@@ -167,13 +167,15 @@ export interface Input {
   label?: string;
   autocomplete?: string;
   placeholder?: string;
+  required?: boolean;
 }
 
 export interface Textarea {
   label?: string;
   name?: string;
   placeholder?: string;
   rows?: number;
+  required?: boolean;
 }
 
 export interface Disclaimer {
@@ -210,6 +212,16 @@ export interface Form {
   disclaimer?: Disclaimer;
   button?: string;
   description?: string;
+  form?: FormProps;
+}
+
+export interface FormProps {
+  action?: string;
+  class?: string;
+  name?: string;
+  id?: string;
+  method?: 'GET' | 'POST';
+  enctype?: string;
 }
 
 // WIDGETS