ref #7585 New design for forms

7 files changed, 687 insertions, 408 deletions

diff --git a/plugins/Morpheus/stylesheets/general/_default.less b/plugins/Morpheus/stylesheets/general/_default.less
index 480c8f15b1..689cb0351f 100644
--- a/plugins/Morpheus/stylesheets/general/_default.less
+++ b/plugins/Morpheus/stylesheets/general/_default.less
@@ -45,35 +45,6 @@ del {
     text-decoration: line-through;
 }
 
-/* form general */
-label {
-  cursor: pointer;
-}
-
-textarea {
-  font-size: 1em;
-}
-
-input, select, textarea {
-  border-radius: 4px;
-  border: 1px solid #d4d4d4;
-  background: @theme-color-background-base url(plugins/Morpheus/images/inp_bg.png) repeat-x 0 0;
-  padding: 3px 10px;
-  color: #255792;
-  margin-bottom: 3px;
-}
-
-input[disabled] {
-  background: #E9E9E9 none;
-  font-style: italic;
-}
-
-select {
-  padding-right: 3px;
-  padding-left: 7px;
-  margin-right: 6px;
-}
-
 /* start piwik styles */
 body {
     font-family: @theme-fontFamily-base;
diff --git a/plugins/Morpheus/stylesheets/general/_forms.less b/plugins/Morpheus/stylesheets/general/_forms.less
index 7982a826e1..d0b7b18a48 100644
--- a/plugins/Morpheus/stylesheets/general/_forms.less
+++ b/plugins/Morpheus/stylesheets/general/_forms.less
@@ -1,12 +1,69 @@
+form {
+    margin-bottom: 30px;
+}
+
+label {
+    cursor: pointer;
+}
+
 input:not([type="checkbox"]):not([type="submit"]):not([type="button"]), select, textarea {
-    color: @theme-color-text;
-    .border-radius(0px);
+    border: 1px solid #d4d4d4;
+    font-size: 14px;
+    color: @theme-color-text-lighter;
+    .border-radius(2px);
     margin-left: 0;
-    padding: 8px 10px;
+    padding: 10px 12px;
     min-height: 20px;
     .box-sizing(border-box);
     background: @theme-color-background-base;
 }
+input:not([type="checkbox"]):not([type="submit"]):not([type="button"]), textarea {
+    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+    -moz-box-shadow:    inset 0 1px 1px rgba(0,0,0,.075);
+    box-shadow:         inset 0 1px 1px rgba(0,0,0,.075);
+}
+input[disabled] {
+    background: #F5F5F5 none;
+}
+
+.form-group {
+    width: 100%;
+    margin-bottom: 15px;
+    .clearfix();
+
+    label {
+        display: block;
+        width: 40%;
+        font-size: 11px;
+        text-transform: uppercase;
+        margin: 8px 0;
+    }
+    input, select, textarea {
+        display: block;
+        width: 40%;
+    }
+    .input-group {
+        width: 40%;
+    }
+    .radio, .checkbox {
+        width: 40%;
+        text-transform: none;
+        font-size: 12px;
+        line-height: 20px;
+        margin: 2px 0;
+    }
+    .form-help {
+        .alert;
+        .alert-info;
+        float: right;
+        width: 58%;
+        margin-bottom: 0;
+        // Smaller padding to match input's heights
+        padding-top: 11px;
+        padding-bottom: 10px;
+    }
+}
+
 .add-cors-host,
 .submit {
     .btn;
@@ -273,3 +330,133 @@ label {
 .small-form-description { // for tracking code generator
   clear:both;
 }
+
+// Bootstrap input groups
+// --------------------------------------------------
+.input-group {
+    position: relative; // For dropdowns
+    display: table;
+    border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
+
+    // Undo padding and float of grid classes
+    &[class*="col-"] {
+        float: none;
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+    input {
+        // Ensure that the input is always above the *appended* addon button for
+        // proper border colors.
+        position: relative;
+        z-index: 2;
+
+        // IE9 fubars the placeholder attribute in text inputs and the arrows on
+        // select elements in input groups. To fix it, we float the input. Details:
+        // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
+        float: left;
+
+        width: 100%;
+        margin-bottom: 0;
+    }
+}
+// Display as table-cell
+.input-group-addon,
+.input-group-btn,
+.input-group input {
+    display: table-cell;
+
+    &:not(:first-child):not(:last-child) {
+        border-radius: 0;
+    }
+}
+// Addon and addon wrapper for buttons
+.input-group-addon,
+.input-group-btn {
+    width: 1%;
+    white-space: nowrap;
+    vertical-align: middle; // Match the inputs
+}
+// Text input groups
+.input-group-addon {
+    padding: 6px 12px;
+    font-size: 14px;
+    font-weight: normal;
+    color: @theme-color-text-lighter;
+    line-height: 1;
+    text-align: center;
+    background-color: @theme-color-background-base;
+    border: 1px solid #d4d4d4;
+    border-radius: 2px;
+    // Nuke default margins from checkboxes and radios to vertically center within.
+    input[type="radio"],
+    input[type="checkbox"] {
+        margin-top: 0;
+    }
+}
+
+// Reset rounded corners
+.input-group input:first-child,
+.input-group-addon:first-child,
+.input-group-btn:first-child > .btn,
+.input-group-btn:first-child > .btn-group > .btn,
+.input-group-btn:first-child > .dropdown-toggle,
+.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
+.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+}
+.input-group-addon:first-child {
+    border-right: 0;
+}
+.input-group input:last-child,
+.input-group-addon:last-child,
+.input-group-btn:last-child > .btn,
+.input-group-btn:last-child > .btn-group > .btn,
+.input-group-btn:last-child > .dropdown-toggle,
+.input-group-btn:first-child > .btn:not(:first-child),
+.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+}
+.input-group-addon:last-child {
+    border-left: 0;
+}
+// Button input groups
+.input-group-btn {
+    position: relative;
+    // Jankily prevent input button groups from wrapping with `white-space` and
+    // `font-size` in combination with `inline-block` on buttons.
+    font-size: 0;
+    white-space: nowrap;
+
+    // Negative margin for spacing, position for bringing hovered/focused/actived
+    // element above the siblings.
+    > .btn {
+        position: relative;
+        + .btn {
+            margin-left: -1px;
+        }
+        // Bring the "active" button to the front
+        &:hover,
+        &:focus,
+        &:active {
+            z-index: 2;
+        }
+    }
+
+    // Negative margin to only have a 1px border between the two
+    &:first-child {
+        > .btn,
+        > .btn-group {
+            margin-right: -1px;
+        }
+    }
+    &:last-child {
+        > .btn,
+        > .btn-group {
+            z-index: 2;
+            margin-left: -1px;
+        }
+    }
+}
diff --git a/plugins/Morpheus/templates/demo.twig b/plugins/Morpheus/templates/demo.twig
index 7e2f9f7309..8abe1ce7b5 100644
--- a/plugins/Morpheus/templates/demo.twig
+++ b/plugins/Morpheus/templates/demo.twig
@@ -219,31 +219,150 @@
 
         <div class="demo">
             <form action="#">
-                <label>
-                    Username:
-                    <input type="text" placeholder="Some text here..."/>
-                </label>
-                <label>
-                    Email:
-                    <input type="text" placeholder="Some email here..."/>
-                </label>
-                <button type="submit">Submit</button>
+                <div class="form-group">
+                    <label for="username">
+                        Username
+                    </label>
+                    <input type="text" id="username" placeholder="Some text here..."/>
+                </div>
+
+                <div class="form-group">
+                    <label for="email">
+                        Email
+                    </label>
+                    <div class="form-help">
+                        Here is more information.
+                    </div>
+                    <input type="email" id="email" placeholder="Some email here..."/>
+                </div>
+
+                <div class="form-group">
+                    <label>
+                        Report to load by default
+                    </label>
+                    <div class="form-help">
+                        This is a help text that can be used to describe the field.
+                        This help text may extend over several lines.
+                    </div>
+                    <label class="radio">
+                        <input type="radio" name="defaultReport" value="today">
+                        Today
+                    </label>
+                    <label class="radio">
+                        <input type="radio" name="defaultReport" value="yesterday">
+                        Yesterday
+                    </label>
+                    <label class="radio">
+                        <input type="radio" name="defaultReport" value="week">
+                        Previous 30 days (not including today)
+                    </label>
+                </div>
+
+                <div class="form-group">
+                    <label for="language">
+                        Language
+                    </label>
+                    <select id="language">
+                        <option>English</option>
+                    </select>
+                </div>
+
+                <div class="form-group">
+                    <label for="description">
+                        Description
+                    </label>
+                    <textarea id="description" rows="5"></textarea>
+                </div>
+
+                <input type="submit" value="Submit">
             </form>
         </div>
         <div class="demo-code">
             <pre>&lt;form action=&quot;#&quot;&gt;
-    &lt;label&gt;
-        Username:
-        &lt;input type=&quot;text&quot; placeholder=&quot;Some text here...&quot;/&gt;
-    &lt;/label&gt;
-    &lt;label&gt;
-        Email:
-        &lt;input type=&quot;text&quot; placeholder=&quot;Some email here...&quot;/&gt;
-    &lt;/label&gt;
-    &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
+    &lt;div class=&quot;form-group&quot;&gt;
+        &lt;label for=&quot;username&quot;&gt;
+            Username
+        &lt;/label&gt;
+        &lt;input type=&quot;text&quot; id=&quot;username&quot; placeholder=&quot;Some text here...&quot;/&gt;
+    &lt;/div&gt;
+
+    &lt;div class=&quot;form-group&quot;&gt;
+        &lt;label for=&quot;email&quot;&gt;
+            Email
+        &lt;/label&gt;
+        &lt;div class=&quot;form-help&quot;&gt;
+            Here is more information.
+        &lt;/div&gt;
+        &lt;input type=&quot;email&quot; id=&quot;email&quot; placeholder=&quot;Some email here...&quot;/&gt;
+    &lt;/div&gt;
+
+    &lt;div class=&quot;form-group&quot;&gt;
+        &lt;label&gt;
+            Report to load by default
+        &lt;/label&gt;
+        &lt;div class=&quot;form-help&quot;&gt;
+            This is a help text that can be used to describe the field.
+            This help text may extend over several lines.
+        &lt;/div&gt;
+        &lt;label class=&quot;radio&quot;&gt;
+            &lt;input type=&quot;radio&quot; name=&quot;defaultReport&quot; value=&quot;today&quot;&gt;
+            Today
+        &lt;/label&gt;
+        &lt;label class=&quot;radio&quot;&gt;
+            &lt;input type=&quot;radio&quot; name=&quot;defaultReport&quot; value=&quot;yesterday&quot;&gt;
+            Yesterday
+        &lt;/label&gt;
+        &lt;label class=&quot;radio&quot;&gt;
+            &lt;input type=&quot;radio&quot; name=&quot;defaultReport&quot; value=&quot;week&quot;&gt;
+            Previous 30 days (not including today)
+        &lt;/label&gt;
+    &lt;/div&gt;
+
+    &lt;div class=&quot;form-group&quot;&gt;
+        &lt;label for=&quot;language&quot;&gt;
+            Language
+        &lt;/label&gt;
+        &lt;select id=&quot;language&quot;&gt;
+            &lt;option&gt;English&lt;/option&gt;
+        &lt;/select&gt;
+    &lt;/div&gt;
+
+    &lt;div class=&quot;form-group&quot;&gt;
+        &lt;label for=&quot;description&quot;&gt;
+            Description
+        &lt;/label&gt;
+        &lt;textarea id=&quot;description&quot; rows=&quot;5&quot;&gt;&lt;/textarea&gt;
+    &lt;/div&gt;
+
+    &lt;input type=&quot;submit&quot; value=&quot;Submit&quot;&gt;
 &lt;/form&gt;</pre>
         </div>
 
+        <h3>Input group</h3>
+
+        <div class="demo">
+            <div class="form-group">
+                <label for="deleteOlderThan">
+                    Input with a text addon
+                </label>
+                <div class="input-group">
+                    <input type="text" id="deleteOlderThan" value="180"/>
+                    <span class="input-group-addon">days</span>
+                </div>
+            </div>
+        </div>
+        <div class="demo-code">
+            <pre>&lt;div class=&quot;form-group&quot;&gt;
+    &lt;label for=&quot;foo&quot;&gt;
+        Input with a text addon
+    &lt;/label&gt;
+    &lt;div class=&quot;input-group&quot;&gt;
+        &lt;input type=&quot;text&quot; id=&quot;foo&quot; value=&quot;180&quot;/&gt;
+        &lt;span class=&quot;input-group-addon&quot;&gt;days&lt;/span&gt;
+    &lt;/div&gt;
+&lt;/div&gt;</pre>
+        </div>
+
         <h2>Code</h2>
 
         <h3>Inline</h3>
diff --git a/plugins/Morpheus/templates/genericForm.twig b/plugins/Morpheus/templates/genericForm.twig
index 466387fac1..bb9d7f1f1b 100644
--- a/plugins/Morpheus/templates/genericForm.twig
+++ b/plugins/Morpheus/templates/genericForm.twig
@@ -10,26 +10,18 @@
 {% endif %}
 
 <form {{ form_data.attributes|raw }}>
-	<div class="centrer">
-		<table class="centrer simple-table">
-            {% for fieldname in element_list %}
-				{% if form_data[fieldname].type == 'checkbox' %}
-					<tr>
-						<td colspan=2>{{ form_data[fieldname].html|raw }}</td>
-					</tr>
-				{% elseif form_data[fieldname].label %}
-					<tr>
-						<td>{{ form_data[fieldname].label|raw }}</td>
-						<td>{{ form_data[fieldname].html|raw }}</td>
-					</tr>
-				{% elseif form_data[fieldname].type == 'hidden' %}
-					<tr>
-						<td colspan=2>{{ form_data[fieldname].html|raw }}</td>
-					</tr>
-				{% endif %}
-			{% endfor %}
-		</table>
-	</div>
+	{% for fieldname in element_list %}
+		{% if form_data[fieldname].type == 'checkbox' %}
+			{{ form_data[fieldname].html|raw }}
+		{% elseif form_data[fieldname].label %}
+			<label>
+				{{ form_data[fieldname].label|raw }}
+				{{ form_data[fieldname].html|raw }}
+			</label>
+		{% elseif form_data[fieldname].type == 'hidden' %}
+			{{ form_data[fieldname].html|raw }}
+		{% endif %}
+	{% endfor %}
 
 	{{ form_data.submit.html|raw }}
 </form>
diff --git a/plugins/PrivacyManager/javascripts/privacySettings.js b/plugins/PrivacyManager/javascripts/privacySettings.js
index f40985b984..b948dc0171 100644
--- a/plugins/PrivacyManager/javascripts/privacySettings.js
+++ b/plugins/PrivacyManager/javascripts/privacySettings.js
@@ -73,16 +73,16 @@ $(document).ready(function () {
     }
 
     // make sure certain sections only display if their corresponding features are enabled
-    $('input[name=anonymizeIPEnable]').click(function () {
+    $('input[name=anonymizeIPEnable]').change(function () {
         toggleBlock("anonymizeIPenabled", $(this).val());
     });
 
-    $('input[name=deleteEnable]').click(function () {
+    $('input[name=deleteEnable]').change(function () {
         toggleBlock("deleteLogSettings", $(this).val());
         toggleOtherDeleteSections();
     }).change(reloadDbStats);
 
-    $('input[name=deleteReportsEnable]').click(function () {
+    $('input[name=deleteReportsEnable]').change(function () {
         toggleBlock("deleteReportsSettings", $(this).val());
         toggleBlock("deleteOldReportsMoreInfo", $(this).val());
         toggleOtherDeleteSections();
diff --git a/plugins/PrivacyManager/templates/privacySettings.twig b/plugins/PrivacyManager/templates/privacySettings.twig
index aa30943f85..6ac1eeb8bc 100644
--- a/plugins/PrivacyManager/templates/privacySettings.twig
+++ b/plugins/PrivacyManager/templates/privacySettings.twig
@@ -7,266 +7,276 @@
         help-url="http://piwik.org/docs/privacy/">{{ 'PrivacyManager_TeaserHeadline'|translate }}</h2>
     <p>{{ 'PrivacyManager_Teaser'|translate('<a href="#anonymizeIPAnchor">',"</a>",'<a href="#deleteLogsAnchor">',"</a>",'<a href="#optOutAnchor">',"</a>")|raw }}
         {{'PrivacyManager_SeeAlsoOurOfficialGuidePrivacy'|translate('<a href="http://piwik.org/privacy/" rel="noreferrer"  target="_blank">','</a>')|raw }}</p>
+
     <h2 id="anonymizeIPAnchor">{{ 'PrivacyManager_UseAnonymizeIp'|translate }}</h2>
     <form method="post" action="{{ {'action':'saveSettings', 'form':'formMaskLength', 'token_auth':token_auth} | urlRewriteWithParameters }}" id="formMaskLength">
-        <div id='anonymizeIpSettings'>
-            <table class="adminTable" style='width:800px;'>
-                <tr>
-                    <td width="250">{{ 'PrivacyManager_UseAnonymizeIp'|translate }}<br/>
-                        <span class="form-description">{{ 'PrivacyManager_AnonymizeIpDescription'|translate }}</span>
-                    </td>
-                    <td width='500'>
-                        <input id="anonymizeIPEnable-1" type="radio" name="anonymizeIPEnable" value="1" {% if anonymizeIP.enabled == '1' %}checked {% endif %}/>
-                        <label for="anonymizeIPEnable-1">{{ 'General_Yes'|translate }}</label>
-                        <input class="indented-radio-button" id="anonymizeIPEnable-0" type="radio" name="anonymizeIPEnable" value="0" {% if anonymizeIP.enabled == '0' %} checked {% endif %}/>
-                        <label for="anonymizeIPEnable-0">{{ 'General_No'|translate }}</label>
-                        <input type="hidden" name="token_auth" value="{{ token_auth }}"/>
-                    </td>
-                    <td width="200">
-                        <div style="width:180px">
-                            {{ piwik.inlineHelp('PrivacyManager_AnonymizeIpInlineHelp'|translate) }}
-                        </div>
-                    </td>
-                </tr>
-            </table>
+        <div id="anonymizeIpSettings" class="form-group">
+            <label>
+                {{ 'PrivacyManager_UseAnonymizeIp'|translate }}<br/>
+                <span class="form-description">{{ 'PrivacyManager_AnonymizeIpDescription'|translate }}</span>
+            </label>
+            <div class="form-help">
+                {{ 'PrivacyManager_AnonymizeIpInlineHelp'|translate }}
+            </div>
+            <label class="radio">
+                <input id="anonymizeIPEnable-1" type="radio" name="anonymizeIPEnable" value="1" {% if anonymizeIP.enabled == '1' %}checked {% endif %}/>
+                {{ 'General_Yes'|translate }}
+            </label>
+            <label class="radio">
+                <input class="indented-radio-button" id="anonymizeIPEnable-0" type="radio" name="anonymizeIPEnable" value="0" {% if anonymizeIP.enabled == '0' %} checked {% endif %}/>
+                {{ 'General_No'|translate }}
+            </label>
+            <input type="hidden" name="token_auth" value="{{ token_auth }}"/>
         </div>
         <div id="anonymizeIPenabled">
-            <table class="adminTable" style='width:800px;'>
-                <tr>
-                    <td width="250">{{ 'PrivacyManager_AnonymizeIpMaskLengtDescription'|translate }}</td>
-                    <td width="500">
-                        <input id="maskLength-1" type="radio" name="maskLength" value="1" {% if anonymizeIP.maskLength == '1' %}
-                            checked {% endif %}/>
-                        <label for="maskLength-1">{{ 'PrivacyManager_AnonymizeIpMaskLength'|translate("1","192.168.100.xxx") }}</label><br/>
-                        <input id="maskLength-2" type="radio" name="maskLength" value="2" {% if anonymizeIP.maskLength == '2' %}
-                            checked {% endif %}/>
-                        <label for="maskLength-2">{{ 'PrivacyManager_AnonymizeIpMaskLength'|translate("2","192.168.xxx.xxx") }} <span
-                                    class="form-description">{{ 'General_Recommended'|translate }}</span></label><br/>
-                        <input id="maskLength-3" type="radio" name="maskLength" value="3" {% if anonymizeIP.maskLength == '3' %}
-                            checked {% endif %}/>
-                        <label for="maskLength-3">{{ 'PrivacyManager_AnonymizeIpMaskLength'|translate("3","192.xxx.xxx.xxx") }}</label>
-                    </td>
-                    <td width="200">
-                        <div style="width:180px">
-                            {{ piwik.inlineHelp('PrivacyManager_GeolocationAnonymizeIpNote'|translate) }}
-                        </div>
-                    </td>
-                </tr>
-                <tr>
-                    <td width="250">
-                        {{ 'PrivacyManager_UseAnonymizedIpForVisitEnrichment'|translate }}
-                    </td>
-                    <td width='500'>
-                        <input id="useAnonymizedIpForVisitEnrichment-1" type="radio" name="useAnonymizedIpForVisitEnrichment" value="1" {% if anonymizeIP.useAnonymizedIpForVisitEnrichment == '1' %}checked {% endif %}/>
-                        <label for="useAnonymizedIpForVisitEnrichment-1">{{ 'General_Yes'|translate }}</label>
-                        <span class="form-description">
-                            {{ 'PrivacyManager_RecommendedForPrivacy'|translate }}
-                        </span>
-                        <br/>
-                        <input id="useAnonymizedIpForVisitEnrichment-2" type="radio" name="useAnonymizedIpForVisitEnrichment" value="0" {% if anonymizeIP.useAnonymizedIpForVisitEnrichment == '0' %} checked {% endif %}/>
-                        <label for="useAnonymizedIpForVisitEnrichment-2">{{ 'General_No'|translate }}</label>
-                    </td>
-                    <td width="200">
-                        <div style="width:180px">
-                            {{ piwik.inlineHelp('PrivacyManager_UseAnonymizedIpForVisitEnrichmentNote'|translate) }}
-                        </div>
-                    </td>
-                </tr>
-            </table>
+            <div class="form-group">
+                <label>
+                    {{ 'PrivacyManager_AnonymizeIpMaskLengtDescription'|translate }}<br/>
+                </label>
+                <div class="form-help">
+                    {{ 'PrivacyManager_GeolocationAnonymizeIpNote'|translate }}
+                </div>
+                <label class="radio">
+                    <input id="maskLength-1" type="radio" name="maskLength" value="1" {% if anonymizeIP.maskLength == '1' %} checked {% endif %}/>
+                    {{ 'PrivacyManager_AnonymizeIpMaskLength'|translate("1","192.168.100.xxx") }}
+                </label>
+                <label class="radio">
+                    <input id="maskLength-2" type="radio" name="maskLength" value="2" {% if anonymizeIP.maskLength == '2' %} checked {% endif %}/>
+                    {{ 'PrivacyManager_AnonymizeIpMaskLength'|translate("2","192.168.xxx.xxx") }}
+                    <span class="form-description">{{ 'General_Recommended'|translate }}</span>
+                </label>
+                <label class="radio">
+                    <input id="maskLength-3" type="radio" name="maskLength" value="3" {% if anonymizeIP.maskLength == '3' %} checked {% endif %}/>
+                    {{ 'PrivacyManager_AnonymizeIpMaskLength'|translate("3","192.xxx.xxx.xxx") }}
+                </label>
+            </div>
+            <div class="form-group">
+                <label>
+                    {{ 'PrivacyManager_UseAnonymizedIpForVisitEnrichment'|translate }}<br/>
+                </label>
+                <div class="form-help">
+                    {{ 'PrivacyManager_UseAnonymizedIpForVisitEnrichmentNote'|translate }}
+                </div>
+                <label class="radio">
+                    <input id="useAnonymizedIpForVisitEnrichment-1" type="radio" name="useAnonymizedIpForVisitEnrichment" value="1" {% if anonymizeIP.useAnonymizedIpForVisitEnrichment == '1' %}checked {% endif %}/>
+                    {{ 'General_Yes'|translate }}
+                    <span class="form-description">{{ 'PrivacyManager_RecommendedForPrivacy'|translate }}</span>
+                </label>
+                <label class="radio">
+                    <input id="useAnonymizedIpForVisitEnrichment-2" type="radio" name="useAnonymizedIpForVisitEnrichment" value="0" {% if anonymizeIP.useAnonymizedIpForVisitEnrichment == '0' %} checked {% endif %}/>
+                    {{ 'General_No'|translate }}
+                </label>
+            </div>
         </div>
 
         <input type="hidden" name="nonce" value="{% if anonymizeIP.enabled %}{{ deactivateNonce }}{% else %}{{ activateNonce }}{% endif %}">
-
-        <input type="submit" value="{{ 'General_Save'|translate }}" id="privacySettingsSubmit" class="submit"/>
+        <input type="submit" value="{{ 'General_Save'|translate }}" id="privacySettingsSubmit"/>
     </form>
 
     {% if isDataPurgeSettingsEnabled %}
-    <div class="ui-confirm" id="confirmDeleteSettings">
-        <h2 id="deleteLogsConfirm">{{ 'PrivacyManager_DeleteLogsConfirm'|translate }}</h2>
 
-        <h2 id="deleteReportsConfirm">{{ 'PrivacyManager_DeleteReportsConfirm'|translate }}</h2>
+        <div class="ui-confirm" id="confirmDeleteSettings">
+            <h2 id="deleteLogsConfirm">{{ 'PrivacyManager_DeleteLogsConfirm'|translate }}</h2>
 
-        <h2 id="deleteBothConfirm">{{ 'PrivacyManager_DeleteBothConfirm'|translate }}</h2>
-        <input role="yes" type="button" value="{{ 'General_Yes'|translate }}"/>
-        <input role="no" type="button" value="{{ 'General_No'|translate }}"/>
-    </div>
-    <div class="ui-confirm" id="saveSettingsBeforePurge">
-        <h2>{{ 'PrivacyManager_SaveSettingsBeforePurge'|translate }}</h2>
-        <input role="yes" type="button" value="{{ 'General_Ok'|translate }}"/>
-    </div>
-    <div class="ui-confirm" id="confirmPurgeNow">
-        <h2>{{ 'PrivacyManager_PurgeNowConfirm'|translate }}</h2>
-        <input role="yes" type="button" value="{{ 'General_Yes'|translate }}"/>
-        <input role="no" type="button" value="{{ 'General_No'|translate }}"/>
-    </div>
-    <h2 id="deleteLogsAnchor">{{ 'PrivacyManager_DeleteDataSettings'|translate }}</h2>
-    <p>{{ 'PrivacyManager_DeleteDataDescription'|translate }} {{ 'PrivacyManager_DeleteDataDescription2'|translate }}</p>
-    <form method="post" action="{{ {'action':'saveSettings','form':'formDeleteSettings','token_auth':token_auth} | urlRewriteWithParameters }}" id="formDeleteSettings">
-        <table class="adminTable" style='width:800px;'>
-            <tr id='deleteLogSettingEnabled'>
-                <td width="250">{{ 'PrivacyManager_UseDeleteLog'|translate }}<br/>
+            <h2 id="deleteReportsConfirm">{{ 'PrivacyManager_DeleteReportsConfirm'|translate }}</h2>
 
-                </td>
-                <td width='500'>
-                    <input id="deleteEnable-1" type="radio" name="deleteEnable" value="1" {% if deleteData.config.delete_logs_enable == '1' %}
-                        checked {% endif %}/>
-                    <label for="deleteEnable-1">{{ 'General_Yes'|translate }}</label>
+            <h2 id="deleteBothConfirm">{{ 'PrivacyManager_DeleteBothConfirm'|translate }}</h2>
+            <input role="yes" type="button" value="{{ 'General_Yes'|translate }}"/>
+            <input role="no" type="button" value="{{ 'General_No'|translate }}"/>
+        </div>
+        <div class="ui-confirm" id="saveSettingsBeforePurge">
+            <h2>{{ 'PrivacyManager_SaveSettingsBeforePurge'|translate }}</h2>
+            <input role="yes" type="button" value="{{ 'General_Ok'|translate }}"/>
+        </div>
+        <div class="ui-confirm" id="confirmPurgeNow">
+            <h2>{{ 'PrivacyManager_PurgeNowConfirm'|translate }}</h2>
+            <input role="yes" type="button" value="{{ 'General_Yes'|translate }}"/>
+            <input role="no" type="button" value="{{ 'General_No'|translate }}"/>
+        </div>
+        <h2 id="deleteLogsAnchor">{{ 'PrivacyManager_DeleteDataSettings'|translate }}</h2>
+        <p>{{ 'PrivacyManager_DeleteDataDescription'|translate }} {{ 'PrivacyManager_DeleteDataDescription2'|translate }}</p>
+        <form method="post" action="{{ {'action':'saveSettings','form':'formDeleteSettings','token_auth':token_auth} | urlRewriteWithParameters }}" id="formDeleteSettings">
+            <div id="deleteLogSettingEnabled" class="form-group">
+                <label>
+                    {{ 'PrivacyManager_UseDeleteLog'|translate }}
+                </label>
+                <div class="form-help">
+                    {{ 'PrivacyManager_DeleteLogInfo'|translate(deleteData.deleteTables)|raw }}
+                    {% if not canDeleteLogActions %}
+                        <br/>
+                        <br/>
+                        {{ 'PrivacyManager_CannotLockSoDeleteLogActions'|translate(dbUser) }}
+                    {% endif %}
+                </div>
+                <label class="radio">
+                    <input id="deleteEnable-1" type="radio" name="deleteEnable" value="1" {% if deleteData.config.delete_logs_enable == '1' %} checked {% endif %}/>
+                    {{ 'General_Yes'|translate }}
+                </label>
+                <label class="radio">
                     <input class="indented-radio-button" id="deleteEnable-2" type="radio" name="deleteEnable" value="0"
-                                  {% if deleteData.config.delete_logs_enable == '0' %}
-                        checked {% endif %}/>
-                    <label for="deleteEnable-2">{{ 'General_No'|translate }}</label>
-				<span id="privacyManagerDeleteLogDescription" style="margin-top: 10px;display:inline-block;">
-                    {% set deleteLogDescription %}
-                        {{ 'PrivacyManager_DeleteLogDescription2'|translate|raw }}
-                        <a href="http://piwik.org/faq/general/#faq_125" rel="noreferrer"  target="_blank">
-                            {{ 'General_ClickHere'|translate }}
-                        </a>
-                    {% endset %}
-                    {{ deleteLogDescription|notification({'raw': true, 'placeat': '#privacyManagerDeleteLogDescription', 'noclear': true, 'context': 'warning'}) }}
-				</span>
-                </td>
-                <td width="200">
-                    {% set deleteLogInfo %}
-                        {{ 'PrivacyManager_DeleteLogInfo'|translate(deleteData.deleteTables)|raw }}
-                        {% if not canDeleteLogActions %}
-                            <br/>
-                            <br/>
-                            {{ 'PrivacyManager_CannotLockSoDeleteLogActions'|translate(dbUser) }}
-                        {% endif %}
-                    {% endset %}
-                    {{ piwik.inlineHelp(deleteLogInfo) }}
-                </td>
-            </tr>
-            <tr id="deleteLogSettings">
-                <td width="250">&nbsp;</td>
-                <td width="500">
-                    <label>{{ 'PrivacyManager_DeleteLogsOlderThan'|translate }}
-                        <input type="text" id="deleteOlderThan" value="{{ deleteData.config.delete_logs_older_than }}" style="width:55px;"
-                               name="deleteOlderThan"/>
-                        {{ 'CoreHome_PeriodDays'|translate }}</label><br/>
-                    <span class="form-description">{{ 'PrivacyManager_LeastDaysInput'|translate("1") }}</span>
-                </td>
-                <td width="200">
+                            {% if deleteData.config.delete_logs_enable == '0' %} checked {% endif %}/>
+                    {{ 'General_No'|translate }}
+                </label>
+                <div class="clearfix"><br/></div>
+                <div class="alert alert-warning">
+                    {{ 'PrivacyManager_DeleteLogDescription2'|translate|raw }}
+                    <a href="http://piwik.org/faq/general/#faq_125" rel="noreferrer"  target="_blank">
+                        {{ 'General_ClickHere'|translate }}
+                    </a>
+                </div>
+            </div>
+
+            <div id="deleteLogSettings" class="form-group">
+                <label for="deleteOlderThan">
+                    {{ 'PrivacyManager_DeleteLogsOlderThan'|translate }}
+                </label>
+                <div class="form-help">
+                    {{ 'PrivacyManager_LeastDaysInput'|translate("1") }}
+                </div>
+                <div class="input-group">
+                    <input type="text" id="deleteOlderThan" value="{{ deleteData.config.delete_logs_older_than }}" name="deleteOlderThan"/>
+                    <span class="input-group-addon">{{ 'CoreHome_PeriodDays'|translate }}</span>
+                </div>
+            </div>
 
-                </td>
-            </tr>
-            <tr id='deleteReportsSettingEnabled'>
-                <td width="250">{{ 'PrivacyManager_UseDeleteReports'|translate }}
-                </td>
-                <td width="500">
-                    <input id="deleteReportsEnable-1" type="radio" name="deleteReportsEnable" value="1" {% if deleteData.config.delete_reports_enable == '1' %}checked="true"{% endif %} />
-                    <label for="deleteReportsEnable-1">{{ 'General_Yes'|translate }}</label>
-                    <input class="indented-radio-button" id="deleteReportsEnable-2" type="radio" name="deleteReportsEnable" value="0" {% if deleteData.config.delete_reports_enable == '0' %}checked="true"{% endif %}/>
-                    <label for="deleteReportsEnable-2">{{ 'General_No'|translate }}</label>
+            <div id="deleteReportsSettingEnabled" class="form-group">
+                <label>
+                    {{ 'PrivacyManager_UseDeleteReports'|translate }}
+                </label>
+                <div class="form-help">
+                    {{ 'PrivacyManager_DeleteReportsDetailedInfo'|translate('archive_numeric_*','archive_blob_*') }}
+                </div>
+                <label class="radio">
+                    <input id="deleteReportsEnable-1" type="radio" name="deleteReportsEnable" value="1" {% if deleteData.config.delete_reports_enable == '1' %}checked="checked"{% endif %} />
+                    {{ 'General_Yes'|translate }}
+                </label>
+                <label class="radio">
+                    <input class="indented-radio-button" id="deleteReportsEnable-2" type="radio" name="deleteReportsEnable" value="0" {% if deleteData.config.delete_reports_enable == '0' %}checked="checked"{% endif %}/>
+                    {{ 'General_No'|translate }}
+                </label>
+                <div class="clearfix"><br/></div>
+                <div class="alert alert-warning">
+                    {% set deleteOldLogs %}{{ 'PrivacyManager_UseDeleteLog'|translate }}{% endset %}
+                    {{ 'PrivacyManager_DeleteReportsInfo'|translate('<em>','</em>')|raw }}
+                    <span id='deleteOldReportsMoreInfo'><br/><br/>
+                        {{ 'PrivacyManager_DeleteReportsInfo2'|translate(deleteOldLogs) }}<br/><br/>
+                        {{ 'PrivacyManager_DeleteReportsInfo3'|translate(deleteOldLogs) }}</span>
+                </div>
+            </div>
 
-                    {% set useDeleteLog %}
-                        {% set deleteOldLogs %}{{ 'PrivacyManager_UseDeleteLog'|translate }}{% endset %}
-                        {{ 'PrivacyManager_DeleteReportsInfo'|translate('<em>','</em>')|raw }}
-                        <span id='deleteOldReportsMoreInfo'><br/><br/>
-                            {{ 'PrivacyManager_DeleteReportsInfo2'|translate(deleteOldLogs) }}<br/><br/>
-                            {{ 'PrivacyManager_DeleteReportsInfo3'|translate(deleteOldLogs) }}</span>
-                    {% endset %}
-                    <span id="privacyManagerUseDeleteLog" style="margin-top: 10px;display:inline-block;">
-                        {{ useDeleteLog|notification({'raw': true, 'placeat': '#privacyManagerUseDeleteLog', 'noclear': true, 'context': 'warning'}) }}
-                    </span>
-                </td>
-                <td width="200">
-                    {{ piwik.inlineHelp('PrivacyManager_DeleteReportsDetailedInfo'|translate('archive_numeric_*','archive_blob_*')) }}
-                </td>
-            </tr>
-            <tr id='deleteReportsSettings'>
-                <td width="250">&nbsp;</td>
-                <td width="500">
-                    <label>{{ 'PrivacyManager_DeleteReportsOlderThan'|translate }}
-                        <input type="text" id="deleteReportsOlderThan" value="{{ deleteData.config.delete_reports_older_than }}" style="width:42px;"
-                               name="deleteReportsOlderThan"/>
-                        {{ 'CoreHome_PeriodMonths'|translate }}
-                    </label><br/>
-                    <span class="form-description">{{ 'PrivacyManager_LeastMonthsInput'|translate("3") }}</span><br/><br/>
-                    <input id="deleteReportsKeepBasic" type="checkbox" name="deleteReportsKeepBasic" value="1"
-                                  {% if deleteData.config.delete_reports_keep_basic_metrics %}checked="true"{% endif %}>
-                    <label for="deleteReportsKeepBasic">{{ 'PrivacyManager_KeepBasicMetrics'|translate }}
+            <div id="deleteReportsSettings">
+                <div class="form-group">
+                    <label for="deleteReportsOlderThan">
+                        {{ 'PrivacyManager_DeleteReportsOlderThan'|translate }}
+                    </label>
+                    <div class="form-help">
+                        {{ 'PrivacyManager_LeastMonthsInput'|translate("3") }}
+                    </div>
+                    <div class="input-group">
+                        <input type="text" id="deleteReportsOlderThan" value="{{ deleteData.config.delete_reports_older_than }}" name="deleteReportsOlderThan"/>
+                        <span class="input-group-addon">{{ 'CoreHome_PeriodMonths'|translate }}</span>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label for="deleteReportsOlderThan">
+                        {{ 'PrivacyManager_DeleteReportsOlderThan'|translate }}
+                    </label>
+                    <label class="checkbox">
+                        <input id="deleteReportsKeepBasic" type="checkbox" name="deleteReportsKeepBasic" value="1"
+                               {% if deleteData.config.delete_reports_keep_basic_metrics %}checked="checked"{% endif %}>
+                        {{ 'PrivacyManager_KeepBasicMetrics'|translate }}
                         <span class="form-description">{{ 'General_Recommended'|translate }}</span>
-                    </label><br/><br/>
-                    {{ 'PrivacyManager_KeepDataFor'|translate }}<br/><br/>
-                    <input id="deleteReportsKeepDay" type="checkbox" name="deleteReportsKeepDay" value="1"
-                                  {% if deleteData.config.delete_reports_keep_day_reports %}checked="true"{% endif %}>
-                    <label for="deleteReportsKeepDay">{{ 'General_DailyReports'|translate }}</label><br/>
-                    <input type="checkbox" name="deleteReportsKeepWeek" value="1" id="deleteReportsKeepWeek"
-                                  {% if deleteData.config.delete_reports_keep_week_reports %}checked="true"{% endif %}>
-                    <label for="deleteReportsKeepWeek">{{ 'General_WeeklyReports'|translate }}</label><br/>
-                    <input type="checkbox" name="deleteReportsKeepMonth" value="1" id="deleteReportsKeepMonth"
-                                  {% if deleteData.config.delete_reports_keep_month_reports %}checked="true"{% endif %}>
-                    <label for="deleteReportsKeepMonth">{{ 'General_MonthlyReports'|translate }}<span
-                                class="form-description">{{ 'General_Recommended'|translate }}</span></label><br/>
-                    <input type="checkbox" name="deleteReportsKeepYear" value="1" id="deleteReportsKeepYear"
-                                  {% if deleteData.config.delete_reports_keep_year_reports %}checked="true"{% endif %}>
-                    <label for="deleteReportsKeepYear">{{ 'General_YearlyReports'|translate }}<span
-                                class="form-description">{{ 'General_Recommended'|translate }}</span></label><br/>
-                    <input type="checkbox" name="deleteReportsKeepRange" value="1" id="deleteReportsKeepRange"
-                                  {% if deleteData.config.delete_reports_keep_range_reports %}checked="true"{% endif %}>
-                    <label for="deleteReportsKeepRange">{{ 'General_RangeReports'|translate }}
-                    </label><br/><br/>
-                    <input type="checkbox" name="deleteReportsKeepSegments" value="1" id="deleteReportsKeepSegments"
-                                  {% if deleteData.config.delete_reports_keep_segment_reports %}checked="true"{% endif %}>
-                    <label for="deleteReportsKeepSegments">{{ 'PrivacyManager_KeepReportSegments'|translate }}</label><br/>
-                </td>
-                <td width="200">
+                    </label>
+                </div>
+                <div class="form-group">
+                    <label>
+                        {{ 'PrivacyManager_KeepDataFor'|translate }}
+                    </label>
+                    <label class="checkbox">
+                        <input id="deleteReportsKeepDay" type="checkbox" name="deleteReportsKeepDay" value="1"
+                               {% if deleteData.config.delete_reports_keep_day_reports %}checked="checked"{% endif %}>
+                        {{ 'General_DailyReports'|translate }}
+                    </label>
+                    <label class="checkbox">
+                        <input type="checkbox" name="deleteReportsKeepWeek" value="1" id="deleteReportsKeepWeek"
+                               {% if deleteData.config.delete_reports_keep_week_reports %}checked="checked"{% endif %}>
+                        {{ 'General_WeeklyReports'|translate }}
+                    </label>
+                    <label class="checkbox">
+                        <input type="checkbox" name="deleteReportsKeepMonth" value="1" id="deleteReportsKeepMonth"
+                               {% if deleteData.config.delete_reports_keep_month_reports %}checked="checked"{% endif %}>
+                        {{ 'General_MonthlyReports'|translate }}
+                        <span class="form-description">{{ 'General_Recommended'|translate }}</span>
+                    </label>
+                    <label class="checkbox">
+                        <input type="checkbox" name="deleteReportsKeepYear" value="1" id="deleteReportsKeepYear"
+                               {% if deleteData.config.delete_reports_keep_year_reports %}checked="checked"{% endif %}>
+                        {{ 'General_YearlyReports'|translate }}
+                        <span class="form-description">{{ 'General_Recommended'|translate }}</span>
+                    </label>
+                    <label class="checkbox">
+                        <input type="checkbox" name="deleteReportsKeepRange" value="1" id="deleteReportsKeepRange"
+                               {% if deleteData.config.delete_reports_keep_range_reports %}checked="checked"{% endif %}>
+                        {{ 'General_RangeReports'|translate }}
+                    </label>
+                    <label class="checkbox">
+                        <input type="checkbox" name="deleteReportsKeepSegments" value="1" id="deleteReportsKeepSegments"
+                               {% if deleteData.config.delete_reports_keep_segment_reports %}checked="checked"{% endif %}>
+                        {{ 'PrivacyManager_KeepReportSegments'|translate }}
+                    </label>
+                </div>
+            </div>
 
-                </td>
-            </tr>
-            <tr id="deleteDataEstimateSect"
-                {% if deleteData.config.delete_reports_enable == '0' and deleteData.config.delete_logs_enable == '0' %}style="display:none;"{% endif %}>
-                <td width="250">{{ 'PrivacyManager_ReportsDataSavedEstimate'|translate }}<br/></td>
-                <td width="500">
-                    <div id="deleteDataEstimate"></div>
-                    <span class="loadingPiwik" style="display:none;"><img
-                                src="./plugins/Morpheus/images/loading-blue.gif"/> {{ 'General_LoadingData'|translate }}</span>
-                </td>
-                <td width="200">
-                    {% if deleteData.config.enable_auto_database_size_estimate == '0' %}
-                        {% set manualEstimate %}
-                            <em><a id="getPurgeEstimateLink" style="width:280px" class="ui-inline-help" href="#">{{ 'PrivacyManager_GetPurgeEstimate'|translate }}</a></em>
-                        {% endset %}
-                        {{ piwik.inlineHelp(manualEstimate) }}
-                    {% endif %}
-                </td>
-            </tr>
-            <tr id="deleteSchedulingSettings">
-                <td width="250">{{ 'PrivacyManager_DeleteSchedulingSettings'|translate }}<br/></td>
-                <td width="500">
-                    <label>{{ 'PrivacyManager_DeleteDataInterval'|translate }}
-                        <select id="deleteLowestInterval" name="deleteLowestInterval">
-                            <option {% if deleteData.config.delete_logs_schedule_lowest_interval == '1' %} selected="selected" {% endif %}
-                                    value="1"> {{ 'CoreHome_PeriodDay'|translate }}</option>
-                            <option {% if deleteData.config.delete_logs_schedule_lowest_interval == '7' %} selected="selected" {% endif %}
-                                    value="7">{{ 'CoreHome_PeriodWeek'|translate }}</option>
-                            <option {% if deleteData.config.delete_logs_schedule_lowest_interval == '30' %} selected="selected" {% endif %}
-                                    value="30">{{ 'CoreHome_PeriodMonth'|translate }}</option>
-                        </select></label><br/><br/>
-                </td>
-                <td width="200">
-                    {% set purgeStats %}
-                        {% if deleteData.lastRun %}<strong>{{ 'PrivacyManager_LastDelete'|translate }}:</strong>
-                            {{ deleteData.lastRunPretty }}
-                            <br/>
-                            <br/>
-                        {% endif %}
-                        <strong>{{ 'PrivacyManager_NextDelete'|translate }}:</strong>
-                        {{ deleteData.nextRunPretty|raw }}
+            <div {% if deleteData.config.delete_reports_enable == '0' and deleteData.config.delete_logs_enable == '0' %}style="display:none;"{% endif %}
+                 id="deleteDataEstimateSect" class="form-group">
+                <label>
+                    {{ 'PrivacyManager_ReportsDataSavedEstimate'|translate }}
+                </label>
+                {% if deleteData.config.enable_auto_database_size_estimate == '0' %}
+                    <div class="form-help">
+                        <a id="getPurgeEstimateLink" href="#">{{ 'PrivacyManager_GetPurgeEstimate'|translate }}</a>
+                    </div>
+                {% endif %}
+                <div id="deleteDataEstimate"></div>
+                <span class="loadingPiwik" style="display:none;">
+                    <img src="./plugins/Morpheus/images/loading-blue.gif"/> {{ 'General_LoadingData'|translate }}
+                </span>
+            </div>
+
+            <div id="deleteSchedulingSettings" class="form-group">
+                <label for="deleteLowestInterval">
+                    {{ 'PrivacyManager_DeleteSchedulingSettings'|translate }}
+                </label>
+                <div class="form-help">
+                    {% if deleteData.lastRun %}<strong>{{ 'PrivacyManager_LastDelete'|translate }}:</strong>
+                        {{ deleteData.lastRunPretty }}
                         <br/>
                         <br/>
-                        <em><a id="purgeDataNowLink" href="#">{{ 'PrivacyManager_PurgeNow'|translate }}</a></em>
+                    {% endif %}
+                    <strong>{{ 'PrivacyManager_NextDelete'|translate }}:</strong>
+                    {{ deleteData.nextRunPretty|raw }}
+                    <br/>
+                    <br/>
+                    <em><a id="purgeDataNowLink" href="#">{{ 'PrivacyManager_PurgeNow'|translate }}</a></em>
                         <span class="loadingPiwik" style="display:none;"><img
                                     src="./plugins/Morpheus/images/loading-blue.gif"/> {{ 'PrivacyManager_PurgingData'|translate }}</span>
-                        <span id="db-purged-message" style="display: none;"><em>{{ 'PrivacyManager_DBPurged'|translate }}</em></span>
-                    {% endset %}
-                    {{ piwik.inlineHelp(purgeStats) }}
-                </td>
-            </tr>
-        </table>
-        <input type="button" value="{{ 'General_Save'|translate }}" id="deleteLogSettingsSubmit" class="submit"/>
-    </form>
+                    <span id="db-purged-message" style="display: none;"><em>{{ 'PrivacyManager_DBPurged'|translate }}</em></span>
+                </div>
+                <p>{{ 'PrivacyManager_DeleteDataInterval'|translate }}
+                    <select id="deleteLowestInterval" name="deleteLowestInterval">
+                        <option {% if deleteData.config.delete_logs_schedule_lowest_interval == '1' %} selected="selected" {% endif %}
+                                value="1"> {{ 'CoreHome_PeriodDay'|translate }}</option>
+                        <option {% if deleteData.config.delete_logs_schedule_lowest_interval == '7' %} selected="selected" {% endif %}
+                                value="7">{{ 'CoreHome_PeriodWeek'|translate }}</option>
+                        <option {% if deleteData.config.delete_logs_schedule_lowest_interval == '30' %} selected="selected" {% endif %}
+                                value="30">{{ 'CoreHome_PeriodMonth'|translate }}</option>
+                    </select>
+                </p>
+            </div>
+
+            <input type="button" value="{{ 'General_Save'|translate }}" id="deleteLogSettingsSubmit" class="submit"/>
+
+        </form>
 
     {% endif %}
 
diff --git a/plugins/UsersManager/templates/userSettings.twig b/plugins/UsersManager/templates/userSettings.twig
index 769a682a43..e964ecc1d6 100644
--- a/plugins/UsersManager/templates/userSettings.twig
+++ b/plugins/UsersManager/templates/userSettings.twig
@@ -1,6 +1,7 @@
 {% extends 'user.twig' %}
 
 {% block content %}
+
 <h2 piwik-enriched-headline>{{ 'UsersManager_PersonalSettings'|translate }}</h2>
 
 <div class="ui-confirm" id="confirmPasswordChange">
@@ -9,109 +10,109 @@
     <input role="no" type="button" value="{{ 'General_No'|translate }}"/>
 </div>
 
-<table id='userSettingsTable' class="adminTable">
-    <tr>
-        <td><label for="username">{{ 'General_Username'|translate }} </label></td>
-        <td>
-            <input size="25" value="{{ userLogin }}" id="username" disabled="disabled"/>
-            <span class='form-description'>{{ 'UsersManager_YourUsernameCannotBeChanged'|translate }}</span>
-        </td>
-    </tr>
-
-    <tr>
-        <td><label for="alias">{{ 'UsersManager_Alias'|translate }} </label></td>
-        <td><input size="25" value="{{ userAlias }}" id="alias" /></td>
-    </tr>
-    <tr>
-        <td><label for="email">{{ 'UsersManager_Email'|translate }} </label></td>
-        <td><input size="25" value="{{ userEmail }}" id="email"/></td>
-    </tr>
-    <tr>
-        <td><div style="margin-top: 5px;margin-bottom: 10px;">{{ 'General_Language'|translate }}</div></td>
-        <td>
-            <fieldset style="margin-top: 5px;margin-bottom: 10px;">
-                <select name="language" id="language" onchange="if (this.value=='') window.open('?module=Proxy&amp;action=redirect&amp;url=http://piwik.org/translations/');">
-                    <option title="" value="">{{ 'LanguagesManager_AboutPiwikTranslations'|translate }}</option>
-                    {% for language in languages %}
-                        <option value="{{ language.code }}" {% if language.code == currentLanguageCode %}selected="selected"{% endif %}
-                                title="{{ language.name }} ({{ language.english_name }})">{{ language.name }}</option>
-                    {% endfor %}
-                </select>
-                <br />
-            </fieldset>
-        </td>
-    </tr>
-    <tr>
-        <td>{{ 'UsersManager_ReportToLoadByDefault'|translate }}</td>
-        <td>
-            <fieldset>
-                <input id="defaultReportRadioAll" type="radio" value="MultiSites"
-                      name="defaultReport"{% if defaultReport=='MultiSites' %} checked="checked"{% endif %} />
-                <label for="defaultReportRadioAll">{{ 'General_AllWebsitesDashboard'|translate }}</label><br/>
-                <input id="defaultReportSpecific" type="radio" value="1"
-                       name="defaultReport"{% if defaultReport != 'MultiSites' %} checked="checked"{% endif %} />
-                <label for="defaultReportSpecific" style="padding-right:12px;">{{ 'General_DashboardForASpecificWebsite'|translate }}</label>
-
-                <div piwik-siteselector
-                     class="sites_autocomplete"
-                     siteid="{{ defaultReportIdSite }}"
-                     sitename="{{ defaultReportSiteName }}"
-                     switch-site-on-select="false"
-                     show-all-sites-item="false"
-                     showselectedsite="true"
-                     id="defaultReportSiteSelector"></div>
-            </fieldset>
-        </td>
-    </tr>
-    <tr>
-        <td>{{ 'UsersManager_ReportDateToLoadByDefault'|translate }}</td>
-        <td>
-            <fieldset>
-                {% for value,description in availableDefaultDates %}
-                    <input id="defaultDate-{{ loop.index }}" type="radio"{% if defaultDate==value %} checked="checked"{% endif %} value="{{ value }}" name="defaultDate"/>
-                    <label for="defaultDate-{{ loop.index }}">{{ description }}</label>
-                    <br/>
-                {% endfor %}
-            </fieldset>
-        </td>
-    </tr>
+<form id="userSettingsTable">
+
+    <div class="form-group">
+        <label for="username">{{ 'General_Username'|translate }}</label>
+        <div class="form-help">{{ 'UsersManager_YourUsernameCannotBeChanged'|translate }}</div>
+        <input value="{{ userLogin }}" id="username" disabled="disabled"/>
+    </div>
+
+    <div class="form-group">
+        <label for="alias">{{ 'UsersManager_Alias'|translate }}</label>
+        <input value="{{ userAlias }}" id="alias" />
+    </div>
+
+    <div class="form-group">
+        <label for="email">{{ 'UsersManager_Email'|translate }}</label>
+        <input value="{{ userEmail }}" id="email"/>
+    </div>
+
+    <div class="form-group">
+        <label for="language">{{ 'General_Language'|translate }}</label>
+        <div class="form-help">
+            <a href="?module=Proxy&amp;action=redirect&amp;url=http://piwik.org/translations/" target="_blank">
+                {{ 'LanguagesManager_AboutPiwikTranslations'|translate }}</a>
+        </div>
+        <select name="language" id="language">
+            {% for language in languages %}
+                <option value="{{ language.code }}" {% if language.code == currentLanguageCode %}selected="selected"{% endif %}
+                        title="{{ language.name }} ({{ language.english_name }})">{{ language.name }}</option>
+            {% endfor %}
+        </select>
+    </div>
+
+    <div class="form-group">
+        <label>{{ 'UsersManager_ReportToLoadByDefault'|translate }}</label>
+        <label class="radio">
+            <input id="defaultReportRadioAll" type="radio" value="MultiSites"
+                   name="defaultReport"{% if defaultReport=='MultiSites' %} checked="checked"{% endif %} />
+            {{ 'General_AllWebsitesDashboard'|translate }}
+        </label>
+        <label class="radio">
+            <input id="defaultReportSpecific" type="radio" value="1"
+                   name="defaultReport"{% if defaultReport != 'MultiSites' %} checked="checked"{% endif %} />
+            {{ 'General_DashboardForASpecificWebsite'|translate }}
+        </label>
+        <div piwik-siteselector
+             class="sites_autocomplete"
+             siteid="{{ defaultReportIdSite }}"
+             sitename="{{ defaultReportSiteName }}"
+             switch-site-on-select="false"
+             show-all-sites-item="false"
+             showselectedsite="true"
+             id="defaultReportSiteSelector"
+             style="position: relative"></div>
+    </div>
+
+    <div class="form-group">
+        <label>{{ 'UsersManager_ReportDateToLoadByDefault'|translate }}</label>
+        {% for value,description in availableDefaultDates %}
+            <label class="radio">
+                <input id="defaultDate-{{ loop.index }}" type="radio"{% if defaultDate==value %} checked="checked"{% endif %} value="{{ value }}" name="defaultDate"/>
+                {{ description }}
+            </label>
+        {% endfor %}
+    </div>
 
     {% if isValidHost is defined and isValidHost %}
-        <tr>
-            <td><label for="email">{{ 'General_ChangePassword'|translate }} </label></td>
-            <td><input size="25" value="" autocomplete="off" id="password" type="password"/>
-                <span class='form-description'>{{ 'UsersManager_IfYouWouldLikeToChangeThePasswordTypeANewOne'|translate }}</span>
-                <br/><br/><input size="25" value="" autocomplete="off" id="passwordBis" type="password"/>
-                <span class='form-description'> {{ 'UsersManager_TypeYourPasswordAgain'|translate }}</span>
-            </td>
-        </tr>
+        <div class="form-group">
+            <label for="password">{{ 'General_ChangePassword'|translate }}</label>
+            <div class="form-help">
+                {{ 'UsersManager_IfYouWouldLikeToChangeThePasswordTypeANewOne'|translate }}
+            </div>
+            <input value="" autocomplete="off" id="password" type="password"/>
+        </div>
+        <div class="form-group">
+            <div class="form-help">
+                {{ 'UsersManager_TypeYourPasswordAgain'|translate }}
+            </div>
+            <input value="" autocomplete="off" id="passwordBis" type="password"/>
+        </div>
     {% endif %}
-</table>
-{% if isValidHost is not defined or not isValidHost %}
-    <div id="injectedHostCannotChangePwd">
-        {% set injectedHostCannotChangePwd %}
-        {{ 'UsersManager_InjectedHostCannotChangePwd'|translate(invalidHost) }}
-        &nbsp;{% if not isSuperUser %}{{ 'UsersManager_EmailYourAdministrator'|translate(invalidHostMailLinkStart,'</a>')|raw }}{% endif %}
-        {% endset %}
-        {{ injectedHostCannotChangePwd|notification({'raw': true, 'context': 'error', 'placeat': '#injectedHostCannotChangePwd', 'noclear': true}) }}
-    </div>
-    <br/>
-{% endif %}
 
-{% import 'ajaxMacros.twig' as ajax %}
-{{ ajax.errorDiv('ajaxErrorUserSettings') }}
-{{ ajax.loadingDiv('ajaxLoadingUserSettings') }}
-<input type="submit" value="{{ 'General_Save'|translate }}" id="userSettingsSubmit" class="submit"/>
+    {% if isValidHost is not defined or not isValidHost %}
+        <div class="alert alert-danger">
+            {{ 'UsersManager_InjectedHostCannotChangePwd'|translate(invalidHost) }}
+            {% if not isSuperUser %}{{ 'UsersManager_EmailYourAdministrator'|translate(invalidHostMailLinkStart,'</a>')|raw }}{% endif %}
+        </div>
+    {% endif %}
+
+    {% import 'ajaxMacros.twig' as ajax %}
+    {{ ajax.errorDiv('ajaxErrorUserSettings') }}
+    {{ ajax.loadingDiv('ajaxLoadingUserSettings') }}
 
-<br/><br/>
+    <button type="button" id="userSettingsSubmit">{{ 'General_Save'|translate }}</button>
+
+</form>
 
 <h2 id="excludeCookie">{{ 'UsersManager_ExcludeVisitsViaCookie'|translate }}</h2>
 <p>
-{% if ignoreCookieSet %}
-   {{ 'UsersManager_YourVisitsAreIgnoredOnDomain'|translate("<strong>", piwikHost, "</strong>")|raw }}
-{% else %}
-   {{ 'UsersManager_YourVisitsAreNotIgnored'|translate("<strong>","</strong>")|raw }}
-{% endif %}
+    {% if ignoreCookieSet %}
+       {{ 'UsersManager_YourVisitsAreIgnoredOnDomain'|translate("<strong>", piwikHost, "</strong>")|raw }}
+    {% else %}
+       {{ 'UsersManager_YourVisitsAreNotIgnored'|translate("<strong>","</strong>")|raw }}
+    {% endif %}
 </p>
 <span style="margin-left:20px;">
 <a href='{{ linkTo({'ignoreSalt':ignoreSalt, 'action':'setIgnoreCookie'}) }}#excludeCookie'>&rsaquo; {% if ignoreCookieSet %}{{ 'UsersManager_ClickHereToDeleteTheCookie'|translate }}
@@ -119,5 +120,4 @@
     <br/>
 </a></span>
 
-<br/><br/>
-{% endblock %}
\ No newline at end of file
+{% endblock %}