assembly_scan_fonts( $col_fields, $system_fonts, $set ); } } } } } /** Submit-like field (hasSubmitButton predicate) — route.ts lines 9628-9640 */ protected function assembly_is_submit_like( $field ) { $type = WPVFB_JS::get( $field, 'type' ); if ( 'submit' === $type || 'submit_button' === $type ) { return true; } return 'email' === $type && ( 'inside' === WPVFB_JS::get( $field, 'buttonPlacement' ) || true === WPVFB_JS::get( $field, 'inlineSubmitArrow' ) ); } /** scanFieldsForStyles — route.ts lines 10753-10815 */ protected function assembly_scan_styles( $fields_list, &$custom_styles, &$final_html_content ) { $J = 'WPVFB_JS'; if ( ! $J::is_array( $fields_list ) ) { return; } foreach ( $fields_list as $field ) { $f = function ( $p ) use ( $field ) { return WPVFB_JS::get( $field, $p ); }; $id_css = $this->css( $f( 'id' ) ); if ( $J::truthy( $f( 'labelFontFamily' ) ) ) { $custom_styles .= ' .wpvfb-embed label[for="' . $id_css . '"] { font-family: \'' . $this->css( $f( 'labelFontFamily' ) ) . '\', sans-serif !important; } '; } if ( $J::truthy( $f( 'descriptionFontFamily' ) ) && $J::truthy( $f( 'description' ) ) ) { $escaped = $this->t( $f( 'description' ) ); $regex = '/>\s*' . preg_quote( $escaped, '/' ) . '\s*<\/p>/'; $replacement = ' id="wpvfb-desc-' . $this->a( $f( 'id' ) ) . '">' . $escaped . '
'; $final_html_content = preg_replace_callback( $regex, function () use ( $replacement ) { return $replacement; }, $final_html_content ); $custom_styles .= ' .wpvfb-embed #wpvfb-desc-' . $id_css . ' { font-family: \'' . $this->css( $f( 'descriptionFontFamily' ) ) . '\', sans-serif !important; } '; } $type = $f( 'type' ); if ( $J::truthy( $f( 'fontFamily' ) ) && ( 'static-content' === $type || 'section' === $type ) ) { $clean_font = $this->css( preg_replace( '/^[\'"]|[\'"]$/', '', $J::str( $f( 'fontFamily' ) ) ) ); if ( false === strpos( $clean_font, ',' ) ) { $clean_font .= ", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"; } $custom_styles .= ' .wpvfb-embed #wpvfb-static-' . $id_css . ', .wpvfb-embed #wpvfb-static-' . $id_css . ' *, .wpvfb-embed [data-field-id="' . $id_css . '"] h1, .wpvfb-embed [data-field-id="' . $id_css . '"] h2, .wpvfb-embed [data-field-id="' . $id_css . '"] h3, .wpvfb-embed [data-field-id="' . $id_css . '"] h4, .wpvfb-embed [data-field-id="' . $id_css . '"] p { font-family: ' . $clean_font . ' !important; } '; } if ( $J::truthy( $f( 'fontFamily' ) ) && 'email' === $type ) { $clean_font = $this->css( preg_replace( '/^[\'"]|[\'"]$/', '', $J::str( $f( 'fontFamily' ) ) ) ); if ( false === strpos( $clean_font, ',' ) ) { $clean_font .= ", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"; } $custom_styles .= ' .wpvfb-embed input#' . $id_css . ' { font-family: ' . $clean_font . ' !important; } '; } $columns = $f( 'columns' ); if ( $J::truthy( $columns ) && ! $J::is_array( $columns ) && is_array( $columns ) ) { foreach ( $columns as $col_fields ) { if ( $J::is_array( $col_fields ) ) { $this->assembly_scan_styles( $col_fields, $custom_styles, $final_html_content ); } } } } } /** * Full form HTML — the `html` value GET returns (route.ts lines 9334-10857). * @param array $opts nonce => value for the wpvfb_nonce input. */ public function render_form( $opts = array() ) { $J = 'WPVFB_JS'; $gs = $this->gs; $g = function ( $p ) use ( $gs ) { return WPVFB_JS::get( $gs, $p ); }; $s = function ( $p ) { return WPVFB_JS::get( $this->form, 'settings.' . $p ); }; $fields = $J::get( $this->form, 'fields' ); $render_field = array( $this, 'render_field' ); $nonce = isset( $opts['nonce'] ) ? $opts['nonce'] : ''; $form_fields_html = $this->render_form_body( $fields, $gs, $render_field ); $submit_text_color = $J::or_( $s( 'submitTextColor' ), '#FFFFFF' ); $submit_background_color = $J::or_( $s( 'submitBackgroundColor' ), '#007bff' ); $is_inherit_theme_style = true === $s( 'inheritThemeStyle' ) || true === $s( 'typography.inheritThemeStyle' ); $font_family = $J::or_( $s( 'fontFamily' ), $g( 'fontFamily' ), 'Arial' ); $system_fonts_list = array( 'Arial', 'Helvetica', 'Georgia', 'Times New Roman', 'Verdana', 'Trebuchet MS', 'Courier New', 'Lucida Sans', 'Tahoma', 'sans-serif', 'serif', 'monospace', 'inherit', ); $custom_google_fonts = array(); if ( $J::truthy( $font_family ) && ! in_array( $font_family, $system_fonts_list, true ) ) { $custom_google_fonts[] = $font_family; } if ( $J::is_array( $fields ) ) { $this->assembly_scan_fonts( $fields, $system_fonts_list, $custom_google_fonts ); } $submit_font_size = $J::str( $J::or_( $g( 'fontSize' ), 14 ) ) . 'px'; $wrapper_max_width_value = $J::or_( $g( 'wrapperMaxWidth' ), 600 ); $wrapper_max_width = ( is_string( $wrapper_max_width_value ) && ( false !== strpos( $wrapper_max_width_value, '%' ) || false !== strpos( $wrapper_max_width_value, 'px' ) ) ) ? $wrapper_max_width_value : $J::str( $wrapper_max_width_value ) . 'px'; // Only affects CSS for the (never rendered) branding element; mirrors the TS so the stylesheet stays identical. $show_branding = false !== $s( 'general.showBranding' ); // store theme fetch is not ported: the TS fallback values. $fetched_theme_button_radius = 14; $fetched_theme_button_font_size = 'inherit'; $fetched_theme_button_min_height = 0; $fetched_theme_button_padding_block = ''; $fetched_theme_button_padding_inline = ''; $has_submit_button = false; foreach ( $J::arr( $fields ) as $field ) { if ( $this->assembly_is_submit_like( $field ) ) { $has_submit_button = true; break; } $columns = $J::get( $field, 'columns' ); if ( 'grid' === $J::get( $field, 'type' ) && $J::truthy( $columns ) && is_array( $columns ) ) { foreach ( $columns as $column_fields ) { foreach ( $J::arr( $column_fields ) as $nested_field ) { if ( $this->assembly_is_submit_like( $nested_field ) ) { $has_submit_button = true; break 3; } } } } } $form_padding = $J::or_( $g( 'formPadding' ), array( 'top' => 24, 'right' => 8, 'bottom' => 8, 'left' => 8 ) ); $primary_color_css = $this->css( $J::or_( $g( 'primaryColor' ), '#2563EB' ) ); { $form_max_width = $wrapper_max_width; $wrapper_background_color = $g( 'backgroundColor' ); if ( $J::truthy( $g( 'formBoxShadow' ) ) ) { $wrapper_box_shadow = $g( 'formBoxShadow' ); } elseif ( $J::truthy( $g( 'previewShadow' ) ) ) { $wrapper_box_shadow = $J::str( $J::or_( $g( 'previewShadow.offsetX' ), 0 ) ) . 'px ' . $J::str( $J::or_( $g( 'previewShadow.offsetY' ), 0 ) ) . 'px ' . $J::str( $J::or_( $g( 'previewShadow.blur' ), 0 ) ) . 'px ' . $J::str( $J::or_( $g( 'previewShadow.color' ), 'transparent' ) ); } else { $wrapper_box_shadow = 'none'; } $bw = $g( 'formBorderWidth' ); $wrapper_border = ( $J::truthy( $bw ) && $J::to_number( $bw ) > 0 ) ? 'border: ' . $J::str( $bw ) . 'px solid ' . $J::str( $J::or_( $g( 'formBorderColor' ), '#E5E7EB' ) ) . ';' : ''; $wrapper_border_radius = $J::str( $J::or_( $g( 'formBorderRadius' ), 0 ) ) . 'px'; } // Add-ons (subclass) may change the card for their own layouts. $layout = $this->form_layout( array( 'max_width' => $form_max_width, 'background_color' => $wrapper_background_color, 'box_shadow' => $wrapper_box_shadow, 'border' => $wrapper_border, 'border_radius' => $wrapper_border_radius, 'padding' => $this->a( $J::get( $form_padding, 'top' ) ) . 'px ' . $this->a( $J::get( $form_padding, 'right' ) ) . 'px ' . $this->a( $J::get( $form_padding, 'bottom' ) ) . 'px ' . $this->a( $J::get( $form_padding, 'left' ) ) . 'px', 'default_submit' => ! $has_submit_button, 'after_fields_html' => '', ), $wrapper_max_width ); $form_max_width = $layout['max_width']; $wrapper_background_color = $layout['background_color']; $wrapper_box_shadow = $layout['box_shadow']; $wrapper_border = $layout['border']; $wrapper_border_radius = $layout['border_radius']; $max_height = $g( 'wrapperMaxHeight' ); $has_max_height = $J::truthy( $max_height ) && 'auto' !== $max_height && 'none' !== $max_height; $wrapper_max_height = $has_max_height ? $max_height : 'none'; $wrapper_overflow = $has_max_height ? 'hidden' : 'visible'; $form_css = ' :root, .wpvfb-embed { --color-primary-button-background: ' . $primary_color_css . '; --primary-brand-color: ' . $primary_color_css . '; } .section.page-width-content:has(.wpvfb-embed), .section:has(.wpvfb-embed) { --page-content-width: var(--normal-page-width, 1200px) !important; --page-width: calc(var(--normal-page-width, 1200px) + (var(--page-margin, 20px) * 2)) !important; --full-page-grid-central-column-width: min(100% - (var(--page-margin, 20px) * 2), var(--normal-page-width, 1200px)) !important; } .section-content-wrapper:has(.wpvfb-embed) { max-width: 100% !important; width: 100% !important; } .text-block:has(.wpvfb-embed), .rte:has(.wpvfb-embed), .text-block--content:has(.wpvfb-embed), rte-formatter:has(.wpvfb-embed), .main-page__content:has(.wpvfb-embed) { max-width: 100% !important; --max-width: 100% !important; max-inline-size: 100% !important; width: 100% !important; } .text-block > .wpvfb-embed, .rte > .wpvfb-embed, rte-formatter > .wpvfb-embed, .wpvfb-embed { width: 100% !important; max-width: 100% !important; max-inline-size: 100% !important; margin: 0 auto; } .wpvfb-embed, .wpvfb-embed * { -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; text-rendering: optimizeLegibility !important; letter-spacing: normal; } .wpvfb-embed .grid, .wpvfb-embed.grid { display: grid !important; } .wpvfb-embed input[type="checkbox"]::after, .wpvfb-embed input[type="checkbox"]::before, .wpvfb-embed input[type="radio"]::after, .wpvfb-embed input[type="radio"]::before { content: none !important; display: none !important; background: none !important; background-color: transparent !important; -webkit-mask-image: none !important; mask-image: none !important; } .wpvfb-embed .switch-toggle { position: relative !important; display: inline-flex !important; align-items: center !important; cursor: pointer !important; user-select: none !important; } .wpvfb-embed input.switch-input { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; pointer-events: none !important; } .wpvfb-embed .switch-track { position: relative !important; display: inline-block !important; width: 44px !important; height: 24px !important; min-width: 44px !important; min-height: 24px !important; border-radius: 9999px !important; transition: background-color 0.2s ease-in-out !important; cursor: pointer !important; flex-shrink: 0 !important; vertical-align: middle !important; box-sizing: border-box !important; } .wpvfb-embed .switch-thumb { position: absolute !important; top: 2px !important; left: 0 !important; width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; background: #ffffff !important; background-color: #ffffff !important; border-radius: 9999px !important; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.1) !important; transition: transform 0.2s ease-in-out !important; pointer-events: none !important; display: block !important; z-index: 2 !important; box-sizing: border-box !important; } .wpvfb-embed input[type="checkbox"]:not(.switch-input) { -webkit-appearance: none !important; appearance: none !important; accent-color: transparent !important; width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; border: 1px solid var(--checkbox-unselected-color, #71717a) !important; border-radius: 3px !important; background-color: #ffffff !important; background: #ffffff !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; position: relative !important; margin: 0 !important; vertical-align: middle !important; flex-shrink: 0 !important; outline: none !important; box-shadow: none !important; } .wpvfb-embed input[type="checkbox"]:not(.switch-input):hover { border-color: #94a3b8 !important; } .wpvfb-embed input[type="checkbox"]:not(.switch-input):checked { accent-color: transparent !important; background-color: var(--checkbox-selected-color, var(--color-primary-button-background, #06B6D4)) !important; background-image: var(--checkbox-svg-icon, url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 16 16\'%3E%3Cpath fill=\'none\' stroke=\'%23ffffff\' stroke-width=\'2.2\' stroke-linecap=\'round\' stroke-linejoin=\'round\' d=\'M3.2 8.2L6.2 11.2L12.8 4.6\'/%3E%3C/svg%3E")) !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 15px 15px !important; border-color: var(--checkbox-selected-color, var(--color-primary-button-background, #06B6D4)) !important; } .wpvfb-embed input[type="radio"] { -webkit-appearance: none !important; appearance: none !important; width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; border: 1px solid var(--checkbox-unselected-color, #71717a) !important; border-radius: 50% !important; background-color: #ffffff !important; background: #ffffff !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; position: relative !important; margin: 0 !important; vertical-align: middle !important; flex-shrink: 0 !important; outline: none !important; box-shadow: none !important; } .wpvfb-embed input[type="radio"]:hover { border-color: #94a3b8 !important; } .wpvfb-embed input[type="radio"]:checked { background-color: #ffffff !important; background-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 16 16\' fill=\'%23000000\'%3E%3Ccircle cx=\'8\' cy=\'8\' r=\'4\'/%3E%3C/svg%3E") !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 14px 14px !important; border-color: var(--checkbox-selected-color, var(--color-primary-button-background, #06B6D4)) !important; } ' . ( $is_inherit_theme_style ? (' .wpvfb-embed .wpvfb-form input::placeholder, .wpvfb-embed .wpvfb-form textarea::placeholder { font-family: var(--font-body-family, var(--font-body--family, inherit)) !important; font-size: inherit !important; opacity: 0.7; } .wpvfb-embed .wpvfb-form, .wpvfb-embed .wpvfb-form label, .wpvfb-embed .wpvfb-form input, .wpvfb-embed .wpvfb-form select, .wpvfb-embed .wpvfb-form textarea, .wpvfb-embed .wpvfb-form p, .wpvfb-embed .wpvfb-form span { font-family: var(--font-body-family, var(--font-body--family, inherit)) !important; color: var(--color-foreground, var(--color-text, inherit)); } .wpvfb-embed .wpvfb-form h1, .wpvfb-embed h1 { font-family: var(--font-heading-family, var(--font-heading--family, inherit)) !important; font-weight: var(--font-heading-weight, var(--font-heading--weight, bold)); letter-spacing: var(--letter-spacing-h1, var(--heading-letter-spacing, normal)); text-transform: var(--text-transform-h1, inherit); } .wpvfb-embed .wpvfb-form h2, .wpvfb-embed h2 { font-family: var(--font-heading-family, var(--font-heading--family, inherit)) !important; font-weight: var(--font-heading-weight, var(--font-heading--weight, bold)); letter-spacing: var(--letter-spacing-h2, var(--heading-letter-spacing, normal)); text-transform: var(--text-transform-h2, inherit); } .wpvfb-embed .wpvfb-form h3, .wpvfb-embed h3 { font-family: var(--font-heading-family, var(--font-heading--family, inherit)) !important; font-weight: var(--font-heading-weight, var(--font-heading--weight, bold)); letter-spacing: var(--letter-spacing-h3, var(--heading-letter-spacing, normal)); text-transform: var(--text-transform-h3, inherit); } .wpvfb-embed .wpvfb-form h4, .wpvfb-embed h4 { font-family: var(--font-heading-family, var(--font-heading--family, inherit)) !important; font-weight: var(--font-heading-weight, var(--font-heading--weight, bold)); letter-spacing: var(--letter-spacing-h4, var(--heading-letter-spacing, normal)); text-transform: var(--text-transform-h4, inherit); } .wpvfb-embed .wpvfb-form h5, .wpvfb-embed h5 { font-family: var(--font-heading-family, var(--font-subheading--family, inherit)) !important; font-weight: var(--font-heading-weight, var(--font-heading--weight, bold)); letter-spacing: var(--letter-spacing-h5, var(--heading-letter-spacing, normal)); text-transform: var(--text-transform-h5, inherit); } .wpvfb-embed .wpvfb-form h6, .wpvfb-embed h6 { font-family: var(--font-body-family, var(--font-body--family, inherit)) !important; line-height: calc(1 + 0.8 / var(--font-body-scale, 1)) !important; letter-spacing: var(--letter-spacing-h6, normal); text-transform: var(--text-transform-h6, inherit); } .wpvfb-embed .preview-area, .wpvfb-embed .wpvfb-form-wrapper, .wpvfb-embed .wpvfb-form { background-color: transparent !important; box-shadow: none !important; border: none !important; } .wpvfb-embed .wpvfb-form input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), .wpvfb-embed .wpvfb-form textarea, .wpvfb-embed .wpvfb-form select { font-family: var(--font-body--family, var(--font-body-family, inherit)) !important; background-color: var(--color-input-background, #ffffff) !important; color: var(--color-input-text, #333333) !important; border-color: var(--color-input-border, #dfdfdf) !important; border-width: var(--border-width-inputs, 1px) !important; border-style: solid !important; border-radius: var(--style-border-radius-inputs, var(--inputs-radius-outset, var(--inputs-radius, var(--input-radius, 4px)))) !important; } .wpvfb-embed .wpvfb-form button[type="submit"], .wpvfb-embed .wpvfb-form .wpvfb-submit-btn { font-family: var(--button-font-family-primary, var(--font-body-family, var(--font-body--family, inherit))) !important; font-size: var(--font-button-size, var(--font-paragraph--size, ' . $this->css( $fetched_theme_button_font_size ) . ')) !important; font-weight: var(--font-button-weight, var(--font-body-weight, var(--font-paragraph--weight, normal))) !important; letter-spacing: var(--button-letter-spacing, normal) !important; text-transform: var(--button-text-case-primary, var(--button-text-case, inherit)) !important; background: var(--gradient-button, var(--color-primary-button-background, var(--color-button, #000000))) !important; background-color: var(--color-primary-button-background, var(--gradient-button, var(--color-button, #000000))) !important; color: var(--color-primary-button-text, var(--color-button-text, #ffffff)) !important; border-color: var(--color-primary-button-border, transparent) !important; border-width: var(--border-width-primary-button, 0px) !important; border-style: solid !important; border-radius: var(--style-border-radius-buttons-primary, var(--style-border-radius-inputs, var(--buttons-radius-outset, var(--buttons-radius-custom, var(--buttons-radius, var(--button-radius, var(--buttons-corner-radius, var(--border-radius, var(--radius, ' . $J::str( $fetched_theme_button_radius ) . 'px))))))))) !important; padding: var(--button-padding-block, ' . $this->css( $J::or_( $fetched_theme_button_padding_block, '12px' ) ) . ') var(--button-padding-inline, var(--buttons-padding, ' . $this->css( $J::or_( $fetched_theme_button_padding_inline, '24px' ) ) . ')) !important; ' . ( $fetched_theme_button_min_height > 0 ? ('min-height: calc(var(--buttons-height, ' . $J::str( $fetched_theme_button_min_height ) . ') * 1px) !important;') : '' ) . ' } @supports (border-radius: calc(var(--buttons-radius, 6) * 1px)) { .wpvfb-embed .wpvfb-form button[type="submit"], .wpvfb-embed .wpvfb-form .wpvfb-submit-btn { border-radius: var(--style-border-radius-buttons-primary, var(--style-border-radius-inputs, var(--buttons-radius-outset, calc(var(--buttons-radius, var(--buttons-corner-radius, ' . $J::str( $fetched_theme_button_radius ) . ')) * 1px)))) !important; } } @supports (color: rgb(var(--color-button, 0, 0, 0))) { .wpvfb-embed .wpvfb-form button[type="submit"], .wpvfb-embed .wpvfb-form .wpvfb-submit-btn { background-color: var(--color-primary-button-background, rgb(var(--color-button, 0 0 0))) !important; color: var(--color-primary-button-text, rgb(var(--color-button-text, 255 255 255))) !important; } } ') : (' .wpvfb-embed, .wpvfb-embed *:not(i):not([class*="fa-"]):not([class*="fa"]):not([class*="fas"]):not([class*="far"]):not([class*="fab"]):not([class*="fal"]):not([class*="fad"]):not(.fa):not(.fas):not(.far):not(.fab), .wpvfb-form, .wpvfb-form *:not(i):not([class*="fa-"]):not([class*="fa"]):not([class*="fas"]):not([class*="far"]):not([class*="fab"]):not([class*="fal"]):not([class*="fad"]):not(.fa):not(.fas):not(.far):not(.fab) { font-family: \'' . $this->css( $font_family ) . '\', -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, Helvetica, Arial, sans-serif !important; } .wpvfb-embed .fa, .wpvfb-embed .fas, .wpvfb-embed .far, .wpvfb-embed .fal, .wpvfb-embed .fad, .wpvfb-embed .fab, .wpvfb-embed [class*="fa-"], .wpvfb-embed i.fa, .wpvfb-embed i.fas, .wpvfb-embed i.far, .wpvfb-form .fa, .wpvfb-form .fas, .wpvfb-form .far, .wpvfb-form .fal, .wpvfb-form .fad, .wpvfb-form .fab, .wpvfb-form [class*="fa-"], .wpvfb-form i.fa, .wpvfb-form i.fas, .wpvfb-form i.far { font-family: "Font Awesome 5 Free", "FontAwesome" !important; } ') ) . ' .wpvfb-embed, .wpvfb-embed *, .wpvfb-embed *::before, .wpvfb-embed *::after, .wpvfb-form, .wpvfb-form *, .wpvfb-form *::before, .wpvfb-form *::after { box-sizing: border-box !important; } .wpvfb-embed input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), .wpvfb-embed textarea, .wpvfb-embed select, .wpvfb-form input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), .wpvfb-form textarea, .wpvfb-form select { border-style: solid !important; font-family: inherit !important; } .wpvfb-embed .text-red-500:not([style*="color"]), .wpvfb-form .text-red-500:not([style*="color"]) { color: #ef4444 !important; } .wpvfb-embed .required-asterisk, .wpvfb-form .required-asterisk { margin-left: 2px; display: inline-block; } .wpvfb-embed .relative, .wpvfb-form .relative { position: relative !important; } .wpvfb-embed .w-full, .wpvfb-form .w-full { width: 100% !important; } .wpvfb-embed .wpvfb-form, .wpvfb-form { max-width: ' . $this->css( $form_max_width ) . '; margin: auto; width: 100%; } @media screen and (max-width: 640px) { .wpvfb-embed .wpvfb-form, .wpvfb-form { max-width: 100% !important; width: 100% !important; } } ' . ( ! $show_branding ? (' .wpvfb-embed .wpvfb-branding { display: none !important; } ') : (' .wpvfb-embed .wpvfb-branding a { color: #64748B !important; font-weight: 500 !important; text-decoration: none !important; transition: color 0.15s ease, text-decoration 0.15s ease; } .wpvfb-embed .wpvfb-branding a:hover { color: #334155 !important; text-decoration: underline !important; } ') ) . ' .wpvfb-embed div[style*="grid"] .wpvfb-error-message, .wpvfb-embed div[style*="flex"] .wpvfb-error-message { position: static !important; margin-top: 4px; font-size: 14px; color: #dc3545; width: 100%; } .wpvfb-embed .w-full .flex { gap: unset; } .wpvfb-embed .w-full .relative h1, .wpvfb-embed .w-full .relative h2, .wpvfb-embed .w-full .relative h3, .wpvfb-embed .w-full .relative h4, .wpvfb-embed .w-full .relative h5, .wpvfb-embed .w-full .relative h6 { margin-block: auto; } '; $this->add_inline_css( $form_css . $this->extra_form_css() ); $html_content = '