@formique/semantq 1.0.8 → 1.0.10

package/formique-semantq.js

@@ -1,4 +1,6 @@
 'use strict';
+import LowCodeParser from './LowCodeParser.js';
+import astToFormique from './astToFormique.js'; 
 /**
  * Formique Semantq Class Library
  * 
@@ -50,18 +52,42 @@ class FormBuilder
 
 // Extended class for specific form rendering methods
 class Formique extends FormBuilder {
-    constructor(formSchema, formSettings = {}, formParams = {}) {
+    constructor(formDefinition, formSettings = {}, formParams = {}) {
         super();
+        let formSchema;
+        let finalSettings = formSettings;
+        let finalParams = formParams;
+
+        if (typeof formDefinition === 'string') {
+            const ast = LowCodeParser.parse(formDefinition.trim());
+           // console.log("AST", JSON.stringify(ast, null,2));
+
+            const formObjects = new astToFormique(ast);
+
+            //console.log("formSchema", JSON.stringify(formObjects.formSchema,null,2));
+            // Assign from formObjects if a string is passed
+            formSchema = formObjects.formSchema;
+            finalSettings = { ...formSettings, ...formObjects.formSettings };
+            finalParams = { ...formParams, ...formObjects.formParams };
+        } else {
+            // Assign from the parameters if formDefinition is not a string
+            formSchema = formDefinition;
+        }
+
         this.formSchema = formSchema;
-        this.formParams = formParams;
+        this.formParams = finalParams;
         this.formSettings = {
             requiredFieldIndicator: true,
             placeholders: true,
             asteriskHtml: '<span aria-hidden="true" style="color: red;">*</span>',
-            ...formSettings
+            ...finalSettings
         };
 
-         this.themeColor = formSettings.themeColor || null;
+        //console.log("constructor",this.formSettings);
+
+         this.themeColor = this.formSettings.themeColor || null;
+
+         //console.log("color set?", this.themeColor); 
         
          this.themeColorMap = {
           'primary': {
@@ -100,17 +126,21 @@ class Formique extends FormBuilder {
         this.formiqueEndpoint = "https://formiqueapi.onrender.com/api/send-email";
 
         // DISABLE DOM LISTENER 
-        //document.addEventListener('DOMContentLoaded', () => {
+       // document.addEventListener('DOMContentLoaded', () => {
             // 1. Build the form's HTML in memory
             this.formMarkUp += this.renderFormElement(); // Adds opening <form> tag and any hidden inputs
 
             // Filter out 'submit' field for rendering, and render all other fields
             const nonSubmitFieldsHtml = this.formSchema
                 .filter(field => field[0] !== 'submit')
-                .map(field => {
-                    const [type, name, label, validate, attributes = {}, options] = field;
-                    return this.renderField(type, name, label, validate, attributes, options);
-                }).join('');
+                 .map(field => {
+                //  FIX 1: Add 'subOptions' to capture the 7th element (Index 6)
+                const [type, name, label, validate, attributes = {}, options, subOptions] = field;
+                
+                // FIX 2: Pass 'subOptions' through to renderField
+                return this.renderField(type, name, label, validate, attributes, options, subOptions);
+            }).join('');
+
             this.formMarkUp += nonSubmitFieldsHtml;
 
             // Find and render the submit button separately, at the very end of the form content
@@ -148,46 +178,67 @@ class Formique extends FormBuilder {
 
 
             // 2. Inject the complete form HTML into the DOM
-            this.renderFormHTML(); // This puts the form element into the document!
-
-            // 3. Now that the form is in the DOM, attach event listeners
-            const formElement = document.getElementById(`${this.formId}`);
-            if (formElement) { // Add a check here just in case, although it should now exist
-                formElement.addEventListener('submit', function(event) {
-                    if (this.formSettings.submitMode === 'email' || this.formSettings.submitMode === 'rsvp') {
-                        event.preventDefault();
-                        document.getElementById("formiqueSpinner").style.display = "block";
-                        this.handleEmailSubmission(this.formId);
-                    }
-
-                    if (this.formSettings.submitOnPage) {
-                        event.preventDefault();
-                        document.getElementById("formiqueSpinner").style.display = "block";
-                        this.handleOnPageFormSubmission(this.formId);
-                    }
-                }.bind(this));
-            } else {
-                console.error(`Form with ID ${this.formId} not found after rendering. Event listener could not be attached.`);
+            // A conceptual snippet from your form initialization method
+this.renderFormHTML(); // This puts the form element into the document!
+
+// 3. Now that the form is in the DOM, get the element and attach a single event listener
+const formElement = document.getElementById(`${this.formId}`);
+if (formElement) {
+    // Attach a single, unified submit event listener
+    formElement.addEventListener('submit', (event) => {
+        // Prevent default submission behavior immediately
+        event.preventDefault();
+
+        // Check if reCAPTCHA is present in the form schema
+        const recaptchaField = this.formSchema.find(field => field[0] === 'recaptcha');
+        
+        // If reCAPTCHA is required, validate it first
+        if (recaptchaField) {
+            const recaptchaToken = grecaptcha.getResponse();
+
+            if (!recaptchaToken) {
+                // If reCAPTCHA is not checked, display an error and stop
+                document.getElementById("formiqueSpinner").style.display = "none";
+                alert('Please verify that you are not a robot.');
+                return; // Stop execution of the handler
             }
+        }
+
+        // If reCAPTCHA is not required or is validated, proceed with submission logic
+        document.getElementById("formiqueSpinner").style.display = "block";
+
+        if (this.formSettings.submitMode === 'email' || this.formSettings.submitMode === 'rsvp') {
+            this.handleEmailSubmission(this.formId);
+        }
+
+        if (this.formSettings.submitOnPage) {
+            this.handleOnPageFormSubmission(this.formId);
+        }
+    });
+
+} else {
+    console.error(`Form with ID ${this.formId} not found after rendering. Event listener could not be attached.`);
+}
+
+// Initialize dependency graph and observers after the form is rendered
+this.initDependencyGraph();
+this.registerObservers();
+this.attachDynamicSelectListeners(); 
+
+// Apply theme
+if (this.themeColor) {
+    this.applyCustomTheme(this.themeColor, this.formContainerId); 
+} else if (this.formSettings.theme && this.themes.includes(this.formSettings.theme)) {
+    let theme = this.formSettings.theme;
+    this.applyTheme(theme, this.formContainerId);
+} else {
+    this.applyTheme('dark', this.formContainerId); // Default to 'dark'
+}
+
 
-            // Initialize dependency graph and observers after the form is rendered
-            this.initDependencyGraph();
-            this.registerObservers();
-            this.attachDynamicSelectListeners(); 
-
-            // Apply theme
-            if (this.themeColor) {
-                this.applyCustomTheme(this.themeColor, this.formContainerId); // <--- NEW: Apply custom theme
-            } else if (this.formSettings.theme && this.themes.includes(this.formSettings.theme)) {
-                let theme = this.formSettings.theme;
-                this.applyTheme(theme, this.formContainerId);
-            } else {
-                // Fallback if no themeColor and no valid theme specified
-                this.applyTheme('dark', this.formContainerId); // Default to 'dark'
-            }
         
        // DISABLE DOM LISTENER
-        //}); // DOM LISTENER WRAPPER
+       // }); // DOM LISTENER WRAPPER
     
 // CONSTRUCTOR WRAPPER FOR FORMIQUE CLASS
   }
@@ -264,16 +315,48 @@ initDependencyGraph() {
 }
 
 // Attach Event Listeners
+// Corrected Attach Event Listeners
 attachInputChangeListener(parentField) {
-  const fieldElement = document.getElementById(parentField);
-  //alert(parentField);
-
-  if (fieldElement) {
-    fieldElement.addEventListener('input', (event) => {
-      const value = event.target.value;
-      this.handleParentFieldChange(parentField, value);
-    });
+  // Use querySelectorAll to get all elements with the name attribute matching the fieldId.
+  // This correctly targets all radio/checkbox inputs in a group.
+  const fieldElements = document.querySelectorAll(`[name="${parentField}"]`);
+  
+  // If no elements found by name, fall back to getting the single element by ID
+  if (fieldElements.length === 0) {
+      const singleElement = document.getElementById(parentField);
+      if (singleElement) {
+          fieldElements = [singleElement]; // Treat it as a single element array
+      } else {
+          console.warn(`Parent field element(s) not found for field: ${parentField}`);
+          return;
+      }
   }
+
+  fieldElements.forEach(fieldElement => {
+      // Radio/checkbox groups should use 'change', not 'input'
+      const eventType = (fieldElement.type === 'radio' || fieldElement.type === 'checkbox') ? 'change' : 'input';
+
+      fieldElement.addEventListener(eventType, (event) => {
+          let value;
+          if (fieldElement.type === 'radio' && !event.target.checked) {
+              // Only process the change if the radio button is now checked
+              return; 
+          }
+
+          if (fieldElement.type === 'checkbox') {
+              // For checkboxes, you might need special logic to return an array of checked values
+              // For now, let's stick to the change event on a single checkbox
+              value = event.target.checked ? event.target.value : '';
+          } else {
+              value = event.target.value;
+          }
+
+          // Convert value to lowercase for consistent comparison with 'yes' condition
+          //this.handleParentFieldChange(parentField, value.toLowerCase()); 
+          
+          this.handleParentFieldChange(parentField, value.toLowerCase()); 
+      });
+  });
 }
 
 
@@ -327,6 +410,7 @@ handleParentFieldChange(parentFieldId, value) {
   }
 }
 
+
 // Register observers for each dependent field
 registerObservers() {
   this.formSchema.forEach((field) => {
@@ -378,7 +462,7 @@ attachDynamicSelectListeners() {
                     const selectedCategory = event.target.value; // e.g., 'frontend', 'backend', 'server'
 
                     // Find all sub-category fieldsets related to this main select
-                    const subCategoryFieldsets = document.querySelectorAll(`.${mainSelectId}-subcategory-group`);
+                    const subCategoryFieldsets = document.querySelectorAll(`.${mainSelectId}`);
 
                     subCategoryFieldsets.forEach(fieldset => {
                         const subSelect = fieldset.querySelector('select'); // Get the actual select element
@@ -391,7 +475,7 @@ attachDynamicSelectListeners() {
                     });
 
                     // Show the selected sub-category fieldset and manage its required state
-                    const selectedFieldsetId = selectedCategory + '-options'; // Matches the ID format in renderSingleSelectField
+                    const selectedFieldsetId = selectedCategory; // Matches the ID format in renderSingleSelectField
                     const selectedFieldset = document.getElementById(selectedFieldsetId);
 
                     if (selectedFieldset) {
@@ -646,51 +730,10 @@ renderForm() {
     }
 
 
-/*
-renderField(type, name, label, validate, attributes, options) {
-    const fieldRenderMap = {
-        'text': this.renderTextField,
-        'email': this.renderEmailField,
-        'number': this.renderNumberField,
-        'password': this.renderPasswordField,
-        'textarea': this.renderTextAreaField,
-        'tel': this.renderTelField,
-        'date': this.renderDateField,
-        'time': this.renderTimeField,
-        'datetime-local': this.renderDateTimeField,
-        'month': this.renderMonthField,
-        'week': this.renderWeekField,
-        'url': this.renderUrlField,
-        'search': this.renderSearchField,
-        'color': this.renderColorField,
-        'checkbox': this.renderCheckboxField,
-        'radio': this.renderRadioField,
-        'file': this.renderFileField,
-        'hidden': this.renderHiddenField,
-        'image': this.renderImageField,
-        'textarea': this.renderTextAreaField,
-        'singleSelect': this.renderSingleSelectField,
-        'multipleSelect': this.renderMultipleSelectField,
-        'dynamicSingleSelect': this.renderDynamicSingleSelectField,
-        'range': this.renderRangeField,
-        'submit': this.renderSubmitButton,
-    };
-
-    const renderMethod = fieldRenderMap[type];
-
-    if (renderMethod) {
-        return renderMethod.call(this, type, name, label, validate, attributes, options);
-    } else {
-        console.warn(`Unsupported field type '${type}' encountered.`);
-        return ''; // or handle gracefully
-    }
-}
-
-*/
 
 
  // renderField method - No change needed here for this issue, but ensure it handles 'submit' type correctly if called directly
-    renderField(type, name, label, validate, attributes, options) {
+    renderField(type, name, label, validate, attributes, options, subOptions = undefined) {
         const fieldRenderMap = {
             'text': this.renderTextField,
             'email': this.renderEmailField,
@@ -715,6 +758,7 @@ renderField(type, name, label, validate, attributes, options) {
             'multipleSelect': this.renderMultipleSelectField,
             'dynamicSingleSelect': this.renderDynamicSingleSelectField,
             'range': this.renderRangeField,
+            'recaptcha': this.renderRecaptchaField,
             'submit': this.renderSubmitButton, // Keep this for completeness, but renderSubmitButtonElement will now handle it
         };
 
@@ -724,7 +768,7 @@ renderField(type, name, label, validate, attributes, options) {
             // If the type is 'submit', ensure we use the specific renderSubmitButtonElement
             // Although, with the filter in renderForm(), this branch for 'submit' type
             // might not be hit in the primary rendering flow, it's good practice.
-            return renderMethod.call(this, type, name, label, validate, attributes, options);
+            return renderMethod.call(this, type, name, label, validate, attributes, options,subOptions);
 
             if (type === 'submit') {
                 return this.renderSubmitButton(type, name, label, validate, attributes, options);
@@ -797,168 +841,173 @@ hasFileInputs(form) {
 
 
 async handleEmailSubmission(formId) {
-  console.log(`Starting email submission for form ID: ${formId}`);
+    console.log(`Starting email submission for form ID: ${formId}`);
 
-  const form = document.getElementById(formId);
-  if (!form) {
-    console.error(`Form with ID ${formId} not found`);
-    throw new Error(`Form with ID ${formId} not found`);
-  }
-
-  // Validate required settings for 'sendTo'
-  if (!Array.isArray(this.formSettings?.sendTo) || this.formSettings.sendTo.length === 0) {
-    console.error('formSettings.sendTo must be an array with at least one recipient email');
-    throw new Error('formSettings.sendTo must be an array with at least one recipient email');
-  }
+    const form = document.getElementById(formId);
+    if (!form) {
+        console.error(`Form with ID ${formId} not found`);
+        throw new Error(`Form with ID ${formId} not found`);
+    }
 
-  // Serialize form data
-  const payload = {
-    formData: {},
-    metadata: {
-      recipients: this.formSettings.sendTo,
-      timestamp: new Date().toISOString(),
-    },
-  };
+    // Validate required settings for 'sendTo'
+    if (!Array.isArray(this.formSettings?.sendTo) || this.formSettings.sendTo.length === 0) {
+        console.error('formSettings.sendTo must be an array with at least one recipient email');
+        throw new Error('formSettings.sendTo must be an array with at least one recipient email');
+    }
 
-  let senderName = '';
-  let senderEmail = '';
-  let formSubject = '';
-  let registrantEmail = ''; // Variable to store the registrant's email
+    // Serialize form data
+    const payload = {
+        formData: {},
+        metadata: {
+            recipients: this.formSettings.sendTo,
+            timestamp: new Date().toISOString(),
+        },
+    };
 
-  console.log('Initial payload structure:', JSON.parse(JSON.stringify(payload)));
+    let senderName = '';
+    let senderEmail = '';
+    let formSubject = '';
+    let registrantEmail = '';
 
-  // Process form fields and find registrant's email
-  const formData = new FormData(form);
-  formData.forEach((value, key) => {
-    console.log(`Processing form field - Key: ${key}, Value: ${value}`);
-    payload.formData[key] = value;
+    console.log('Initial payload structure:', JSON.parse(JSON.stringify(payload)));
 
-    const lowerKey = key.toLowerCase();
-    if (lowerKey.includes('email')) {
-      senderEmail = value;
-    }
-    if (lowerKey.includes('name')) {
-      senderName = value;
-    }
-    if (lowerKey.includes('subject')) {
-      formSubject = value;
-    }
-    
-    // NEW: Check if the current field is the registrant's email
-    if (this.formSettings.emailField && key === this.formSettings.emailField) {
-      registrantEmail = value;
-    }
-  });
+    // Process form fields and find registrant's email
+    const formData = new FormData(form);
+    formData.forEach((value, key) => {
+        console.log(`Processing form field - Key: ${key}, Value: ${value}`);
+        payload.formData[key] = value;
 
-  // Determine the email subject with fallback logic
-  payload.metadata.subject = formSubject ||
-                            this.formSettings.subject ||
-                            'Message From Contact Form';
+        const lowerKey = key.toLowerCase();
+        if (lowerKey.includes('email')) {
+            senderEmail = value;
+        }
+        if (lowerKey.includes('name')) {
+            senderName = value;
+        }
+        if (lowerKey.includes('subject')) {
+            formSubject = value;
+        }
 
-  console.log('Determined email subject:', payload.metadata.subject);
+        // Check if the current field is the registrant's email
+        if (this.formSettings.emailField && key === this.formSettings.emailField) {
+            registrantEmail = value;
+        }
+    });
 
-  // Add sender information to metadata
-  if (senderEmail) {
-    payload.metadata.sender = senderEmail;
-    payload.metadata.replyTo = senderName
-      ? `${senderName} <${senderEmail}>`
-      : senderEmail;
-  }
+    // Determine the email subject with fallback logic
+    payload.metadata.subject = formSubject ||
+                                this.formSettings.subject ||
+                                'Message From Contact Form';
 
-  console.log('Payload after form processing:', JSON.parse(JSON.stringify(payload)));
+    console.log('Determined email subject:', payload.metadata.subject);
 
-  try {
-    const endpoint = this.formiqueEndpoint || this.formAction;
-    const method = this.method || 'POST';
+    // Add sender information to metadata
+    if (senderEmail) {
+        payload.metadata.sender = senderEmail;
+        payload.metadata.replyTo = senderName
+            ? `${senderName} <${senderEmail}>`
+            : senderEmail;
+    }
 
-    console.log(`Preparing to send primary request to: ${endpoint}`);
-    console.log(`Request method: ${method}`);
-    console.log('Final payload being sent to recipients:', payload);
+    // **NEW:** Add reCAPTCHA secret key to the metadata object
+    if (this.formSettings.recaptchaSecretKey) {
+        payload.metadata.recaptchaSecretKey = this.formSettings.recaptchaSecretKey;
+    }
 
-    // Send the first email to the 'sendTo' recipients
-    const response = await fetch(endpoint, {
-      method: method,
-      headers: {
-        'Content-Type': 'application/json',
-        'X-Formique-Version': '1.0',
-      },
-      body: JSON.stringify(payload),
-    });
+    console.log('Payload after form processing:', JSON.parse(JSON.stringify(payload)));
 
-    console.log(`Received response for primary email with status: ${response.status}`);
+    // ... (The rest of your code remains the same)
+    try {
+      const endpoint = this.formiqueEndpoint || this.formAction;
+      const method = this.method || 'POST';
 
-    if (!response.ok) {
-      const errorData = await response.json().catch(() => ({}));
-      console.error('API Error Response:', errorData);
-      throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
-    }
+      console.log(`Preparing to send primary request to: ${endpoint}`);
+      console.log(`Request method: ${method}`);
+      console.log('Final payload being sent to recipients:', payload);
 
-    const data = await response.json();
-    console.log('Primary API Success Response:', data);
+      // Send the first email to the 'sendTo' recipients
+      const response = await fetch(endpoint, {
+        method: method,
+        headers: {
+          'Content-Type': 'application/json',
+          'X-Formique-Version': '1.0',
+        },
+        body: JSON.stringify(payload),
+      });
 
-    // ------------------- NEW RSVP LOGIC -------------------
-    if (this.formSettings.submitMode === 'rsvp' && registrantEmail && this.formSettings.registrantMessage) {
-      console.log('RSVP mode detected. Sending confirmation email to registrant.');
+      console.log(`Received response for primary email with status: ${response.status}`);
 
-      // Create a new payload for the registrant
-      const rsvpPayload = {
-        formData: payload.formData,
-        metadata: {
-          recipients: [registrantEmail], // Send only to the registrant
-          timestamp: new Date().toISOString(),
-          subject: this.formSettings.registrantSubject || 'RSVP Confirmation',
-          body: this.processDynamicMessage(this.formSettings.registrantMessage, payload.formData),
-          sender: this.formSettings.sendFrom || 'noreply@yourdomain.com', 
-          replyTo: this.formSettings.sendFrom || 'noreply@yourdomain.com',
-        },
-      };
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        console.error('API Error Response:', errorData);
+        throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
+      }
 
-      try {
-        console.log('Preparing to send RSVP email. Final payload:', rsvpPayload);
-        const rsvpResponse = await fetch(endpoint, {
-          method: method,
-          headers: {
-            'Content-Type': 'application/json',
-            'X-Formique-Version': '1.0',
+      const data = await response.json();
+      console.log('Primary API Success Response:', data);
+
+      // ------------------- NEW RSVP LOGIC -------------------
+      if (this.formSettings.submitMode === 'rsvp' && registrantEmail && this.formSettings.registrantMessage) {
+        console.log('RSVP mode detected. Sending confirmation email to registrant.');
+
+        // Create a new payload for the registrant
+        const rsvpPayload = {
+          formData: payload.formData,
+          metadata: {
+            recipients: [registrantEmail], // Send only to the registrant
+            timestamp: new Date().toISOString(),
+            subject: this.formSettings.registrantSubject || 'RSVP Confirmation',
+            body: this.processDynamicMessage(this.formSettings.registrantMessage, payload.formData),
+            sender: this.formSettings.sendFrom || 'noreply@yourdomain.com',
+            replyTo: this.formSettings.sendFrom || 'noreply@yourdomain.com',
           },
-          body: JSON.stringify(rsvpPayload),
-        });
+        };
+
+        try {
+          console.log('Preparing to send RSVP email. Final payload:', rsvpPayload);
+          const rsvpResponse = await fetch(endpoint, {
+            method: method,
+            headers: {
+              'Content-Type': 'application/json',
+              'X-Formique-Version': '1.0',
+            },
+            body: JSON.stringify(rsvpPayload),
+          });
 
-        if (!rsvpResponse.ok) {
-          const rsvpErrorData = await rsvpResponse.json().catch(() => ({}));
-          console.error('RSVP API Error Response:', rsvpErrorData);
-          // Log the error but don't fail the entire submission since the primary email was sent
+          if (!rsvpResponse.ok) {
+            const rsvpErrorData = await rsvpResponse.json().catch(() => ({}));
+            console.error('RSVP API Error Response:', rsvpErrorData);
+            // Log the error but don't fail the entire submission since the primary email was sent
+            console.warn('Failed to send RSVP email to registrant, but primary submission was successful.');
+          } else {
+            console.log('RSVP email sent successfully to registrant.');
+          }
+        } catch (rsvpError) {
+          console.error('RSVP email submission failed:', rsvpError);
           console.warn('Failed to send RSVP email to registrant, but primary submission was successful.');
-        } else {
-          console.log('RSVP email sent successfully to registrant.');
         }
-      } catch (rsvpError) {
-        console.error('RSVP email submission failed:', rsvpError);
-        console.warn('Failed to send RSVP email to registrant, but primary submission was successful.');
       }
+      // ------------------- END NEW RSVP LOGIC -------------------
+
+      const successMessage = this.formSettings.successMessage ||
+                              data.message ||
+                              'Your message has been sent successfully!';
+      console.log(`Showing success message: ${successMessage}`);
+
+      this.showSuccessMessage(successMessage);
+
+    } catch (error) {
+      console.error('Email submission failed:', error);
+      const errorMessage = this.formSettings.errorMessage ||
+                            error.message ||
+                            'Failed to send message. Please try again later.';
+      console.log(`Showing error message: ${errorMessage}`);
+      this.showErrorMessage(errorMessage);
+    } finally {
+      document.getElementById("formiqueSpinner").style.display = "none";
     }
-    // ------------------- END NEW RSVP LOGIC -------------------
-
-    const successMessage = this.formSettings.successMessage ||
-                          data.message ||
-                          'Your message has been sent successfully!';
-    console.log(`Showing success message: ${successMessage}`);
-
-    this.showSuccessMessage(successMessage);
-
-  } catch (error) {
-    console.error('Email submission failed:', error);
-    const errorMessage = this.formSettings.errorMessage ||
-                         error.message ||
-                         'Failed to send message. Please try again later.';
-    console.log(`Showing error message: ${errorMessage}`);
-    this.showErrorMessage(errorMessage);
-  } finally {
-    document.getElementById("formiqueSpinner").style.display = "none";
-  }
 }
 
-
 // Add this method to your Formique class
 processDynamicMessage(message, formData) {
   let processedMessage = message;
@@ -985,84 +1034,145 @@ validateEmail(email) {
 }
 
 
+attachSubmitListener() {
+    this.formElement.addEventListener('submit', (e) => {
+      // Find the reCAPTCHA field in the form schema.
+      const recaptchaField = this.formSchema.find(field => field[0] === 'recaptcha');
+      
+      // If a reCAPTCHA field is present, check its state.
+      if (recaptchaField) {
+        const recaptchaToken = grecaptcha.getResponse();
 
-// Method to handle on-page form submissions
-handleOnPageFormSubmission(formId) {
-  const formElement = document.getElementById(formId);
-  //console.warn("handler fired also",formId,this.method,this.formAction);
-
-  if (formElement) {
-    // Gather form data
-    const formData = new FormData(formElement);
-
-    // Submit form data using fetch to a test endpoint
-    fetch(this.formAction, {
-      method: this.method,
-      body: formData
-    })
-      .then(response => response.json())
-      .then(data => {
-        console.log('Success:', data);
-        // Handle the response data here, e.g., show a success message
-
-        // Get the form container element
-const formContainer = document.getElementById(this.formContainerId);
+        if (!recaptchaToken) {
+          // Prevent the default form submission.
+          e.preventDefault(); 
+          
+          // Display the alert and handle UI.
+          alert('Please verify that you are not a robot.');
+          document.getElementById("formiqueSpinner").style.display = "none";
+          return;
+        }
+      }
 
-if (this.redirect && this.redirectURL) {
-  window.location.href = this.redirectURL;
-}
+      // If reCAPTCHA is valid or not present, proceed with submission logic.
+      this.handleOnPageFormSubmission(e); 
+    });
+  }
 
 
-if (formContainer) {
-  // Create a new div element for the success message
-  const successMessageDiv = document.createElement('div');
 
-  // Add custom classes for styling the success message
-  successMessageDiv.classList.add('success-message', 'message-container');
+// Method to handle on-page form submissions
+handleOnPageFormSubmission(formId) {
+    const formElement = document.getElementById(formId);
+
+    if (formElement) {
+        // Intercept the form's native submit event
+        formElement.addEventListener('submit', (e) => {
+            // Find the reCAPTCHA field in the form schema.
+            const recaptchaField = this.formSchema.find(field => field[0] === 'recaptcha');
+
+            // If a reCAPTCHA field exists, perform client-side validation.
+            if (recaptchaField) {
+                const recaptchaToken = grecaptcha.getResponse();
+
+                // If the token is empty, the reCAPTCHA challenge has not been completed.
+                if (!recaptchaToken) {
+                    e.preventDefault(); // <-- The crucial line to stop default form submission
+                    
+                    // Hide the spinner to indicate the submission was halted.
+                    document.getElementById("formiqueSpinner").style.display = "none";
+                    
+                    // Display a user-friendly error message.
+                    alert('Please verify that you are not a robot.');
+                    
+                    // Stop the function's execution to prevent form submission.
+                    return;
+                }
+            }
 
-  // Set the success message text
-  successMessageDiv.innerHTML = this.formSettings.successMessage || 'Your details have been successfully submitted!';
+            // At this point, reCAPTCHA is validated (or not present), so we can proceed with the fetch request.
+            // Show the spinner as submission is now beginning.
+            document.getElementById("formiqueSpinner").style.display = "block";
 
-  // Replace the content of the form container with the success message div
-  formContainer.innerHTML = ''; // Clear existing content
-  formContainer.appendChild(successMessageDiv); // Append the new success message div
-}
+            // Gather form data.
+            const formData = {};
+            new FormData(formElement).forEach((value, key) => {
+                formData[key] = value;
+            });
 
+            console.log("Setting Object",this.formSettings);
 
-      })
-      .catch(error => {
-  console.error('Error:', error);
+            // Create the full payload with formData and metadata, including the secret key.
+            const payload = {
+                formData: formData,
+                metadata: {
+                    ...this.formSettings, // Include all formSettings
+                    // Other metadata like recipients and sender will be included from this.formSettings
+                }
+            };
+
+            // Submit form data using fetch to the endpoint.
+            fetch(this.formAction, {
+                method: this.method,
+                headers: {
+                    'Content-Type': 'application/json' // Important: set the content type
+                },
+                body: JSON.stringify(payload) // Send the combined payload as JSON
+            })
+            .then(response => {
+                // Check if the response status is OK (200-299).
+                if (!response.ok) {
+                    return response.json().then(errorData => {
+                        throw new Error(errorData.error || `HTTP error! Status: ${response.status}`);
+                    });
+                }
+                return response.json();
+            })
+            .then(data => {
+                console.log('Success:', data);
+                
+                // Hide the spinner on success.
+                document.getElementById("formiqueSpinner").style.display = "none";
+
+                const formContainer = document.getElementById(this.formContainerId);
+                if (this.redirect && this.redirectURL) {
+                    window.location.href = this.redirectURL;
+                }
+                if (formContainer) {
+                    const successMessageDiv = document.createElement('div');
+                    successMessageDiv.classList.add('success-message', 'message-container');
+                    successMessageDiv.innerHTML = this.formSettings.successMessage || 'Your details have been successfully submitted!';
+                    formContainer.innerHTML = '';
+                    formContainer.appendChild(successMessageDiv);
+                }
+            })
+            .catch(error => {
+                console.error('Error:', error);
+
+                // Hide the spinner on error.
+                document.getElementById("formiqueSpinner").style.display = "none";
+
+                const formContainer = document.getElementById(this.formContainerId);
+                if (formContainer) {
+                    let existingErrorDiv = formContainer.querySelector('.error-message');
+                    if (existingErrorDiv) {
+                        existingErrorDiv.remove();
+                    }
+                    const errorMessageDiv = document.createElement('div');
+                    errorMessageDiv.classList.add('error-message', 'message-container');
+                    let err = this.formSettings.errorMessage || 'An error occurred while submitting the form. Please try again.';
+                    err = `${err}<br/>Details: ${error.message}`;
+                    errorMessageDiv.innerHTML = err;
+                    formContainer.appendChild(errorMessageDiv);
+                }
+            });
 
-  const formContainer = document.getElementById(this.formContainerId);
-  if (formContainer) {
-    // Check if an error message div already exists and remove it
-    let existingErrorDiv = formContainer.querySelector('.error-message');
-    if (existingErrorDiv) {
-      existingErrorDiv.remove();
+            // Return false to ensure no other default action is taken, especially for legacy browsers.
+            return false;
+        });
     }
-
-    // Create a new div element for the error message
-    const errorMessageDiv = document.createElement('div');
-
-    // Add custom classes for styling the error message
-    errorMessageDiv.classList.add('error-message', 'message-container');
-
-    // Set the error message text
-    let err = this.formSettings.errorMessage || 'An error occurred while submitting the form. Please try again.';
-    err = `${err}<br/>Details: ${error.message}`;
-    errorMessageDiv.innerHTML = err; 
-
-    // Append the new error message div to the form container
-    formContainer.appendChild(errorMessageDiv);
-  }
-});
-
-  }
 }
 
-
-
-
 // text field rendering
 renderTextField(type, name, label, validate, attributes) {
   const textInputValidationAttributes = [
@@ -3345,6 +3455,8 @@ renderTextAreaField(type, name, label, validate, attributes) {
 
 renderRadioField(type, name, label, validate, attributes, options) {
     // Define valid validation attributes for radio fields
+    console.log("RADIO DEBUG - options:", JSON.stringify(options, null, 2));
+
     const radioValidationAttributes = ['required'];
     
     // Construct validation attributes
@@ -3376,15 +3488,15 @@ renderRadioField(type, name, label, validate, attributes, options) {
     // Handle the binding syntax
     let bindingDirective = '';
     if (attributes.binding) {
-    if (attributes.binding === 'bind:value' && name) {
-        bindingDirective = ` bind:value="${name}"\n`;
-    } else if (attributes.binding.startsWith('::') && name) {
-        bindingDirective = ` bind:value="${name}"\n`;
-    } else if (attributes.binding && !name) {
-        console.log(`\x1b[31m%s\x1b[0m`, `You cannot set binding value when there is no name attribute defined in ${name} ${type} field.`);
-        return;
+        if (attributes.binding === 'bind:value' && name) {
+            bindingDirective = ` bind:value="${name}"\n`;
+        } else if (attributes.binding.startsWith('::') && name) {
+            bindingDirective = ` bind:value="${name}"\n`;
+        } else if (attributes.binding && !name) {
+            console.log(`\x1b[31m%s\x1b[0m`, `You cannot set binding value when there is no name attribute defined in ${name} ${type} field.`);
+            return;
+        }
     }
-  }
 
     // Define attributes for the radio inputs
     let id = attributes.id || name;
@@ -3392,7 +3504,8 @@ renderRadioField(type, name, label, validate, attributes, options) {
     // Construct additional attributes dynamically
     let additionalAttrs = '';
     for (const [key, value] of Object.entries(attributes)) {
-      if (key !== 'id' && key !== 'class' && key !== 'dependsOn' && key !== 'dependents' && value !== undefined) {            if (key.startsWith('on')) {
+        if (key !== 'id' && key !== 'class' && key !== 'dependsOn' && key !== 'dependents' && value !== undefined) {
+            if (key.startsWith('on')) {
                 // Handle event attributes
                 const eventValue = value.endsWith('()') ? value.slice(0, -2) : value;
                 additionalAttrs += `  @${key.replace(/^on/, '')}={${eventValue}}\n`;
@@ -3410,10 +3523,28 @@ renderRadioField(type, name, label, validate, attributes, options) {
 
     let inputClass = attributes.class || this.inputClass;
 
+    // Determine which option should be selected
+    let selectedValue = null;
+    
+    // Check options array for selected: true
+    if (options && options.length) {
+        const selectedOption = options.find(opt => opt.selected === true);
+        console.log("RADIO DEBUG - selectedOption:", selectedOption);
+        if (selectedOption) {
+            selectedValue = selectedOption.value;
+            console.log("RADIO DEBUG - selectedValue:", selectedValue);
+        }
+    }
+
     // Construct radio button HTML based on options
     let optionsHTML = '';
     if (options && options.length) {
         optionsHTML = options.map((option) => {
+            // Check if this option should be selected
+            const isSelected = (option.value === selectedValue);
+            console.log("RADIO DEBUG - option:", option.value, "isSelected:", isSelected);
+            const checkedAttr = isSelected ? ' checked' : '';
+            
             return `
             <div>
                 <input 
@@ -3425,6 +3556,7 @@ renderRadioField(type, name, label, validate, attributes, options) {
                     ${attributes.id ? `id="${id}-${option.value}"` : `id="${id}-${option.value}"`}
                     class="${inputClass}"
                     ${validationAttrs}
+                    ${checkedAttr}
                 />
                 <label 
                     for="${attributes.id ? `${id}-${option.value}` : `${id}-${option.value}`}">
@@ -3459,13 +3591,13 @@ renderRadioField(type, name, label, validate, attributes, options) {
         return `\n${match}\n`;
     }).replace(/\n\s*\n/g, '\n'); // Remove extra blank lines
 
-    //return formattedHtml;
-    this.formMarkUp +=formattedHtml;
+    this.formMarkUp += formattedHtml;
 }
 
-
 renderCheckboxField(type, name, label, validate, attributes, options) {
   // Define valid validation attributes for checkbox fields
+  console.log("CHECKBOX DEBUG - options:", JSON.stringify(options, null, 2));
+
   const checkboxValidationAttributes = ['required'];
 
   // Construct validation attributes
@@ -3485,12 +3617,12 @@ renderCheckboxField(type, name, label, validate, attributes, options) {
   // Handle the binding syntax
   let bindingDirective = '';
   if (attributes.binding) {
-  if (attributes.binding === 'bind:checked') {
-    bindingDirective = ` bind:checked="${name}"\n`;
-  } else if (attributes.binding.startsWith('::')) {
-    bindingDirective = ` bind:checked="${name}"\n`;
+    if (attributes.binding === 'bind:checked') {
+      bindingDirective = ` bind:checked="${name}"\n`;
+    } else if (attributes.binding.startsWith('::')) {
+      bindingDirective = ` bind:checked="${name}"\n`;
+    }
   }
- }
 
   // Define attributes for the checkbox inputs
   let id = attributes.id || name;
@@ -3498,7 +3630,8 @@ renderCheckboxField(type, name, label, validate, attributes, options) {
   // Handle additional attributes
   let additionalAttrs = '';
   for (const [key, value] of Object.entries(attributes)) {
-  if (key !== 'id' && key !== 'class' && key !== 'dependsOn' && key !== 'dependents' && value !== undefined) {      if (key.startsWith('on')) {
+    if (key !== 'id' && key !== 'class' && key !== 'dependsOn' && key !== 'dependents' && value !== undefined) {
+      if (key.startsWith('on')) {
         // Handle event attributes
         const eventValue = value.endsWith('()') ? value.slice(0, -2) : value;
         additionalAttrs += `  @${key.replace(/^on/, '')}={${eventValue}}\n`;
@@ -3514,30 +3647,45 @@ renderCheckboxField(type, name, label, validate, attributes, options) {
     }
   }
 
-
   let inputClass; 
   if ('class' in attributes) {
     inputClass = attributes.class; 
   } else {
-        inputClass = this.inputClass; 
+    inputClass = this.inputClass; 
+  }
+
+  // Determine which options should be checked
+  const checkedValues = [];
+  if (options && options.length) {
+    options.forEach(option => {
+      if (option.checked === true || option.selected === true) {
+        checkedValues.push(option.value);
+      }
+    });
   }
+  console.log("CHECKBOX DEBUG - checkedValues:", checkedValues);
 
   // Construct checkbox HTML based on options
   let optionsHTML = '';
   if (Array.isArray(options)) {
     optionsHTML = options.map((option) => {
       const optionId = `${id}-${option.value}`;
+      const isChecked = checkedValues.includes(option.value);
+      console.log("CHECKBOX DEBUG - option:", option.value, "isChecked:", isChecked);
+      const checkedAttr = isChecked ? ' checked' : '';
+      
       return `
         <div>
           <input 
-          type="checkbox" 
-          name="${name}" 
-          value="${option.value}"${bindingDirective} ${additionalAttrs}
+            type="checkbox" 
+            name="${name}" 
+            value="${option.value}"${bindingDirective} ${additionalAttrs}
             ${attributes.id ? `id="${optionId}"` : `id="${optionId}"`}
             class="${inputClass}"
+            ${checkedAttr}
           />
           <label 
-          for="${optionId}">
+            for="${optionId}">
             ${option.label}
           </label>
         </div>
@@ -3570,8 +3718,7 @@ renderCheckboxField(type, name, label, validate, attributes, options) {
     return `\n${match}\n`;
   }).replace(/\n\s*\n/g, '\n'); // Remove extra blank lines
 
-  //return formattedHtml;
-  this.formMarkUp +=formattedHtml;
+  this.formMarkUp += formattedHtml;
 }
 
 
@@ -3579,239 +3726,240 @@ renderCheckboxField(type, name, label, validate, attributes, options) {
 /* DYNAMIC SINGLE SELECT BLOCK */
 
 // Function to render the dynamic select field and update based on user selection
-renderDynamicSingleSelectField(type, name, label, validate, attributes, options) {
-  
-// Step 1: Transform the data into an array of objects
-const mainCategoryOptions = options.flat().map(item => {
-  // Check if any option has selected: true
-  const selected = item.options.some(option => option.selected === true);
-
-  // Create a transformed object
-  return {
-    value: item.id,
-    label: item.label,
-    ...(selected && { selected: true }) // Conditionally add selected: true
-  };
-});
-
-const subCategoriesOptions=options;
-const mode='dynamicSingleSelect';
-this.renderSingleSelectField(type, name, label, validate, attributes, mainCategoryOptions, subCategoriesOptions, mode);
+renderDynamicSingleSelectField(type, name, label, validate, attributes, options, subCategoriesOptions) {
+
+    // Step 1: Transform the data into an array of objects
+    const mainCategoryOptions = options.map(item => {
+      // CRITICAL GUARD FIX: Check for item.options existence to prevent crash
+      const selected = item.options
+        ? item.options.some(option => option.selected === true)
+        : item.selected === true;
+
+      // Create a transformed object
+      return {
+        value: item.value,
+        label: item.label,
+        ...(selected && { selected: true })
+      };
+    });
 
-}
+    const mode = 'dynamicSingleSelect';
+   
+    // Pass the main options and the nested sub categories options to the single select renderer
+    this.renderSingleSelectField(type, name, label, validate, attributes, mainCategoryOptions, subCategoriesOptions, mode);
+  }
+ 
 
 
 renderSingleSelectField(type, name, label, validate, attributes, options, subCategoriesOptions, mode) {
 
-    console.log("Within renderSingleSelectField");
-    // Define valid validation attributes for select fields
-    const selectValidationAttributes = ['required'];
+  // Define valid validation attributes for select fields
+  const selectValidationAttributes = ['required'];
 
-    // Construct validation attributes
-    let validationAttrs = '';
-    // Store original required state for the main select
-    let originalRequired = false; // <--- This variable tracks if the main select was originally required
-    if (validate) {
-        Object.entries(validate).forEach(([key, value]) => {
-            if (selectValidationAttributes.includes(key)) {
-                if (key === 'required') {
-                    validationAttrs += `${key} `;
-                    originalRequired = true; // Mark that it was originally required
-                }
-            } else {
-                console.warn(`\x1b[31mUnsupported validation attribute '${key}' for field '${name}' of type '${type}'.\x1b[0m`);
-            }
-        });
-    }
-
-    // Handle the binding syntax
-    let bindingDirective = '';
-    if (attributes.binding) {
-        if (typeof attributes.binding === 'string' && attributes.binding.startsWith('::')) {
-            bindingDirective = ` bind:value="${name}" `;
+  // Construct validation attributes
+  let validationAttrs = '';
+  // Store original required state for the main select
+  let originalRequired = false; // <--- This variable tracks if the main select was originally required
+  if (validate) {
+    Object.entries(validate).forEach(([key, value]) => {
+      if (selectValidationAttributes.includes(key)) {
+        if (key === 'required') {
+          validationAttrs += `${key} `;
+          originalRequired = true; // Mark that it was originally required
         }
+      } else {
+        // Removed console.warn
+      }
+    });
+  }
+
+  // Handle the binding syntax
+  let bindingDirective = '';
+  if (attributes.binding) {
+    if (typeof attributes.binding === 'string' && attributes.binding.startsWith('::')) {
+      bindingDirective = ` bind:value="${name}" `;
     }
+  }
 
-    // Define attributes for the select field
-    let id = attributes.id || name;
-    let dimensionAttrs = ''; // No dimension attributes applicable for select fields
+  // Define attributes for the select field
+  let id = attributes.id || name;
+  let dimensionAttrs = ''; // No dimension attributes applicable for select fields
 
-    // Handle additional attributes
-    let additionalAttrs = '';
-    for (const [key, value] of Object.entries(attributes)) {
-        if (key !== 'id' && key !== 'class' && key !== 'dependsOn' && key !== 'dependents' && value !== undefined) {
-            if (key.startsWith('on')) {
-                // Handle event attributes
-                const eventValue = value.endsWith('()') ? value.slice(0, -2) : value;
-                additionalAttrs += `  @${key.replace(/^on/, '')}={${eventValue}}\n`;
-            } else {
-                // Handle boolean attributes
-                if (value === true) {
-                    additionalAttrs += `  ${key.replace(/_/g, '-')}\n`;
-                } else if (value !== false) {
-                    // Convert underscores to hyphens and set the attribute
-                    additionalAttrs += `  ${key.replace(/_/g, '-')}="${value}"\n`;
-                }
-            }
+  // Handle additional attributes
+  let additionalAttrs = '';
+  for (const [key, value] of Object.entries(attributes)) {
+    if (key !== 'id' && key !== 'class' && key !== 'dependsOn' && key !== 'dependents' && value !== undefined) {
+      if (key.startsWith('on')) {
+        // Handle event attributes
+        const eventValue = value.endsWith('()') ? value.slice(0, -2) : value;
+        additionalAttrs += ` @${key.replace(/^on/, '')}={${eventValue}}\n`;
+      } else {
+        // Handle boolean attributes
+        if (value === true) {
+          additionalAttrs += ` ${key.replace(/_/g, '-')}\n`;
+        } else if (value !== false) {
+          // Convert underscores to hyphens and set the attribute
+          additionalAttrs += ` ${key.replace(/_/g, '-')}="${value}"\n`;
         }
+      }
     }
+  }
 
-    // Construct select options HTML based on options
-    let selectHTML = '';
-    if (Array.isArray(options)) {
-        // Add a default option
-        selectHTML += `
-        <option value="">Choose an option</option>
-        `;
+  // Construct select options HTML based on options
+  let selectHTML = '';
+  if (Array.isArray(options)) {
+    // Add a default option
+    selectHTML += `
+    <option value="">Choose an option</option>
+    `;
 
-        // Add the provided options
-        selectHTML += options.map((option) => {
-            const isSelected = option.selected ? ' selected' : '';
-            return `
-            <option value="${option.value}"${isSelected}>${option.label}</option>
-            `;
-        }).join('');
-    }
+    // Add the provided options
+    selectHTML += options.map((option) => {
+      const isSelected = option.selected ? ' selected' : '';
+      return `
+      <option value="${option.value}"${isSelected}>${option.label}</option>
+      `;
+    }).join('');
+  }
 
-    let inputClass = attributes.class || this.inputClass;
+  let inputClass = attributes.class || this.inputClass;
 
-    // Remove `onchange` from HTML; it will be handled by JavaScript event listeners
-    const onchangeAttr = ''; // <--- Ensure this is an empty string
+  // Remove `onchange` from HTML; it will be handled by JavaScript event listeners
+  const onchangeAttr = ''; // <--- Ensure this is an empty string
 
-    let labelDisplay;
-    let rawLabel;
+  let labelDisplay;
+  let rawLabel;
 
-    if (mode === 'dynamicSingleSelect' && subCategoriesOptions) {
-        if (label.includes('-')) {
-            const [mainCategoryLabel] = label.split('-');
-            labelDisplay = mainCategoryLabel;
-            rawLabel = label;
-        } else {
-            labelDisplay = label;
-            rawLabel = label;
-        }
+  if (mode === 'dynamicSingleSelect' && subCategoriesOptions) {
+    if (label.includes('-')) {
+      const [mainCategoryLabel] = label.split('-');
+      labelDisplay = mainCategoryLabel;
+      rawLabel = label;
     } else {
-        labelDisplay = label;
+      labelDisplay = label;
+      rawLabel = label;
     }
+  } else {
+    labelDisplay = label;
+  }
 
-
-    // Construct the final HTML string for the main select
-    let formHTML = `
-    <fieldset class="${this.selectGroupClass}" id="${id + '-block'}">
-        <legend>${labelDisplay}
-            ${validationAttrs.includes('required') && this.formSettings.requiredFieldIndicator ? this.formSettings.asteriskHtml : ''}
-        </legend>
-        <label for="${id}"> Select ${labelDisplay}
-        <select name="${name}"
-            ${bindingDirective}
-            ${dimensionAttrs}
-            id="${id}"
-            class="${inputClass}"
-            ${additionalAttrs}
-            ${validationAttrs}
-            data-original-required="${originalRequired}" >
-            ${selectHTML}
-        </select>
-    </fieldset>
+  // Construct the final HTML string for the main select
+  let formHTML = `
+  <fieldset class="${this.selectGroupClass}" id="${id + '-block'}">
+    <legend>${labelDisplay}
+      ${validationAttrs.includes('required') && this.formSettings.requiredFieldIndicator ? this.formSettings.asteriskHtml : ''}
+    </legend>
+    <label for="${id}"> Select ${labelDisplay}
+    <select name="${name}"
+      ${bindingDirective}
+      ${dimensionAttrs}
+      id="${id}"
+      class="${inputClass}"
+      ${additionalAttrs}
+      ${validationAttrs}
+      data-original-required="${originalRequired}" >
+      ${selectHTML}
+    </select>
+  </fieldset>
 `.replace(/^\s*\n/gm, '').trim();
 
+  // FIXED: Apply vertical layout to the <select> element and its children
+  // Only split on actual attribute boundaries, not within attribute values
+  let formattedHtml = formHTML.replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g, (match, p1, p2) => {
+    // Use regex to match complete attribute="value" pairs
+    const attributes = p1.match(/(\w+(?:-\w+)*=("[^"]*"|'[^']*'|\w+)|[^=\s]+(?!\s*=))/g) || [];
+    const formattedAttributes = attributes.map(attr => ` ${attr}`).join('\n');
+    return `<select\n${formattedAttributes}\n>\n${p2.trim()}\n</select>`;
+  });
 
-    // Apply vertical layout to the <select> element and its children
-    let formattedHtml = formHTML.replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g, (match, p1, p2) => {
-        // Reformat attributes into a vertical layout
-        const attributes = p1.trim().split(/\s+/).map(attr => `  ${attr}`).join('\n');
-        return `<select\n${attributes}\n>\n${p2.trim()}\n</select>`;
-    });
+  // Ensure the <fieldset> block starts on a new line and remove extra blank lines
+  formattedHtml = formattedHtml.replace(/(<fieldset\s+[^>]*>)/g, (match) => {
+    // Ensure <fieldset> starts on a new line
+    return `\n${match}\n`;
+  }).replace(/\n\s*\n/g, '\n'); // Remove extra blank lines
 
-    // Ensure the <fieldset> block starts on a new line and remove extra blank lines
-    formattedHtml = formattedHtml.replace(/(<fieldset\s+[^>]*>)/g, (match) => {
-        // Ensure <fieldset> starts on a new line
-        return `\n${match}\n`;
-    }).replace(/\n\s*\n/g, '\n'); // Remove extra blank lines
+  this.formMarkUp+=formattedHtml;
 
-    this.formMarkUp+=formattedHtml;
 
+  /* dynamicSingleSelect - Sub-Category Generation Block */
 
-    /* dynamicSingleSelect - Sub-Category Generation Block */
+  if (mode && mode ==='dynamicSingleSelect' && subCategoriesOptions) {
 
-    if (mode && mode ==='dynamicSingleSelect' && subCategoriesOptions) {
+    const categoryId = attributes.id || name; // This is the ID of the main dynamic select ('languages')
 
-        const categoryId = attributes.id || name; // This is the ID of the main dynamic select ('languages')
+    subCategoriesOptions.forEach((subCategory) => {
+      const { id, label, options: subOptions } = subCategory; // Renamed 'options' to 'subOptions' to avoid conflict
 
-        subCategoriesOptions.forEach(subCategory => {
-            const { id, label, options: subOptions } = subCategory; // Renamed 'options' to 'subOptions' to avoid conflict
+      // IMPORTANT: Sub-category selects are *initially hidden*
+      // Therefore, by default, they are NOT required until they are revealed.
+      let isSubCategoryRequired = false; // Default to false as they are hidden
+      const subCategoryValidationAttrs = ''; // No direct 'required' in HTML initially
 
-            // IMPORTANT: Sub-category selects are *initially hidden*
-            // Therefore, by default, they are NOT required until they are revealed.
-            // If your schema later allows specific sub-categories to be inherently required
-            // when shown, you'd need to extract that validation from your schema here.
-            // For now, they are considered non-required until JavaScript makes them required.
-            let isSubCategoryRequired = false; // Default to false as they are hidden
-            const subCategoryValidationAttrs = ''; // No direct 'required' in HTML initially
+      // Build the select options HTML for sub-category
+      const subSelectHTML = subOptions.map(option => {
+        const isSelected = option.selected ? ' selected' : '';
+        return `
+          <option value="${option.value}"${isSelected}>${option.label}</option>
+        `;
+      }).join('');
 
-            // Build the select options HTML for sub-category
-            const subSelectHTML = subOptions.map(option => {
-                const isSelected = option.selected ? ' selected' : '';
-                return `
-                    <option value="${option.value}"${isSelected}>${option.label}</option>
-                `;
-            }).join('');
 
+      let subCategoryLabel;
+      
+      if (rawLabel.includes('-')) {
+        subCategoryLabel = rawLabel.split('-')?.[1] + ' Options';
+      } else {
+        subCategoryLabel = 'options';
+      }
 
-            let subCategoryLabel;
-            console.log('Label (rawLabel for sub-category):', rawLabel); // Debug log
+      let optionsLabel;
+      if (subCategoryLabel !== 'options') {
+        optionsLabel = rawLabel.split('-')?.[1] + ' Option';
+      } else {
+        optionsLabel = subCategoryLabel;
+      }
 
-            if (rawLabel.includes('-')) {
-                subCategoryLabel = rawLabel.split('-')?.[1] + ' Options';
-            } else {
-                subCategoryLabel = 'options';
-            }
 
-            let optionsLabel;
-            if (subCategoryLabel !== 'options') {
-                optionsLabel = rawLabel.split('-')?.[1] + ' Option';
-            } else {
-                optionsLabel  = subCategoryLabel;
-            }
+      // Create the HTML for the sub-category fieldset and select elements
+      // Added a class based on the main select's ID for easy grouping/selection
+      let subFormHTML = `
+        <fieldset class="${this.selectGroupClass} ${categoryId}" id="${id}" style="display: none;"> <legend>${label} ${subCategoryLabel} ${isSubCategoryRequired && this.formSettings.requiredFieldIndicator ? this.formSettings.asteriskHtml : ''}
+          </legend>
+          <label for="${id}"> Select ${label} ${optionsLabel}
+          </label>
+          <select name="${id}"
+            ${bindingDirective}
+            ${dimensionAttrs}
+            id="${id}"
+            class="${inputClass}"
+            ${additionalAttrs}
+            ${subCategoryValidationAttrs}
+            data-original-required="${isSubCategoryRequired}" >
+            <option value="">Choose an option</option>
+            ${subSelectHTML}
+          </select>
+        </fieldset>
+      `.replace(/^\s*\n/gm, '').trim();
+
+      // FIXED: Apply the same corrected formatting to sub-category selects
+      subFormHTML = subFormHTML.replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g, (match, p1, p2) => {
+        const attributes = p1.match(/(\w+(?:-\w+)*=("[^"]*"|'[^']*'|\w+)|[^=\s]+(?!\s*=))/g) || [];
+        const formattedAttributes = attributes.map(attr => ` ${attr}`).join('\n');
+        return `<select\n${formattedAttributes}\n>\n${p2.trim()}\n</select>`;
+      });
 
+      // Ensure the <fieldset> block starts on a new line and remove extra blank lines
+      subFormHTML = subFormHTML.replace(/(<fieldset\s+[^>]*>)/g, (match) => {
+        return `\n${match}\n`;
+      }).replace(/\n\s*\n/g, '\n');
 
-            // Create the HTML for the sub-category fieldset and select elements
-            // Added a class based on the main select's ID for easy grouping/selection
-            let subFormHTML = `
-                <fieldset class="${this.selectGroupClass} ${categoryId}-subcategory-group" id="${id}-options" style="display: none;"> <legend>${label} ${subCategoryLabel} ${isSubCategoryRequired && this.formSettings.requiredFieldIndicator ? this.formSettings.asteriskHtml : ''}
-                    </legend>
-                    <label for="${id}"> Select ${label} ${optionsLabel}
-                    </label>
-                    <select name="${id}"
-                        ${bindingDirective}
-                        ${dimensionAttrs}
-                        id="${id}"
-                        class="${inputClass}"
-                        ${additionalAttrs}
-                        ${subCategoryValidationAttrs}
-                        data-original-required="${isSubCategoryRequired}" >
-                        <option value="">Choose an option</option>
-                        ${subSelectHTML}
-                    </select>
-                </fieldset>
-            `.replace(/^\s*\n/gm, '').trim();
-
-            // Apply vertical layout to the <select> element and its children
-            subFormHTML = subFormHTML.replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g, (match, p1, p2) => {
-                const attributes = p1.trim().split(/\s+/).map(attr => `  ${attr}`).join('\n');
-                return `<select\n${attributes}\n>\n${p2.trim()}\n</select>`;
-            });
+      // Append the generated HTML to formMarkUp
+      this.formMarkUp += subFormHTML;
+    });
+  }
+}
 
-            // Ensure the <fieldset> block starts on a new line and remove extra blank lines
-            subFormHTML = subFormHTML.replace(/(<fieldset\s+[^>]*>)/g, (match) => {
-                return `\n${match}\n`;
-            }).replace(/\n\s*\n/g, '\n');
 
-            // Append the generated HTML to formMarkUp
-            this.formMarkUp += subFormHTML;
-        });
-    }
-}
 
 renderMultipleSelectField(type, name, label, validate, attributes, options) {
   // Define valid validation attributes for multiple select fields
@@ -4011,6 +4159,24 @@ renderRangeField(type, name, label, validate, attributes) {
 }
 
 
+renderRecaptchaField(type, name, label, validate, attributes = {}) {
+    const fieldId = attributes.id || name;
+    const siteKey = attributes.siteKey;
+    // Check for the presence of a siteKey
+    if (!siteKey) {
+        console.error('reCAPTCHA siteKey is missing from the field attributes.');
+        return ''; // Do not render if the key is missing
+    }
+
+    return `
+        <div class="${this.divClass}" id="${fieldId}-block">
+            <label for="${fieldId}">${label}</label>
+            <div class="g-recaptcha" id="${fieldId}" data-sitekey="${siteKey}"></div>
+        </div>
+    `;
+}
+
+
 
 /*
 renderRangeField(type, name, label, validate, attributes) {
@@ -4192,14 +4358,3 @@ const spinner = `<div id="formiqueSpinner" style="display: flex; align-items: ce
 
 
 export default Formique;
-
-
-
-
-
-
-
-
-
-
-