From c6af8b97683675f02a734107201057fc614c3536 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Tue, 17 Mar 2026 10:39:36 -0400
Subject: [PATCH] Bug 42118: Update various admin pages to use grid layout for
 forms - Part 2

This patch updates several more administration templates with new markup
and CSS for layout forms using CSS grids.

To test, apply the patch rebuild the staff interface CSS.

Check the following pages, confirming that the "New" and
"Edit" versions of the form look correct in each case:

- Administration -> Item search fields
- Administration -> OAI sets
  * Updated OAI set mappings form to add maxlength attributes to field
    and subfield inputs.
- Administration -> OAI repositories
- Administration -> SMS cellular providers
- Administration -> SMTP servers

Sponsored-by: Athens County Public Libraries
Signed-off-by: Felicie <felicie.thiery@biblibre.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
---
 .../admin-items-search-field-form.inc         |  59 ++++--
 .../en/modules/admin/items_search_field.tt    |   2 +-
 .../prog/en/modules/admin/oai_servers.tt      |  68 +++++--
 .../prog/en/modules/admin/oai_set_mappings.tt |   4 +-
 .../prog/en/modules/admin/oai_sets.tt         |  61 +++---
 .../prog/en/modules/admin/sms_providers.tt    |  24 ++-
 .../prog/en/modules/admin/smtp_servers.tt     | 181 ++++++++++++------
 7 files changed, 263 insertions(+), 136 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/admin-items-search-field-form.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/admin-items-search-field-form.inc
index 835fb918e6..cfe265e5f0 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/admin-items-search-field-form.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/admin-items-search-field-form.inc
@@ -1,35 +1,58 @@
 [% PROCESS 'html_helpers.inc' %]
-<ol>
-    <li>
-        [% IF field %]
+
+<div class="fg-row">
+    [% IF field %]
+        <div class="fg-label">
             <span class="label">Name: </span>
+        </div>
+        <div class="fg-input">
             [% field.name | html %]
             <input type="hidden" name="name" value="[% field.name | html %]" />
-        [% ELSE %]
+        </div>
+    [% ELSE %]
+        <div class="fg-label">
             <label class="required" for="name">Name: </label>
+        </div>
+        <div class="fg-input">
             <input type="text" name="name" id="name" class="required" required="required" />
-            <span class="required">Required</span>
-        [% END %]
-    </li>
-    <li>
+        </div>
+        <div class="required">Required</div>
+    [% END %]
+</div>
+<div class="fg-row">
+    <div class="fg-label">
         <label class="required" for="label">Label: </label>
+    </div>
+    <div class="fg-input">
         <input type="text" name="label" id="label" value="[% field.label | html %]" class="required" required="required" />
-        <span class="required">Required</span>
-    </li>
-    <li>
+    </div>
+    <div class="required">Required</div>
+</div>
+<div class="fg-row input-sm">
+    <div class="fg-label">
         <label class="required" for="tagfield">MARC field: </label>
+    </div>
+    <div class="fg-input">
         <input type="text" id="tagfield" name="tagfield" maxlength="3" size="3" class="required" pattern="[a-zA-Z0-9]+" required="required" value="[% field.tagfield | html %]" />
-        <span class="required">Required</span>
-    </li>
-    <li>
+    </div>
+    <div class="required">Required</div>
+</div>
+<div class="fg-row input-sm">
+    <div class="fg-label">
         <label for="tagsubfield">MARC subfield: </label>
+    </div>
+    <div class="fg-input">
         <input type="text" id="tagsubfield" name="tagsubfield" pattern="[a-zA-Z0-9]+" maxlength="1" size="1" value="[% field.tagsubfield | html %]" />
-    </li>
-    <li>
+    </div>
+</div>
+<div class="fg-row">
+    <div class="fg-label">
         <label for="authorised_values_category">Authorized value category: </label>
+    </div>
+    <div class="fg-input">
         <select id="authorised_values_category" name="authorised_values_category">
             <option value="">- None -</option>
             [% PROCESS options_for_authorised_value_categories authorised_value_categories => AuthorisedValues.GetCategories( selected => field.authorised_values_category ) %]
         </select>
-    </li>
-</ol>
+    </div>
+</div>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/items_search_field.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/items_search_field.tt
index e6b7622f1d..16438abe41 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/items_search_field.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/items_search_field.tt
@@ -55,7 +55,7 @@
 
     <form action="/cgi-bin/koha/admin/items_search_field.pl" method="POST" id="search_fields">
         [% INCLUDE 'csrf-token.inc' %]
-        <fieldset class="rows">
+        <fieldset class="fg">
             [% INCLUDE 'admin-items-search-field-form.inc' field=field %]
             [% IF (field) %]
                 <input type="hidden" name="op" value="cud-mod" />
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/oai_servers.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/oai_servers.tt
index 8b95879647..168c48c1a8 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/oai_servers.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/oai_servers.tt
@@ -75,47 +75,73 @@
             [% END %]
 
             <input type="hidden" name="op" value="cud-add_validated" />
-            <fieldset class="rows">
-                <ol>
-                    <li
-                        ><label for="name" class="required">Repository name: </label>
+            <fieldset class="fg">
+                <div class="fg-row">
+                    <div class="fg-label">
+                        <label for="servername" class="required">Repository name: </label>
+                    </div>
+                    <div class="fg-input">
                         [% IF server.servername %]
                             <input type="text" name="servername" id="servername" size="65" maxlength="100" value="[% server.servername | html %]" required="required" />
                         [% ELSE %]
                             <input type="text" name="servername" id="servername" class="focus" size="65" maxlength="100" value="[% server.servername | html %]" required="required" />
                         [% END %]
-                        <span class="required">Required</span>
-                    </li>
+                    </div>
+                    <div class="required">Required</div>
+                </div>
 
-                    <li
-                        ><label for="endpoint" class="required">Endpoint: </label> <input type="text" name="endpoint" id="endpoint" size="30" value="[% server.endpoint | html %]" required="required" /> <span class="required">Required</span>
-                    </li>
-                    <li><label for="oai_set">[% I18N.tp('OAI', 'Set:') | html %] </label> <input type="text" name="oai_set" id="oai_set" value="[% server.oai_set | html %]" /> </li>
-                    <li>
+                <div class="fg-row">
+                    <div class="fg-label">
+                        <label for="endpoint" class="required">Endpoint: </label>
+                    </div>
+                    <div class="fg-input">
+                        <input type="text" name="endpoint" id="endpoint" size="30" value="[% server.endpoint | html %]" required="required" />
+                    </div>
+                    <div class="required">Required</div>
+                </div>
+                <div class="fg-row">
+                    <div class="fg-label">
+                        <label for="oai_set">[% I18N.tp('OAI', 'Set:') | html %] </label>
+                    </div>
+                    <div class="fg-input">
+                        <input type="text" name="oai_set" id="oai_set" value="[% server.oai_set | html %]" />
+                    </div>
+                </div>
+                <div class="fg-row">
+                    <div class="fg-label">
                         <label for="dataformat">Data format: </label>
+                    </div>
+                    <div class="fg-input">
                         <select name="dataformat" id="dataformat">
                             <option value="oai_dc">Dublin Core (oai_dc)</option>
                             <option value="marc-xml">Marcxml (marc-xml)</option>
                             <option value="marcxml">Marcxml (marcxml)</option>
                         </select>
-                        <div class="hint">OAI can send records in various formats. Choose one.</div>
-                    </li>
-
-                    <li
-                        ><label for="recordtype">Record type: </label>
+                    </div>
+                    <div class="hint">OAI can send records in various formats. Choose one.</div>
+                </div>
+                <div class="fg-row">
+                    <div class="fg-label">
+                        <label for="recordtype">Record type: </label>
+                    </div>
+                    <div class="fg-input">
                         <select name="recordtype" id="recordtype">
                             <option value="biblio">Bibliographic</option>
                             <option value="authority">Authority</option>
                         </select>
-                    </li>
-                    <li>
+                    </div>
+                </div>
+                <div class="fg-row">
+                    <div class="fg-label">
                         <label for="add_xslt">XSLT file for transforming results: </label>
+                    </div>
+                    <div class="fg-input">
                         <input type="text" name="add_xslt" id="add_xslt" size="100" placeholder="[% xslt_path | html %]" value="[% server.add_xslt | html %]" />
-                    </li>
-                </ol>
+                    </div>
+                </div>
             </fieldset>
 
-            <fieldset class="action"><input type="submit" class="btn btn-primary" value="Save" /> <a class="cancel" href="/cgi-bin/koha/admin/oai_servers.pl">Cancel</a></fieldset>
+            <fieldset class="action"> <input type="submit" class="btn btn-primary" value="Save" /> <a class="cancel" href="/cgi-bin/koha/admin/oai_servers.pl">Cancel</a> </fieldset>
         </form>
     [% END %]
 
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/oai_set_mappings.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/oai_set_mappings.tt
index 526247534b..2b0e1de6d6 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/oai_set_mappings.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/oai_set_mappings.tt
@@ -120,8 +120,8 @@
                                     [% END %]
                                 </select>
                             </td>
-                            <td><input type="text" name="marcfield" size="3" /></td>
-                            <td><input type="text" name="marcsubfield" size="1" /></td>
+                            <td><input type="text" name="marcfield" size="3" maxlength="3" /></td>
+                            <td><input type="text" name="marcsubfield" size="1" maxlength="1" /></td>
                             <td
                                 ><select name="operator">
                                     <option value="equal">is equal to</option>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/oai_sets.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/oai_sets.tt
index b99ecd0866..ea8502ba42 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/oai_sets.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/oai_sets.tt
@@ -66,33 +66,45 @@
                 <input type="hidden" name="op" value="cud-savemod" />
                 <input type="hidden" name="id" value="[% id | html %]" />
             [% END %]
-            <fieldset id="oaidetails" class="rows">
-                <ol>
-                    <li>
+            <fieldset id="oaidetails" class="fg">
+                <div class="fg-row">
+                    <div class="fg-label">
                         <label for="spec" class="required">setSpec: </label>
+                    </div>
+                    <div class="fg-input">
                         [% IF ( spec == "" ) %]
                             <input type="text" id="spec" class="focus required" name="spec" value="[% spec | html %]" required="required" />
                         [% ELSE %]
                             <input type="text" id="spec" name="spec" value="[% spec | html %]" required="required" class="required" />
                         [% END %]
-                        <span class="required">Required</span>
-                    </li>
-                    <li>
+                    </div>
+                    <div class="required">Required</div>
+                </div>
+                <div class="fg-row">
+                    <div class="fg-label">
                         <label for="name" class="required">setName: </label>
+                    </div>
+                    <div class="fg-input">
                         <input type="text" id="name" name="name" value="[% name | html %]" required="required" class="required" />
-                        <span class="required">Required</span>
-                    </li>
-                    [% FOREACH desc IN descriptions %]
-                        <li>
+                    </div>
+                    <div class="required">Required</div>
+                </div>
+                [% FOREACH desc IN descriptions %]
+                    <div class="fg-row">
+                        <div class="fg-label">
                             <label>setDescription: </label>
+                        </div>
+                        <div class="fg-input">
                             <textarea style="vertical-align:middle" rows="2" cols="30" name="description">[% desc.description | html %]</textarea>
-                            <a class="remove_description" href="#"><i class="fa fa-fw fa-trash-can"></i> Remove</a>
-                        </li>
-                    [% END %]
-                    <li id="adddescription"
-                        ><span class="label">&nbsp;</span><a href="#" class="add_description"><i class="fa fa-fw fa-plus"></i> Add description</a></li
-                    >
-                </ol>
+                            <a class="btn btn-link remove_description" href="#"><i class="fa fa-fw fa-trash-can"></i> Remove</a>
+                        </div>
+                    </div>
+                [% END %]
+                <div class="fg-row" id="adddescription">
+                    <div class="fg-text">
+                        <a href="#" class="btn btn-link add_description"><i class="fa fa-fw fa-plus"></i> Add description</a>
+                    </div>
+                </div>
             </fieldset>
             <fieldset class="action"> <input type="submit" class="btn btn-primary" value="Save" /> <a class="cancel" href="/cgi-bin/koha/admin/oai_sets.pl">Cancel</a> </fieldset>
         </form>
@@ -167,20 +179,21 @@
     <script nonce="[% Koha.CSPNonce | $raw %]">
         function newDescField() {
             $("#adddescription").before(
-                "<li><label>" +
+                '<div class="fg-row"><div class="fg-label"><label>' +
                     _("setDescription: ") +
-                    "</label>" +
-                    '<textarea style="vertical-align:middle" rows="2" cols="30" name="description"></textarea>' +
-                    '<a class="remove_description" href="#"><i class="fa fa-fw fa-trash-can"></i>' +
+                    "</label></div>" +
+                    '<div class=\"fg-input\"><textarea style="vertical-align:middle" rows="2" cols="30" name="description"></textarea>' +
+                    '<a class="btn btn-link remove_description" href="#"><i class="fa fa-fw fa-trash-can"></i>' +
                     _(" Remove") +
                     "</a>" +
-                    "</li>"
+                    "</div>" +
+                    "</div>"
             );
         }
 
         function delDescField(minusButton) {
-            var li = minusButton.parent("li");
-            $(li).remove();
+            var line = minusButton.parent().parent();
+            $(line).remove();
         }
 
         $(document).ready(function () {
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/sms_providers.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/sms_providers.tt
index e74442dbe4..ab970c00d3 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/sms_providers.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/sms_providers.tt
@@ -73,22 +73,28 @@
     <div id="sms_add_form">
         <form id="sms_form" action="sms_providers.pl" method="post" class="validated">
             [% INCLUDE 'csrf-token.inc' %]
-            <fieldset class="rows">
+            <fieldset class="fg">
                 <legend>Add an SMS cellular provider</legend>
                 <input type="hidden" id="id" name="id" value="" />
                 <input type="hidden" id="op" name="op" value="cud-add_update" />
-                <ol>
-                    <li>
+                <div class="fg-row">
+                    <div class="fg-label">
                         <label for="name" class="required">Name: </label>
+                    </div>
+                    <div class="fg-input">
                         <input type="text" id="name" name="name" required="required" />
-                        <span class="required">Required</span>
-                    </li>
-                    <li>
+                    </div>
+                    <div class="required">Required</div>
+                </div>
+                <div class="fg-row">
+                    <div class="fg-label">
                         <label for="domain" class="required">Domain: </label>
+                    </div>
+                    <div class="fg-input">
                         <input type="text" id="domain" name="domain" required="required" size="40" />
-                        <span class="required">Required</span>
-                    </li>
-                </ol>
+                    </div>
+                    <div class="required">Required</div>
+                </div>
             </fieldset>
             <fieldset class="action">
                 <input type="submit" id="submit_save" class="btn btn-primary" value="Submit" />
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/smtp_servers.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/smtp_servers.tt
index 424669e242..6d897853dd 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/smtp_servers.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/smtp_servers.tt
@@ -84,62 +84,91 @@
         <form action="/cgi-bin/koha/admin/smtp_servers.pl" id="add" name="add" class="validated" method="post">
             [% INCLUDE 'csrf-token.inc' %]
             <input type="hidden" name="op" value="cud-add" />
-            <fieldset class="rows">
-                <ol>
-                    <li>
+            <fieldset class="fg">
+                <div class="fg-row">
+                    <div class="fg-label">
                         <label for="smtp_name" class="required">Name: </label>
+                    </div>
+                    <div class="fg-input">
                         <input type="text" name="smtp_name" id="smtp_name" size="60" class="required focus" required="required" />
-                        <span class="required">Required</span>
-                    </li>
-                </ol>
-            </fieldset>
-
-            <fieldset class="rows">
-                <ol>
-                    <li>
+                    </div>
+                    <div class="required">Required</div>
+                </div>
+                <div class="fg-row">
+                    <div class="fg-label">
                         <label for="smtp_host" class="required">Host: </label>
+                    </div>
+                    <div class="fg-input">
                         <input type="text" name="smtp_host" id="smtp_host" size="60" class="required" />
-                        <span class="required">Required</span>
-                    </li>
-                    <li>
+                    </div>
+                    <div class="required">Required</div>
+                </div>
+                <div class="fg-row input-sm">
+                    <div class="fg-label">
                         <label for="smtp_port" class="required">Port: </label>
+                    </div>
+                    <div class="fg-input">
                         <input type="text" inputmode="numeric" pattern="[0-9]*" value="25" name="smtp_port" id="smtp_port" size="20" class="required" />
-                        <span class="required">Required</span>
-                    </li>
-                    <li>
+                    </div>
+                    <div class="required">Required</div>
+                </div>
+                <div class="fg-row input-sm">
+                    <div class="fg-label">
                         <label for="smtp_timeout">Timeout (seconds): </label>
+                    </div>
+                    <div class="fg-input">
                         <input type="text" inputmode="numeric" pattern="[0-9]*" value="120" name="smtp_timeout" id="smtp_timeout" size="20" />
-                    </li>
-                    <li>
+                    </div>
+                </div>
+                <div class="fg-row input-sm">
+                    <div class="fg-label">
                         <label for="smtp_ssl_mode">SSL: </label>
+                    </div>
+                    <div class="fg-input">
                         <select name="smtp_ssl_mode" id="smtp_ssl_mode">
                             <option value="disabled" selected="selected">Disabled</option>
                             <option value="ssl">SSL</option>
                             <option value="starttls">STARTTLS</option>
                         </select>
-                    </li>
-                    <li>
+                    </div>
+                </div>
+                <div class="fg-row input-md">
+                    <div class="fg-label">
                         <label for="smtp_user_name">User name: </label>
+                    </div>
+                    <div class="fg-input">
                         <input type="text" name="smtp_user_name" id="smtp_user_name" size="60" autocomplete="off" />
-                    </li>
-                    <li>
+                    </div>
+                </div>
+                <div class="fg-row input-md">
+                    <div class="fg-label">
                         <label for="smtp_password">Password: </label>
+                    </div>
+                    <div class="fg-input">
                         <input type="password" name="smtp_password" id="smtp_password" size="60" autocomplete="off" />
-                    </li>
-                    <li>
+                    </div>
+                </div>
+                <div class="fg-row input-sm">
+                    <div class="fg-label">
                         <label for="smtp_debug_mode">Debug mode: </label>
+                    </div>
+                    <div class="fg-input">
                         <select name="smtp_debug_mode" id="smtp_debug_mode">
                             <option value="1">Enabled</option>
                             <option value="0" selected="selected">Disabled</option>
                         </select>
-                        <span class="hint">Enables additional debug output in the logs</span>
-                    </li>
-                    <li>
+                    </div>
+                    <div class="hint">Enables additional debug output in the logs</div>
+                </div>
+                <div class="fg-row input-checkbox">
+                    <div class="fg-label">
                         <label for="smtp_default">Default server: </label>
+                    </div>
+                    <div class="fg-input">
                         <input type="checkbox" name="smtp_default" id="smtp_default" />
-                        <span class="hint">Sets this SMTP server as the default SMTP server.</span>
-                    </li>
-                </ol>
+                    </div>
+                    <div class="hint">Sets this SMTP server as the default SMTP server.</div>
+                </div>
             </fieldset>
             <fieldset class="action">
                 <input type="submit" class="btn btn-primary" value="Submit" />
@@ -159,34 +188,47 @@
             [% INCLUDE 'csrf-token.inc' %]
             <input type="hidden" name="op" value="cud-edit_save" />
             <input type="hidden" name="smtp_server_id" value="[%- smtp_server.id | html -%]" />
-            <fieldset class="rows">
-                <ol>
-                    <li>
+            <fieldset class="fg">
+                <div class="fg-row">
+                    <div class="fg-label">
                         <label for="smtp_name" class="required">Name: </label>
+                    </div>
+                    <div class="fg-input">
                         <input type="text" name="smtp_name" id="smtp_name" size="60" class="required" required="required" value="[%- smtp_server.name | html -%]" />
-                        <span class="required">Required</span>
-                    </li>
-                </ol>
-            </fieldset>
-
-            <fieldset class="rows">
-                <ol>
-                    <li>
+                    </div>
+                    <div class="required">Required</div>
+                </div>
+                <div class="fg-row">
+                    <div class="fg-label">
                         <label for="smtp_host" class="required">Host: </label>
+                    </div>
+                    <div class="fg-input">
                         <input type="text" name="smtp_host" id="smtp_host" size="60" class="required" value="[%- smtp_server.host | html -%]" />
-                        <span class="required">Required</span>
-                    </li>
-                    <li>
+                    </div>
+                    <div class="required">Required</div>
+                </div>
+                <div class="fg-row input-sm">
+                    <div class="fg-label">
                         <label for="smtp_port" class="required">Port: </label>
+                    </div>
+                    <div class="fg-input">
                         <input type="text" inputmode="numeric" pattern="[0-9]*" name="smtp_port" id="smtp_port" size="20" class="required" value="[%- smtp_server.port | html -%]" />
-                        <span class="required">Required</span>
-                    </li>
-                    <li>
+                    </div>
+                    <div class="required">Required</div>
+                </div>
+                <div class="fg-row input-sm">
+                    <div class="fg-label">
                         <label for="smtp_timeout">Timeout (seconds): </label>
+                    </div>
+                    <div class="fg-input">
                         <input type="text" inputmode="numeric" pattern="[0-9]*" name="smtp_timeout" id="smtp_timeout" size="20" value="[%- smtp_server.timeout | html -%]" />
-                    </li>
-                    <li>
+                    </div>
+                </div>
+                <div class="fg-row input-sm">
+                    <div class="fg-label">
                         <label for="smtp_ssl_mode">SSL: </label>
+                    </div>
+                    <div class="fg-input">
                         <select name="smtp_ssl_mode" id="smtp_ssl_mode">
                             [%- IF smtp_server.ssl_mode == 'disabled' -%]
                                 <option value="disabled" selected="selected">Disabled</option>
@@ -202,21 +244,33 @@
                                 <option value="starttls" selected="selected">STARTTLS</option>
                             [%- END -%]
                         </select>
-                    </li>
-                    <li>
+                    </div>
+                </div>
+                <div class="fg-row input-md">
+                    <div class="fg-label">
                         <label for="smtp_user_name">User name: </label>
+                    </div>
+                    <div class="fg-input">
                         <input type="text" name="smtp_user_name" id="smtp_user_name" size="60" value="[%- smtp_server.user_name | html -%]" autocomplete="off" />
-                    </li>
-                    <li>
+                    </div>
+                </div>
+                <div class="fg-row input-md">
+                    <div class="fg-label">
                         <label for="smtp_password">Password: </label>
+                    </div>
+                    <div class="fg-input">
                         [% IF smtp_server.password %]
                             <input type="password" name="smtp_password" id="smtp_password" size="60" value="****" autocomplete="off" />
                         [% ELSE %]
                             <input type="password" name="smtp_password" id="smtp_password" size="60" value="" autocomplete="off" />
                         [% END %]
-                    </li>
-                    <li>
+                    </div>
+                </div>
+                <div class="fg-row input-sm">
+                    <div class="fg-label">
                         <label for="smtp_debug_mode">Debug mode: </label>
+                    </div>
+                    <div class="fg-input">
                         <select name="smtp_debug_mode" id="smtp_debug_mode">
                             [%- IF smtp_server.debug == 1 -%]
                                 <option value="1" selected="selected">Enabled</option>
@@ -226,17 +280,22 @@
                                 <option value="0" selected="selected">Disabled</option>
                             [%- END -%]
                         </select>
-                    </li>
-                    <li>
+                    </div>
+                    <div class="hint">Enables additional debug output in the logs</div>
+                </div>
+                <div class="fg-row input-checkbox">
+                    <div class="fg-label">
                         <label for="smtp_default">Default server: </label>
+                    </div>
+                    <div class="fg-input">
                         [% IF smtp_server.is_default %]
                             <input type="checkbox" name="smtp_default" id="smtp_default" checked="checked" />
                         [% ELSE %]
                             <input type="checkbox" name="smtp_default" id="smtp_default" />
                         [% END %]
-                        <span class="hint">Sets this SMTP server as the default SMTP server.</span>
-                    </li>
-                </ol>
+                    </div>
+                    <div class="hint">Sets this SMTP server as the default SMTP server.</div>
+                </div>
             </fieldset>
             <fieldset class="action">
                 <input type="submit" class="btn btn-primary" value="Submit" />