// phpcs:disable Generic.Commenting.DocComment.MissingShort
/** @noinspection PhpUndefinedNamespaceInspection */
/** @noinspection PhpUndefinedClassInspection */
/** @noinspection PhpUndefinedMethodInspection */
// phpcs:enable Generic.Commenting.DocComment.MissingShort
namespace WPForms\Integrations\Elementor;
use Elementor\Controls_Manager;
use WPForms\Frontend\CSSVars;
* WPForms modern widget for Elementor page builder.
class WidgetModern extends Widget {
* Size options for widget settings.
* Border type options for widget settings.
* Instance of CSSVars class.
* @param array $data Widget data.
* @param array $args Widget arguments.
* @throws Exception If arguments are missing when initializing a full widget.
* @noinspection PhpMissingParamTypeInspection
public function __construct( $data = [], $args = null ) {
parent::__construct( $data, $args );
private function load(): void {
'small' => esc_html__( 'Small', 'wpforms-lite' ),
'medium' => esc_html__( 'Medium', 'wpforms-lite' ),
'large' => esc_html__( 'Large', 'wpforms-lite' ),
$this->border_options = [
'none' => esc_html__( 'None', 'wpforms-lite' ),
'solid' => esc_html__( 'Solid', 'wpforms-lite' ),
'dashed' => esc_html__( 'Dashed', 'wpforms-lite' ),
'dotted' => esc_html__( 'Dotted', 'wpforms-lite' ),
$this->css_vars_obj = wpforms()->obj( 'css_vars' );
* Register widget controls.
* Adds different input fields to allow the user to change and customize the widget settings.
protected function register_controls() {
$this->content_controls();
* Register widget controls for the Style section.
* Adds different input fields into the "Style" section to allow the user to change and customize the widget style
private function style_controls(): void {
$this->add_theme_style_controls();
if ( $this->is_admin() ) {
$this->add_field_style_controls();
$this->add_label_style_controls();
$this->add_button_style_controls();
$this->add_container_style_controls();
$this->add_background_style_controls();
$this->add_other_style_controls();
$this->add_advanced_style_controls();
* Register widget controls for the Theme Style section.
private function add_theme_style_controls(): void {
$this->start_controls_section(
'label' => esc_html__( 'Themes', 'wpforms-lite' ),
'tab' => Controls_Manager::TAB_STYLE,
'type' => Controls_Manager::RAW_HTML,
esc_html__( 'Form Styles are disabled because Lead Form Mode is turned on.', 'wpforms-lite' ),
esc_html__( 'To change the styling for this form, open it in the form builder and edit the options in the Lead Forms settings.', 'wpforms-lite' )
'classes' => 'wpforms-elementor-lead-forms-notice',
'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
'type' => 'wpforms_themes',
if ( $this->is_admin() ) {
'type' => Controls_Manager::HIDDEN,
'type' => Controls_Manager::HIDDEN,
'type' => Controls_Manager::TEXT,
'label' => esc_html__( 'Theme Name', 'wpforms-lite' ),
'type' => Controls_Manager::BUTTON,
'event' => 'WPFormsDeleteThemeButtonClick',
'button_type' => 'danger',
'text' => esc_html__( 'DELETE THEME', 'wpforms-lite' ),
$this->end_controls_section();
* Register widget controls for the Field Style section.
* Adds controls to the "Field Styles" section of the Widget Style settings.
protected function add_field_style_controls(): void {
$this->start_controls_section(
'label' => esc_html__( 'Field Styles', 'wpforms-lite' ),
'tab' => Controls_Manager::TAB_STYLE,
'label' => esc_html__( 'Size', 'wpforms-lite' ),
'type' => Controls_Manager::SELECT,
'options' => $this->size_options,
'label' => esc_html__( 'Border', 'wpforms-lite' ),
'type' => Controls_Manager::SELECT,
'options' => $this->border_options,
'label' => esc_html__( 'Border Size (px)', 'wpforms-lite' ),
'type' => Controls_Manager::NUMBER,
'fieldBorderStyle!' => 'none',
'label' => esc_html__( 'Border Radius (px)', 'wpforms-lite' ),
'type' => Controls_Manager::NUMBER,
'label' => esc_html__( 'Background', 'wpforms-lite' ),
'type' => Controls_Manager::COLOR,
'default' => CSSVars::ROOT_VARS['field-background-color'],
'label' => esc_html__( 'Border', 'wpforms-lite' ),
'type' => Controls_Manager::COLOR,
'default' => CSSVars::ROOT_VARS['field-border-color'],
'label' => esc_html__( 'Text', 'wpforms-lite' ),
'type' => Controls_Manager::COLOR,
'default' => CSSVars::ROOT_VARS['field-text-color'],
'type' => Controls_Manager::HIDDEN,
'default' => CSSVars::ROOT_VARS['field-menu-color'],
$this->end_controls_section();
* Register widget controls for the Label Style section.
* Adds controls to the "Label Styles" section of the Widget Style settings.
private function add_label_style_controls(): void {
$this->start_controls_section(
'label' => esc_html__( 'Label Styles', 'wpforms-lite' ),
'tab' => Controls_Manager::TAB_STYLE,
'label' => esc_html__( 'Size', 'wpforms-lite' ),
'type' => Controls_Manager::SELECT,
'options' => $this->size_options,
'label' => esc_html__( 'Label', 'wpforms-lite' ),
'type' => Controls_Manager::COLOR,
'default' => CSSVars::ROOT_VARS['label-color'],
'label' => esc_html__( 'Sublabel & Hint', 'wpforms-lite' ),
'type' => Controls_Manager::COLOR,
'default' => CSSVars::ROOT_VARS['label-sublabel-color'],
'label' => esc_html__( 'Error', 'wpforms-lite' ),
'type' => Controls_Manager::COLOR,
'default' => CSSVars::ROOT_VARS['label-error-color'],
$this->end_controls_section();
* Register widget controls for the "Button Style" section.
* Adds controls to the "Button Styles" section of the Widget Style settings.
private function add_button_style_controls(): void {
$this->start_controls_section(
'label' => esc_html__( 'Button Styles', 'wpforms-lite' ),
'tab' => Controls_Manager::TAB_STYLE,
'label' => esc_html__( 'Size', 'wpforms-lite' ),
'type' => Controls_Manager::SELECT,
'options' => $this->size_options,
'label' => esc_html__( 'Border', 'wpforms-lite' ),
'type' => Controls_Manager::SELECT,
'options' => $this->border_options,
'default' => CSSVars::ROOT_VARS['button-border-style'],
'label' => esc_html__( 'Border Size (px)', 'wpforms-lite' ),
'type' => Controls_Manager::NUMBER,
'default' => CSSVars::ROOT_VARS['button-border-size'],
'buttonBorderStyle!' => 'none',
'label' => esc_html__( 'Border Radius (px)', 'wpforms-lite' ),
'type' => Controls_Manager::NUMBER,
'label' => esc_html__( 'Background', 'wpforms-lite' ),
'type' => Controls_Manager::COLOR,
'default' => CSSVars::ROOT_VARS['button-background-color'],
'label' => esc_html__( 'Border', 'wpforms-lite' ),
'type' => Controls_Manager::COLOR,
'default' => CSSVars::ROOT_VARS['button-border-color'],
'buttonBorderStyle!' => 'none',
'label' => esc_html__( 'Text', 'wpforms-lite' ),
'type' => Controls_Manager::COLOR,
'default' => CSSVars::ROOT_VARS['button-text-color'],
$this->end_controls_section();
* Register widget controls for the "Container Style" section.
private function add_container_style_controls(): void {
$this->start_controls_section(
'label' => esc_html__( 'Container Styles', 'wpforms-lite' ),
'tab' => Controls_Manager::TAB_STYLE,
'label' => esc_html__( 'Padding (px)', 'wpforms-lite' ),
'type' => Controls_Manager::NUMBER,
'default' => CSSVars::ROOT_VARS['container-padding'],
'label' => esc_html__( 'Border', 'wpforms-lite' ),
'type' => Controls_Manager::SELECT,
'options' => $this->border_options,
'default' => CSSVars::ROOT_VARS['container-border-style'],