Sortable Database Tables
---
https://datatables.net/

Fitlerable Data tables
---
https://www.jqueryscript.net/table/sorting-filtering-pagination-fancytable.html

Country List Array:

<?php 

 $Countries = [
   "AF" => "Afghanistan", 
   "AL" => "Albania", 
   "DZ" => "Algeria", 
   "AS" => "American Samoa", 
   "AD" => "Andorra", 
   "AO" => "Angola", 
   "AI" => "Anguilla", 
   "AQ" => "Antarctica", 
   "AG" => "Antigua and Barbuda", 
   "AR" => "Argentina", 
   "AM" => "Armenia", 
   "AW" => "Aruba", 
   "AU" => "Australia", 
   "AT" => "Austria", 
   "AZ" => "Azerbaijan", 
   "BS" => "Bahamas", 
   "BH" => "Bahrain", 
   "BD" => "Bangladesh", 
   "BB" => "Barbados", 
   "BY" => "Belarus", 
   "BE" => "Belgium", 
   "BZ" => "Belize", 
   "BJ" => "Benin", 
   "BM" => "Bermuda", 
   "BT" => "Bhutan", 
   "BO" => "Bolivia", 
   "BA" => "Bosnia and Herzegovina", 
   "BW" => "Botswana", 
   "BV" => "Bouvet Island", 
   "BR" => "Brazil", 
   "IO" => "British Indian Ocean Territory", 
   "BN" => "Brunei Darussalam", 
   "BG" => "Bulgaria", 
   "BF" => "Burkina Faso", 
   "BI" => "Burundi", 
   "KH" => "Cambodia", 
   "CM" => "Cameroon", 
   "CA" => "Canada", 
   "CV" => "Cape Verde", 
   "KY" => "Cayman Islands", 
   "CF" => "Central African Republic", 
   "TD" => "Chad", 
   "CL" => "Chile", 
   "CN" => "China", 
   "CX" => "Christmas Island", 
   "CC" => "Cocos (Keeling) Islands", 
   "CO" => "Colombia", 
   "KM" => "Comoros", 
   "CG" => "Congo", 
   "CD" => "Congo, the Democratic Republic of the", 
   "CK" => "Cook Islands", 
   "CR" => "Costa Rica", 
   "CI" => "Cote D'Ivoire", 
   "HR" => "Croatia", 
   "CU" => "Cuba", 
   "CY" => "Cyprus", 
   "CZ" => "Czech Republic", 
   "DK" => "Denmark", 
   "DJ" => "Djibouti", 
   "DM" => "Dominica", 
   "DO" => "Dominican Republic", 
   "EC" => "Ecuador", 
   "EG" => "Egypt", 
   "SV" => "El Salvador", 
   "GQ" => "Equatorial Guinea", 
   "ER" => "Eritrea", 
   "EE" => "Estonia", 
   "ET" => "Ethiopia", 
   "FK" => "Falkland Islands (Malvinas)", 
   "FO" => "Faroe Islands", 
   "FJ" => "Fiji", 
   "FI" => "Finland", 
   "FR" => "France", 
   "GF" => "French Guiana", 
   "PF" => "French Polynesia", 
   "TF" => "French Southern Territories", 
   "GA" => "Gabon", 
   "GM" => "Gambia", 
   "GE" => "Georgia", 
   "DE" => "Germany", 
   "GH" => "Ghana", 
   "GI" => "Gibraltar", 
   "GR" => "Greece", 
   "GL" => "Greenland", 
   "GD" => "Grenada", 
   "GP" => "Guadeloupe", 
   "GU" => "Guam", 
   "GT" => "Guatemala", 
   "GN" => "Guinea", 
   "GW" => "Guinea-Bissau", 
   "GY" => "Guyana", 
   "HT" => "Haiti", 
   "HM" => "Heard Island and Mcdonald Islands", 
   "VA" => "Holy See (Vatican City State)", 
   "HN" => "Honduras", 
   "HK" => "Hong Kong", 
   "HU" => "Hungary", 
   "IS" => "Iceland", 
   "IN" => "India", 
   "ID" => "Indonesia", 
   "IR" => "Iran, Islamic Republic of", 
   "IQ" => "Iraq", 
   "IE" => "Ireland", 
   "IL" => "Israel", 
   "IT" => "Italy", 
   "JM" => "Jamaica", 
   "JP" => "Japan", 
   "JO" => "Jordan", 
   "KZ" => "Kazakhstan", 
   "KE" => "Kenya", 
   "KI" => "Kiribati", 
   "KP" => "Korea, Democratic People's Republic of", 
   "KR" => "Korea, Republic of", 
   "KW" => "Kuwait", 
   "KG" => "Kyrgyzstan", 
   "LA" => "Lao People's Democratic Republic", 
   "LV" => "Latvia", 
   "LB" => "Lebanon", 
   "LS" => "Lesotho", 
   "LR" => "Liberia", 
   "LY" => "Libyan Arab Jamahiriya", 
   "LI" => "Liechtenstein", 
   "LT" => "Lithuania", 
   "LU" => "Luxembourg", 
   "MO" => "Macao", 
   "MK" => "Macedonia, the Former Yugoslav Republic of", 
   "MG" => "Madagascar", 
   "MW" => "Malawi", 
   "MY" => "Malaysia", 
   "MV" => "Maldives", 
   "ML" => "Mali", 
   "MT" => "Malta", 
   "MH" => "Marshall Islands", 
   "MQ" => "Martinique", 
   "MR" => "Mauritania", 
   "MU" => "Mauritius", 
   "YT" => "Mayotte", 
   "MX" => "Mexico", 
   "FM" => "Micronesia, Federated States of", 
   "MD" => "Moldova, Republic of", 
   "MC" => "Monaco", 
   "MN" => "Mongolia", 
   "MS" => "Montserrat", 
   "MA" => "Morocco", 
   "MZ" => "Mozambique", 
   "MM" => "Myanmar", 
   "NA" => "Namibia", 
   "NR" => "Nauru", 
   "NP" => "Nepal", 
   "NL" => "Netherlands", 
   "AN" => "Netherlands Antilles", 
   "NC" => "New Caledonia", 
   "NZ" => "New Zealand", 
   "NI" => "Nicaragua", 
   "NE" => "Niger", 
   "NG" => "Nigeria", 
   "NU" => "Niue", 
   "NF" => "Norfolk Island", 
   "MP" => "Northern Mariana Islands", 
   "NO" => "Norway", 
   "OM" => "Oman", 
   "PK" => "Pakistan", 
   "PW" => "Palau", 
   "PS" => "Palestinian Territory, Occupied", 
   "PA" => "Panama", 
   "PG" => "Papua New Guinea", 
   "PY" => "Paraguay", 
   "PE" => "Peru", 
   "PH" => "Philippines", 
   "PN" => "Pitcairn", 
   "PL" => "Poland", 
   "PT" => "Portugal", 
   "PR" => "Puerto Rico", 
   "QA" => "Qatar", 
   "RE" => "Reunion", 
   "RO" => "Romania", 
   "RU" => "Russian Federation", 
   "RW" => "Rwanda", 
   "SH" => "Saint Helena", 
   "KN" => "Saint Kitts and Nevis", 
   "LC" => "Saint Lucia", 
   "PM" => "Saint Pierre and Miquelon", 
   "VC" => "Saint Vincent and the Grenadines", 
   "WS" => "Samoa", 
   "SM" => "San Marino", 
   "ST" => "Sao Tome and Principe", 
   "SA" => "Saudi Arabia", 
   "SN" => "Senegal", 
   "CS" => "Serbia and Montenegro", 
   "SC" => "Seychelles", 
   "SL" => "Sierra Leone", 
   "SG" => "Singapore", 
   "SK" => "Slovakia", 
   "SI" => "Slovenia", 
   "SB" => "Solomon Islands", 
   "SO" => "Somalia", 
   "ZA" => "South Africa", 
   "GS" => "South Georgia and the South Sandwich Islands", 
   "ES" => "Spain", 
   "LK" => "Sri Lanka", 
   "SD" => "Sudan", 
   "SR" => "Suriname", 
   "SJ" => "Svalbard and Jan Mayen", 
   "SZ" => "Swaziland", 
   "SE" => "Sweden", 
   "CH" => "Switzerland", 
   "SY" => "Syrian Arab Republic", 
   "TW" => "Taiwan, Province of China", 
   "TJ" => "Tajikistan", 
   "TZ" => "Tanzania, United Republic of", 
   "TH" => "Thailand", 
   "TL" => "Timor-Leste", 
   "TG" => "Togo", 
   "TK" => "Tokelau", 
   "TO" => "Tonga", 
   "TT" => "Trinidad and Tobago", 
   "TN" => "Tunisia", 
   "TR" => "Turkey", 
   "TM" => "Turkmenistan", 
   "TC" => "Turks and Caicos Islands", 
   "TV" => "Tuvalu", 
   "UG" => "Uganda", 
   "UA" => "Ukraine", 
   "AE" => "United Arab Emirates", 
   "GB" => "United Kingdom", 
   "US" => "United States", 
   "UM" => "United States Minor Outlying Islands", 
   "UY" => "Uruguay", 
   "UZ" => "Uzbekistan", 
   "VU" => "Vanuatu", 
   "VE" => "Venezuela", 
   "VN" => "Viet Nam", 
   "VG" => "Virgin Islands, British", 
   "VI" => "Virgin Islands, U.s.", 
   "WF" => "Wallis and Futuna", 
   "EH" => "Western Sahara", 
   "YE" => "Yemen", 
   "ZM" => "Zambia", 
   "ZW" => "Zimbabwe" 
]; 
 
// sample fomr json array
const templates = {
   1: [ {"type": "header", "subtype": "h3", "label": "Contact Information", "access": false },
  { "type": "text", "required": true, "label": "First Name", //"description": "Write your first name here", "placeholder": "type your first name",
    "className": "form-control", "name": "first-name", "access": false, "subtype": "text" },
  {
    "type": "text",
    "required": true,
    "label": "Last Name",
    //"description": "Write your last name here",
    "placeholder": "type your last name",
    "className": "form-control",
    "name": "last-name",
    "access": false,
    "subtype": "text"
  },
  {
    "type": "text",
    "subtype": "email",
    "required": true,
    "label": "Email",
    //"description": "Write your email address here",
    "placeholder": "type your email address",
    "className": "form-control",
    "name": "email",
    "access": false
  },
  {
    "type": "text",
    "subtype": "tel",
    "required": false,
    "label": "Phone Number",
    //"description": "Write your phone number here",
    "placeholder": "type your phone number",
    "className": "form-control",
    "name": "phone-number",
    "access": false
  },
  {
    "type": "header",
    "subtype": "h3",
    "label": "Business or Personal Details",
    "access": false
  },
  {
    "type": "text",
    "required": false,
    "label": "Company Name",
    "className": "form-control",
    "name": "company-name",
    "access": false,
    "subtype": "text"
  },
  {
    "type": "text",
    "required": false,
    "label": "Job Title",
    "className": "form-control",
    "name": "job-title",
    "access": false,
    "subtype": "text"
  },
  {
    "type": "text",
    "required": false,
    "label": "Website",
    "className": "form-control",
    "name": "text-1693828833052-0",
    "access": false,
    "subtype": "text"
  },
  {
    "type": "header",
    "subtype": "h3",
    "label": "Interest or Intent",
    "access": false
  },
  {
    "type": "select",
    "required": false,
    "label": "Interested In",
    "className": "form-control",
    "name": "interested-in",
    "access": false,
    "multiple": false,
    "values": [
      {
        "label": "None",
        "value": "none",
        "selected": true
      },
      {
        "label": "Option 1",
        "value": "option-1",
        "selected": false
      },
      {
        "label": "Option 2",
        "value": "option-2",
        "selected": false
      },
      {
        "label": "Option 3",
        "value": "option-3",
        "selected": false
      }
    ]
  },
  {
    "type": "number",
    "required": false,
    "label": "Budget",
    "className": "form-control",
    "name": "budget",
    "access": true
  },
  {
    "type": "select",
    "required": false,
    "label": "Purchase Timeframe",
    "className": "form-control",
    "name": "purchase-timeframe",
    "access": false,
    "multiple": false,
    "values": [
      {
        "label": "None",
        "value": "none",
        "selected": true
      },
      {
        "label": "Daily",
        "value": "daily",
        "selected": false
      },
      {
        "label": "Weekly",
        "value": "weekly",
        "selected": false
      },
      {
        "label": "Bi-weekly",
        "value": "biweekly",
        "selected": false
      },
      {
        "label": "Monthly",
        "value": "monthly",
        "selected": false
      },
      {
        "label": "Yearly",
        "value": "yearly",
        "selected": false
      }
    ]
  },
  {
    "type": "header",
    "subtype": "h3",
    "label": "Geographic Information",
    "access": false
  },
  {
    "type": "select",
    "required": false,
    "label": "Country",
    "className": "form-control",
    "name": "country",
    "access": false,
    "multiple": false,
    "values": [
      {
        "label": "Select Country",
        "value": "none",
        "selected": true
      },
      {
        "label": "USA",
        "value": "usa",
        "selected": false
      },
      {
        "label": "United Kingdom",
        "value": "gb",
        "selected": false
      },
      {
        "label": "Brazil",
        "value": "br",
        "selected": false
      },
      {
        "label": "United Arab Emirates",
        "value": "ae",
        "selected": false
      },
      {
        "label": "Zimbabwe",
        "value": "zw",
        "selected": false
      }
    ]
  },
  {
    "type": "header",
    "subtype": "h3",
    "label": "Optional",
    "access": false
  },
  {
    "type": "select",
    "required": false,
    "label": "How did you hear about us?",
    "className": "form-control",
    "name": "hear-about-us",
    "access": false,
    "multiple": false,
    "values": [
      {
        "label": "Internet",
        "value": "internet",
        "selected": true
      },
      {
        "label": "Newspaper",
        "value": "newspaper",
        "selected": false
      },
      {
        "label": "Media",
        "value": "Media",
        "selected": false
      },
      {
        "label": "Ads",
        "value": "Ads",
        "selected": false
      },
      {
        "label": "Friends",
        "value": "friends",
        "selected": false
      },
      {
        "label": "Family",
        "value": "family",
        "selected": false
      },
      {
        "label": "Ohters",
        "value": "others",
        "selected": false
      }
    ]
  },
  {
    "type": "textarea",
    "required": false,
    "label": "Comments/Questions",
    "className": "form-control",
    "name": "comments-questions",
    "access": false,
    "subtype": "textarea",
    "rows": 5
  },
  {
    "type": "button",
    "label": "Submit",
    "subtype": "button",
    "className": "btn-primary btn",
    "name": "submit",
    "access": false,
    "style": "primary"
  }
]
};


 
 
// All Fields On Form Start

[
  {
    "type": "header",
    "subtype": "h1",
    "label": "Header",
    "className": "my-header"
  },
  {
    "type": "paragraph",
    "subtype": "p",
    "label": "Paragraph",
    "className": "my-para"
  },
  {
    "type": "text",
    "required": true,
    "label": "Text Field",
    "description": "Text Field",
    "placeholder": "Text Field",
    "className": "form-control",
    "name": "text-1724666358484-0",
    "value": "Text Field",
    "subtype": "text",
    "maxlength": 100
  },
  {
    "type": "text",
    "subtype": "password",
    "required": true,
    "label": "Password Field",
    "description": "Password Field",
    "placeholder": "Password Field",
    "className": "form-control",
    "name": "text-1724666376784-0",
    "value": "Password Field",
    "maxlength": 100
  },
  {
    "type": "text",
    "subtype": "email",
    "required": true,
    "label": "Email Field",
    "description": "Email Field",
    "placeholder": "Email Field",
    "className": "form-control",
    "name": "text-1724666400368-0",
    "value": "Email Field",
    "maxlength": 100
  },
  {
    "type": "text",
    "subtype": "color",
    "required": true,
    "label": "Color Field",
    "description": "Color Field",
    "placeholder": "Color Field",
    "className": "form-control",
    "name": "text-1724666415053-0",
    "value": "#f1f2f3"
  },
  {
    "type": "text",
    "subtype": "tel",
    "required": true,
    "label": "Telephone Field",
    "description": "Telephone Field",
    "placeholder": "Telephone Field",
    "className": "form-control",
    "name": "text-1724666428936-0",
    "value": "Telephone Field",
    "maxlength": 20
  },
  {
    "type": "textarea",
    "required": true,
    "label": "Text Area",
    "description": "Text Area",
    "placeholder": "Text Area",
    "className": "form-control",
    "name": "textarea-1724666442603-0",
    "value": "Text Area",
    "subtype": "textarea",
    "maxlength": 1000,
    "rows": 10
  },
  {
    "type": "select",
    "required": true,
    "label": "Select",
    "description": "Select",
    "placeholder": "Select",
    "className": "form-control",
    "name": "select-1724666571307-0",
    "values": [
      {
        "label": "Option 1",
        "value": "option-1",
        "selected": true
      },
      {
        "label": "Option 2",
        "value": "option-2",
        "selected": false
      },
      {
        "label": "Option 3",
        "value": "option-3",
        "selected": false
      }
    ]
  },
  {
    "type": "radio-group",
    "required": true,
    "label": "Radio Group",
    "description": "Radio Group",
    "className": "my-radio",
    "name": "radio-group-1724666587475-0",
    "values": [
      {
        "label": "Option 1",
        "value": "option-1",
        "selected": true
      },
      {
        "label": "Option 2",
        "value": "option-2",
        "selected": false
      },
      {
        "label": "Option 3",
        "value": "option-3",
        "selected": false
      }
    ]
  },
  {
    "type": "checkbox-group",
    "required": true,
    "label": "Checkbox Group",
    "description": "Checkbox Group",
    "className": "my-check",
    "name": "checkbox-group-1724666607393-0",
    "values": [
      {
        "label": "Option 1",
        "value": "option-1",
        "selected": true
      },
      {
        "label": "Option 2",
        "value": "option-2",
        "selected": false
      }
    ]
  },
  {
    "type": "date",
    "required": true,
    "label": "Date Field",
    "description": "Date Field",
    "placeholder": "Date Field",
    "className": "form-control",
    "name": "date-1724666637011-0",
    "value": "2024-08-26",
    "subtype": "date"
  },
  {
    "type": "number",
    "required": true,
    "label": "Number",
    "description": "Number",
    "placeholder": "Number",
    "className": "form-control",
    "name": "number-1724666676379-0",
    "value": "Number",
    "subtype": "number",
    "min": 1,
    "max": 10,
    "step": 1
  },
  {
    "type": "file",
    "required": true,
    "label": "File Upload",
    "description": "File Upload",
    "placeholder": "File Upload",
    "className": "form-control",
    "name": "file-1724666698279-0"
  },
  {
    "type": "button",
    "subtype": "submit",
    "label": "Submit",
    "className": "btn-primary btn btn-lg",
    "name": "button-1724666713813-0",
    "value": "Submit",
    "style": "primary"
  }
]

// All Fields On Form End