From 65afc01fe59d04636c193137cd88da62f1af13f7 Mon Sep 17 00:00:00 2001
From: Dan <danpros@live.com>
Date: Tue, 18 Mar 2025 15:27:21 +0700
Subject: [PATCH] Add info properties

---
 system/admin/views/add-content.html.php       |  6 ++-
 system/admin/views/add-page.html.php          |  6 ++-
 system/admin/views/custom-field-page.html.php | 49 ++++++++++---------
 system/admin/views/custom-field-post.html.php | 49 ++++++++++---------
 .../admin/views/custom-field-profile.html.php | 49 ++++++++++---------
 .../admin/views/custom-field-subpage.html.php | 49 ++++++++++---------
 system/admin/views/custom-field.html.php      | 48 +++++++++---------
 system/admin/views/edit-content.html.php      | 10 ++--
 system/admin/views/edit-page.html.php         | 10 ++--
 system/resources/js/form.builder.js           | 28 +++++++----
 10 files changed, 171 insertions(+), 133 deletions(-)

diff --git a/system/admin/views/add-content.html.php b/system/admin/views/add-content.html.php
index b2eece1..b8ca1d3 100644
--- a/system/admin/views/add-content.html.php
+++ b/system/admin/views/add-content.html.php
@@ -201,15 +201,16 @@ $( function() {
                                 <?php foreach ($fields as $fld):?>
                                     <?php if ($fld->type == 'text'):?>
                                     <label><?php echo $fld->label;?></label>
-                                    <input type="<?php echo $fld->type;?>" class="form-control text" id="<?php echo $fld->name;?>" name="<?php echo $fld->name;?>" value=""/>
+                                    <input type="<?php echo $fld->type;?>" placeholder="<?php echo $fld->info;?>" class="form-control text" id="<?php echo $fld->name;?>" name="<?php echo $fld->name;?>" value=""/>
                                     <br>
                                     <?php elseif ($fld->type == 'textarea'):?>
                                     <label><?php echo $fld->label;?></label>
-                                    <textarea class="form-control text" id="<?php echo $fld->name;?>" rows="3" name="<?php echo $fld->name;?>"></textarea>
+                                    <textarea class="form-control text" id="<?php echo $fld->name;?>" rows="3" placeholder="<?php echo $fld->info;?>" name="<?php echo $fld->name;?>"></textarea>
                                     <br>
                                     <?php elseif ($fld->type == 'checkbox'):?>
                                     <input type="<?php echo $fld->type;?>" id="<?php echo $fld->name;?>" name="<?php echo $fld->name;?>" >
                                     <label for="<?php echo $fld->name;?>"><?php echo $fld->label;?></label>
+									<span class="d-block mt-1"><small><em><?php echo $fld->info;?></em></small></span>
                                     <br>
                                     <?php elseif ($fld->type == 'select'):?>
                                     <label for="<?php echo $fld->name;?>"><?php echo $fld->label;?></label>
@@ -218,6 +219,7 @@ $( function() {
                                         <option value="<?php echo $val->value;?>" ><?php echo $val->label;?></option>
                                     <?php endforeach;?>
                                     </select>
+									<span class="d-block mt-1"><small><em><?php echo $fld->info;?></em></small></span>
                                     <?php endif;?>        
                                 <?php endforeach;?>
                             </div>
diff --git a/system/admin/views/add-page.html.php b/system/admin/views/add-page.html.php
index 4bb209b..c080667 100644
--- a/system/admin/views/add-page.html.php
+++ b/system/admin/views/add-page.html.php
@@ -69,15 +69,16 @@ if ($type == 'is_page') {
                             <?php foreach ($fields as $fld):?>
                                 <?php if ($fld->type == 'text'):?>
                                 <label><?php echo $fld->label;?></label>
-                                <input type="<?php echo $fld->type;?>" class="form-control text" id="<?php echo $fld->name;?>" name="<?php echo $fld->name;?>" value=""/>
+                                <input type="<?php echo $fld->type;?>" placeholder="<?php echo $fld->info;?>" class="form-control text" id="<?php echo $fld->name;?>" name="<?php echo $fld->name;?>" value=""/>
                                 <br>
                                 <?php elseif ($fld->type == 'textarea'):?>
                                 <label><?php echo $fld->label;?></label>
-                                <textarea class="form-control text" id="<?php echo $fld->name;?>" rows="3" name="<?php echo $fld->name;?>"></textarea>
+                                <textarea class="form-control text" id="<?php echo $fld->name;?>" rows="3" placeholder="<?php echo $fld->info;?>" name="<?php echo $fld->name;?>"></textarea>
                                 <br>
                                 <?php elseif ($fld->type == 'checkbox'):?>
                                 <input type="<?php echo $fld->type;?>" id="<?php echo $fld->name;?>" name="<?php echo $fld->name;?>" >
                                 <label for="<?php echo $fld->name;?>"><?php echo $fld->label;?></label>
+                                <span class="d-block mt-1"><small><em><?php echo $fld->info;?></em></small></span>
                                 <br>
                                 <?php elseif ($fld->type == 'select'):?>
                                 <label for="<?php echo $fld->name;?>"><?php echo $fld->label;?></label>
@@ -86,6 +87,7 @@ if ($type == 'is_page') {
                                     <option value="<?php echo $val->value;?>" ><?php echo $val->label;?></option>
                                 <?php endforeach;?>
                                 </select>
+                                <span class="d-block mt-1"><small><em><?php echo $fld->info;?></em></small></span>
                                 <?php endif;?>        
                             <?php endforeach;?>
                         </div>
diff --git a/system/admin/views/custom-field-page.html.php b/system/admin/views/custom-field-page.html.php
index 8af5ef9..59a46da 100644
--- a/system/admin/views/custom-field-page.html.php
+++ b/system/admin/views/custom-field-page.html.php
@@ -5,45 +5,50 @@
 $field = array();
 $field_file= 'content/data/field/page.json';
 if (file_exists($field_file)) {
-	$field = file_get_contents($field_file, true);
+    $field = file_get_contents($field_file, true);
 }
 ?>
-  <!-- Preview Section -->
-  <div id="form-preview"></div>  
-  <br><br>
-  <!-- Form Input Section -->
-  <div>
+<!-- Preview Section -->
+<div id="form-preview"></div>  
+<br><br>
+<!-- Form Input Section -->
+<div class="form-group">
     <label for="type">Field Type</label>
+    <br>
     <select id="type">
-      <option value="text">Text</option>
-      <option value="textarea">Textarea</option>
-      <option value="checkbox">Checkbox</option>
-      <option value="select">Select</option>
+        <option value="text">Text</option>
+        <option value="textarea">Textarea</option>
+        <option value="checkbox">Checkbox</option>
+        <option value="select">Select</option>
     </select>
-    <input type="text" id="name" placeholder="Name (ID)">
-    <input type="text" id="label" placeholder="Label">
+    <input type="text" id="name" placeholder="Name (required)">
+    <input type="text" id="label" placeholder="Label (required)">
     <input type="text" id="value" placeholder="Value (optional)">
-	
+    <input type="text" id="info" placeholder="Field Info (optional)">
+
     <button id="add-field" class="btn btn-primary">Add Field</button>
 
     <div id="options-container" style="display: none;">
-      <strong>Options</strong>
-      <div id="option-list"></div>
-      <button id="add-option" class="btn btn-primary">Add Option</button>
+        <strong>Options</strong>
+        <div id="option-list"></div>
+        <button id="add-option" class="btn btn-primary btn-xs">Add Option</button>
     </div>
-  </div>
-  
+</div>
+
 <br><br>
+
 <!-- Form submit Section -->
 <button class="btn btn-primary" id="saveButton"><?php echo i18n('save');?></button>
+
 <br><br>
+
 <!-- JSON Output Section -->
 <details>
-<summary>JSON Output</summary>
-<textarea id="json-output" name="page-field" style="field-sizing: content;" rows="20" class="form-control text" readonly></textarea> 
+    <summary style="padding:10px; margin-bottom:10px; <?php echo ((config('admin.theme') === 'light' || is_null(config('admin.theme'))) ? "background-color: #E4EBF1;" : "background-color: rgba(255,255,255,.1);");?>">JSON Output</summary>
+    <textarea id="json-output" name="page-field" style="field-sizing: content;" rows="20" class="form-control text" readonly></textarea> 
 </details>
- <br><br>
- 
+
+<br><br>
 <script>
   const fields = <?php print_r($field);?>;
   $("#saveButton").click(function(){
diff --git a/system/admin/views/custom-field-post.html.php b/system/admin/views/custom-field-post.html.php
index f056cac..62bbc14 100644
--- a/system/admin/views/custom-field-post.html.php
+++ b/system/admin/views/custom-field-post.html.php
@@ -5,45 +5,50 @@
 $field = array();
 $field_file = 'content/data/field/post.json';
 if (file_exists($field_file)) {
-	$field = file_get_contents($field_file, true);
+    $field = file_get_contents($field_file, true);
 }
 ?>
-  <!-- Preview Section -->
-  <div id="form-preview"></div>  
-  <br><br>
-  <!-- Form Input Section -->
-  <div>
+<!-- Preview Section -->
+<div id="form-preview"></div>  
+<br><br>
+<!-- Form Input Section -->
+<div class="form-group">
     <label for="type">Field Type</label>
+    <br>
     <select id="type">
-      <option value="text">Text</option>
-      <option value="textarea">Textarea</option>
-      <option value="checkbox">Checkbox</option>
-      <option value="select">Select</option>
+        <option value="text">Text</option>
+        <option value="textarea">Textarea</option>
+        <option value="checkbox">Checkbox</option>
+        <option value="select">Select</option>
     </select>
-    <input type="text" id="name" placeholder="Name (ID)">
-    <input type="text" id="label" placeholder="Label">
+    <input type="text" id="name" placeholder="Name (required)">
+    <input type="text" id="label" placeholder="Label (required)">
     <input type="text" id="value" placeholder="Value (optional)">
-	
+    <input type="text" id="info" placeholder="Field Info (optional)">
+
     <button id="add-field" class="btn btn-primary">Add Field</button>
 
     <div id="options-container" style="display: none;">
-      <strong>Options</strong>
-      <div id="option-list"></div>
-      <button id="add-option" class="btn btn-primary">Add Option</button>
+        <strong>Options</strong>
+        <div id="option-list"></div>
+        <button id="add-option" class="btn btn-primary btn-xs">Add Option</button>
     </div>
-  </div>
-  
+</div>
+
 <br><br>
+
 <!-- Form submit Section -->
 <button class="btn btn-primary" id="saveButton"><?php echo i18n('save');?></button>
+
 <br><br>
+
 <!-- JSON Output Section -->
 <details>
-<summary>JSON Output</summary>
-<textarea id="json-output" name="page-field" style="field-sizing: content;" rows="20" class="form-control text" readonly></textarea> 
+    <summary style="padding:10px; margin-bottom:10px; <?php echo ((config('admin.theme') === 'light' || is_null(config('admin.theme'))) ? "background-color: #E4EBF1;" : "background-color: rgba(255,255,255,.1);");?>">JSON Output</summary>
+    <textarea id="json-output" name="page-field" style="field-sizing: content;" rows="20" class="form-control text" readonly></textarea> 
 </details>
- <br><br>
- 
+
+<br><br>
 <script>
   const fields = <?php print_r($field);?>;
   $("#saveButton").click(function(){
diff --git a/system/admin/views/custom-field-profile.html.php b/system/admin/views/custom-field-profile.html.php
index e5007c8..86901a8 100644
--- a/system/admin/views/custom-field-profile.html.php
+++ b/system/admin/views/custom-field-profile.html.php
@@ -5,45 +5,50 @@
 $field = array();
 $field_file = 'content/data/field/profile.json';
 if (file_exists($field_file)) {
-	$field = file_get_contents($field_file, true);
+    $field = file_get_contents($field_file, true);
 }
 ?>
-  <!-- Preview Section -->
-  <div id="form-preview"></div>  
-  <br><br>
-  <!-- Form Input Section -->
-  <div>
+<!-- Preview Section -->
+<div id="form-preview"></div>  
+<br><br>
+<!-- Form Input Section -->
+<div class="form-group">
     <label for="type">Field Type</label>
+    <br>
     <select id="type">
-      <option value="text">Text</option>
-      <option value="textarea">Textarea</option>
-      <option value="checkbox">Checkbox</option>
-      <option value="select">Select</option>
+        <option value="text">Text</option>
+        <option value="textarea">Textarea</option>
+        <option value="checkbox">Checkbox</option>
+        <option value="select">Select</option>
     </select>
-    <input type="text" id="name" placeholder="Name (ID)">
-    <input type="text" id="label" placeholder="Label">
+    <input type="text" id="name" placeholder="Name (required)">
+    <input type="text" id="label" placeholder="Label (required)">
     <input type="text" id="value" placeholder="Value (optional)">
-	
+    <input type="text" id="info" placeholder="Field Info (optional)">
+
     <button id="add-field" class="btn btn-primary">Add Field</button>
 
     <div id="options-container" style="display: none;">
-      <strong>Options</strong>
-      <div id="option-list"></div>
-      <button id="add-option" class="btn btn-primary">Add Option</button>
+        <strong>Options</strong>
+        <div id="option-list"></div>
+        <button id="add-option" class="btn btn-primary btn-xs">Add Option</button>
     </div>
-  </div>
-  
+</div>
+
 <br><br>
+
 <!-- Form submit Section -->
 <button class="btn btn-primary" id="saveButton"><?php echo i18n('save');?></button>
+
 <br><br>
+
 <!-- JSON Output Section -->
 <details>
-<summary>JSON Output</summary>
-<textarea id="json-output" name="page-field" style="field-sizing: content;" rows="20" class="form-control text" readonly></textarea> 
+    <summary style="padding:10px; margin-bottom:10px; <?php echo ((config('admin.theme') === 'light' || is_null(config('admin.theme'))) ? "background-color: #E4EBF1;" : "background-color: rgba(255,255,255,.1);");?>">JSON Output</summary>
+    <textarea id="json-output" name="page-field" style="field-sizing: content;" rows="20" class="form-control text" readonly></textarea> 
 </details>
- <br><br>
- 
+
+<br><br>
 <script>
   const fields = <?php print_r($field);?>;
   $("#saveButton").click(function(){
diff --git a/system/admin/views/custom-field-subpage.html.php b/system/admin/views/custom-field-subpage.html.php
index bfdebac..380e77f 100644
--- a/system/admin/views/custom-field-subpage.html.php
+++ b/system/admin/views/custom-field-subpage.html.php
@@ -5,45 +5,50 @@
 $field = array();
 $field_file = 'content/data/field/subpage.json';
 if (file_exists($field_file)) {
-	$field = file_get_contents($field_file, true);
+    $field = file_get_contents($field_file, true);
 }
 ?>
-  <!-- Preview Section -->
-  <div id="form-preview"></div>  
-  <br><br>
-  <!-- Form Input Section -->
-  <div>
+<!-- Preview Section -->
+<div id="form-preview"></div>  
+<br><br>
+<!-- Form Input Section -->
+<div class="form-group">
     <label for="type">Field Type</label>
+    <br>
     <select id="type">
-      <option value="text">Text</option>
-      <option value="textarea">Textarea</option>
-      <option value="checkbox">Checkbox</option>
-      <option value="select">Select</option>
+        <option value="text">Text</option>
+        <option value="textarea">Textarea</option>
+        <option value="checkbox">Checkbox</option>
+        <option value="select">Select</option>
     </select>
-    <input type="text" id="name" placeholder="Name (ID)">
-    <input type="text" id="label" placeholder="Label">
+    <input type="text" id="name" placeholder="Name (required)">
+    <input type="text" id="label" placeholder="Label (required)">
     <input type="text" id="value" placeholder="Value (optional)">
-	
+    <input type="text" id="info" placeholder="Field Info (optional)">
+
     <button id="add-field" class="btn btn-primary">Add Field</button>
 
     <div id="options-container" style="display: none;">
-      <strong>Options</strong>
-      <div id="option-list"></div>
-      <button id="add-option" class="btn btn-primary">Add Option</button>
+        <strong>Options</strong>
+        <div id="option-list"></div>
+        <button id="add-option" class="btn btn-primary btn-xs">Add Option</button>
     </div>
-  </div>
-  
+</div>
+
 <br><br>
+
 <!-- Form submit Section -->
 <button class="btn btn-primary" id="saveButton"><?php echo i18n('save');?></button>
+
 <br><br>
+
 <!-- JSON Output Section -->
 <details>
-<summary>JSON Output</summary>
-<textarea id="json-output" name="page-field" style="field-sizing: content;" rows="20" class="form-control text" readonly></textarea> 
+    <summary style="padding:10px; margin-bottom:10px; <?php echo ((config('admin.theme') === 'light' || is_null(config('admin.theme'))) ? "background-color: #E4EBF1;" : "background-color: rgba(255,255,255,.1);");?>">JSON Output</summary>
+    <textarea id="json-output" name="page-field" style="field-sizing: content;" rows="20" class="form-control text" readonly></textarea> 
 </details>
- <br><br>
- 
+
+<br><br>
 <script>
   const fields = <?php print_r($field);?>;
   $("#saveButton").click(function(){
diff --git a/system/admin/views/custom-field.html.php b/system/admin/views/custom-field.html.php
index 88cd3ca..744d776 100644
--- a/system/admin/views/custom-field.html.php
+++ b/system/admin/views/custom-field.html.php
@@ -9,28 +9,28 @@
 </p>
 
 <table class="table post-list">
-	<thead>
-	<tr class="head">
-		<th>Type</th>
-		<th><?php echo i18n('Operations');?></th>
-	</tr>
-	</thead>
-	<tbody>
-		<tr>
-			<td>Post</td>
-			<td><a class="btn btn-primary btn-xs" href="<?php echo site_url();?>admin/field/post"><?php echo i18n('edit');?></a></td>
-		</tr>
-		<tr>
-			<td>Page</td>
-			<td><a class="btn btn-primary btn-xs" href="<?php echo site_url();?>admin/field/page"><?php echo i18n('edit');?></a></td>
-		</tr>
-		<tr>
-			<td>Subpage</td>
-			<td><a class="btn btn-primary btn-xs" href="<?php echo site_url();?>admin/field/subpage"><?php echo i18n('edit');?></a></td>
-		</tr>
-		<tr>
-			<td>Profile</td>
-			<td><a class="btn btn-primary btn-xs" href="<?php echo site_url();?>admin/field/profile"><?php echo i18n('edit');?></a></td>
-		</tr>
-	</tbody>
+    <thead>
+    <tr class="head">
+        <th>Type</th>
+        <th><?php echo i18n('Operations');?></th>
+    </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>Post</td>
+            <td><a class="btn btn-primary btn-xs" href="<?php echo site_url();?>admin/field/post"><?php echo i18n('edit');?></a></td>
+        </tr>
+        <tr>
+            <td>Page</td>
+            <td><a class="btn btn-primary btn-xs" href="<?php echo site_url();?>admin/field/page"><?php echo i18n('edit');?></a></td>
+        </tr>
+        <tr>
+            <td>Subpage</td>
+            <td><a class="btn btn-primary btn-xs" href="<?php echo site_url();?>admin/field/subpage"><?php echo i18n('edit');?></a></td>
+        </tr>
+        <tr>
+            <td>Profile</td>
+            <td><a class="btn btn-primary btn-xs" href="<?php echo site_url();?>admin/field/profile"><?php echo i18n('edit');?></a></td>
+        </tr>
+    </tbody>
 </table>
\ No newline at end of file
diff --git a/system/admin/views/edit-content.html.php b/system/admin/views/edit-content.html.php
index 7dbfd64..a5e1b3e 100644
--- a/system/admin/views/edit-content.html.php
+++ b/system/admin/views/edit-content.html.php
@@ -250,23 +250,25 @@ $( function() {
                                 <?php foreach ($fields as $fld):?>
                                     <?php if ($fld->type == 'text'):?>
                                     <label><?php echo $fld->label;?></label>
-                                    <input type="<?php echo $fld->type;?>" class="form-control text" id="<?php echo $fld->name;?>" name="<?php echo $fld->name;?>" value="<?php echo get_field($fld->name, $content);?>"/>
+                                    <input type="<?php echo $fld->type;?>" placeholder="<?php echo $fld->info;?>" class="form-control text" id="<?php echo $fld->name;?>" name="<?php echo $fld->name;?>" value=""/>
                                     <br>
                                     <?php elseif ($fld->type == 'textarea'):?>
                                     <label><?php echo $fld->label;?></label>
-                                    <textarea class="form-control text" id="<?php echo $fld->name;?>" rows="3" name="<?php echo $fld->name;?>"><?php echo get_field($fld->name, $content);?></textarea>
+                                    <textarea class="form-control text" id="<?php echo $fld->name;?>" rows="3" placeholder="<?php echo $fld->info;?>" name="<?php echo $fld->name;?>"></textarea>
                                     <br>
                                     <?php elseif ($fld->type == 'checkbox'):?>
-                                    <input type="<?php echo $fld->type;?>" id="<?php echo $fld->name;?>" name="<?php echo $fld->name;?>" <?php echo get_field($fld->name, $content);?>>
+                                    <input type="<?php echo $fld->type;?>" id="<?php echo $fld->name;?>" name="<?php echo $fld->name;?>" >
                                     <label for="<?php echo $fld->name;?>"><?php echo $fld->label;?></label>
+									<span class="d-block mt-1"><small><em><?php echo $fld->info;?></em></small></span>
                                     <br>
                                     <?php elseif ($fld->type == 'select'):?>
                                     <label for="<?php echo $fld->name;?>"><?php echo $fld->label;?></label>
                                     <select id="<?php echo $fld->name;?>" class="form-control" name="<?php echo $fld->name;?>">
                                     <?php foreach ($fld->options as $val):?>
-                                        <option value="<?php echo $val->value;?>" <?php if (get_field($fld->name, $content) === $val->value) { echo 'selected="selected"';} ?>><?php echo $val->label;?></option>
+                                        <option value="<?php echo $val->value;?>" ><?php echo $val->label;?></option>
                                     <?php endforeach;?>
                                     </select>
+									<span class="d-block mt-1"><small><em><?php echo $fld->info;?></em></small></span>
                                     <?php endif;?>        
                                 <?php endforeach;?>
                             </div>
diff --git a/system/admin/views/edit-page.html.php b/system/admin/views/edit-page.html.php
index 14eff8d..b7f90ba 100644
--- a/system/admin/views/edit-page.html.php
+++ b/system/admin/views/edit-page.html.php
@@ -181,23 +181,25 @@ if ($type == 'is_page' || $type == 'is_frontpage') {
                             <?php foreach ($fields as $fld):?>
                                 <?php if ($fld->type == 'text'):?>
                                 <label><?php echo $fld->label;?></label>
-                                <input type="<?php echo $fld->type;?>" class="form-control text" id="<?php echo $fld->name;?>" name="<?php echo $fld->name;?>" value="<?php echo get_field($fld->name, $content);?>"/>
+                                <input type="<?php echo $fld->type;?>" placeholder="<?php echo $fld->info;?>" class="form-control text" id="<?php echo $fld->name;?>" name="<?php echo $fld->name;?>" value=""/>
                                 <br>
                                 <?php elseif ($fld->type == 'textarea'):?>
                                 <label><?php echo $fld->label;?></label>
-                                <textarea class="form-control text" id="<?php echo $fld->name;?>" rows="3" name="<?php echo $fld->name;?>"><?php echo get_field($fld->name, $content);?></textarea>
+                                <textarea class="form-control text" id="<?php echo $fld->name;?>" rows="3" placeholder="<?php echo $fld->info;?>" name="<?php echo $fld->name;?>"></textarea>
                                 <br>
                                 <?php elseif ($fld->type == 'checkbox'):?>
-                                <input type="<?php echo $fld->type;?>" id="<?php echo $fld->name;?>" name="<?php echo $fld->name;?>" <?php echo get_field($fld->name, $content);?>>
+                                <input type="<?php echo $fld->type;?>" id="<?php echo $fld->name;?>" name="<?php echo $fld->name;?>" >
                                 <label for="<?php echo $fld->name;?>"><?php echo $fld->label;?></label>
+                                <span class="d-block mt-1"><small><em><?php echo $fld->info;?></em></small></span>
                                 <br>
                                 <?php elseif ($fld->type == 'select'):?>
                                 <label for="<?php echo $fld->name;?>"><?php echo $fld->label;?></label>
                                 <select id="<?php echo $fld->name;?>" class="form-control" name="<?php echo $fld->name;?>">
                                 <?php foreach ($fld->options as $val):?>
-                                    <option value="<?php echo $val->value;?>" <?php if (get_field($fld->name, $content) === $val->value) { echo 'selected="selected"';} ?>><?php echo $val->label;?></option>
+                                    <option value="<?php echo $val->value;?>" ><?php echo $val->label;?></option>
                                 <?php endforeach;?>
                                 </select>
+                                <span class="d-block mt-1"><small><em><?php echo $fld->info;?></em></small></span>
                                 <?php endif;?>        
                             <?php endforeach;?>
                         </div>
diff --git a/system/resources/js/form.builder.js b/system/resources/js/form.builder.js
index 4a7e4b5..e2ca66d 100644
--- a/system/resources/js/form.builder.js
+++ b/system/resources/js/form.builder.js
@@ -10,6 +10,7 @@ const typeEl = document.getElementById('type');
 const nameEl = document.getElementById('name');
 const labelEl = document.getElementById('label');
 const valueEl = document.getElementById('value');
+const infoEl = document.getElementById('info'); // New element for 'info'
 const optionsContainerEl = document.getElementById('options-container');
 const optionListEl = document.getElementById('option-list');
 const addOptionBtn = document.getElementById('add-option');
@@ -22,6 +23,7 @@ typeEl.addEventListener('change', () => {
     nameEl.value = '';
     labelEl.value = '';
     valueEl.value = '';
+    infoEl.value = ''; // Reset 'info' field
     optionsContainerEl.style.display = typeEl.value === 'select' ? 'block' : 'none';
     optionListEl.innerHTML = '';
     addFieldBtn.textContent = "Add Field";
@@ -34,12 +36,12 @@ addOptionBtn.addEventListener('click', () => {
 
     const labelInput = document.createElement('input');
     labelInput.type = 'text';
-    labelInput.placeholder = 'Option Label';
+    labelInput.placeholder = 'Label (required)';
     labelInput.classList.add('option-label');
 
     const valueInput = document.createElement('input');
     valueInput.type = 'text';
-    valueInput.placeholder = 'Option Value';
+    valueInput.placeholder = 'Value (required)';
     valueInput.classList.add('option-value');
     valueInput.addEventListener('input', () => {
         valueInput.value = valueInput.value.replace(/\s+/g, ''); // Remove spaces in real-time
@@ -62,7 +64,8 @@ addFieldBtn.addEventListener('click', () => {
         type: typeEl.value,
         name: nameEl.value.trim().replace(/\s+/g, ''), // Remove spaces
         label: labelEl.value.trim(),
-        value: valueEl.value.trim()
+        value: valueEl.value.trim(),
+        info: infoEl.value.trim() // Add the 'info' property
     };
 
     if (field.type === 'select') {
@@ -116,6 +119,7 @@ function editField(index) {
     nameEl.value = field.name.replace(/\s+/g, ''); // Remove spaces
     labelEl.value = field.label;
     valueEl.value = field.value || '';
+    infoEl.value = field.info || ''; // Populate 'info' input field
 
     if (field.type === 'select') {
         optionsContainerEl.style.display = 'block';
@@ -126,13 +130,13 @@ function editField(index) {
 
             const labelInput = document.createElement('input');
             labelInput.type = 'text';
-            labelInput.placeholder = 'Option Label';
+            labelInput.placeholder = 'Label (required)';
             labelInput.value = opt.label;
             labelInput.classList.add('option-label');
 
             const valueInput = document.createElement('input');
             valueInput.type = 'text';
-            valueInput.placeholder = 'Option Value';
+            valueInput.placeholder = 'Value (required)';
             valueInput.value = opt.value.replace(/\s+/g, ''); // Remove spaces
             valueInput.classList.add('option-value');
             valueInput.addEventListener('input', () => {
@@ -171,13 +175,13 @@ function updatePreviewAndOutput() {
         wrapper.setAttribute('class', 'field-preview form-group');
 
         const label = document.createElement('label');
-        label.innerHTML = f.label + " <br><small>Field ID:</small> <code>"+ f.name + "</code>";
+        label.innerHTML = `${f.label} <br><small>Field ID:</small> <code>${f.name}</code>`;
         wrapper.appendChild(label);
 
         let el;
         if (f.type === 'textarea') {
             el = document.createElement('textarea');
-            el.placeholder = f.label;
+            el.placeholder = f.info;
             el.setAttribute('class', 'form-control');
             el.value = f.value;
         } else if (f.type === 'checkbox') {
@@ -204,13 +208,19 @@ function updatePreviewAndOutput() {
             el = document.createElement('input');
             el.type = f.type;
             el.value = f.value;
-            el.placeholder = f.label;
+            el.placeholder = f.info;
             el.setAttribute('class', 'form-control');
         }
 
         if (el) {
             wrapper.appendChild(el);
         }
+        
+        if (f.type === 'checkbox' || f.type === 'select') {        
+            const tip = document.createElement('span');
+            tip.innerHTML = `<small class="d-block mt-1"><em>${f.info}</em></small>`;
+            wrapper.appendChild(tip);
+        }
 
         const editBtn = document.createElement('button');
         editBtn.textContent = 'Edit';
@@ -231,13 +241,13 @@ function updatePreviewAndOutput() {
     nameEl.value = '';
     labelEl.value = '';
     valueEl.value = '';
+    infoEl.value = ''; // Reset 'info' field
     optionsContainerEl.style.display = 'none';
     optionListEl.innerHTML = '';
     typeEl.value = "text";
     addFieldBtn.textContent = "Add Field";
 }
 
-
 document.addEventListener('DOMContentLoaded', () => {
     updatePreviewAndOutput();