'label' => esc_html__( 'Border Size (px)', 'wpforms-lite' ),
'type' => Controls_Manager::NUMBER,
'default' => CSSVars::ROOT_VARS['container-border-width'],
'containerBorderStyle!' => 'none',
'label' => esc_html__( 'Border Radius (px)', 'wpforms-lite' ),
'type' => Controls_Manager::NUMBER,
'label' => esc_html__( 'Shadow', 'wpforms-lite' ),
'type' => Controls_Manager::SELECT,
'none' => esc_html__( 'None', 'wpforms-lite' ),
'small' => esc_html__( 'Small', 'wpforms-lite' ),
'medium' => esc_html__( 'Medium', 'wpforms-lite' ),
'large' => esc_html__( 'Large', 'wpforms-lite' ),
'default' => CSSVars::CONTAINER_SHADOW_SIZE['none']['box-shadow'],
'label' => esc_html__( 'Border', 'wpforms-lite' ),
'type' => Controls_Manager::COLOR,
'default' => CSSVars::ROOT_VARS['container-border-color'],
'containerBorderStyle!' => 'none',
$this->end_controls_section();
* Register widget controls for the "Background Style" section.
private function add_background_style_controls(): void {
$this->start_controls_section(
'label' => esc_html__( 'Background Styles', 'wpforms-lite' ),
'tab' => Controls_Manager::TAB_STYLE,
'label' => esc_html__( 'Image', 'wpforms-lite' ),
'type' => Controls_Manager::SELECT,
'none' => esc_html__( 'None', 'wpforms-lite' ),
'library' => esc_html__( 'Media Library', 'wpforms-lite' ),
'stock' => esc_html__( 'Stock Photo', 'wpforms-lite' ),
'label' => esc_html__( 'Position', 'wpforms-lite' ),
'type' => Controls_Manager::SELECT,
'top left' => esc_html__( 'Top Left', 'wpforms-lite' ),
'top center' => esc_html__( 'Top Center', 'wpforms-lite' ),
'top right' => esc_html__( 'Top Right', 'wpforms-lite' ),
'center left' => esc_html__( 'Center Left', 'wpforms-lite' ),
'center center' => esc_html__( 'Center Center', 'wpforms-lite' ),
'center right' => esc_html__( 'Center Right', 'wpforms-lite' ),
'bottom left' => esc_html__( 'Bottom Left', 'wpforms-lite' ),
'bottom center' => esc_html__( 'Bottom Center', 'wpforms-lite' ),
'bottom right' => esc_html__( 'Bottom Right', 'wpforms-lite' ),
'default' => CSSVars::ROOT_VARS['background-position'],
'backgroundImage!' => 'none',
'label' => esc_html__( 'Repeat', 'wpforms-lite' ),
'type' => Controls_Manager::SELECT,
'no-repeat' => esc_html__( 'No Repeat', 'wpforms-lite' ),
'repeat' => esc_html__( 'Tile', 'wpforms-lite' ),
'repeat-x' => esc_html__( 'Repeat X', 'wpforms-lite' ),
'repeat-y' => esc_html__( 'Repeat Y', 'wpforms-lite' ),
'default' => CSSVars::ROOT_VARS['background-repeat'],
'backgroundImage!' => 'none',
'label' => esc_html__( 'Size', 'wpforms-lite' ),
'type' => Controls_Manager::SELECT,
'dimensions' => esc_html__( 'Dimensions', 'wpforms-lite' ),
'cover' => esc_html__( 'Cover', 'wpforms-lite' ),
'default' => CSSVars::ROOT_VARS['background-size'],
'backgroundImage!' => 'none',
'type' => Controls_Manager::HIDDEN,
'default' => CSSVars::ROOT_VARS['background-size'],
'label' => esc_html__( 'Width (px)', 'wpforms-lite' ),
'type' => Controls_Manager::NUMBER,
'backgroundImage!' => 'none',
'backgroundSize' => 'dimensions',
'label' => esc_html__( 'Height (px)', 'wpforms-lite' ),
'type' => Controls_Manager::NUMBER,
'backgroundImage!' => 'none',
'backgroundSize' => 'dimensions',
'label' => esc_html__( 'Choose Image', 'wpforms-lite' ),
'type' => Controls_Manager::MEDIA,
'url' => CSSVars::ROOT_VARS['background-url'],
'backgroundImage!' => 'none',
'label' => esc_html__( 'Background', 'wpforms-lite' ),
'type' => Controls_Manager::COLOR,
'default' => CSSVars::ROOT_VARS['background-color'],
$this->end_controls_section();
* Register widget controls for the "Other Styles" section.
private function add_other_style_controls(): void {
$this->start_controls_section(
'label' => esc_html__( 'Other Styles', 'wpforms-lite' ),
'tab' => Controls_Manager::TAB_STYLE,
'label' => esc_html__( 'Page Break', 'wpforms-lite' ),
'type' => Controls_Manager::COLOR,
'default' => CSSVars::ROOT_VARS['page-break-color'],
$this->end_controls_section();
* Register widget controls for the "Advanced" section.
* Adds controls to the "Button Styles" section of the Widget Style settings.
private function add_advanced_style_controls(): void {
$this->start_controls_section(
'label' => esc_html__( 'Advanced', 'wpforms-lite' ),
'tab' => Controls_Manager::TAB_STYLE,
'label' => esc_html__( 'Additional Classes', 'wpforms-lite' ),
'type' => Controls_Manager::TEXT,
'description' => esc_html__( 'Separate multiple classes with spaces.', 'wpforms-lite' ),
'prefix_class' => '', // Prevents re-rendering of the widget.
if ( $this->is_admin() ) {
'type' => Controls_Manager::DIVIDER,
'label' => esc_html__( 'Copy / Paste Style Settings', 'wpforms-lite' ),
'type' => Controls_Manager::TEXTAREA,
'description' => esc_html__( 'If you\'ve copied style settings from another form, you can paste them here to add the same styling to this form. Any current style settings will be overwritten.', 'wpforms-lite' ),
'type' => Controls_Manager::DIVIDER,
$this->end_controls_section();
* Render widget output on the frontend.
protected function render_frontend() {
if ( empty( $this->css_vars_obj ) ) {
$widget_id = $this->get_id();
$attr = $this->get_settings_for_display();
$css_vars = $this->css_vars_obj->get_customized_css_vars( $attr );
$custom_classes = ! empty( $attr['className'] ) ? trim( $attr['className'] ) : '';
if ( ! empty( $css_vars ) ) {
$style_id = 'wpforms-css-vars-elementor-widget-' . $widget_id;
* Filter the CSS selector for output CSS variables for styling the form in Elementor widget.
* @param string $selector The CSS selector for output CSS variables for styling the Elementor Widget.
* @param array $attr Attributes passed by Elementor Widget.
* @param array $css_vars CSS variables data.
$vars_selector = apply_filters(
'wpforms_integrations_elementor_widget_modern_output_css_vars_selector',
".elementor-widget-wpforms.elementor-element-{$widget_id}",
$this->css_vars_obj->output_selector_vars( $vars_selector, $css_vars, $style_id );
$this->add_render_attribute(
* Get settings for display.
* @param string|null $setting_key Optional. The key of the requested setting. Default is null.
* @return mixed The settings.
public function get_settings_for_display( $setting_key = null ) {
$settings = parent::get_settings_for_display( $setting_key );
if ( ! empty( $setting_key ) ) {
$settings = $this->remove_empty_settings( $settings );
$settings = $this->apply_dimension_settings( $settings );
$settings = $this->apply_complex_settings( $settings );
if ( isset( $settings['__globals__'] ) ) {
$settings = $this->check_global_styles( $settings );
* @param mixed $settings Widget settings.
* @return mixed Updated settings.
private function remove_empty_settings( $settings ) {
if ( ! is_array( $settings ) ) {
static function ( $value ) {
return ! empty( $value );
* Apply complex settings values.
* @param mixed $settings Widget settings.
* @return mixed Updated settings.
private function apply_complex_settings( $settings ) {
if ( isset( $settings['backgroundUrl'] ) && is_array( $settings['backgroundUrl'] ) ) {
$image_url = $settings['backgroundUrl']['url'] ?? '';
$settings['backgroundUrl'] = 'url( ' . $image_url . ' )';
if ( isset( $settings['backgroundSize'] ) && $settings['backgroundSize'] === 'dimensions' ) {
$bg_width = $settings['backgroundWidth'] ?? CSSVars::ROOT_VARS['background-width'];
$bg_height = $settings['backgroundHeight'] ?? CSSVars::ROOT_VARS['background-height'];
$settings['backgroundSize'] = "{$bg_width} {$bg_height}";
* Apply dimension settings with pixel units.
* @param mixed $settings Widget settings.
* @return mixed Updated settings with dimension values.
private function apply_dimension_settings( $settings ) {
$dimension_properties = [
'fieldBorderRadius' => 'field-border-radius',
'fieldBorderSize' => 'field-border-size',
'buttonBorderRadius' => 'button-border-radius',
'buttonBorderSize' => 'button-border-size',
'containerPadding' => 'container-padding',
'containerBorderWidth' => 'container-border-width',
'containerBorderRadius' => 'container-border-radius',
'backgroundWidth' => 'background-width',
'backgroundHeight' => 'background-height',
foreach ( $dimension_properties as $property => $root_var ) {
if ( ! isset( $settings[ $property ] ) ) {
$settings[ $property ] = CSSVars::ROOT_VARS[ $root_var ];
$value = (string) $settings[ $property ];
if ( $value !== '' && substr( $value, -2 ) !== 'px' ) {
$settings[ $property ] = $value . 'px';
* Check if global styles are used in colors controls and update its values with the real ones.
* @param mixed $settings Widget settings.
* @return mixed Updated settings.
private function check_global_styles( $settings ) {
$global_settings = $settings['__globals__'] ?? [];
$kit = Plugin::$instance->kits_manager->get_active_kit_for_frontend();
$system_colors = $kit->get_settings_for_display( 'system_colors' );
$custom_colors = $kit->get_settings_for_display( 'custom_colors' );
$global_colors = array_merge( $system_colors, $custom_colors );
foreach ( $global_settings as $key => $value ) {
$color_id = str_replace( 'globals/colors?id=', '', $value );
foreach ( $global_colors as $color ) {
if ( $color['_id'] === $color_id ) {
$settings[ $key ] = $color['color'];
* Check if the user is an admin.