Update Default Form Styling

classes/helpers/FrmStylesHelper.php

@@ -504,7 +504,7 @@ public static function get_settings_for_output( $style ) {
 		$settings['field_height'] = $settings['field_height'] === '' ? 'auto' : $settings['field_height'];
 		$settings['field_width']  = $settings['field_width'] === '' ? 'auto' : $settings['field_width'];
 		$settings['auto_width']   = $settings['auto_width'] ? 'auto' : $settings['field_width'];
-		$settings['box_shadow']   = ! empty( $settings['remove_box_shadow'] ) ? 'none' : '0 1px 1px rgba(0, 0, 0, 0.075) inset';
+		$settings['box_shadow']   = ! empty( $settings['remove_box_shadow'] ) ? 'none' : '0 1px 2px 0 rgba(18, 18, 23, 0.05)';
 
 		if ( ! isset( $settings['repeat_icon'] ) ) {
 			$settings['repeat_icon'] = 1;

classes/models/FrmStyle.php

@@ -617,73 +617,73 @@ public function get_defaults() {
 			'title_margin_top'           => '10px',
 			'title_margin_bottom'        => '60px',
 			'form_desc_size'             => '14px',
-			'form_desc_color'            => '666666',
+			'form_desc_color'            => '98A2B3',
 			'form_desc_margin_top'       => '10px',
 			'form_desc_margin_bottom'    => '25px',
 			'form_desc_padding'          => '0',
 
 			'font'                       => '',
 			'font_size'                  => '15px',
-			'label_color'                => '3f4b5b',
+			'label_color'                => '344054',
 			'weight'                     => 'normal',
 			'position'                   => 'none',
 			'align'                      => 'left',
 			'width'                      => '150px',
-			'required_color'             => 'B94A48',
+			'required_color'             => 'F04438',
 			'required_weight'            => 'bold',
-			'label_padding'              => '0 0 3px 0',
+			'label_padding'              => '0 0 5px 0',
 
 			'description_font_size'      => '12px',
-			'description_color'          => '666666',
+			'description_color'          => '667085',
 			'description_weight'         => 'normal',
 			'description_style'          => 'normal',
 			'description_align'          => 'left',
 			'description_margin'         => '0',
 
 			'field_font_size'            => '14px',
-			'field_height'               => '32px',
+			'field_height'               => '36px',
 			'line_height'                => 'normal',
 			'field_width'                => '100%',
 			'auto_width'                 => false,
-			'field_pad'                  => '6px 10px',
+			'field_pad'                  => '8px 12px',
 			'field_margin'               => '20px',
 			'field_weight'               => 'normal',
-			'text_color'                 => '555555',
+			'text_color'                 => '1D2939',
 			// 'border_color_hv'   => 'cccccc',
-			'border_color'               => 'BFC3C8',
+			'border_color'               => 'D0D5DD',
 			'field_border_width'         => '1px',
 			'field_border_style'         => 'solid',
 
 			'bg_color'                   => 'ffffff',
 			// 'bg_color_hv'       => 'ffffff',
 			'remove_box_shadow'          => '',
 			'bg_color_active'            => 'ffffff',
-			'border_color_active'        => '66afe9',
+			'border_color_active'        => '4199FD',
 			'remove_box_shadow_active'   => '',
 			'text_color_error'           => '444444',
 			'bg_color_error'             => 'ffffff',
-			'border_color_error'         => 'B94A48',
+			'border_color_error'         => 'F04438',
 			'border_width_error'         => '1px',
 			'border_style_error'         => 'solid',
-			'bg_color_disabled'          => 'ffffff',
-			'border_color_disabled'      => 'E5E5E5',
-			'text_color_disabled'        => 'A1A1A1',
+			'bg_color_disabled'          => 'F9FAFB',
+			'border_color_disabled'      => 'D0D5DD',
+			'text_color_disabled'        => '667085',
 
 			'radio_align'                => 'block',
 			'check_align'                => 'block',
-			'check_font_size'            => '13px',
-			'check_label_color'          => '444444',
+			'check_font_size'            => '14px',
+			'check_label_color'          => '1D2939',
 			'check_weight'               => 'normal',
 
 			'section_font_size'          => '18px',
-			'section_color'              => '444444',
+			'section_color'              => '344054',
 			'section_weight'             => 'bold',
-			'section_pad'                => '15px 0 3px 0',
-			'section_mar_top'            => '15px',
+			'section_pad'                => '32px 0 3px 0',
+			'section_mar_top'            => '30px',
 			'section_mar_bottom'         => '30px',
 			'section_bg_color'           => '',
-			'section_border_color'       => 'e8e8e8',
-			'section_border_width'       => '2px',
+			'section_border_color'       => 'EAECF0',
+			'section_border_width'       => '1px',
 			'section_border_style'       => 'solid',
 			'section_border_loc'         => '-top',
 			'collapse_icon'              => '6',
@@ -692,30 +692,30 @@ public function get_defaults() {
 			'repeat_icon_color'          => 'ffffff',
 
 			'submit_style'               => false,
-			'submit_font_size'           => '15px',
+			'submit_font_size'           => '14px',
 			'submit_width'               => 'auto',
 			'submit_height'              => 'auto',
-			'submit_bg_color'            => '579AF6',
-			'submit_border_color'        => '579AF6',
+			'submit_bg_color'            => '4199FD',
+			'submit_border_color'        => '4199FD',
 			'submit_border_width'        => '1px',
 			'submit_text_color'          => 'ffffff',
 			'submit_weight'              => 'normal',
-			'submit_border_radius'       => '4px',
+			'submit_border_radius'       => '8px',
 			'submit_bg_img'              => '',
 			'submit_margin'              => '10px',
-			'submit_padding'             => '10px 20px',
+			'submit_padding'             => '8px 16px',
 			'submit_shadow_color'        => 'eeeeee',
-			'submit_hover_bg_color'      => 'efefef',
-			'submit_hover_color'         => '444444',
-			'submit_hover_border_color'  => 'cccccc',
-			'submit_active_bg_color'     => 'efefef',
-			'submit_active_color'        => '444444',
-			'submit_active_border_color' => 'cccccc',
-
-			'border_radius'              => '4px',
-			'error_bg'                   => 'F2DEDE',
-			'error_border'               => 'EBCCD1',
-			'error_text'                 => 'B94A48',
+			'submit_hover_bg_color'      => '3680D3',
+			'submit_hover_color'         => 'ffffff',
+			'submit_hover_border_color'  => '3680D3',
+			'submit_active_bg_color'     => '3680D3',
+			'submit_active_color'        => 'ffffff',
+			'submit_active_border_color' => '3680D3',
+
+			'border_radius'              => '8px',
+			'error_bg'                   => 'FEE4E2',
+			'error_border'               => 'F5B8AA',
+			'error_text'                 => 'F04438',
 			'error_font_size'            => '14px',
 
 			'success_bg_color'           => 'DFF0D8',
@@ -725,13 +725,13 @@ public function get_defaults() {
 
 			'important_style'            => false,
 
-			'progress_bg_color'          => 'eaeaea',
+			'progress_bg_color'          => 'EAECF0',
+			'progress_color'             => '1D2939',
+			'progress_active_bg_color'   => '4199FD',
 			'progress_active_color'      => 'ffffff',
-			'progress_active_bg_color'   => '579AF6',
-			'progress_color'             => '3f4b5b',
-			'progress_border_color'      => 'E5E5E5',
-			'progress_border_size'       => '2px',
-			'progress_size'              => '24px',
+			'progress_border_color'      => 'EAECF0',
+			'progress_border_size'       => '1px',
+			'progress_size'              => '30px',
 			'custom_css'                 => '',
 		);
 

classes/views/frm-fields/front-end/checkbox-field.php

@@ -52,7 +52,15 @@
 		<div class="<?php echo esc_attr( apply_filters( 'frm_checkbox_class', 'frm_checkbox', $field, $field_val ) ); ?>" id="<?php echo esc_attr( FrmFieldsHelper::get_checkbox_id( $field, $opt_key ) ); ?>"><?php
 
 		if ( ! isset( $shortcode_atts ) || ! isset( $shortcode_atts['label'] ) || $shortcode_atts['label'] ) {
-			?><label for="<?php echo esc_attr( $html_id ); ?>-<?php echo esc_attr( $opt_key ); ?>"><?php
+			$label_attributes = array(
+				'for' => $html_id . '-' . $opt_key,
+			);
+			if ( $read_only ) {
+				$label_attributes['class'] = 'frm-label-disabled';
+			}
+			?>
+			<label <?php FrmAppHelper::array_to_html_params( $label_attributes, true ); ?>>
+			<?php
 		}
 
 		?><input type="checkbox" name="<?php echo esc_attr( $field_name ); ?>[<?php echo esc_attr( $other_opt ? $opt_key : '' ); ?>]" id="<?php echo esc_attr( $html_id ); ?>-<?php echo esc_attr( $opt_key ); ?>" value="<?php echo esc_attr( $field_val ); ?>"<?php

classes/views/frm-fields/front-end/radio-field.php

@@ -36,7 +36,15 @@
 		<div class="<?php echo esc_attr( apply_filters( 'frm_radio_class', 'frm_radio', $field, $field_val ) ); ?>" id="<?php echo esc_attr( FrmFieldsHelper::get_checkbox_id( $field, $opt_key, 'radio' ) ); ?>"><?php
 
 		if ( ! isset( $shortcode_atts ) || ! isset( $shortcode_atts['label'] ) || $shortcode_atts['label'] ) {
-			?><label for="<?php echo esc_attr( $html_id ); ?>-<?php echo esc_attr( $opt_key ); ?>"><?php
+			$label_attributes = array(
+				'for' => $html_id . '-' . $opt_key,
+			);
+			if ( $read_only ) {
+				$label_attributes['class'] = 'frm-label-disabled';
+			}
+			?>
+			<label <?php FrmAppHelper::array_to_html_params( $label_attributes, true ); ?>>
+			<?php
 		}
 		$checked = FrmAppHelper::check_selected( $field['value'], $field_val ) ? 'checked="checked" ' : ' ';
 

css/_single_theme.css.php

@@ -51,6 +51,8 @@
 .<?php echo esc_html( $style_class ); ?> .frm_pro_max_limit_desc{
 	<?php if ( ! empty( $description_margin ) ) { ?>
 		margin:<?php echo esc_html( $description_margin . $important ); ?>;
+	<?php } else { ?>
+		margin-top: 6px;
 	<?php } ?>
 	padding:0;
 	<?php if ( ! empty( $font ) ) { ?>
@@ -163,13 +165,15 @@
 .<?php echo esc_html( $style_class ); ?> input.frm_default,
 .<?php echo esc_html( $style_class ); ?> textarea.frm_default,
 .<?php echo esc_html( $style_class ); ?> select.frm_default,
-.<?php echo esc_html( $style_class ); ?> .placeholder,
+<?php if ( $use_chosen_js ) { ?>
 .<?php echo esc_html( $style_class ); ?> .chosen-container-multi .chosen-choices li.search-field .default,
-.<?php echo esc_html( $style_class ); ?> .chosen-container-single .chosen-default{
+.<?php echo esc_html( $style_class ); ?> .chosen-container-single .chosen-default,
+<?php } ?>
+.<?php echo esc_html( $style_class ); ?> .placeholder {
 	color: <?php echo esc_html( $text_color_disabled . $important ); ?>;
 }
 
-.<?php echo esc_html( $style_class ); ?> .form-field input:not([type=file]):focus,
+.<?php echo esc_html( $style_class ); ?> .form-field input:not([type=file]):not([type=range]):not([readonly]):focus,
 .<?php echo esc_html( $style_class ); ?> select:focus,
 .<?php echo esc_html( $style_class ); ?> textarea:focus,
 .<?php echo esc_html( $style_class ); ?> .frm_focus_field input[type=text],
@@ -180,17 +184,19 @@
 .<?php echo esc_html( $style_class ); ?> .frm_focus_field input[type=tel],
 .<?php echo esc_html( $style_class ); ?> .frm_focus_field input[type=search],
 .frm_form_fields_active_style,
-.<?php echo esc_html( $style_class ); ?> .frm_focus_field .frm-card-element.StripeElement,
+<?php if ( $use_chosen_js ) { ?>
 .<?php echo esc_html( $style_class ); ?> .chosen-container-single.chosen-container-active .chosen-single,
-.<?php echo esc_html( $style_class ); ?> .chosen-container-active .chosen-choices{
+.<?php echo esc_html( $style_class ); ?> .chosen-container-active .chosen-choices,
+<?php } ?>
+.<?php echo esc_html( $style_class ); ?> .frm_focus_field .frm-card-element.StripeElement {
 	background-color:<?php echo esc_html( $bg_color_active . $important ); ?>;
 	border-color:<?php echo esc_html( $border_color_active . $important ); ?>;
 	color: var(--text-color);
 	<?php if ( isset( $remove_box_shadow_active ) && $remove_box_shadow_active ) { ?>
 	box-shadow:none;
 	outline: none;
 	<?php } else { ?>
-	box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(<?php echo esc_html( FrmStylesHelper::hex2rgb( $border_color_active ) ); ?>, 0.6);
+	box-shadow:0px 0px 5px 0px rgba(<?php echo esc_html( FrmStylesHelper::hex2rgb( $border_color_active ) ); ?>, 0.6);
 	<?php } ?>
 }
 
@@ -285,6 +291,7 @@
 .<?php echo esc_html( $style_class ); ?> .frm_loading_form .frm_button_submit:focus{
 	color: transparent <?php echo esc_html( $important ); ?>;
 	background: <?php echo esc_html( $submit_bg_color . $important ); ?>;
+	border-color: <?php echo esc_html( $submit_bg_color . $important ); ?>;
 }
 
 .<?php echo esc_html( $style_class ); ?> .frm_loading_prev .frm_prev_page:before,
@@ -349,9 +356,11 @@
 .<?php echo esc_html( $style_class ); ?> .frm_blank_field .frm-g-recaptcha iframe,
 .<?php echo esc_html( $style_class ); ?> .frm_blank_field .g-recaptcha iframe,
 .<?php echo esc_html( $style_class ); ?> .frm_blank_field .frm-card-element.StripeElement,
+<?php if ( $use_chosen_js ) { ?>
 .<?php echo esc_html( $style_class ); ?> .frm_blank_field .chosen-container-multi .chosen-choices,
 .<?php echo esc_html( $style_class ); ?> .frm_blank_field .chosen-container-single .chosen-single,
-.<?php echo esc_html( $style_class ); ?> .frm_form_field :invalid{
+<?php } ?>
+.<?php echo esc_html( $style_class ); ?> .frm_form_field :invalid {
 	color:<?php echo esc_html( $text_color_error . $important ); ?>;
 	background-color:<?php echo esc_html( $bg_color_error . $important ); ?>;
 	border-color:<?php echo esc_html( $border_color_error . $important ); ?>;
@@ -368,7 +377,6 @@
 	font-weight:<?php echo esc_html( $weight . $important ); ?>;
 }
 
-.<?php echo esc_html( $style_class ); ?> .frm_blank_field label,
 .<?php echo esc_html( $style_class ); ?> .frm_error,
 .<?php echo esc_html( $style_class ); ?> .frm_limit_error{
 	color:<?php echo esc_html( $border_color_error . $important ); ?>;