svn commit: r1818254 - /ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/NewCustomer.ftl

[Deepak Dixit-5]

Author: deepak
Date: Fri Dec 15 09:51:39 2017
New Revision: 1818254

URL: http://svn.apache.org/viewvc?rev=1818254&view=rev
Log:
Improved: Update markup of Register page according to standard markup given by Bootstrap v4.0.0 (OFBIZ-10018)
Thanks Nitish Mishra for your contribution

Modified:
    ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/NewCustomer.ftl

Modified: ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/NewCustomer.ftl
URL: http://svn.apache.org/viewvc/ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/NewCustomer.ftl?rev=1818254&r1=1818253&r2=1818254&view=diff
==============================================================================
--- ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/NewCustomer.ftl (original)
+++ ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/NewCustomer.ftl Fri Dec 15 09:51:39 2017
@@ -68,23 +68,25 @@ NOTE: all page headings should start wit
 there should generally always only be one h1 tag on the page and that
 will generally always be reserved for the logo at the top of the page.
 ------------------------------------------------------------------------------->
-
-<h2>${uiLabelMap.PartyRequestNewAccount}
-  <span>
-    ${uiLabelMap.PartyAlreadyHaveAccount}, <a
-        href='<@ofbizUrl>checkLogin/main</@ofbizUrl>'>${uiLabelMap.CommonLoginHere}</a>
-  </span>
-</h2>
+<div class="d-flex justify-content-center">
+  <h2>${uiLabelMap.PartyRequestNewAccount}</h2>
+</div>
+<div class="d-flex justify-content-center">
+  <h3>
+    ${uiLabelMap.PartyAlreadyHaveAccount},
+    <a href='<@ofbizUrl>checkLogin/main</@ofbizUrl>'>${uiLabelMap.CommonLoginHere}</a>
+  </h3>
+</div>
 
 <#macro fieldErrors fieldName>
   <#if errorMessageList?has_content>
     <#assign fieldMessages =
         Static["org.apache.ofbiz.base.util.MessageString"].getMessagesForField(fieldName, true, errorMessageList)>
-  <ul>
-    <#list fieldMessages as errorMsg>
-      <li class="errorMessage">${errorMsg}</li>
-    </#list>
-  </ul>
+      <ul>
+        <#list fieldMessages as errorMsg>
+          <li class="errorMessage">${errorMsg}</li>
+        </#list>
+      </ul>
   </#if>
 </#macro>
 <#macro fieldErrorsMulti fieldName1 fieldName2 fieldName3 fieldName4>
@@ -99,186 +101,212 @@ will generally always be reserved for th
   </ul>
   </#if>
 </#macro>
-
-&nbsp;<a href="<@ofbizUrl>${donePage}</@ofbizUrl>" class="button">${uiLabelMap.CommonCancel}</a>
-&nbsp;<a href="javascript:document.getElementById('newuserform').submit()" class="button">${uiLabelMap.CommonSave}</a>
+<div class="d-flex justify-content-center">
+  <a href="<@ofbizUrl>${donePage}</@ofbizUrl>" class="button">${uiLabelMap.CommonCancel}</a>
+  <a href="javascript:document.getElementById('newuserform').submit()" class="button">${uiLabelMap.CommonSave}</a>
+</div>
+<div class="d-flex justify-content-center">
+<div class="card p-2 m-3">
 
 <form method="post" action="<@ofbizUrl>createcustomer${previousParams}</@ofbizUrl>" id="newuserform" name="newuserform">
 
-
-<#----------------------------------------------------------------------
-If you need to include a brief explanation of the form, or certain
-elements in the form (such as explaining asterisks denote REQUIRED),
-then you should use a <p></p> tag with a class name of "desc"
------------------------------------------------------------------------>
-
-  <p class="desc">${uiLabelMap.CommonFieldsMarkedAreRequired}</p>
-
-<#----------------------------------------------------------------------
-There are two types of fieldsets, regular (full width) fielsets, and
-column (half width) fieldsets. If you want to group two sets of inputs
-side by side in two columns, give each fieldset a class name of "col"
------------------------------------------------------------------------>
-
-  <fieldset class="col">
-    <legend>${uiLabelMap.PartyFullName}</legend>
-    <input type="hidden" name="emailProductStoreId" value="${productStoreId}"/>
-  <#----------------------------------------------------------------------
-  Each input row should be enclosed in a <div></div>.
-  This will ensure than each input field clears the one
-  above it. Alternately, if you want several inputs to float next to
-  each other, you can enclose them in a table as illustrated below for
-  the phone numbers, or you can enclose each label/input pair in a span
-
-  Example:
-  <div>
-    <span>
-      <input type="text" name="expMonth" value=""/>
-      <label for="expMonth">Exp. Month</label>
-    </span>
-    <span>
-      <input type="text" name="expYear" value=""/>
-      <label for="expYear">Exp. Year</label>
-    </span>
+  <div class="card-block">
+    ${uiLabelMap.CommonFieldsMarkedAreRequired}
   </div>
-  ----------------------------------------------------------------------->
-    <div>
-      <label for="USER_TITLE">${uiLabelMap.CommonTitle}</label>
-    <@fieldErrors fieldName="USER_TITLE"/>
-      <select name="USER_TITLE" id="USER_TITLE">
-      <#if requestParameters.USER_TITLE?has_content >
-        <option>${requestParameters.USER_TITLE}</option>
-        <option value="${requestParameters.USER_TITLE}"> --</option>
-      <#else>
-        <option value="">${uiLabelMap.CommonSelectOne}</option>
-      </#if>
-        <option>${uiLabelMap.CommonTitleMr}</option>
-        <option>${uiLabelMap.CommonTitleMrs}</option>
-        <option>${uiLabelMap.CommonTitleMs}</option>
-        <option>${uiLabelMap.CommonTitleDr}</option>
-      </select>
-    </div>
 
-    <div>
-      <label for="USER_FIRST_NAME">${uiLabelMap.PartyFirstName}*</label>
-    <@fieldErrors fieldName="USER_FIRST_NAME"/>
-      <input type="text" name="USER_FIRST_NAME" id="USER_FIRST_NAME" value="${requestParameters.USER_FIRST_NAME!}"/>
-    </div>
+<div class="row">
+  <div class="col-6">
+    <fieldset>
+      <legend>${uiLabelMap.PartyFullName}</legend>
+      <input type="hidden" name="emailProductStoreId" value="${productStoreId}"/>
+      <div class="row">
+        <div class="col-12">
+          <label for="USER_TITLE">${uiLabelMap.CommonTitle}</label>
+          <@fieldErrors fieldName="USER_TITLE"/>
+          <select name="USER_TITLE" class="form-control form-control-sm">
+          <#if requestParameters.USER_TITLE?has_content >
+            <option>${requestParameters.USER_TITLE}</option>
+            <option value="${requestParameters.USER_TITLE}"> --</option>
+          <#else>
+            <option value="">${uiLabelMap.CommonSelectOne}</option>
+          </#if>
+            <option>${uiLabelMap.CommonTitleMr}</option>
+            <option>${uiLabelMap.CommonTitleMrs}</option>
+            <option>${uiLabelMap.CommonTitleMs}</option>
+            <option>${uiLabelMap.CommonTitleDr}</option>
+          </select>
+        </div>
+      </div>
 
-    <div>
-      <label for="USER_MIDDLE_NAME">${uiLabelMap.PartyMiddleInitial}</label>
-    <@fieldErrors fieldName="USER_MIDDLE_NAME"/>
-      <input type="text" name="USER_MIDDLE_NAME" id="USER_MIDDLE_NAME" value="${requestParameters.USER_MIDDLE_NAME!}"/>
-    </div>
+      <div class="row">
+        <div class="col-12">
+          <label for="USER_FIRST_NAME">${uiLabelMap.PartyFirstName}*</label>
+          <@fieldErrors fieldName="USER_FIRST_NAME"/>
+          <input type="text" name="USER_FIRST_NAME" id="USER_FIRST_NAME" value="${requestParameters.USER_FIRST_NAME!}" class="form-control form-control-sm"/>
+        </div>
+      </div>
 
-    <div>
-      <label for="USER_LAST_NAME">${uiLabelMap.PartyLastName}*</label>
-    <@fieldErrors fieldName="USER_LAST_NAME"/>
-      <input type="text" name="USER_LAST_NAME" id="USER_LAST_NAME" value="${requestParameters.USER_LAST_NAME!}"/>
-    </div>
+      <div class="row">
+        <div class="col-12">
+          <label for="USER_MIDDLE_NAME">${uiLabelMap.PartyMiddleInitial}</label>
+          <@fieldErrors fieldName="USER_MIDDLE_NAME"/>
+          <input type="text" name="USER_MIDDLE_NAME" id="USER_MIDDLE_NAME" value="${requestParameters.USER_MIDDLE_NAME!}" class="form-control form-control-sm"/>
+        </div>
+      </div>
 
-    <div>
-      <label for="USER_SUFFIX">${uiLabelMap.PartySuffix}</label>
-    <@fieldErrors fieldName="USER_SUFFIX"/>
-      <input type="text" class='inputBox' name="USER_SUFFIX" id="USER_SUFFIX"
-             value="${requestParameters.USER_SUFFIX!}"/>
-    </div>
+      <div class="row">
+        <div class="col-12">
+          <label for="USER_LAST_NAME">${uiLabelMap.PartyLastName}*</label>
+          <@fieldErrors fieldName="USER_LAST_NAME"/>
+          <input type="text" name="USER_LAST_NAME" id="USER_LAST_NAME" value="${requestParameters.USER_LAST_NAME!}" class="form-control form-control-sm"/>
+        </div>
+      </div>
 
+      <div class="row">
+        <div class="col-12">
+          <label for="USER_SUFFIX">${uiLabelMap.PartySuffix}</label>
+          <@fieldErrors fieldName="USER_SUFFIX"/>
+          <input type="text" name="USER_SUFFIX" id="USER_SUFFIX" value="${requestParameters.USER_SUFFIX!}" class="form-control form-control-sm"/>
+          </div>
+      </div>
   </fieldset>
+  <fieldset>
+      <legend>${uiLabelMap.PartyEmailAddress}</legend>
+      <div class="row">
+        <div class="col-12">
+          <label for="CUSTOMER_EMAIL">${uiLabelMap.PartyEmailAddress}*</label>
+          <@fieldErrors fieldName="CUSTOMER_EMAIL"/>
+          <input type="text" name="CUSTOMER_EMAIL" id="CUSTOMER_EMAIL" value="${requestParameters.CUSTOMER_EMAIL!}"
+            class="form-control form-control-sm" onchange="changeEmail()" onkeyup="changeEmail()"/>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-12">
+          <label for="CUSTOMER_EMAIL_ALLOW_SOL">${uiLabelMap.PartyAllowSolicitation}</label>
+          <select name="CUSTOMER_EMAIL_ALLOW_SOL" id="CUSTOMER_EMAIL_ALLOW_SOL" class="form-control form-control-sm">
+            <#if ("Y" == ((requestParameters.CUSTOMER_EMAIL_ALLOW_SOL)!""))>
+              <option value="Y">${uiLabelMap.CommonY}</option></#if>
+            <#if ("N" == ((requestParameters.CUSTOMER_EMAIL_ALLOW_SOL)!""))>
+              <option value="N">${uiLabelMap.CommonN}</option></#if>
+              <option></option>
+              <option value="Y">${uiLabelMap.CommonY}</option>
+              <option value="N">${uiLabelMap.CommonN}</option>
+          </select>
+        </div>
+      </div>
+    </fieldset>
+  </div>
+  <div class="col-6">
 
-  <fieldset class="col">
+  <fieldset>
     <legend>${uiLabelMap.PartyShippingAddress}</legend>
-    <div>
-      <label for="CUSTOMER_ADDRESS1">${uiLabelMap.PartyAddressLine1}*</label>
-    <@fieldErrors fieldName="CUSTOMER_ADDRESS1"/>
-      <input type="text" name="CUSTOMER_ADDRESS1" id="CUSTOMER_ADDRESS1"
-          value="${requestParameters.CUSTOMER_ADDRESS1!}"/>
+    <div class="row">
+      <div class="col-12">
+        <label for="CUSTOMER_ADDRESS1">${uiLabelMap.PartyAddressLine1}*</label>
+        <@fieldErrors fieldName="CUSTOMER_ADDRESS1"/>
+        <input type="text" name="CUSTOMER_ADDRESS1" id="CUSTOMER_ADDRESS1"
+          value="${requestParameters.CUSTOMER_ADDRESS1!}" class="form-control form-control-sm"/>
+      </div>
     </div>
-    <div>
-      <label for="CUSTOMER_ADDRESS2">${uiLabelMap.PartyAddressLine2}</label>
-    <@fieldErrors fieldName="CUSTOMER_ADDRESS2"/>
-      <input type="text" name="CUSTOMER_ADDRESS2" id="CUSTOMER_ADDRESS2"
-          value="${requestParameters.CUSTOMER_ADDRESS2!}"/>
+    <div class="row">
+      <div class="col-12">
+        <label for="CUSTOMER_ADDRESS2">${uiLabelMap.PartyAddressLine2}</label>
+        <@fieldErrors fieldName="CUSTOMER_ADDRESS2"/>
+          <input type="text" name="CUSTOMER_ADDRESS2" id="CUSTOMER_ADDRESS2"
+            value="${requestParameters.CUSTOMER_ADDRESS2!}" class="form-control form-control-sm"/>
+      </div>
     </div>
-    <div>
-      <label for="CUSTOMER_CITY">${uiLabelMap.PartyCity}*</label>
-    <@fieldErrors fieldName="CUSTOMER_CITY"/>
-      <input type="text" name="CUSTOMER_CITY" id="CUSTOMER_CITY" value="${requestParameters.CUSTOMER_CITY!}"/>
+    <div class="row">
+      <div class="col-12">
+        <label for="CUSTOMER_CITY">${uiLabelMap.PartyCity}*</label>
+        <@fieldErrors fieldName="CUSTOMER_CITY"/>
+        <input type="text" name="CUSTOMER_CITY" id="CUSTOMER_CITY" value="${requestParameters.CUSTOMER_CITY!}" class="form-control form-control-sm"/>
+      </div>
     </div>
-    <div>
-      <label for="CUSTOMER_POSTAL_CODE">${uiLabelMap.PartyZipCode}*</label>
-     <@fieldErrors fieldName="CUSTOMER_POSTAL_CODE"/>
-      <input type="text" name="CUSTOMER_POSTAL_CODE" id="CUSTOMER_POSTAL_CODE"
-          value="${requestParameters.CUSTOMER_POSTAL_CODE!}"/>
+    <div class="row">
+      <div class="col-12">
+        <label for="CUSTOMER_POSTAL_CODE">${uiLabelMap.PartyZipCode}*</label>
+        <@fieldErrors fieldName="CUSTOMER_POSTAL_CODE"/>
+        <input type="text" name="CUSTOMER_POSTAL_CODE" id="CUSTOMER_POSTAL_CODE"
+          value="${requestParameters.CUSTOMER_POSTAL_CODE!}" class="form-control form-control-sm"/>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-12">
+        <label for="customerCountry">${uiLabelMap.CommonCountry}*</label>
+        <@fieldErrors fieldName="CUSTOMER_COUNTRY"/>
+        <select name="CUSTOMER_COUNTRY" id="newuserform_countryGeoId" class="form-control form-control-sm">
+          ${screens.render("component://common/widget/CommonScreens.xml#countries")}
+          <#assign defaultCountryGeoId =
+              Static["org.apache.ofbiz.entity.util.EntityUtilProperties"].getPropertyValue("general",
+              "country.geo.id.default", delegator)>
+          <option selected="selected" value="${defaultCountryGeoId}">
+            <#assign countryGeo = delegator.findOne("Geo",Static["org.apache.ofbiz.base.util.UtilMisc"]
+                .toMap("geoId",defaultCountryGeoId), false)>
+            ${countryGeo.get("geoName",locale)}
+          </option>
+        </select>
+      </div>
     </div>
-    <div>
-      <label for="customerCountry">${uiLabelMap.CommonCountry}*</label>
-      <@fieldErrors fieldName="CUSTOMER_COUNTRY"/>
-      <select name="CUSTOMER_COUNTRY" id="newuserform_countryGeoId">
-        ${screens.render("component://common/widget/CommonScreens.xml#countries")}
-        <#assign defaultCountryGeoId =
-            Static["org.apache.ofbiz.entity.util.EntityUtilProperties"].getPropertyValue("general",
-            "country.geo.id.default", delegator)>
-        <option selected="selected" value="${defaultCountryGeoId}">
-          <#assign countryGeo = delegator.findOne("Geo",Static["org.apache.ofbiz.base.util.UtilMisc"]
-              .toMap("geoId",defaultCountryGeoId), false)>
-          ${countryGeo.get("geoName",locale)}
-        </option>
-      </select>
+    <div class="row">
+      <div class="col-12">
+        <label for="customerState">${uiLabelMap.PartyState}*</label>
+        <@fieldErrors fieldName="CUSTOMER_STATE"/>
+        <select name="CUSTOMER_STATE" id="newuserform_stateProvinceGeoId" class="form-control form-control-sm"></select>
+      </div>
     </div>
-    <div>
-      <label for="customerState">${uiLabelMap.PartyState}*</label>
-      <@fieldErrors fieldName="CUSTOMER_STATE"/>
-      <select name="CUSTOMER_STATE" id="newuserform_stateProvinceGeoId"></select>
-    <div/>
-    <div>
-      <label for="CUSTOMER_ADDRESS_ALLOW_SOL">${uiLabelMap.PartyAllowAddressSolicitation}</label>
-      <@fieldErrors fieldName="CUSTOMER_ADDRESS_ALLOW_SOL"/>
-      <select name="CUSTOMER_ADDRESS_ALLOW_SOL" id="CUSTOMER_ADDRESS_ALLOW_SOL">
-        <#if ("Y" == ((requestParameters.CUSTOMER_ADDRESS_ALLOW_SOL)!""))>
+    <div class="row">
+      <div class="col-12">
+        <label for="CUSTOMER_ADDRESS_ALLOW_SOL">${uiLabelMap.PartyAllowAddressSolicitation}</label>
+        <@fieldErrors fieldName="CUSTOMER_ADDRESS_ALLOW_SOL"/>
+        <select name="CUSTOMER_ADDRESS_ALLOW_SOL" id="CUSTOMER_ADDRESS_ALLOW_SOL" class="form-control form-control-sm">
+          <#if ("Y" == ((requestParameters.CUSTOMER_ADDRESS_ALLOW_SOL)!""))>
+            <option value="Y">${uiLabelMap.CommonY}</option>
+          </#if>
+          <#if ("N" == ((requestParameters.CUSTOMER_ADDRESS_ALLOW_SOL)!""))>
+            <option value="N">${uiLabelMap.CommonN}</option>
+          </#if>
+          <option></option>
           <option value="Y">${uiLabelMap.CommonY}</option>
-        </#if>
-        <#if ("N" == ((requestParameters.CUSTOMER_ADDRESS_ALLOW_SOL)!""))>
           <option value="N">${uiLabelMap.CommonN}</option>
-        </#if>
-        <option></option>
-        <option value="Y">${uiLabelMap.CommonY}</option>
-        <option value="N">${uiLabelMap.CommonN}</option>
-      </select>
+        </select>
+      </div>
     </div>
   </fieldset>
+  </div>
+</div>
 
   <fieldset>
     <legend>${uiLabelMap.PartyPhoneNumbers}</legend>
-    <table
+    <table class="table table-responsive"
         summary="Tabular form for entering multiple telecom numbers for different purposes.
         Each row allows user to enter telecom number for a purpose">
       <thead>
         <tr>
           <th></th>
-          <th scope="col">${uiLabelMap.CommonCountry}</th>
-          <th scope="col">${uiLabelMap.PartyAreaCode}</th>
-          <th scope="col">${uiLabelMap.PartyContactNumber}</th>
-          <th scope="col">${uiLabelMap.PartyExtension}</th>
-          <th scope="col">${uiLabelMap.PartyAllowSolicitation}</th>
+          <th>${uiLabelMap.CommonCountry}</th>
+          <th>${uiLabelMap.PartyAreaCode}</th>
+          <th>${uiLabelMap.PartyContactNumber}</th>
+          <th>${uiLabelMap.PartyExtension}</th>
+          <th>${uiLabelMap.PartyAllowSolicitation}</th>
         </tr>
       </thead>
       <tbody>
         <tr>
-          <th scope="row">${uiLabelMap.PartyHomePhone}</th>
+          <th>${uiLabelMap.PartyHomePhone}</th>
           <td>
-            <input type="text" name="CUSTOMER_HOME_COUNTRY" size="5" value="${requestParameters.CUSTOMER_HOME_COUNTRY!}"/>
+            <input type="text" name="CUSTOMER_HOME_COUNTRY" size="5" class="form-control form-control-sm" value="${requestParameters.CUSTOMER_HOME_COUNTRY!}"/>
           </td>
           <td>
-            <input type="text" name="CUSTOMER_HOME_AREA" size="5" value="${requestParameters.CUSTOMER_HOME_AREA!}"/>
+            <input type="text" name="CUSTOMER_HOME_AREA" size="5" class="form-control form-control-sm" value="${requestParameters.CUSTOMER_HOME_AREA!}"/>
           </td>
           <td>
-            <input type="text" name="CUSTOMER_HOME_CONTACT" value="${requestParameters.CUSTOMER_HOME_CONTACT!}"/></td>
+            <input type="text" name="CUSTOMER_HOME_CONTACT" class="form-control form-control-sm" value="${requestParameters.CUSTOMER_HOME_CONTACT!}"/></td>
           <td>
-            <input type="text" name="CUSTOMER_HOME_EXT" size="6" value="${requestParameters.CUSTOMER_HOME_EXT!}"/>
+            <input type="text" name="CUSTOMER_HOME_EXT" size="6" class="form-control form-control-sm" value="${requestParameters.CUSTOMER_HOME_EXT!}"/>
           </td>
           <td>
-            <select name="CUSTOMER_HOME_ALLOW_SOL">
+            <select name="CUSTOMER_HOME_ALLOW_SOL" class="form-control form-control-sm">
               <#if ("Y" == ((requestParameters.CUSTOMER_HOME_ALLOW_SOL)!""))>
                 <option value="Y">${uiLabelMap.CommonY}</option></#if>
               <#if ("N" == ((requestParameters.CUSTOMER_HOME_ALLOW_SOL)!""))>
@@ -293,19 +321,19 @@ side by side in two columns, give each f
         <tr>
           <th scope="row">${uiLabelMap.PartyBusinessPhone}</th>
           <td>
-            <input type="text" name="CUSTOMER_WORK_COUNTRY" size="5" value="${requestParameters.CUSTOMER_WORK_COUNTRY!}"/>
+            <input type="text" name="CUSTOMER_WORK_COUNTRY" size="5" class="form-control form-control-sm" value="${requestParameters.CUSTOMER_WORK_COUNTRY!}"/>
           </td>
           <td>
-            <input type="text" name="CUSTOMER_WORK_AREA" size="5" value="${requestParameters.CUSTOMER_WORK_AREA!}"/>
+            <input type="text" name="CUSTOMER_WORK_AREA" size="5" class="form-control form-control-sm" value="${requestParameters.CUSTOMER_WORK_AREA!}"/>
           </td>
           <td>
-            <input type="text" name="CUSTOMER_WORK_CONTACT" value="${requestParameters.CUSTOMER_WORK_CONTACT!}"/>
+            <input type="text" name="CUSTOMER_WORK_CONTACT" class="form-control form-control-sm" value="${requestParameters.CUSTOMER_WORK_CONTACT!}"/>
           </td>
           <td>
-            <input type="text" name="CUSTOMER_WORK_EXT" size="6" value="${requestParameters.CUSTOMER_WORK_EXT!}"/>
+            <input type="text" name="CUSTOMER_WORK_EXT" class="form-control form-control-sm" size="6" value="${requestParameters.CUSTOMER_WORK_EXT!}"/>
           </td>
           <td>
-            <select name="CUSTOMER_WORK_ALLOW_SOL">
+            <select name="CUSTOMER_WORK_ALLOW_SOL" class="form-control form-control-sm">
               <#if ("Y" == ((requestParameters.CUSTOMER_WORK_ALLOW_SOL)!""))>
                 <option value="Y">${uiLabelMap.CommonY}</option></#if>
               <#if ("N" == ((requestParameters.CUSTOMER_WORK_ALLOW_SOL)!""))>
@@ -319,17 +347,17 @@ side by side in two columns, give each f
         <tr>
           <th scope="row">${uiLabelMap.PartyFaxNumber}</th>
           <td>
-            <input type="text" name="CUSTOMER_FAX_COUNTRY" size="5" value="${requestParameters.CUSTOMER_FAX_COUNTRY!}"/>
+            <input type="text" name="CUSTOMER_FAX_COUNTRY" size="5" class="form-control form-control-sm" value="${requestParameters.CUSTOMER_FAX_COUNTRY!}"/>
           </td>
           <td>
-            <input type="text" name="CUSTOMER_FAX_AREA" size="5" value="${requestParameters.CUSTOMER_FAX_AREA!}"/>
+            <input type="text" name="CUSTOMER_FAX_AREA" size="5" class="form-control form-control-sm" value="${requestParameters.CUSTOMER_FAX_AREA!}"/>
           </td>
           <td>
-            <input type="text" name="CUSTOMER_FAX_CONTACT" value="${requestParameters.CUSTOMER_FAX_CONTACT!}"/>
+            <input type="text" name="CUSTOMER_FAX_CONTACT" class="form-control form-control-sm" value="${requestParameters.CUSTOMER_FAX_CONTACT!}"/>
           </td>
           <td></td>
           <td>
-            <select name="CUSTOMER_FAX_ALLOW_SOL">
+            <select name="CUSTOMER_FAX_ALLOW_SOL" class="form-control form-control-sm">
               <#if ("Y" == ((requestParameters.CUSTOMER_FAX_ALLOW_SOL)!""))>
                 <option value="Y">${uiLabelMap.CommonY}</option></#if>
               <#if ("N" == ((requestParameters.CUSTOMER_FAX_ALLOW_SOL)!""))>
@@ -344,17 +372,17 @@ side by side in two columns, give each f
           <th scope="row">${uiLabelMap.PartyMobilePhone}</th>
           <td>
             <input type="text" name="CUSTOMER_MOBILE_COUNTRY" size="5"
-                value="${requestParameters.CUSTOMER_MOBILE_COUNTRY!}"/>
+                value="${requestParameters.CUSTOMER_MOBILE_COUNTRY!}" class="form-control form-control-sm"/>
           </td>
           <td>
-            <input type="text" name="CUSTOMER_MOBILE_AREA" size="5" value="${requestParameters.CUSTOMER_MOBILE_AREA!}"/>
+            <input type="text" name="CUSTOMER_MOBILE_AREA" size="5" class="form-control form-control-sm" value="${requestParameters.CUSTOMER_MOBILE_AREA!}"/>
           </td>
           <td>
-            <input type="text" name="CUSTOMER_MOBILE_CONTACT" value="${requestParameters.CUSTOMER_MOBILE_CONTACT!}"/>
+            <input type="text" name="CUSTOMER_MOBILE_CONTACT" class="form-control form-control-sm" value="${requestParameters.CUSTOMER_MOBILE_CONTACT!}"/>
           </td>
           <td></td>
           <td>
-            <select name="CUSTOMER_MOBILE_ALLOW_SOL">
+            <select name="CUSTOMER_MOBILE_ALLOW_SOL" class="form-control form-control-sm">
               <#if ("Y" == ((requestParameters.CUSTOMER_MOBILE_ALLOW_SOL)!""))>
                 <option value="Y">${uiLabelMap.CommonY}</option></#if>
               <#if ("N" == ((requestParameters.CUSTOMER_MOBILE_ALLOW_SOL)!""))>
@@ -368,43 +396,25 @@ side by side in two columns, give each f
       </tbody>
     </table>
   </fieldset>
-
-  <fieldset class="col">
-    <legend>${uiLabelMap.PartyEmailAddress}</legend>
-    <div>
-      <label for="CUSTOMER_EMAIL">${uiLabelMap.PartyEmailAddress}*</label>
-      <@fieldErrors fieldName="CUSTOMER_EMAIL"/>
-      <input type="text" name="CUSTOMER_EMAIL" id="CUSTOMER_EMAIL" value="${requestParameters.CUSTOMER_EMAIL!}"
-          onchange="changeEmail()" onkeyup="changeEmail()"/>
-    </div>
-    <div>
-      <label for="CUSTOMER_EMAIL_ALLOW_SOL">${uiLabelMap.PartyAllowSolicitation}</label>
-      <select name="CUSTOMER_EMAIL_ALLOW_SOL" id="CUSTOMER_EMAIL_ALLOW_SOL">
-        <#if ("Y" == ((requestParameters.CUSTOMER_EMAIL_ALLOW_SOL)!""))>
-          <option value="Y">${uiLabelMap.CommonY}</option></#if>
-        <#if ("N" == ((requestParameters.CUSTOMER_EMAIL_ALLOW_SOL)!""))>
-        <option value="N">${uiLabelMap.CommonN}</option></#if>
-        <option></option>
-        <option value="Y">${uiLabelMap.CommonY}</option>
-        <option value="N">${uiLabelMap.CommonN}</option>
-      </select>
-    </div>
-  </fieldset>
-
-  <fieldset class="col">
+  <div class="row">
+  <div class="col-6">
+  <fieldset>
     <legend><#if getUsername>${uiLabelMap.CommonUsername}</#if></legend>
     <#if getUsername>
       <@fieldErrors fieldName="USERNAME"/>
       <#if !requestParameters.preferredUsername?has_content>
-        <div class="form-row inline">
-          <label for="UNUSEEMAIL">
-            <input type="checkbox" class="checkbox" name="UNUSEEMAIL" id="UNUSEEMAIL" value="on"
+        <div class="row">
+        <div class="form-check col-12">
+          <label class="form-check-label">
+            <input type="checkbox" class="checkbox" name="UNUSEEMAIL" class="form-check-input" id="UNUSEEMAIL" value="on"
                 onclick="setEmailUsername();" onfocus="setLastFocused(this);"/> ${uiLabelMap.EcommerceUseEmailAddress}
           </label>
         </div>
+        </div>
       </#if>
 
-      <div>
+      <div class="row">
+      <div class="col-12">
         <label for="USERNAME">${uiLabelMap.CommonUsername}*</label>
         <#if requestParameters.preferredUsername?has_content>
           <input type="text" name="showUserName" id="showUserName" value="${requestParameters.USERNAME!}"
@@ -412,40 +422,52 @@ side by side in two columns, give each f
           <input type="hidden" name="USERNAME" id="USERNAME" value="${requestParameters.USERNAME!}"/>
         <#else>
           <input type="text" name="USERNAME" id="USERNAME" value="${requestParameters.USERNAME!}"
-              onfocus="clickUsername();" onchange="changeEmail();"/>
+              class="form-control form-control-sm" onfocus="clickUsername();" onchange="changeEmail();"/>
         </#if>
       </div>
+      </div>
     </#if>
   </fieldset>
-
-  <fieldset class="col">
+  </div>
+  <div class="col-6">
+  <fieldset>
     <legend>${uiLabelMap.CommonPassword}</legend>
     <#if createAllowPassword>
-      <div>
+      <div class="row">
+      <div class="col-12">
         <label for="PASSWORD">${uiLabelMap.CommonPassword}*</label>
         <@fieldErrors fieldName="PASSWORD"/>
-        <input type="password" name="PASSWORD" autocomplete="off" id="PASSWORD" onfocus="setLastFocused(this);"/>
+        <input type="password" name="PASSWORD" class="form-control form-control-sm" autocomplete="off" id="PASSWORD" onfocus="setLastFocused(this);"/>
+      </div>
       </div>
 
-      <div>
+      <div class="row">
+      <div class="col-12">
         <label for="CONFIRM_PASSWORD">${uiLabelMap.PartyRepeatPassword}*</label>
         <@fieldErrors fieldName="CONFIRM_PASSWORD"/>
-        <input type="password" class='inputBox' name="CONFIRM_PASSWORD" id="CONFIRM_PASSWORD" autocomplete="off" value="" maxlength="50"/>
+        <input type="password" class="form-control form-control-sm" name="CONFIRM_PASSWORD" id="CONFIRM_PASSWORD" autocomplete="off" value="" maxlength="50"/>
+      </div>
       </div>
 
-      <div>
+      <div class="row">
+      <div class="col-12">
         <label for="PASSWORD_HINT">${uiLabelMap.PartyPasswordHint}</label>
         <@fieldErrors fieldName="PASSWORD_HINT"/>
-        <input type="text" class='inputBox' name="PASSWORD_HINT" id="PASSWORD_HINT"
+        <input type="text" class="form-control form-control-sm" name="PASSWORD_HINT" id="PASSWORD_HINT"
             value="${requestParameters.PASSWORD_HINT!}" maxlength="100"/>
       </div>
+      </div>
     <#else>
       <div>
         <label>${uiLabelMap.PartyReceivePasswordByEmail}.</div>
       </div>
     </#if>
   </fieldset>
+  </div>
+  </div>
 </form>
+</div>
+</div>
 
 <#------------------------------------------------------------------------------
 To create a consistent look and feel for all buttons, input[type=submit],
@@ -453,7 +475,7 @@ and a tags acting as submit buttons, all
 class name of "button". No other class names should be used to style
 button actions.
 ------------------------------------------------------------------------------->
-<div class="buttons">&nbsp;
+<div class="d-flex justify-content-center">
   <a href="<@ofbizUrl>${donePage}</@ofbizUrl>" class="button">${uiLabelMap.CommonCancel}</a>&nbsp;
   <a href="javascript:document.getElementById('newuserform').submit()" class="button">${uiLabelMap.CommonSave}</a>
 </div>