From c1919d3e85d47d83248c8a9c7520e6df66a8a3df Mon Sep 17 00:00:00 2001
From: liviu13 <popa.liviu91@gmail.com>
Date: Mon, 30 Sep 2024 15:13:57 +0300
Subject: [PATCH 1/3] add "for" accessibility to style editor elements, add
 form description font size option, add extra check for base font size in
 order to avoid undefined when used as non-numeric

---
 classes/helpers/FrmStylesHelper.php           |  2 +-
 classes/views/styles/_buttons.php             | 86 +++++++++++++++----
 .../views/styles/_check-box-radio-fields.php  | 20 +++--
 classes/views/styles/_field-colors.php        | 66 ++++++++++----
 classes/views/styles/_field-description.php   | 27 ++++--
 classes/views/styles/_field-labels.php        | 37 ++++++--
 classes/views/styles/_field-sizes.php         | 28 ++++--
 classes/views/styles/_form-description.php    | 19 ++++
 classes/views/styles/_form-messages.php       | 36 ++++++--
 classes/views/styles/_form-title.php          | 18 +++-
 classes/views/styles/_general.php             | 64 +++++++++++---
 classes/views/styles/_quick-settings.php      | 56 +++++++++---
 12 files changed, 361 insertions(+), 98 deletions(-)

diff --git a/classes/helpers/FrmStylesHelper.php b/classes/helpers/FrmStylesHelper.php
index f4f4219e87..df833962d5 100644
--- a/classes/helpers/FrmStylesHelper.php
+++ b/classes/helpers/FrmStylesHelper.php
@@ -610,7 +610,7 @@ function ( $key ) use ( $defaults, $font_size, $base_font_size, &$settings ) {
 	 * @return float
 	 */
 	private static function get_base_font_size_scale( $key, $value, $defaults ) {
-		if ( empty( $defaults[ $key ] ) || ! is_numeric( (int) $defaults[ $key ] ) || ! is_numeric( (int) $value ) ) {
+		if ( empty( $defaults[ $key ] ) || ! is_numeric( (int) $defaults[ $key ] ) || ! is_numeric( (int) $value ) || 0 === (int) $value ) {
 			return 1;
 		}
 
diff --git a/classes/views/styles/_buttons.php b/classes/views/styles/_buttons.php
index 01af0eb7dc..a4a70df6a5 100644
--- a/classes/views/styles/_buttons.php
+++ b/classes/views/styles/_buttons.php
@@ -34,7 +34,9 @@
 					);
 					?>
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'Font Color', 'formidable' ); ?></label>
+						<label 
+							for="frm_submit_text_color"
+							class="frm-style-item-heading"><?php esc_html_e( 'Font Color', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -49,7 +51,11 @@
 						?>
 					</div>
 
-					<div class="frm5 frm_form_field"><label class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label></div>
+					<div class="frm5 frm_form_field">
+						<label 
+							for="frm_submit_font_size"
+							class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
+					</div>
 					<div class="frm7 frm_form_field">
 						<?php
 						new FrmSliderStyleComponent(
@@ -64,7 +70,9 @@
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'Weight', 'formidable' ); ?></label>
+						<label 
+							for="frm_submit_weight"
+							class="frm-style-item-heading"><?php esc_html_e( 'Weight', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -79,7 +87,11 @@
 						?>
 					</div>
 
-					<div class="frm5 frm_form_field"><label class="frm-style-item-heading"><?php esc_html_e( 'Width', 'formidable' ); ?></label></div>
+					<div class="frm5 frm_form_field">
+						<label 
+							for="frm_submit_width"
+							class="frm-style-item-heading"><?php esc_html_e( 'Width', 'formidable' ); ?></label>
+					</div>
 					<div class="frm7 frm_form_field">
 						<?php
 						new FrmSliderStyleComponent(
@@ -94,7 +106,11 @@
 						?>
 					</div>
 
-					<div class="frm5 frm_form_field"><label class="frm-style-item-heading"><?php esc_html_e( 'Height', 'formidable' ); ?></label></div>
+					<div class="frm5 frm_form_field">
+						<label 
+							for="frm_submit_height"
+							class="frm-style-item-heading"><?php esc_html_e( 'Height', 'formidable' ); ?></label>
+					</div>
 					<div class="frm7 frm_form_field">
 						<?php
 						new FrmSliderStyleComponent(
@@ -109,7 +125,9 @@
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'Border Color', 'formidable' ); ?></label>
+						<label 
+							for="frm_submit_border_color"
+							class="frm-style-item-heading"><?php esc_html_e( 'Border Color', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -124,7 +142,11 @@
 						?>
 					</div>
 
-					<div class="frm5 frm_form_field"><label class="frm-style-item-heading"><?php esc_html_e( 'Border Width', 'formidable' ); ?></label></div>
+					<div class="frm5 frm_form_field">
+						<label 
+							for="frm_submit_border_width"
+							class="frm-style-item-heading"><?php esc_html_e( 'Border Width', 'formidable' ); ?></label>
+					</div>
 					<div class="frm7 frm_form_field">
 						<?php
 						new FrmSliderStyleComponent(
@@ -139,7 +161,9 @@
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'Shadow', 'formidable' ); ?></label>
+						<label 
+							for="frm_submit_shadow_color"
+							class="frm-style-item-heading"><?php esc_html_e( 'Shadow', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -154,7 +178,11 @@
 						?>
 					</div>
 
-					<div class="frm5 frm_form_field"><label class="frm-style-item-heading"><?php esc_html_e( 'Corner Radius', 'formidable' ); ?></label></div>
+					<div class="frm5 frm_form_field">
+						<label 
+							for="frm_submit_border_radius"
+							class="frm-style-item-heading"><?php esc_html_e( 'Corner Radius', 'formidable' ); ?></label>
+					</div>
 					<div class="frm7 frm_form_field">
 						<?php
 						new FrmSliderStyleComponent(
@@ -169,7 +197,9 @@
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading">
+						<label 
+							for="frm_submit_margin"
+							class="frm-style-item-heading">
 							<?php esc_html_e( 'Margin', 'formidable' ); ?>
 							<span class="frm_help frm_icon_font frm_tooltip_icon" data-placement="right" data-container="body" data-original-title="<?php esc_attr_e( 'Used for navigation buttons too', 'formidable' ); ?>"></span>
 						</label>
@@ -188,7 +218,13 @@
 						?>
 					</div>
 
-					<div class="frm5 frm_form_field"><label class="frm-style-item-heading"><?php esc_html_e( 'Padding', 'formidable' ); ?></label></div>
+					<div class="frm5 frm_form_field">
+						<label 
+							for="frm_submit_padding"
+							class="frm-style-item-heading">
+							<?php esc_html_e( 'Padding', 'formidable' ); ?>
+						</label>
+					</div>
 					<div class="frm7 frm_form_field">
 						<?php
 						new FrmSliderStyleComponent(
@@ -204,7 +240,9 @@
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading">
+						<label 
+							for="frm_submit_style"
+							class="frm-style-item-heading">
 							<?php esc_html_e( 'Disable submit button styling', 'formidable' ); ?>
 							<?php FrmAppHelper::tooltip_icon( __( 'Note: If disabled, you may not see the change take effect until you make 2 more styling changes or click "Update Options".', 'formidable' ) ); ?>
 						</label>
@@ -229,7 +267,9 @@
 			<div class="frm-active">
 				<div class="frm_grid_container">
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'BG Color', 'formidable' ); ?></label>
+						<label 
+							for="frm_submit_hover_bg_color"
+							class="frm-style-item-heading"><?php esc_html_e( 'BG Color', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -245,7 +285,9 @@
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'Font Color', 'formidable' ); ?></label>
+						<label 
+							for="frm_submit_hover_color"
+							class="frm-style-item-heading"><?php esc_html_e( 'Font Color', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -261,7 +303,9 @@
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'Border Color', 'formidable' ); ?></label>
+						<label 
+							for="frm_submit_hover_border_color"
+							class="frm-style-item-heading"><?php esc_html_e( 'Border Color', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -281,7 +325,9 @@
 			<div class="frm-active">
 				<div class="frm_grid_container">
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'BG Color', 'formidable' ); ?></label>
+						<label 
+							for="frm_submit_active_bg_color"
+							class="frm-style-item-heading"><?php esc_html_e( 'BG Color', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -297,7 +343,9 @@
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'Font Color', 'formidable' ); ?></label>
+						<label 
+							for="frm_submit_active_color"
+							class="frm-style-item-heading"><?php esc_html_e( 'Font Color', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -313,7 +361,9 @@
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'Border Color', 'formidable' ); ?></label>
+							<label 
+							for="frm_submit_active_border_color"
+							class="frm-style-item-heading"><?php esc_html_e( 'Border Color', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
diff --git a/classes/views/styles/_check-box-radio-fields.php b/classes/views/styles/_check-box-radio-fields.php
index a2d9c8115f..9f336a70e1 100644
--- a/classes/views/styles/_check-box-radio-fields.php
+++ b/classes/views/styles/_check-box-radio-fields.php
@@ -4,7 +4,9 @@
 }
 ?>
 <div class="frm5 frm_form_field">
-	<label class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></label>
+	<label 
+		for="frm_check_label_color"
+		class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
 	<?php
@@ -20,7 +22,9 @@
 </div>
 
 <div class="frm5 frm_form_field">
-	<label class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
+	<label 
+		for="frm_check_font_size"
+		class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
 	<?php
@@ -36,7 +40,9 @@
 </div>
 
 <div class="frm5 frm_form_field">
-	<label class="frm-style-item-heading"><?php esc_html_e( 'Weight', 'formidable' ); ?></label>
+	<label 
+		for="frm_check_weight"
+		class="frm-style-item-heading"><?php esc_html_e( 'Weight', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
 	<?php
@@ -52,7 +58,9 @@
 </div>
 
 <div class="frm5 frm_form_field">
-	<label class="frm-style-item-heading"><?php esc_html_e( 'Check Box', 'formidable' ); ?></label>
+	<label 
+		for="frm_check_align"
+		class="frm-style-item-heading"><?php esc_html_e( 'Check Box', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
 	<?php
@@ -71,7 +79,9 @@
 </div>
 
 <div class="frm5 frm_form_field">
-	<label class="frm-style-item-heading"><?php esc_html_e( 'Radio', 'formidable' ); ?></label>
+	<label 
+		for="frm_radio_align"
+		class="frm-style-item-heading"><?php esc_html_e( 'Radio', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
 	<?php
diff --git a/classes/views/styles/_field-colors.php b/classes/views/styles/_field-colors.php
index 7892923c8c..dbc1e8e75a 100644
--- a/classes/views/styles/_field-colors.php
+++ b/classes/views/styles/_field-colors.php
@@ -20,7 +20,9 @@
 			<div class="frm-active">
 				<div class="frm_grid_container">
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'Background', 'formidable' ); ?></label>
+						<label
+							for="frm_bg_color"
+							class="frm-style-item-heading"><?php esc_html_e( 'Background', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -36,7 +38,9 @@
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'Field Text', 'formidable' ); ?></label>
+						<label
+							for="frm_text_color"
+							class="frm-style-item-heading"><?php esc_html_e( 'Field Text', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -52,7 +56,9 @@
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'Border', 'formidable' ); ?></label>
+						<label
+							for="frm_border_color"
+							class="frm-style-item-heading"><?php esc_html_e( 'Border', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -68,7 +74,9 @@
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'Border Width', 'formidable' ); ?></label>
+						<label
+							for="frm_field_border_width"
+							class="frm-style-item-heading"><?php esc_html_e( 'Border Width', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -84,7 +92,9 @@
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'Border Style', 'formidable' ); ?></label>
+						<label
+							for="frm_field_border_style"
+							class="frm-style-item-heading"><?php esc_html_e( 'Border Style', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -105,7 +115,9 @@
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'Box Shadow', 'formidable' ); ?></label>
+						<label
+							for="frm_box_shadow"
+							class="frm-style-item-heading"><?php esc_html_e( 'Box Shadow', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field frm-style-component">
 						<?php
@@ -126,7 +138,9 @@
 			<div>
 				<div class="frm_grid_container">
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'Background', 'formidable' ); ?></label>
+						<label
+							for="frm_bg_color_active"
+							class="frm-style-item-heading"><?php esc_html_e( 'Background', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -142,7 +156,9 @@
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'Border', 'formidable' ); ?></label>
+						<label
+							for="frm_border_color_active"
+							class="frm-style-item-heading"><?php esc_html_e( 'Border', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -180,7 +196,9 @@
 			<div>
 				<div class="frm_grid_container">
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'Background', 'formidable' ); ?></label>
+						<label
+							for="frm_bg_color_disabled"
+							class="frm-style-item-heading"><?php esc_html_e( 'Background', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -196,7 +214,9 @@
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'Field Text', 'formidable' ); ?></label>
+						<label
+							for="frm_text_color_disabled"
+							class="frm-style-item-heading"><?php esc_html_e( 'Field Text', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -212,7 +232,9 @@
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'Border', 'formidable' ); ?></label>
+						<label
+							for="frm_border_color_disabled"
+							class="frm-style-item-heading"><?php esc_html_e( 'Border', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -232,7 +254,9 @@
 			<div>
 				<div class="frm_grid_container">
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'Background', 'formidable' ); ?></label>
+						<label
+							for="frm_bg_color_error"
+							class="frm-style-item-heading"><?php esc_html_e( 'Background', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -248,7 +272,9 @@
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'Field Text', 'formidable' ); ?></label>
+						<label
+							for="frm_text_color_error"
+							class="frm-style-item-heading"><?php esc_html_e( 'Field Text', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -264,7 +290,9 @@
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'Border', 'formidable' ); ?></label>
+						<label
+							for="frm_border_color_error"
+							class="frm-style-item-heading"><?php esc_html_e( 'Border', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -279,7 +307,11 @@
 						?>
 					</div>
 
-					<div class="frm5 frm_form_field"><label class="frm-style-item-heading"><?php esc_html_e( 'Border Width', 'formidable' ); ?></label></div>
+					<div class="frm5 frm_form_field">
+						<label
+							for="frm_border_width_error"
+							class="frm-style-item-heading"><?php esc_html_e( 'Border Width', 'formidable' ); ?></label>
+					</div>
 					<div class="frm7 frm_form_field">
 						<?php
 						new FrmSliderStyleComponent(
@@ -294,7 +326,9 @@
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'Style', 'formidable' ); ?></label>
+						<label
+							for="fborder_style_error"
+							class="frm-style-item-heading"><?php esc_html_e( 'Style', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
diff --git a/classes/views/styles/_field-description.php b/classes/views/styles/_field-description.php
index 34c409fb53..c4c8230f3a 100644
--- a/classes/views/styles/_field-description.php
+++ b/classes/views/styles/_field-description.php
@@ -4,7 +4,9 @@
 }
 ?>
 <div class="frm5 frm_form_field">
-	<label class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></label>
+	<label 
+		for="frm_description_color"
+		class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
 	<?php
@@ -20,7 +22,9 @@
 </div>
 
 <div class="frm5 frm_form_field">
-	<label class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
+	<label 
+		for="frm_description_align"
+		class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
 	<?php
@@ -36,7 +40,9 @@
 </div>
 
 <div class="frm5 frm_form_field">
-	<label class="frm-style-item-heading"><?php esc_html_e( 'Weight', 'formidable' ); ?></label>
+	<label 
+		for="frm_description_weight"
+		class="frm-style-item-heading"><?php esc_html_e( 'Weight', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
 	<?php
@@ -52,7 +58,9 @@
 </div>
 
 <div class="frm5 frm_form_field">
-	<label class="frm-style-item-heading"><?php esc_html_e( 'Style', 'formidable' ); ?></label>
+	<label 
+		for="frm_description_style"
+		class="frm-style-item-heading"><?php esc_html_e( 'Style', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
 	<?php
@@ -60,7 +68,7 @@
 		$frm_style->get_field_name( 'description_style' ),
 		$style->post_content['description_style'],
 		array(
-			'id'      => 'frm_description_weight',
+			'id'      => 'frm_description_style',
 			'options' => array(
 				'normal' => esc_html__( 'normal', 'formidable' ),
 				'italic' => esc_html__( 'italic', 'formidable' ),
@@ -71,7 +79,9 @@
 </div>
 
 <div class="frm5 frm_form_field">
-	<label class="frm-style-item-heading"><?php esc_html_e( 'Align', 'formidable' ); ?></label>
+	<label 
+		for="frm_description_align"
+		class="frm-style-item-heading"><?php esc_html_e( 'Align', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field frm-sm-z-index">
 	<?php
@@ -79,6 +89,7 @@
 		$frm_style->get_field_name( 'description_align' ),
 		$style->post_content['description_align'],
 		array(
+			'id'      => 'frm_description_align',
 			'options' => array( 'left', 'right' ),
 		)
 	);
@@ -86,7 +97,9 @@
 </div>
 
 <div class="frm5 frm_form_field">
-	<label class="frm-style-item-heading"><?php esc_html_e( 'Margin', 'formidable' ); ?></label>
+	<label 
+		for="frm_description_margin"
+		class="frm-style-item-heading"><?php esc_html_e( 'Margin', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field frm-md-z-index">
 	<?php
diff --git a/classes/views/styles/_field-labels.php b/classes/views/styles/_field-labels.php
index 095afdfa6e..674892a0be 100644
--- a/classes/views/styles/_field-labels.php
+++ b/classes/views/styles/_field-labels.php
@@ -18,7 +18,9 @@
 			<div class="frm-active">
 				<div class="frm_grid_container">
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></label>
+						<label 
+							for="frm_label_color"
+							class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -34,7 +36,9 @@
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
+						<label 
+							for="frm_font_size"
+							class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -50,7 +54,9 @@
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'Weight', 'formidable' ); ?></label>
+						<label 
+							for="frm_required_weight"
+							class="frm-style-item-heading"><?php esc_html_e( 'Weight', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -66,7 +72,9 @@
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'Position', 'formidable' ); ?></label>
+						<label 
+							for="frm_position"
+							class="frm-style-item-heading"><?php esc_html_e( 'Position', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -82,7 +90,9 @@
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'Align', 'formidable' ); ?></label>
+						<label 
+							for="frm_label_align"
+							class="frm-style-item-heading"><?php esc_html_e( 'Align', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field frm-sm-z-index">
 						<?php
@@ -90,6 +100,7 @@
 							$frm_style->get_field_name( 'align' ),
 							$style->post_content['align'],
 							array(
+								'id'      => 'frm_label_align',
 								'options' => array( 'left', 'right' ),
 							)
 						);
@@ -97,7 +108,9 @@
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'Width', 'formidable' ); ?></label>
+						<label 
+							for="frm_width"
+							class="frm-style-item-heading"><?php esc_html_e( 'Width', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field frm-md-z-index">
 						<?php
@@ -113,7 +126,9 @@
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'Padding', 'formidable' ); ?></label>
+						<label 
+							for="frm_label_padding"
+							class="frm-style-item-heading"><?php esc_html_e( 'Padding', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -134,7 +149,9 @@
 			<div>
 				<div class="frm_grid_container">
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></label>
+						<label 
+							for="frm_required_color"
+							class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -150,7 +167,9 @@
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'Weight', 'formidable' ); ?></label>
+						<label 
+							for="frm_required_weight"
+							class="frm-style-item-heading"><?php esc_html_e( 'Weight', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
diff --git a/classes/views/styles/_field-sizes.php b/classes/views/styles/_field-sizes.php
index 1b1053dff2..6c8872d500 100644
--- a/classes/views/styles/_field-sizes.php
+++ b/classes/views/styles/_field-sizes.php
@@ -4,7 +4,9 @@
 }
 ?>
 <div class="frm5 frm_form_field">
-	<label class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
+	<label 
+		for="frm_field_font_size"
+		class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
 	<?php
@@ -20,7 +22,9 @@
 </div>
 
 <div class="frm5 frm_form_field">
-	<label class="frm-style-item-heading"><?php esc_html_e( 'Weight', 'formidable' ); ?></label>
+	<label 
+		for="frm_field_weight"
+		class="frm-style-item-heading"><?php esc_html_e( 'Weight', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
 	<?php
@@ -36,7 +40,9 @@
 </div>
 
 <div class="frm5 frm_form_field">
-	<label class="frm-style-item-heading"><?php esc_html_e( 'Height', 'formidable' ); ?></label>
+	<label 
+		for="frm_field_height"
+		class="frm-style-item-heading"><?php esc_html_e( 'Height', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
 	<?php
@@ -51,7 +57,9 @@
 	?>
 </div>
 <div class="frm5 frm_form_field">
-	<label class="frm-style-item-heading"><?php esc_html_e( 'Width', 'formidable' ); ?></label>
+	<label 
+		for="frm_field_width"
+		class="frm-style-item-heading"><?php esc_html_e( 'Width', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
 	<?php
@@ -66,7 +74,9 @@
 	?>
 </div>
 <div class="frm5 frm_form_field">
-	<label class="frm-style-item-heading"><?php esc_html_e( 'Padding', 'formidable' ); ?></label>
+	<label 
+		for="frm_field_pad"
+		class="frm-style-item-heading"><?php esc_html_e( 'Padding', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
 	<?php
@@ -82,7 +92,9 @@
 	?>
 </div>
 <div class="frm5 frm_form_field">
-	<label class="frm-style-item-heading"><?php esc_html_e( 'Margin', 'formidable' ); ?></label>
+	<label 
+		for="frm_field_margin"
+		class="frm-style-item-heading"><?php esc_html_e( 'Margin', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
 	<?php
@@ -98,7 +110,9 @@
 	?>
 </div>
 <div class="frm5 frm_form_field">
-	<label class="frm-style-item-heading"><?php esc_html_e( 'Corner Radius', 'formidable' ); ?></label>
+	<label 
+		for="frm_border_radius"
+		class="frm-style-item-heading"><?php esc_html_e( 'Corner Radius', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
 	<?php
diff --git a/classes/views/styles/_form-description.php b/classes/views/styles/_form-description.php
index 15cb34fddd..3608094cae 100644
--- a/classes/views/styles/_form-description.php
+++ b/classes/views/styles/_form-description.php
@@ -4,6 +4,25 @@
 }
 ?>
 
+<div class="frm5 frm_form_field">
+	<label 
+		for="frm_form_desc_size"
+		class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?>
+	</label>
+</div>
+<div class="frm7 frm_form_field">
+	<?php
+	new FrmSliderStyleComponent(
+		$frm_style->get_field_name( 'form_desc_size' ),
+		$style->post_content['form_desc_size'],
+		array(
+			'id'        => 'frm_form_desc_size',
+			'max_value' => 100,
+		)
+	);
+	?>
+</div>
+
 <div class="frm5 frm_form_field"><label class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></label></div>
 <div class="frm7 frm_form_field">
 	<?php
diff --git a/classes/views/styles/_form-messages.php b/classes/views/styles/_form-messages.php
index e8180734ee..a89699675e 100644
--- a/classes/views/styles/_form-messages.php
+++ b/classes/views/styles/_form-messages.php
@@ -18,7 +18,9 @@
 			<div class="frm-active">
 				<div class="frm_grid_container">
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'BG Color', 'formidable' ); ?></label>
+						<label 
+							for="frm_success_bg_color"
+							class="frm-style-item-heading"><?php esc_html_e( 'BG Color', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -34,7 +36,9 @@
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'Border Color', 'formidable' ); ?></label>
+						<label 
+							for="frm_success_border_color"
+							class="frm-style-item-heading"><?php esc_html_e( 'Border Color', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -50,7 +54,9 @@
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'Font Color', 'formidable' ); ?></label>
+						<label 
+							for="frm_success_text_color"
+							class="frm-style-item-heading"><?php esc_html_e( 'Font Color', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -65,7 +71,11 @@
 						?>
 					</div>
 
-					<div class="frm5 frm_form_field"><label class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label></div>
+					<div class="frm5 frm_form_field">
+						<label 
+							for="frm_success_font_size"
+							class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
+					</div>
 					<div class="frm7 frm_form_field">
 						<?php
 						new FrmSliderStyleComponent(
@@ -84,7 +94,9 @@
 			<div>
 				<div class="frm_grid_container">
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'BG Color', 'formidable' ); ?></label>
+						<label 
+							for="frm_error_bg"
+							class="frm-style-item-heading"><?php esc_html_e( 'BG Color', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -100,7 +112,9 @@
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'Border Color', 'formidable' ); ?></label>
+						<label 
+							for="frm_error_border"
+							class="frm-style-item-heading"><?php esc_html_e( 'Border Color', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -116,7 +130,9 @@
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'Font Color', 'formidable' ); ?></label>
+						<label 
+							for="frm_error_text"
+							class="frm-style-item-heading"><?php esc_html_e( 'Font Color', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -131,7 +147,11 @@
 						?>
 					</div>
 
-					<div class="frm5 frm_form_field"><label class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label></div>
+					<div class="frm5 frm_form_field">
+						<label 
+							for="frm_error_font_size"
+							class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
+					</div>
 					<div class="frm7 frm_form_field">
 						<?php
 						new FrmSliderStyleComponent(
diff --git a/classes/views/styles/_form-title.php b/classes/views/styles/_form-title.php
index 026c68d71c..3a322f1453 100644
--- a/classes/views/styles/_form-title.php
+++ b/classes/views/styles/_form-title.php
@@ -3,7 +3,11 @@
 	die( 'You are not allowed to call this page directly.' );
 }
 ?>
-<div class="frm5 frm_form_field"><label class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></label></div>
+<div class="frm5 frm_form_field">
+	<label 
+		for="frm_fieldset_color"
+		class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></label>
+</div>
 <div class="frm7 frm_form_field">
 	<?php
 	new FrmColorpickerStyleComponent(
@@ -17,7 +21,11 @@
 	?>
 </div>
 
-<div class="frm5 frm_form_field"><label class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label></div>
+<div class="frm5 frm_form_field">
+	<label 
+		for="frm_title_size"
+		class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
+</div>
 <div class="frm7 frm_form_field">
 	<?php
 	new FrmSliderStyleComponent(
@@ -31,7 +39,11 @@
 	?>
 </div>
 
-<div class="frm5 frm_form_field"><label class="frm-style-item-heading"><?php esc_html_e( 'Margin', 'formidable' ); ?></label></div>
+<div class="frm5 frm_form_field">
+	<label 
+		for="frm_title_margins"
+		class="frm-style-item-heading"><?php esc_html_e( 'Margin', 'formidable' ); ?></label>
+</div>
 <div class="frm7 frm_form_field">
 	<?php
 	new FrmSliderStyleComponent(
diff --git a/classes/views/styles/_general.php b/classes/views/styles/_general.php
index fc1953f253..c652d1b885 100644
--- a/classes/views/styles/_general.php
+++ b/classes/views/styles/_general.php
@@ -4,7 +4,9 @@
 }
 ?>
 <p class="frm5 frm_form_field">
-	<label class="frm-style-item-heading"><?php esc_html_e( 'Font Family', 'formidable' ); ?></label>
+	<label 
+		for="frm_font"
+		class="frm-style-item-heading"><?php esc_html_e( 'Font Family', 'formidable' ); ?></label>
 </p>
 <p class="frm7 frm_form_field">
 	<input type="text" name="<?php echo esc_attr( $frm_style->get_field_name( 'font' ) ); ?>" id="frm_font" value="<?php echo esc_attr( $style->post_content['font'] ); ?>"  placeholder="<?php esc_attr_e( 'Inherit from theme', 'formidable' ); ?>" class="frm_full_width" />
@@ -26,18 +28,28 @@
 );
 ?>
 
-<div class="frm5 frm_form_field"><label class="frm-style-item-heading"><?php esc_html_e( 'Alignment', 'formidable' ); ?></label></div>
+<div class="frm5 frm_form_field">
+	<label 
+		for="frm_form_align"
+		class="frm-style-item-heading"><?php esc_html_e( 'Alignment', 'formidable' ); ?></label>
+</div>
 <div class="frm7 frm_form_field">
 	<?php
 	new FrmAlignStyleComponent(
 		$frm_style->get_field_name( 'form_align' ),
 		$style->post_content['form_align'],
-		array()
+		array(
+			'id' => 'frm_form_align',
+		)
 	);
 	?>
 </div>
 
-<div class="frm5 frm_form_field"><label class="frm-style-item-heading"><?php esc_html_e( 'Border Color', 'formidable' ); ?></label></div>
+<div class="frm5 frm_form_field">
+	<label 
+		for="frm_fieldset_color"
+		class="frm-style-item-heading"><?php esc_html_e( 'Border Color', 'formidable' ); ?></label>
+</div>
 <div class="frm7 frm_form_field">
 	<?php
 	new FrmColorpickerStyleComponent(
@@ -51,7 +63,11 @@
 	?>
 </div>
 
-<div class="frm5 frm_form_field"><label class="frm-style-item-heading"><?php esc_html_e( 'Border Width', 'formidable' ); ?></label></div>
+<div class="frm5 frm_form_field">
+	<label 
+		for="frm_fieldset"
+		class="frm-style-item-heading"><?php esc_html_e( 'Border Width', 'formidable' ); ?></label>
+</div>
 <div class="frm7 frm_form_field">
 	<?php
 	new FrmSliderStyleComponent(
@@ -65,7 +81,11 @@
 	?>
 </div>
 
-<div class="frm5 frm_form_field"><label class="frm-style-item-heading"><?php esc_html_e( 'Padding', 'formidable' ); ?></label></div>
+<div class="frm5 frm_form_field">
+	<label 
+		for="frm_fieldset_padding"
+		class="frm-style-item-heading"><?php esc_html_e( 'Padding', 'formidable' ); ?></label>
+</div>
 <div class="frm7 frm_form_field">
 	<?php
 	new FrmSliderStyleComponent(
@@ -80,7 +100,11 @@
 	?>
 </div>
 
-<div class="frm5 frm_form_field"><label class="frm-style-item-heading"><?php esc_html_e( 'Form Width', 'formidable' ); ?></label></div>
+<div class="frm5 frm_form_field">
+	<label 
+		for="frm_form_width"
+		class="frm-style-item-heading"><?php esc_html_e( 'Form Width', 'formidable' ); ?></label>
+</div>
 <div class="frm7 frm_form_field">
 	<?php
 	new FrmSliderStyleComponent(
@@ -94,19 +118,27 @@
 	?>
 </div>
 
-<div class="frm5 frm_form_field"><label class="frm-style-item-heading"><?php esc_html_e( 'Direction', 'formidable' ); ?></label></div>
+<div class="frm5 frm_form_field">
+	<label 
+		for="frm_direction"
+		class="frm-style-item-heading"><?php esc_html_e( 'Direction', 'formidable' ); ?></label>
+</div>
 <div class="frm7 frm_form_field">
 	<?php
 	new FrmDirectionStyleComponent(
 		$frm_style->get_field_name( 'direction' ),
 		$style->post_content['direction'],
-		array()
+		array(
+			'id' => 'frm_direction',
+		)
 	);
 	?>
 </div>
 
 <div class="frm5 frm_form_field">
-	<label class="frm-style-item-heading">
+	<label 
+		for="frm_important_style"
+		class="frm-style-item-heading">
 		<?php esc_html_e( 'Override Theme', 'formidable' ); ?>
 		<?php FrmAppHelper::tooltip_icon( __( 'This will add !important to many of the lines in the Formidable styling to make sure it will be used', 'formidable' ) ); ?>
 	</label>
@@ -126,7 +158,11 @@
 		?>
 </div>
 
-<div class="frm5 frm_form_field"><label class="frm-style-item-heading"><?php esc_html_e( 'Center Form', 'formidable' ); ?></label></div>
+<div class="frm5 frm_form_field">
+	<label 
+		for="frm_center_form"
+		class="frm-style-item-heading"><?php esc_html_e( 'Center Form', 'formidable' ); ?></label>
+</div>
 <div class="frm7 frm_form_field frm-style-component">
 	<?php
 		FrmHtmlHelper::toggle(
@@ -141,7 +177,11 @@
 		);
 		?>
 </div>
-<div class="frm5 frm_form_field"><label class="frm-style-item-heading"><?php esc_html_e( 'Style Class', 'formidable' ); ?></label></div>
+<div class="frm5 frm_form_field">
+	<label 
+		for="frm_style_class"
+		class="frm-style-item-heading"><?php esc_html_e( 'Style Class', 'formidable' ); ?></label>
+</div>
 <div class="frm7 frm_form_field frm-style-component">
 	<label class="frm-copy-text">.frm_style_<?php
 		echo esc_html( $style->post_name );
diff --git a/classes/views/styles/_quick-settings.php b/classes/views/styles/_quick-settings.php
index 9e4ea9443a..e78b74d791 100644
--- a/classes/views/styles/_quick-settings.php
+++ b/classes/views/styles/_quick-settings.php
@@ -8,7 +8,11 @@
 
 <p class="frm12"><?php esc_html_e( 'Essential presets for a quick start. Explore advanced settings for more options', 'formidable' ); ?>.</p>
 
-<div class="frm5 frm_form_field frm-mt-md"><label class="frm-style-item-heading"><?php esc_html_e( 'Primary', 'formidable' ); ?></label></div>
+<div class="frm5 frm_form_field frm-mt-md">
+	<label 
+		for="frm_style_qsettings_submit_bg_color"
+		class="frm-style-item-heading"><?php esc_html_e( 'Primary', 'formidable' ); ?></label>
+</div>
 <div class="frm7 frm_form_field frm-mt-md">
 	<?php
 	new FrmPrimaryColorStyleComponent(
@@ -34,7 +38,11 @@
 	?>
 </div>
 
-<div class="frm5 frm_form_field"><label class="frm-style-item-heading"><?php esc_html_e( 'Field Text', 'formidable' ); ?></label></div>
+<div class="frm5 frm_form_field">
+	<label 
+		for="frm_style_qsettings_text_color"
+		class="frm-style-item-heading"><?php esc_html_e( 'Field Text', 'formidable' ); ?></label>
+</div>
 <div class="frm7 frm_form_field">
 	<?php
 	new FrmPrimaryColorStyleComponent(
@@ -55,7 +63,11 @@
 	?>
 </div>
 
-<div class="frm5 frm_form_field"><label class="frm-style-item-heading"><?php esc_html_e( 'Field Border', 'formidable' ); ?></label></div>
+<div class="frm5 frm_form_field">
+	<label 
+		for="frm_style_qsettings_border_color"
+		class="frm-style-item-heading"><?php esc_html_e( 'Field Border', 'formidable' ); ?></label>
+</div>
 <div class="frm7 frm_form_field">
 	<?php
 	new FrmPrimaryColorStyleComponent(
@@ -74,7 +86,11 @@
 	?>
 </div>
 
-<div class="frm5 frm_form_field"><label class="frm-style-item-heading"><?php esc_html_e( 'Button Text', 'formidable' ); ?></label></div>
+<div class="frm5 frm_form_field">
+	<label 
+		for="frm_style_qsettings_submit_text_color"
+		class="frm-style-item-heading"><?php esc_html_e( 'Button Text', 'formidable' ); ?></label>
+</div>
 <div class="frm7 frm_form_field">
 	<?php
 	new FrmPrimaryColorStyleComponent(
@@ -95,14 +111,18 @@
 
 <hr class="frm12"/>
 
-<div class="frm5 frm_form_field"><label class="frm-style-item-heading"><?php esc_html_e( 'Vertical Spacing', 'formidable' ); ?></label></div>
+<div class="frm5 frm_form_field">
+	<label 
+		for="frm_field_margin"
+		class="frm-style-item-heading"><?php esc_html_e( 'Vertical Spacing', 'formidable' ); ?></label>
+</div>
 <div class="frm7 frm_form_field">
 	<?php
 	new FrmSliderStyleComponent(
 		null,
 		$style->post_content['field_margin'],
 		array(
-			'id'          => 'field_margin',
+			'id'          => 'frm_field_margin',
 			'max_value'   => 100,
 			'will_change' => array(
 				$frm_style->get_field_name( 'field_margin' ),
@@ -112,14 +132,18 @@
 	?>
 </div>
 
-<div class="frm5 frm_form_field"><label class="frm-style-item-heading"><?php esc_html_e( 'Input Field Padding', 'formidable' ); ?></label></div>
+<div class="frm5 frm_form_field">
+	<label 
+		for="frm_field_pad"
+		class="frm-style-item-heading"><?php esc_html_e( 'Input Field Padding', 'formidable' ); ?></label>
+</div>
 <div class="frm7 frm_form_field">
 	<?php
 	new FrmSliderStyleComponent(
 		null,
 		$style->post_content['field_pad'],
 		array(
-			'id'          => 'field_pad',
+			'id'          => 'frm_field_pad',
 			'max_value'   => 100,
 			'will_change' => array(
 				$frm_style->get_field_name( 'field_pad' ),
@@ -129,7 +153,11 @@
 	?>
 </div>
 <hr class="frm12"/>
-<div class="frm5 frm_form_field"><label class="frm-style-item-heading"><?php esc_html_e( 'Base Font Size', 'formidable' ); ?></label></div>
+<div class="frm5 frm_form_field">
+	<label 
+		for="frm_base_font_size"
+		class="frm-style-item-heading"><?php esc_html_e( 'Base Font Size', 'formidable' ); ?></label>
+</div>
 <div class="frm7 frm_form_field">
 	<?php
 	if ( ! FrmStylesHelper::is_advanced_settings() ) {
@@ -143,7 +171,7 @@
 		$frm_style->get_field_name( 'base_font_size' ),
 		$style->post_content['base_font_size'],
 		array(
-			'id'          => 'base_font_size',
+			'id'          => 'frm_base_font_size',
 			'max_value'   => 100,
 			'not_show_in' => 'advanced-settings',
 			'classname'   => 'frm-base-font-size',
@@ -155,7 +183,9 @@
 <hr class="frm12"/>
 
 <div class="frm5 frm_form_field">
-	<label class="frm-style-item-heading"><?php esc_html_e( 'Field Shape', 'formidable' ); ?></label>
+	<label 
+		for="frm_field_shape"
+		class="frm-style-item-heading"><?php esc_html_e( 'Field Shape', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field frm-sm-z-index">
 	<?php
@@ -170,7 +200,9 @@
 </div>
 
 <div class="frm5 frm_form_field frm_hidden" data-frm-element="field-shape-corner-radius">
-	<label class="frm-style-item-heading"><?php esc_html_e( 'Corner Radius', 'formidable' ); ?></label>
+	<label 
+		for="frm_border_radius"
+		class="frm-style-item-heading"><?php esc_html_e( 'Corner Radius', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field frm_hidden frm-md-z-index" data-frm-element="field-shape-corner-radius">
 	<?php

From 81186f97b663bc7da47ec69891c495ded12e51bf Mon Sep 17 00:00:00 2001
From: liviu13 <popa.liviu91@gmail.com>
Date: Tue, 1 Oct 2024 19:44:11 +0300
Subject: [PATCH 2/3] form description size id fix

---
 classes/views/styles/_field-description.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/classes/views/styles/_field-description.php b/classes/views/styles/_field-description.php
index c4c8230f3a..6de066c648 100644
--- a/classes/views/styles/_field-description.php
+++ b/classes/views/styles/_field-description.php
@@ -23,7 +23,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></la
 
 <div class="frm5 frm_form_field">
 	<label 
-		for="frm_description_align"
+		for="frm_description_font_size"
 		class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
@@ -32,7 +32,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?>
 		$frm_style->get_field_name( 'description_font_size' ),
 		$style->post_content['description_font_size'],
 		array(
-			'id'        => 'frm_description_align',
+			'id'        => 'frm_description_font_size',
 			'max_value' => 300,
 		)
 	);

From b40b76d162a2d24b56cbc74decca4e92d2c2eb74 Mon Sep 17 00:00:00 2001
From: liviu13 <popa.liviu91@gmail.com>
Date: Tue, 1 Oct 2024 20:42:42 +0300
Subject: [PATCH 3/3] fix toggle boxes ids

---
 classes/views/styles/_field-colors.php | 2 +-
 classes/views/styles/_field-sizes.php  | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/classes/views/styles/_field-colors.php b/classes/views/styles/_field-colors.php
index df81e1613e..9cf335a6b5 100644
--- a/classes/views/styles/_field-colors.php
+++ b/classes/views/styles/_field-colors.php
@@ -122,7 +122,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Remove Box Shadow', 'formidabl
 					<div class="frm7 frm_form_field frm-style-component">
 						<?php
 						FrmHtmlHelper::toggle(
-							'remove_box_shadow',
+							'frm_box_shadow',
 							$frm_style->get_field_name( 'remove_box_shadow' ),
 							array(
 								'div_class' => 'with_frm_style frm_toggle',
diff --git a/classes/views/styles/_field-sizes.php b/classes/views/styles/_field-sizes.php
index 6c8872d500..79833d18a5 100644
--- a/classes/views/styles/_field-sizes.php
+++ b/classes/views/styles/_field-sizes.php
@@ -128,12 +128,14 @@ class="frm-style-item-heading"><?php esc_html_e( 'Corner Radius', 'formidable' )
 </div>
 
 <div class="frm5 frm_form_field">
-	<label class="frm-style-item-heading"><?php esc_html_e( 'Auto Drop-downs Width', 'formidable' ); ?></label>
+	<label 
+		for="frm_auto_dropdowns_width"
+		class="frm-style-item-heading"><?php esc_html_e( 'Auto Drop-downs Width', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field frm-style-component">
 	<?php
 	FrmHtmlHelper::toggle(
-		'auto_width',
+		'frm_auto_dropdowns_width',
 		$frm_style->get_field_name( 'auto_width' ),
 		array(
 			'div_class' => 'with_frm_style frm_toggle',