diff --git a/src/app/designationEditor/pageOptionsModal/pageOptionsModal.tpl.html b/src/app/designationEditor/pageOptionsModal/pageOptionsModal.tpl.html
index dd89a66d1..dde02061a 100644
--- a/src/app/designationEditor/pageOptionsModal/pageOptionsModal.tpl.html
+++ b/src/app/designationEditor/pageOptionsModal/pageOptionsModal.tpl.html
@@ -22,8 +22,10 @@
   <div class="tab-content">
     <div class="tab-pane active" ng-if="$ctrl.tab === 'parentDesignation'">
       <div class="form-group">
-        <label>Parent Designation</label>
-        <input name="parentDesignationNumber" type="text" class="form-control" ng-model="$ctrl.parentDesignationNumber">
+        <label>
+          Parent Designation
+          <input name="parentDesignationNumber" type="text" class="form-control" ng-model="$ctrl.parentDesignationNumber">
+        </label>
       </div>
       <div class="form-group">
         <label>Organization ID</label>
@@ -62,8 +64,10 @@
 
     <div class="tab-pane active" ng-if="$ctrl.tab === 'other'">
       <div class="form-group">
-        <label>Facebook Pixel ID</label>
-        <input name="facebookPixelId" type="text" class="form-control" ng-model="$ctrl.facebookPixelId">
+        <label>
+          Facebook Pixel ID
+          <input name="facebookPixelId" type="text" class="form-control" ng-model="$ctrl.facebookPixelId">
+        </label>
       </div>
 
 
diff --git a/src/app/designationEditor/personalOptionsModal/personalOptionsModal.tpl.html b/src/app/designationEditor/personalOptionsModal/personalOptionsModal.tpl.html
index c69e8d68a..27c18bf66 100644
--- a/src/app/designationEditor/personalOptionsModal/personalOptionsModal.tpl.html
+++ b/src/app/designationEditor/personalOptionsModal/personalOptionsModal.tpl.html
@@ -76,12 +76,13 @@
         <div class="form-group">
           <label>
             <input type="checkbox"
+                   aria-describedby="newsletter-help"
                    ng-disabled="!$ctrl.hasNewsletter"
                    ng-checked="$ctrl.showNewsletterForm"
                    ng-model="$ctrl.showNewsletterForm"/> Display Newsletter Form?
           </label>
         </div>
-        <div class="form-group">
+        <div id="newsletter-help" class="form-group">
           <h6 ng-if="$ctrl.hasNewsletter">This form will allow donors to subscribe to your MPDX newsletter.</h6>
           <h6 ng-if="!$ctrl.hasNewsletter">This option is disabled because you do not have an MPDX account. To sign up for one, visit <a href="https://mpdx.org" target="_blank">mpdx.org</a>.</h6>
         </div>
diff --git a/src/app/designationEditor/titleModal/titleModal.tpl.html b/src/app/designationEditor/titleModal/titleModal.tpl.html
index e9970f145..b4974008b 100644
--- a/src/app/designationEditor/titleModal/titleModal.tpl.html
+++ b/src/app/designationEditor/titleModal/titleModal.tpl.html
@@ -1,15 +1,19 @@
 <div class="modal-body">
   <div class="form-group">
-    <label>Receipt Title</label>
-    <input name="receiptTitle" type="text" class="form-control" ng-model="$ctrl.receiptTitle" disabled>
-    <span class="help-block">
+    <label>
+      Receipt Title
+      <input name="receiptTitle" type="text" class="form-control" aria-describedby="receipt-help" ng-model="$ctrl.receiptTitle" disabled>
+    </label>
+    <span id="receipt-help" class="help-block">
       <strong>Email <a href="mailto:fds@cru.org">fds@cru.org</a> to update/change.</strong>
     </span>
   </div>
 
   <div class="form-group">
-    <label translate>Give.Cru.org Title</label>
-    <input name="giveTitle" type="text" class="form-control" ng-model="$ctrl.giveTitle">
+    <label>
+      <span translate>Give.Cru.org Title</span>
+      <input name="giveTitle" type="text" class="form-control" ng-model="$ctrl.giveTitle">
+    </label>
   </div>
 </div>
 <div class="modal-footer">
diff --git a/src/app/designationEditor/websiteModal/websiteModal.tpl.html b/src/app/designationEditor/websiteModal/websiteModal.tpl.html
index 8958332a7..5f0a05efa 100644
--- a/src/app/designationEditor/websiteModal/websiteModal.tpl.html
+++ b/src/app/designationEditor/websiteModal/websiteModal.tpl.html
@@ -1,8 +1,10 @@
 <div class="modal-body">
   <div class="form-group">
-    <label>Website Address</label>
-    <input name="website" type="text" class="form-control" placeholder="http://" ng-model="$ctrl.website">
-    <span class="help-block">Fill in this field to add a website link.</span>
+    <label>
+      Website Address
+      <input name="website" type="text" class="form-control" placeholder="https://" aria-describedby="website-help" ng-model="$ctrl.website">
+    </label>
+    <span id="website-help" class="help-block">Fill in this field to add a website link.</span>
   </div>
 </div>
 <div class="modal-footer">
diff --git a/src/app/profile/profile.tpl.html b/src/app/profile/profile.tpl.html
index a0dc624ed..d61d375da 100644
--- a/src/app/profile/profile.tpl.html
+++ b/src/app/profile/profile.tpl.html
@@ -39,7 +39,7 @@ <h2 class="mb_x" translate>Your Profile</h2>
                   <div class="col-md-7 mb">
 
                     <!--Donor Details-->
-                    <h4 class="panel-title  border-bottom-small visible" translate>Your Name</h4>
+                    <h4 id="name-heading" class="panel-title  border-bottom-small visible" translate>Your Name</h4>
                     <div class="loading-overlay-parent">
                       <loading type="overlay" ng-if="$ctrl.donorDetailsLoading"></loading>
                       <ul class="list-unstyled people-fields">
@@ -50,15 +50,16 @@ <h4 class="panel-title  border-bottom-small visible" translate>Your Name</h4>
 
                               <select name="nameTitle"
                                       class="form-control form-control-subtle prefix"
+                                      aria-label="Your name title"
                                       ng-model="$ctrl.donorDetails.name.title"
                                       ng-options="value as label for (value , label) in $ctrl.availableTitles">
                               </select>
 
-                              <input name="nameGivenName" type="text" class="form-control  form-control-subtle first" disabled ng-model="$ctrl.donorDetails.name['given-name']">
-                              <input name="nameMiddleInitial" type="text" class="form-control  form-control-subtle middle" ng-model="$ctrl.donorDetails.name['middle-initial']" ng-maxlength="15">
-                              <input name="nameFamilyName" type="text" class="form-control  form-control-subtle last" disabled ng-model="$ctrl.donorDetails.name['family-name']">
+                              <input name="nameGivenName" type="text" class="form-control  form-control-subtle first" disabled aria-label="Your given name" ng-model="$ctrl.donorDetails.name['given-name']">
+                              <input name="nameMiddleInitial" type="text" class="form-control  form-control-subtle middle" aria-label="Your middle initial" ng-model="$ctrl.donorDetails.name['middle-initial']" ng-maxlength="15">
+                              <input name="nameFamilyName" type="text" class="form-control  form-control-subtle last" disabled  aria-label="Your family name" ng-model="$ctrl.donorDetails.name['family-name']">
 
-                              <select name="nameSuffix" class="form-control form-control-subtle suffix" ng-model="$ctrl.donorDetails.name.suffix">
+                              <select name="nameSuffix" class="form-control form-control-subtle suffix" aria-label="Your name suffix" ng-model="$ctrl.donorDetails.name.suffix">
                                 <option value=""></option>
                                 <option value="Jr." translate>Jr</option>
                                 <option value="Sr." translate>Sr</option>
@@ -85,15 +86,16 @@ <h4 class="panel-title  border-bottom-small visible" translate>Your Name</h4>
                               <i class="fa fa-lock"></i>
                               <select name="title"
                                       class="form-control form-control-subtle prefix"
+                                      aria-label="Spouse's name title"
                                       ng-model="$ctrl.donorDetails['spouse-name'].title"
                                       ng-options="value as label for (value , label) in $ctrl.availableTitles">
                               </select>
 
-                              <input name="spouseName" type="text" class="form-control form-control-subtle first" ng-model="$ctrl.donorDetails['spouse-name']['given-name']" ng-maxlength="50" ng-disabled="$ctrl.hasSpouse" ng-required="$ctrl.addingSpouse">
-                              <input name="spouseInitial" type="text" class="form-control form-control-subtle middle" ng-model="$ctrl.donorDetails['spouse-name']['middle-initial']" ng-maxlength="15">
-                              <input name="spouseLastName" type="text" class="form-control form-control-subtle last" ng-model="$ctrl.donorDetails['spouse-name']['family-name']" ng-maxlength="50" ng-disabled="$ctrl.hasSpouse" ng-required="$ctrl.addingSpouse">
+                              <input name="spouseName" type="text" class="form-control form-control-subtle first" aria-label="Spouse's given name" ng-model="$ctrl.donorDetails['spouse-name']['given-name']" ng-maxlength="50" ng-disabled="$ctrl.hasSpouse" ng-required="$ctrl.addingSpouse">
+                              <input name="spouseInitial" type="text" class="form-control form-control-subtle middle" aria-label="Spouse's middle initial" ng-model="$ctrl.donorDetails['spouse-name']['middle-initial']" ng-maxlength="15">
+                              <input name="spouseLastName" type="text" class="form-control form-control-subtle last" aria-label="Spouse's family name" ng-model="$ctrl.donorDetails['spouse-name']['family-name']" ng-maxlength="50" ng-disabled="$ctrl.hasSpouse" ng-required="$ctrl.addingSpouse">
 
-                              <select name="suffix" class="form-control form-control-subtle suffix" ng-model="$ctrl.donorDetails['spouse-name'].suffix">
+                              <select name="suffix" class="form-control form-control-subtle suffix" aria-label="Spouse's name suffix" ng-model="$ctrl.donorDetails['spouse-name'].suffix">
                                 <option value=""></option>
                                 <option value="Jr." translate>Jr</option>
                                 <option value="Sr." translate>Sr</option>
@@ -144,14 +146,16 @@ <h4 class="panel-title  border-bottom-small visible mt" translate>Email Addresse
                       <loading type="overlay" ng-if="$ctrl.emailLoading"></loading>
                       <form name="$ctrl.donorEmailForm" novalidate>
                         <div class="form-group is-required" ng-class="{'has-error': ($ctrl.donorEmailForm.donorsEmail | showErrors)}">
-                          <label>{{$ctrl.donorDetails.name['given-name'] + ' ' + $ctrl.donorDetails.name['family-name']}} Email</label>
-                          <input type="email"
-                                 name="donorsEmail"
-                                 class="form-control  form-control-subtle"
-                                 ng-model="$ctrl.donorEmail.email"
-                                 maxlength="100"
-                                 required
-                                 ng-disabled="$ctrl.donorDetails.staff">
+                          <label>
+                            <span>{{$ctrl.donorDetails.name['given-name'] + ' ' + $ctrl.donorDetails.name['family-name']}} Email</span>
+                            <input type="email"
+                                  name="donorsEmail"
+                                  class="form-control  form-control-subtle"
+                                  ng-model="$ctrl.donorEmail.email"
+                                  maxlength="100"
+                                  required
+                                  ng-disabled="$ctrl.donorDetails.staff">
+                          </label>
                           <div role="alert" ng-messages="$ctrl.donorEmailForm.$error" ng-if="($ctrl.donorEmailForm.donorsEmail | showErrors)">
                             <div class="help-block" ng-message="required" translate>You must enter an email address</div>
                             <div class="help-block" ng-message="email" translate>You must enter a valid email address</div>
@@ -163,15 +167,15 @@ <h4 class="panel-title  border-bottom-small visible mt" translate>Email Addresse
 
                       <form name="$ctrl.spouseEmailForm" novalidate ng-if="$ctrl.donorDetails['donor-type'] === 'Household' && ($ctrl.hasSpouse || $ctrl.addingSpouse)">
                         <div class="form-group" ng-class="{'has-error': ($ctrl.spouseEmailForm.spouseEmail | showErrors)}">
-                          <label translate>
-                            {{$ctrl.hasSpouse ? ($ctrl.donorDetails['spouse-name']['given-name'] + ' ' + $ctrl.donorDetails['spouse-name']['family-name']) : 'Spouse'}} Email
+                          <label>
+                            <span translate>{{$ctrl.hasSpouse ? ($ctrl.donorDetails['spouse-name']['given-name'] + ' ' + $ctrl.donorDetails['spouse-name']['family-name']) : 'Spouse'}} Email</span>
+                            <input type="email"
+                                  name="spouseEmail"
+                                  class="form-control  form-control-subtle"
+                                  ng-model="$ctrl.spouseEmail.email"
+                                  maxlength="100"
+                                  ng-disabled="$ctrl.donorDetails.staff">
                           </label>
-                          <input type="email"
-                                 name="spouseEmail"
-                                 class="form-control  form-control-subtle"
-                                 ng-model="$ctrl.spouseEmail.email"
-                                 maxlength="100"
-                                 ng-disabled="$ctrl.donorDetails.staff">
                           <div role="alert" ng-messages="$ctrl.spouseEmailForm.spouseEmail.$error" ng-if="($ctrl.spouseEmailForm.spouseEmail | showErrors)">
                             <div class="help-block" ng-message="email" translate>You must enter a valid email address</div>
                             <div class="help-block" ng-message="maxlength" translate>This field cannot be longer than 100 characters</div>
@@ -191,6 +195,7 @@ <h4 class="panel-title  border-bottom-small visible mt" translate>Phone Numbers<
                           <form name="$ctrl.phoneNumberForms[{{$index}}]" ng-hide="phone.delete" novalidate>
                             <select name="phoneNumberType"
                                     class="form-control form-control-subtle"
+                                    aria-label="Phone number type"
                                     ng-model="phone['phone-number-type']"
                                     ng-disabled="$ctrl.donorDetails.staff">
                               <option translate>Home</option>
@@ -201,18 +206,20 @@ <h4 class="panel-title  border-bottom-small visible mt" translate>Phone Numbers<
                             <input name="phoneNumber"
                                    type="tel"
                                    class="form-control form-control-subtle"
+                                   aria-label="Phone number"
                                    ng-model="phone['phone-number']"
                                    required
                                    ng-disabled="$ctrl.donorDetails.staff">
                             <select name="spousePhoneNumber"
                                     class="form-control form-control-subtle"
+                                    aria-label="Phone number person"
                                     ng-model="phone['is-spouse']"
                                     ng-change="phone.ownerChanged = !phone.ownerChanged"
                                     ng-disabled="!$ctrl.hasSpouse || $ctrl.donorDetails.staff">
                               <option ng-value="true">{{$ctrl.donorDetails['spouse-name']['given-name']}}</option>
                               <option ng-value="false">{{$ctrl.donorDetails.name['given-name']}}</option>
                             </select>
-                            <a id="removeSpousePhoneNumberLink" href="" ng-click="$ctrl.deletePhoneNumber(phone, $index)" ng-if="!$ctrl.donorDetails.staff">
+                            <a id="removeSpousePhoneNumberLink" href="" aria-label="Delete phone number" ng-click="$ctrl.deletePhoneNumber(phone, $index)" ng-if="!$ctrl.donorDetails.staff">
                               <i class="fa fa-minus-circle" aria-hidden="true"></i>
                             </a>
                           </form>
@@ -235,8 +242,10 @@ <h4 class="panel-title  border-bottom-small visible" translate>Your Mailing Addr
                     <div class="row" ng-if="$ctrl.donorDetails['donor-type'] == 'Organization'">
                       <div class="col-sm-12">
                         <div class="form-group">
-                          <label translate>Organization Name</label>
-                          <input type="text" class="form-control form-control-subtle" ng-model="$ctrl.donorDetails['organization-name']" disabled>
+                          <label>
+                            <span translate>Organization Name</span>
+                            <input type="text" class="form-control form-control-subtle" ng-model="$ctrl.donorDetails['organization-name']" disabled>
+                          </label>
                         </div>
                       </div>
                     </div>
diff --git a/src/assets/crubrand/bootstrap-variations/_forms.scss b/src/assets/crubrand/bootstrap-variations/_forms.scss
index 8c417949c..b88a03828 100644
--- a/src/assets/crubrand/bootstrap-variations/_forms.scss
+++ b/src/assets/crubrand/bootstrap-variations/_forms.scss
@@ -114,6 +114,10 @@ output {
 // input[type="tel"]
 // input[type="color"]
 
+label:has(.form-control) {
+    width: 100%;
+}
+
 .form-control {
   display: block;
   width: 100%;
@@ -442,7 +446,7 @@ input[type="checkbox"] {
         }
 
         // Input groups need that 100% width though
-        .input-group > .form-control {
+        .input-group > label > .form-control {
             width: 100%;
         }
 
diff --git a/src/assets/scss/_form.scss b/src/assets/scss/_form.scss
index 0f2560c33..2df1082bc 100644
--- a/src/assets/scss/_form.scss
+++ b/src/assets/scss/_form.scss
@@ -3,7 +3,7 @@
   .form-control {
     box-shadow: inset 0px 0px 0px 1px $state-danger-text;
   }
-  label {
+  label > span {
     color: $state-danger-text;
     font-weight: 600;
     &:before {
@@ -19,7 +19,7 @@
   .form-control {
     box-shadow: inset 0px 0px 0px 1px $colorHelper-success;
   }
-  label {
+  label > span {
     color: $colorHelper-success;
     &:before {
       content: "\f00c";
@@ -30,15 +30,19 @@
   }
 }
 
+label > span {
+  display: block;
+  margin-bottom: 4px;
+}
+
 .is-required {
-  label {
-    &:after {
-      content: "*";
-      display: inline-block;
-      font-size: 115%;
-      font-family: "fontawesome", "Font Awesome 5 Pro";
-      margin-left: 6px;
-    }
+  label > span:after {
+    content: "*";
+    display: inline-block;
+    font-size: 115%;
+    line-height: 0;
+    font-family: "fontawesome", "Font Awesome 5 Pro";
+    margin-left: 6px;
   }
   input[type=text],
   input[type=number],
diff --git a/src/assets/scss/_gift-config.scss b/src/assets/scss/_gift-config.scss
index d4789f109..8888cf81c 100644
--- a/src/assets/scss/_gift-config.scss
+++ b/src/assets/scss/_gift-config.scss
@@ -21,6 +21,10 @@
 
 }
 
+label.custom-amount {
+  width: auto;
+}
+
 
 
 .radio,
diff --git a/src/common/components/addressForm/addressForm.tpl.html b/src/common/components/addressForm/addressForm.tpl.html
index 0ac5e2a76..ff667da48 100644
--- a/src/common/components/addressForm/addressForm.tpl.html
+++ b/src/common/components/addressForm/addressForm.tpl.html
@@ -1,8 +1,8 @@
 <div class="row">
   <div class="col-sm-12">
     <div class="form-group is-required" ng-class="{'has-error': ($ctrl.parentForm.addressCountry | showErrors) || $ctrl.loadingCountriesError}">
-      <label translate>{{'COUNTRY'}}</label>
-      <div class="form-group">
+      <label>
+        <span translate>{{'COUNTRY'}}</span>
         <select class="form-control form-control-subtle"
                 name="addressCountry" required
                 ng-model="$ctrl.address.country"
@@ -10,13 +10,13 @@
                 ng-change="$ctrl.refreshRegions($ctrl.address.country)"
                 ng-disabled="$ctrl.addressDisabled">
         </select>
-        <div role="alert" ng-if="$ctrl.loadingCountriesError">
-          <div class="help-block"><translate>{{'COUNTRY_LIST_ERROR'}}</translate>
-            <button id="retryButton1" type="button" class="btn btn-default btn-sm" ng-click="$ctrl.loadCountries()" translate>{{'RETRY'}}</button></div>
-        </div>
-        <div role="alert" ng-messages="$ctrl.parentForm.addressCountry.$error" ng-if="($ctrl.parentForm.addressCountry | showErrors)">
-          <div class="help-block" ng-message="required" translate>{{'COUNTRY_SELECT_ERROR'}}</div>
-        </div>
+      </label>
+      <div role="alert" ng-if="$ctrl.loadingCountriesError">
+        <div class="help-block"><translate>{{'COUNTRY_LIST_ERROR'}}</translate>
+          <button id="retryButton1" type="button" class="btn btn-default btn-sm" ng-click="$ctrl.loadCountries()" translate>{{'RETRY'}}</button></div>
+      </div>
+      <div role="alert" ng-messages="$ctrl.parentForm.addressCountry.$error" ng-if="($ctrl.parentForm.addressCountry | showErrors)">
+        <div class="help-block" ng-message="required" translate>{{'COUNTRY_SELECT_ERROR'}}</div>
       </div>
     </div>
   </div>
@@ -24,14 +24,16 @@
 <div class="row">
   <div class="col-sm-12">
     <div class="form-group is-required" ng-class="{'has-error': ($ctrl.parentForm.addressStreetAddress | showErrors)}">
-      <label translate>{{'ADDRESS'}}</label>
-      <input type="text"
-             class="form-control  form-control-subtle"
-             name="addressStreetAddress"
-             ng-model="$ctrl.address.streetAddress"
-             required
-             ng-maxlength="200"
-             ng-disabled="$ctrl.addressDisabled">
+      <label>
+        <span translate>{{'ADDRESS'}}</span>
+        <input type="text"
+              class="form-control  form-control-subtle"
+              name="addressStreetAddress"
+              ng-model="$ctrl.address.streetAddress"
+              required
+              ng-maxlength="200"
+              ng-disabled="$ctrl.addressDisabled">
+      </label>
       <div role="alert" ng-messages="$ctrl.parentForm.addressStreetAddress.$error" ng-if="($ctrl.parentForm.addressStreetAddress | showErrors)">
         <div class="help-block" ng-message="required" translate>{{'ADDRESS_ERROR'}}</div>
         <div class="help-block" ng-message="maxlength" translate>{{'MAX_LENGTH_ADDRESS_ERROR'}}</div>
@@ -45,6 +47,7 @@
       <input type="text"
              class="form-control  form-control-subtle"
              name="addressExtendedAddress"
+             aria-label="Address line 2"
              ng-model="$ctrl.address.extendedAddress"
              ng-maxlength="100"
              ng-disabled="$ctrl.addressDisabled">
@@ -59,7 +62,9 @@
     <div class="col-sm-12">
       <div class="form-group" ng-class="{'has-error': ($ctrl.parentForm.intAddressLine3 | showErrors)}">
         <input type="text"
-               class="form-control  form-control-subtle" name="intAddressLine3"
+               class="form-control  form-control-subtle"
+               name="intAddressLine3"
+               aria-label="Address line 3"
                ng-model="$ctrl.address.intAddressLine3"
                ng-maxlength="100"
                ng-disabled="$ctrl.addressDisabled">
@@ -75,6 +80,7 @@
         <input type="text"
                class="form-control  form-control-subtle"
                name="intAddressLine4"
+               aria-label="Address line 4"
                ng-model="$ctrl.address.intAddressLine4"
                ng-maxlength="100"
                ng-disabled="$ctrl.addressDisabled">
@@ -89,14 +95,16 @@
   <div class="row">
     <div class="col-sm-12">
       <div class="form-group is-required" ng-class="{'has-error': ($ctrl.parentForm.addressLocality | showErrors)}">
-        <label translate>{{'CITY'}}</label>
-        <input type="text"
-               class="form-control  form-control-subtle"
-               name="addressLocality"
-               ng-model="$ctrl.address.locality"
-               required
-               ng-maxlength="50"
-               ng-disabled="$ctrl.addressDisabled">
+        <label>
+          <span translate>{{'CITY'}}</span>
+          <input type="text"
+                  class="form-control  form-control-subtle"
+                  name="addressLocality"
+                  ng-model="$ctrl.address.locality"
+                  required
+                  ng-maxlength="50"
+                  ng-disabled="$ctrl.addressDisabled">
+        </label>
         <div role="alert" ng-messages="$ctrl.parentForm.addressLocality.$error" ng-if="($ctrl.parentForm.addressLocality | showErrors)">
           <div class="help-block" ng-message="required" translate>{{'CITY_ERROR'}}</div>
           <div class="help-block" ng-message="maxlength" translate>{{'MAX_LENGTH_CITY_ERROR'}}</div>
@@ -107,8 +115,8 @@
   <div class="row">
     <div class="col-sm-6">
       <div class="form-group is-required" ng-class="{'has-error': ($ctrl.parentForm.addressRegion | showErrors) || $ctrl.loadingRegionsError}">
-        <label translate>{{'STATE'}}</label>
-        <div class="form-group">
+        <label>
+          <span translate>{{'STATE'}}</span>
           <select class="form-control  form-control-subtle"
                   name="addressRegion" required
                   ng-model="$ctrl.address.region"
@@ -122,20 +130,22 @@
           <div role="alert" ng-messages="$ctrl.parentForm.addressRegion.$error" ng-if="($ctrl.parentForm.addressRegion | showErrors)">
             <div class="help-block" ng-message="required" translate>{{'SELECT_STATE_ERROR'}}</div>
           </div>
-        </div>
+        </label>
       </div>
     </div>
     <div class="col-sm-6">
       <div class="form-group is-required" ng-class="{'has-error': ($ctrl.parentForm.addressPostalCode | showErrors)}">
-        <label translate>{{'ZIP'}}</label>
-        <input type="text"
-               class="form-control  form-control-subtle"
-               name="addressPostalCode"
-               ng-model="$ctrl.address.postalCode"
-               required
-               ng-pattern="/^\d{5}(?:[-\s]\d{4})?$/"
-               ng-change="$ctrl.onPostalCodeChanged()"
-               ng-disabled="$ctrl.addressDisabled">
+        <label>
+          <span translate>{{'ZIP'}}</span>
+          <input type="text"
+                class="form-control  form-control-subtle"
+                name="addressPostalCode"
+                ng-model="$ctrl.address.postalCode"
+                required
+                ng-pattern="/^\d{5}(?:[-\s]\d{4})?$/"
+                ng-change="$ctrl.onPostalCodeChanged()"
+                ng-disabled="$ctrl.addressDisabled">
+        </label>
         <div role="alert" ng-messages="$ctrl.parentForm.addressPostalCode.$error" ng-if="($ctrl.parentForm.addressPostalCode | showErrors)">
           <div class="help-block" ng-message="required" translate>{{'ZIP_CODE_ERROR'}}</div>
           <div class="help-block" ng-message="pattern" translate>{{'INVALID_US_ZIP_ERROR'}}</div>
diff --git a/src/common/components/contactInfo/contactInfo.tpl.html b/src/common/components/contactInfo/contactInfo.tpl.html
index da7914ccb..585c7db32 100644
--- a/src/common/components/contactInfo/contactInfo.tpl.html
+++ b/src/common/components/contactInfo/contactInfo.tpl.html
@@ -49,14 +49,16 @@ <h4 class="panel-title  border-bottom-small  visible" translate>{{'YOUR_INFORMAT
       <div class="row">
         <div class="col-sm-4">
           <div class="form-group is-required" ng-class="{'has-error': ($ctrl.detailsForm.nameGivenName | showErrors)}">
-            <label translate>{{'FIRST_NAME'}}</label>
-            <input type="text"
-                   class="form-control  form-control-subtle"
-                   name="nameGivenName"
-                   ng-model="$ctrl.donorDetails['name']['given-name']"
-                   required
-                   ng-maxlength="50"
-                   ng-disabled="$ctrl.nameFieldsDisabled">
+            <label>
+              <span translate>{{'FIRST_NAME'}}</span>
+              <input type="text"
+                      class="form-control  form-control-subtle"
+                      name="nameGivenName"
+                      ng-model="$ctrl.donorDetails['name']['given-name']"
+                      required
+                      ng-maxlength="50"
+                      ng-disabled="$ctrl.nameFieldsDisabled">
+            </label>
             <div role="alert" ng-messages="$ctrl.detailsForm.nameGivenName.$error" ng-if="($ctrl.detailsForm.nameGivenName | showErrors)">
               <div class="help-block" ng-message="required" translate>{{'FIRST_NAME_ERROR'}}</div>
               <div class="help-block" ng-message="maxlength" translate>{{'MAX_LENGTH_FIRST_NAME_ERROR'}}</div>
@@ -65,13 +67,15 @@ <h4 class="panel-title  border-bottom-small  visible" translate>{{'YOUR_INFORMAT
         </div>
         <div class="col-sm-2">
           <div class="form-group" ng-class="{'has-error': ($ctrl.detailsForm.nameMiddleInitial | showErrors)}">
-            <label translate>{{'MIDDLE_ABBREV'}}</label>
-            <input type="text"
-                   class="form-control  form-control-subtle"
-                   name="nameMiddleInitial"
-                   ng-model="$ctrl.donorDetails['name']['middle-initial']"
-                   ng-maxlength="15"
-                   ng-disabled="$ctrl.nameFieldsDisabled">
+            <label>
+              <span translate>{{'MIDDLE_ABBREV'}}</span>
+              <input type="text"
+                    class="form-control  form-control-subtle"
+                    name="nameMiddleInitial"
+                    ng-model="$ctrl.donorDetails['name']['middle-initial']"
+                    ng-maxlength="15"
+                    ng-disabled="$ctrl.nameFieldsDisabled">
+            </label>
             <div role="alert" ng-messages="$ctrl.detailsForm.nameMiddleInitial.$error" ng-if="($ctrl.detailsForm.nameMiddleInitial | showErrors)">
               <div class="help-block" ng-message="maxlength" translate>{{'MAX_LENGTH_MI_ERROR'}}</div>
             </div>
@@ -79,14 +83,16 @@ <h4 class="panel-title  border-bottom-small  visible" translate>{{'YOUR_INFORMAT
         </div>
         <div class="col-sm-4">
           <div class="form-group is-required" ng-class="{'has-error': ($ctrl.detailsForm.nameFamilyName | showErrors)}">
-            <label translate>{{'LAST_NAME'}}</label>
-            <input type="text"
-                   class="form-control  form-control-subtle"
-                   name="nameFamilyName"
-                   ng-model="$ctrl.donorDetails['name']['family-name']"
-                   required
-                   ng-maxlength="50"
-                   ng-disabled="$ctrl.nameFieldsDisabled">
+            <label>
+              <span translate>{{'LAST_NAME'}}</span>
+              <input type="text"
+                    class="form-control  form-control-subtle"
+                    name="nameFamilyName"
+                    ng-model="$ctrl.donorDetails['name']['family-name']"
+                    required
+                    ng-maxlength="50"
+                    ng-disabled="$ctrl.nameFieldsDisabled">
+            </label>
             <div role="alert" ng-messages="$ctrl.detailsForm.nameFamilyName.$error" ng-if="($ctrl.detailsForm.nameFamilyName | showErrors)">
               <div class="help-block" ng-message="required" translate>{{'LAST_NAME_ERROR'}}</div>
               <div class="help-block" ng-message="maxlength" translate>{{'MAX_LENGTH_LAST_NAME_ERROR'}}</div>
@@ -95,8 +101,8 @@ <h4 class="panel-title  border-bottom-small  visible" translate>{{'YOUR_INFORMAT
         </div>
         <div class="col-sm-2">
           <div class="form-group">
-            <label translate>{{'SUFFIX'}}</label>
-            <div class="form-group">
+            <label>
+              <span translate>{{'SUFFIX'}}</span>
               <select name="nameSuffix" class="form-control form-control-subtle" ng-model="$ctrl.donorDetails['name']['suffix']" ng-disabled="$ctrl.nameFieldsDisabled">
                 <option value=""></option>
                 <option value="Jr." translate>{{'JR'}}</option>
@@ -109,7 +115,7 @@ <h4 class="panel-title  border-bottom-small  visible" translate>{{'YOUR_INFORMAT
                 <option value="VII" translate>VII</option>
                 <option value="VIII" translate>VIII</option>
               </select>
-            </div>
+            </label>
           </div>
         </div>
 
@@ -118,14 +124,16 @@ <h4 class="panel-title  border-bottom-small  visible" translate>{{'YOUR_INFORMAT
       <div class="row" ng-if="$ctrl.donorDetails['donor-type'] === 'Household'">
         <div class="col-sm-4">
           <div class="form-group" ng-class="{'has-error': ($ctrl.detailsForm.spouseGivenName | showErrors)}">
-            <label translate>{{'SPOUSE_FIRST_NAME'}}</label>
-            <input type="text"
-                   class="form-control  form-control-subtle"
-                   name="spouseGivenName"
-                   ng-model="$ctrl.donorDetails['spouse-name']['given-name']"
-                   ng-maxlength="50"
-                   placeholder="{{ $ctrl.donorDetails['spouse-name']['family-name'] ? '' : 'Optional' | translate}}"
-                   ng-disabled="$ctrl.spouseFieldsDisabled">
+            <label>
+              <span translate>{{'SPOUSE_FIRST_NAME'}}</span>
+              <input type="text"
+                    class="form-control  form-control-subtle"
+                    name="spouseGivenName"
+                    ng-model="$ctrl.donorDetails['spouse-name']['given-name']"
+                    ng-maxlength="50"
+                    placeholder="{{ $ctrl.donorDetails['spouse-name']['family-name'] ? '' : 'Optional' | translate}}"
+                    ng-disabled="$ctrl.spouseFieldsDisabled">
+            </label>
             <div role="alert" ng-messages="$ctrl.detailsForm.spouseGivenName.$error" ng-if="($ctrl.detailsForm.spouseGivenName | showErrors)">
               <div class="help-block" ng-message="maxlength" translate>{{'MAX_LENGTH_FIRST_NAME_ERROR'}}</div>
             </div>
@@ -133,13 +141,15 @@ <h4 class="panel-title  border-bottom-small  visible" translate>{{'YOUR_INFORMAT
         </div>
         <div class="col-sm-2">
           <div class="form-group" ng-class="{'has-error': ($ctrl.detailsForm.spouseMiddleInitial | showErrors)}">
-            <label translate>{{'MIDDLE_ABBREV'}}</label>
-            <input type="text"
-                   class="form-control  form-control-subtle"
-                   name="spouseMiddleInitial"
-                   ng-model="$ctrl.donorDetails['spouse-name']['middle-initial']"
-                   ng-maxlength="15"
-                   ng-disabled="$ctrl.spouseFieldsDisabled">
+            <label>
+              <span translate>{{'MIDDLE_ABBREV'}}</span>
+              <input type="text"
+                    class="form-control  form-control-subtle"
+                    name="spouseMiddleInitial"
+                    ng-model="$ctrl.donorDetails['spouse-name']['middle-initial']"
+                    ng-maxlength="15"
+                    ng-disabled="$ctrl.spouseFieldsDisabled">
+            </label>
             <div role="alert" ng-messages="$ctrl.detailsForm.spouseMiddleInitial.$error" ng-if="($ctrl.detailsForm.spouseMiddleInitial | showErrors)">
               <div class="help-block" ng-message="maxlength" translate>{{'MAX_LENGTH_MI_ERROR'}}</div>
             </div>
@@ -147,14 +157,16 @@ <h4 class="panel-title  border-bottom-small  visible" translate>{{'YOUR_INFORMAT
         </div>
         <div class="col-sm-4">
           <div class="form-group" ng-class="{'has-error': ($ctrl.detailsForm.spouseFamilyName | showErrors)}">
-            <label translate>{{'SPOUSE_LAST_NAME'}}</label>
-            <input type="text"
-                   class="form-control  form-control-subtle"
-                   name="spouseFamilyName"
-                   ng-model="$ctrl.donorDetails['spouse-name']['family-name']"
-                   ng-maxlength="50"
-                   placeholder="{{ $ctrl.donorDetails['spouse-name']['given-name'] ? '' : 'Optional' | translate}}"
-                   ng-disabled="$ctrl.spouseFieldsDisabled">
+            <label>
+              <span translate>{{'SPOUSE_LAST_NAME'}}</span>
+              <input type="text"
+                    class="form-control  form-control-subtle"
+                    name="spouseFamilyName"
+                    ng-model="$ctrl.donorDetails['spouse-name']['family-name']"
+                    ng-maxlength="50"
+                    placeholder="{{ $ctrl.donorDetails['spouse-name']['given-name'] ? '' : 'Optional' | translate}}"
+                    ng-disabled="$ctrl.spouseFieldsDisabled">
+            </label>
             <div role="alert" ng-messages="$ctrl.detailsForm.spouseFamilyName.$error" ng-if="($ctrl.detailsForm.spouseFamilyName | showErrors)">
               <div class="help-block" ng-message="maxlength" translate>{{'MAX_LENGTH_LAST_NAME_ERROR'}}</div>
             </div>
@@ -162,8 +174,8 @@ <h4 class="panel-title  border-bottom-small  visible" translate>{{'YOUR_INFORMAT
         </div>
         <div class="col-sm-2">
           <div class="form-group">
-            <label translate>{{'SUFFIX'}}</label>
-            <div class="form-group">
+            <label>
+              <span translate>{{'SUFFIX'}}</span>
               <select name="spouseSuffix"
                       class="form-control  form-control-subtle"
                       ng-model="$ctrl.donorDetails['spouse-name']['suffix']"
@@ -179,15 +191,17 @@ <h4 class="panel-title  border-bottom-small  visible" translate>{{'YOUR_INFORMAT
                 <option value="VII" translate>VII</option>
                 <option value="VIII" translate>VIII</option>
               </select>
-            </div>
+            </label>
           </div>
         </div>
       </div>
       <div class="row" ng-if="$ctrl.donorDetails['donor-type'] === 'Organization'">
         <div class="col-sm-12">
           <div class="form-group is-required" ng-class="{'has-error': ($ctrl.detailsForm.orgName | showErrors)}">
-            <label translate>{{'ORGANIZATION_NAME'}}</label>
-            <input type="text" class="form-control form-control-subtle" name="orgName" ng-model="$ctrl.donorDetails['organization-name']" ng-maxlength="100" ng-disabled="$ctrl.nameFieldsDisabled" required>
+            <label>
+              <span translate>{{'ORGANIZATION_NAME'}}</span>
+              <input type="text" class="form-control form-control-subtle" name="orgName" ng-model="$ctrl.donorDetails['organization-name']" ng-maxlength="100" ng-disabled="$ctrl.nameFieldsDisabled" required>
+            </label>
             <div role="alert" ng-messages="$ctrl.detailsForm.orgName.$error" ng-if="($ctrl.detailsForm.orgName | showErrors)">
               <div class="help-block" ng-message="required" translate>{{'ORG_NAME_ERROR'}}</div>
               <div class="help-block" ng-message="maxlength" translate>{{'ORG_NAME_MAX_LENGTH_ERROR'}}</div>
@@ -214,8 +228,10 @@ <h4 class="panel-title  border-bottom-small  visible" translate>{{'CONTACT_INFO'
       <div class="row">
         <div class="col-sm-6">
           <div class="form-group is-required" ng-class="{'has-error': ($ctrl.detailsForm.email | showErrors)}">
-            <label translate>{{'EMAIL'}}</label>
-            <input type="email" class="form-control  form-control-subtle" name="email" ng-model="$ctrl.donorDetails['email']" required ng-maxlength="100" ng-disabled="$ctrl.donorDetails.staff">
+            <label>
+              <span translate>{{'EMAIL'}}</span>
+              <input type="email" class="form-control  form-control-subtle" name="email" ng-model="$ctrl.donorDetails['email']" required ng-maxlength="100" ng-disabled="$ctrl.donorDetails.staff">
+            </label>
             <div role="alert" ng-messages="$ctrl.detailsForm.email.$error" ng-if="($ctrl.detailsForm.email | showErrors)">
               <div class="help-block" ng-message="required" translate>{{'EMAIL_MISSING_ERROR'}}</div>
               <div class="help-block" ng-message="email" translate>{{'EMAIL_INVALID_ERROR'}}</div>
@@ -225,8 +241,10 @@ <h4 class="panel-title  border-bottom-small  visible" translate>{{'CONTACT_INFO'
         </div>
         <div class="col-sm-6">
           <div class="form-group" ng-class="{'has-error': ($ctrl.detailsForm.phoneNumber | showErrors)}">
-            <label translate>{{'PHONE'}}</label>
-            <input type="tel" class="form-control form-control-subtle" name="phoneNumber" ng-model="$ctrl.donorDetails['phone-number']" ng-disabled="$ctrl.donorDetails.staff">
+            <label>
+              <span translate>{{'PHONE'}}</span>
+              <input type="tel" class="form-control form-control-subtle" name="phoneNumber" ng-model="$ctrl.donorDetails['phone-number']" ng-disabled="$ctrl.donorDetails.staff">
+            </label>
             <div role="alert" ng-messages="$ctrl.detailsForm.phoneNumber.$error" ng-if="($ctrl.detailsForm.phoneNumber | showErrors)">
               <div class="help-block" ng-message="phone" translate>{{'INVALID_PHONE_ERROR'}}</div>
             </div>
diff --git a/src/common/components/paymentMethods/bankAccountForm/bankAccountForm.tpl.html b/src/common/components/paymentMethods/bankAccountForm/bankAccountForm.tpl.html
index 7240707b5..42ab8601b 100644
--- a/src/common/components/paymentMethods/bankAccountForm/bankAccountForm.tpl.html
+++ b/src/common/components/paymentMethods/bankAccountForm/bankAccountForm.tpl.html
@@ -13,8 +13,10 @@ <h4 class="panel-title visible" translate>{{'BANK_ACCOUNT_PAYMENT'}}</h4>
     <div class="row">
       <div class="col-sm-6">
         <div class="form-group form-group-default is-required" ng-class="{'has-error': ($ctrl.bankPaymentForm.bankName | showErrors)}">
-          <label translate>{{'BANK_NAME'}}</label>
-          <input type="text" class="form-control form-control-subtle" name="bankName" ng-model="$ctrl.bankPayment.bankName" ng-maxlength="30" required/>
+          <label>
+            <span translate>{{'BANK_NAME'}}</span>
+            <input type="text" class="form-control form-control-subtle" name="bankName" ng-model="$ctrl.bankPayment.bankName" ng-maxlength="30" required/>
+          </label>
           <div role="alert" ng-messages="$ctrl.bankPaymentForm.bankName.$error" ng-if="($ctrl.bankPaymentForm.bankName | showErrors)">
             <div class="help-block" ng-message="required" translate>{{'BANK_NAME_ERROR'}}</div>
             <div class="help-block" ng-message="maxlength" translate>{{'MAX_LENGTH_BANK_NAME_ERROR'}}</div>
@@ -41,34 +43,40 @@ <h4 class="panel-title visible" translate>{{'BANK_ACCOUNT_PAYMENT'}}</h4>
     <div class="row">
       <div class="col-sm-4">
         <div class="form-group is-required" ng-class="{'has-error': ($ctrl.bankPaymentForm.routingNumber | showErrors)}">
-          <label translate>{{'ROUTING'}}</label>
-          <input type="text" class="form-control  form-control-subtle" name="routingNumber" autocomplete="off" ng-model="$ctrl.bankPayment.routingNumber" required>
-          <div role="alert" ng-messages="$ctrl.bankPaymentForm.routingNumber.$error" ng-if="($ctrl.bankPaymentForm.routingNumber | showErrors)">
-            <div class="help-block" ng-message="required" translate>{{'ROUTING_NUM_ERROR'}}</div>
-            <div class="help-block" ng-message="length" translate>{{'MIN_LENGTH_ROUTING_ERROR'}}</div>
-            <div class="help-block" ng-message="routingNumber" translate>{{'ROUTING_INVALID_ERROR'}}</div>
-          </div>
+          <label>
+            <span translate>{{'ROUTING'}}</span>
+            <input type="text" class="form-control  form-control-subtle" name="routingNumber" autocomplete="off" ng-model="$ctrl.bankPayment.routingNumber" required>
+            <div role="alert" ng-messages="$ctrl.bankPaymentForm.routingNumber.$error" ng-if="($ctrl.bankPaymentForm.routingNumber | showErrors)">
+              <div class="help-block" ng-message="required" translate>{{'ROUTING_NUM_ERROR'}}</div>
+              <div class="help-block" ng-message="length" translate>{{'MIN_LENGTH_ROUTING_ERROR'}}</div>
+              <div class="help-block" ng-message="routingNumber" translate>{{'ROUTING_INVALID_ERROR'}}</div>
+            </div>
+          </label>
         </div>
       </div>
       <div class="col-sm-4">
         <div class="form-group is-required" ng-class="{'has-error': ($ctrl.bankPaymentForm.accountNumber | showErrors)}">
-          <label translate>{{'ACCOUNT_NUM'}}</label>
-          <input type="text" class="form-control  form-control-subtle" name="accountNumber" autocomplete="off" ng-model="$ctrl.bankPayment.accountNumber" ng-attr-placeholder="************{{$ctrl.bankPayment.accountNumberPlaceholder}}" ng-required="!$ctrl.paymentMethod || $ctrl.bankPayment.accountNumber">
-          <div role="alert" ng-messages="$ctrl.bankPaymentForm.accountNumber.$error" ng-if="($ctrl.bankPaymentForm.accountNumber | showErrors)">
-            <div class="help-block" ng-message="required" translate>{{'ACCOUNT_NUM_ERROR'}}</div>
-            <div class="help-block" ng-message="minlength" translate>{{'MIN_LENGTH_ACCOUNT_ERROR'}}</div>
-            <div class="help-block" ng-message="maxlength" translate>{{'MAX_LENGTH_ACCOUNT_ERROR'}}</div>
-          </div>
+          <label>
+            <span translate>{{'ACCOUNT_NUM'}}</span>
+            <input type="text" class="form-control  form-control-subtle" name="accountNumber" autocomplete="off" ng-model="$ctrl.bankPayment.accountNumber" ng-attr-placeholder="************{{$ctrl.bankPayment.accountNumberPlaceholder}}" ng-required="!$ctrl.paymentMethod || $ctrl.bankPayment.accountNumber">
+            <div role="alert" ng-messages="$ctrl.bankPaymentForm.accountNumber.$error" ng-if="($ctrl.bankPaymentForm.accountNumber | showErrors)">
+              <div class="help-block" ng-message="required" translate>{{'ACCOUNT_NUM_ERROR'}}</div>
+              <div class="help-block" ng-message="minlength" translate>{{'MIN_LENGTH_ACCOUNT_ERROR'}}</div>
+              <div class="help-block" ng-message="maxlength" translate>{{'MAX_LENGTH_ACCOUNT_ERROR'}}</div>
+            </div>
+          </label>
         </div>
       </div>
       <div class="col-sm-4">
         <div class="form-group is-required no-wrap" ng-class="{'has-error': ($ctrl.bankPaymentForm.verifyAccountNumber | showErrors)}">
-          <label translate>{{'RETYPE_ACCOUNT_NUM'}}</label>
-          <input type="text" class="form-control  form-control-subtle" name="verifyAccountNumber" autocomplete="off" ng-model="$ctrl.bankPayment.verifyAccountNumber" ng-attr-placeholder="************{{$ctrl.bankPayment.accountNumberPlaceholder}}" ng-required="$ctrl.bankPayment.accountNumber">
-          <div role="alert" ng-messages="$ctrl.bankPaymentForm.verifyAccountNumber.$error" ng-if="($ctrl.bankPaymentForm.verifyAccountNumber | showErrors)">
-            <div class="help-block" ng-message="required" translate>{{'RETYPE_ACCT_NUM'}}</div>
-            <div class="help-block" ng-message="verifyAccountNumber" translate>{{'ACCT_NUM_MISMATCH'}}</div>
-          </div>
+          <label>
+            <span translate>{{'RETYPE_ACCOUNT_NUM'}}</span>
+            <input type="text" class="form-control  form-control-subtle" name="verifyAccountNumber" autocomplete="off" ng-model="$ctrl.bankPayment.verifyAccountNumber" ng-attr-placeholder="************{{$ctrl.bankPayment.accountNumberPlaceholder}}" ng-required="$ctrl.bankPayment.accountNumber">
+            <div role="alert" ng-messages="$ctrl.bankPaymentForm.verifyAccountNumber.$error" ng-if="($ctrl.bankPaymentForm.verifyAccountNumber | showErrors)">
+              <div class="help-block" ng-message="required" translate>{{'RETYPE_ACCT_NUM'}}</div>
+              <div class="help-block" ng-message="verifyAccountNumber" translate>{{'ACCT_NUM_MISMATCH'}}</div>
+            </div>
+          </label>
         </div>
       </div>
 
diff --git a/src/common/components/paymentMethods/creditCardForm/creditCardForm.tpl.html b/src/common/components/paymentMethods/creditCardForm/creditCardForm.tpl.html
index 4025b2789..b22a1d791 100644
--- a/src/common/components/paymentMethods/creditCardForm/creditCardForm.tpl.html
+++ b/src/common/components/paymentMethods/creditCardForm/creditCardForm.tpl.html
@@ -13,16 +13,18 @@ <h4 class="panel-title visible" translate>{{'CREDIT_CARD_PAYMENT'}}</h4>
     <div class="row">
       <div class="col-sm-6">
         <div class="form-group is-required" ng-class="{'has-error': ($ctrl.creditCardPaymentForm.cardNumber | showErrors)}">
-          <label translate>{{'CARD_NUM'}}</label>
-          <input type="text"
-                 name="cardNumber"
-                 autocomplete="cc-number"
-                 class="form-control  form-control-subtle"
-                 ng-model="$ctrl.creditCardPayment.cardNumber"
-                 ng-attr-placeholder="************{{$ctrl.creditCardPayment.cardNumberPlaceholder}}"
-                 ng-required="!$ctrl.paymentMethod || $ctrl.creditCardPayment.cardNumber"
-                 ng-disabled="$ctrl.disableCardNumber"
-                 credit-card-number>
+          <label>
+            <span translate>{{'CARD_NUM'}}</span>
+            <input type="text"
+                   name="cardNumber"
+                   autocomplete="cc-number"
+                   class="form-control  form-control-subtle"
+                   ng-model="$ctrl.creditCardPayment.cardNumber"
+                   ng-attr-placeholder="************{{$ctrl.creditCardPayment.cardNumberPlaceholder}}"
+                   ng-required="!$ctrl.paymentMethod || $ctrl.creditCardPayment.cardNumber"
+                   ng-disabled="$ctrl.disableCardNumber"
+                   credit-card-number>
+          </label>
           <div ng-messages="$ctrl.creditCardPaymentForm.cardNumber.$error" role="alert" ng-if="($ctrl.creditCardPaymentForm.cardNumber | showErrors)">
             <div class="help-block" ng-message="required" translate>{{'CARD_NUM_ERROR'}}</div>
             <div class="help-block" ng-message="minLength" translate>{{'MIN_LENGTH_CARD_NUM_ERROR'}}</div>
@@ -35,13 +37,15 @@ <h4 class="panel-title visible" translate>{{'CREDIT_CARD_PAYMENT'}}</h4>
       </div>
       <div class="col-sm-6">
         <div class="form-group is-required" ng-class="{'has-error': ($ctrl.creditCardPaymentForm.cardholderName | showErrors)}">
-          <label translate>{{'CARD_NAME'}}</label>
-          <input type="text"
-                 name="cardholderName"
-                 class="form-control  form-control-subtle"
-                 autocomplete="cc-name"
-                 ng-model="$ctrl.creditCardPayment.cardholderName"
-                 ng-maxlength="50" required>
+          <label>
+            <span translate>{{'CARD_NAME'}}</span>
+            <input type="text"
+                   name="cardholderName"
+                   class="form-control  form-control-subtle"
+                   autocomplete="cc-name"
+                   ng-model="$ctrl.creditCardPayment.cardholderName"
+                   ng-maxlength="50" required>
+          </label>
           <div role="alert" ng-messages="$ctrl.creditCardPaymentForm.cardholderName.$error" ng-if="($ctrl.creditCardPaymentForm.cardholderName | showErrors)">
             <div class="help-block" ng-message="required" translate>{{'CARD_NAME_ERROR'}}</div>
             <div class="help-block" ng-message="maxlength" translate>{{'MAX_LENGTH_CARD_NAME_ERROR'}}</div>
@@ -52,25 +56,27 @@ <h4 class="panel-title visible" translate>{{'CREDIT_CARD_PAYMENT'}}</h4>
     <div class="row">
       <div class="col-sm-4">
         <div class="form-group is-required" ng-class="{'has-error': ($ctrl.creditCardPaymentForm.expiryMonth | showErrors)}">
-          <label translate>{{'EXP_MONTH'}}</label>
-          <select class="form-control  form-control-subtle"
-                  name="expiryMonth"
-                  autocomplete="cc-exp-month"
-                  required
-                  ng-model="$ctrl.creditCardPayment.expiryMonth">
-            <option value="01" translate>01 - {{'MONTHS.JAN'}}</option>
-            <option value="02" translate>02 - {{'MONTHS.FEB'}}</option>
-            <option value="03" translate>03 - {{'MONTHS.MAR'}}</option>
-            <option value="04" translate>04 - {{'MONTHS.APR'}}</option>
-            <option value="05" translate>05 - {{'MONTHS.MAY'}}</option>
-            <option value="06" translate>06 - {{'MONTHS.JUN'}}</option>
-            <option value="07" translate>07 - {{'MONTHS.JUL'}}</option>
-            <option value="08" translate>08 - {{'MONTHS.AUG'}}</option>
-            <option value="09" translate>09 - {{'MONTHS.SEP'}}</option>
-            <option value="10" translate>10 - {{'MONTHS.OCT'}}</option>
-            <option value="11" translate>11 - {{'MONTHS.NOV'}}</option>
-            <option value="12" translate>12 - {{'MONTHS.DEC'}}</option>
-          </select>
+          <label>
+            <span translate>{{'EXP_MONTH'}}</span>
+            <select class="form-control  form-control-subtle"
+                    name="expiryMonth"
+                    autocomplete="cc-exp-month"
+                    required
+                    ng-model="$ctrl.creditCardPayment.expiryMonth">
+              <option value="01" translate>01 - {{'MONTHS.JAN'}}</option>
+              <option value="02" translate>02 - {{'MONTHS.FEB'}}</option>
+              <option value="03" translate>03 - {{'MONTHS.MAR'}}</option>
+              <option value="04" translate>04 - {{'MONTHS.APR'}}</option>
+              <option value="05" translate>05 - {{'MONTHS.MAY'}}</option>
+              <option value="06" translate>06 - {{'MONTHS.JUN'}}</option>
+              <option value="07" translate>07 - {{'MONTHS.JUL'}}</option>
+              <option value="08" translate>08 - {{'MONTHS.AUG'}}</option>
+              <option value="09" translate>09 - {{'MONTHS.SEP'}}</option>
+              <option value="10" translate>10 - {{'MONTHS.OCT'}}</option>
+              <option value="11" translate>11 - {{'MONTHS.NOV'}}</option>
+              <option value="12" translate>12 - {{'MONTHS.DEC'}}</option>
+            </select>
+          </label>
           <div role="alert" ng-messages="$ctrl.creditCardPaymentForm.expiryMonth.$error" ng-if="($ctrl.creditCardPaymentForm.expiryMonth | showErrors)">
             <div class="help-block" ng-message="required" translate>{{'CARD_EXP_MONTH_ERROR'}}</div>
             <div class="help-block" ng-message="expired" translate>{{'CARD_EXPIRED_ERROR'}}</div>
@@ -79,14 +85,16 @@ <h4 class="panel-title visible" translate>{{'CREDIT_CARD_PAYMENT'}}</h4>
       </div>
       <div class="col-sm-4">
         <div class="form-group is-required" ng-class="{'has-error': ($ctrl.creditCardPaymentForm.expiryYear | showErrors)}">
-          <label translate>{{'EXP_YEAR'}}</label>
-          <select class="form-control  form-control-subtle"
-                  name="expiryYear"
-                  autocomplete="cc-exp-year"
-                  required
-                  ng-model="$ctrl.creditCardPayment.expiryYear"
-                  ng-options="year for year in $ctrl.expirationDateYears">
-          </select>
+          <label>
+            <span translate>{{'EXP_YEAR'}}</span>
+            <select class="form-control  form-control-subtle"
+                    name="expiryYear"
+                    autocomplete="cc-exp-year"
+                    required
+                    ng-model="$ctrl.creditCardPayment.expiryYear"
+                    ng-options="year for year in $ctrl.expirationDateYears">
+            </select>
+          </label>
           <div role="alert" ng-messages="$ctrl.creditCardPaymentForm.expiryYear.$error" ng-if="($ctrl.creditCardPaymentForm.expiryYear | showErrors)">
             <div class="help-block" ng-message="required" translate>{{'CARD_EXP_YEAR_ERROR'}}</div>
             <div class="help-block" ng-message="expired" translate>{{'CARD_EXPIRED_ERROR'}}</div>
@@ -95,14 +103,16 @@ <h4 class="panel-title visible" translate>{{'CREDIT_CARD_PAYMENT'}}</h4>
       </div>
       <div class="col-sm-4" ng-if="!$ctrl.hideCvv">
         <div class="form-group" ng-class="{'has-error': ($ctrl.creditCardPaymentForm.securityCode | showErrors), 'is-required': !$ctrl.paymentMethod}">
-          <label translate>{{'SEC_CODE'}}</label>
-          <input type="text"
-                 name="securityCode"
-                 autocomplete="cc-csc"
-                 class="form-control form-control-subtle"
-                 ng-model="$ctrl.creditCardPayment.securityCode"
-                 ng-required="!$ctrl.paymentMethod || $ctrl.creditCardPayment.cardNumber"
-                 ng-attr-placeholder="{{$ctrl.paymentMethod && !$ctrl.creditCardPayment.cardNumber ? '***' : ''}}">
+          <label>
+            <span translate>{{'SEC_CODE'}}</span>
+            <input type="text"
+                   name="securityCode"
+                   autocomplete="cc-csc"
+                   class="form-control form-control-subtle"
+                   ng-model="$ctrl.creditCardPayment.securityCode"
+                   ng-required="!$ctrl.paymentMethod || $ctrl.creditCardPayment.cardNumber"
+                   ng-attr-placeholder="{{$ctrl.paymentMethod && !$ctrl.creditCardPayment.cardNumber ? '***' : ''}}">
+          </label>
           <div role="alert" ng-messages="$ctrl.creditCardPaymentForm.securityCode.$error" ng-if="($ctrl.creditCardPaymentForm.securityCode | showErrors)">
             <div class="help-block" ng-message="required" translate>{{'CARD_SEC_CODE_ERROR'}}</div>
             <div class="help-block" ng-message="minLength" translate>{{'MIN_LENGTH_CARD_SEC_CODE'}}</div>