register_general_controls();
$this->register_title_description_style_controls();
$this->register_form_container_style_controls();
$this->register_label_style_controls();
$this->register_input_style_controls();
$this->register_placeholder_style_controls();
$this->register_radio_checkbox_style_controls();
$this->register_submit_button_style_controls();
$this->register_success_message_style_controls();
$this->register_error_style_controls();
}
private function form_options() {
$options = [ '' => __( '— Select —', 'chargeforms' ) ];
foreach ( Form::all( 'published' ) as $form ) {
$options[ $form['id'] ] = $form['title'];
}
return $options;
}
protected function register_general_controls() {
$this->start_controls_section( 'content_section', [
'label' => __( 'Form', 'chargeforms' ),
'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
] );
$this->add_control( 'form_id', [
'label' => __( 'Select a Form', 'chargeforms' ),
'type' => \Elementor\Controls_Manager::SELECT2,
'options' => $this->form_options(),
'default' => '',
] );
$this->add_control( 'form_edit_link', [
'type' => \Elementor\Controls_Manager::RAW_HTML,
'raw' => '' . esc_html__( 'Edit Form', 'chargeforms' ) . '',
'content_classes' => 'chargeforms-elementor-edit-button-wrapper',
'condition' => [ 'form_id!' => '' ],
] );
$this->add_control( 'custom_title_description', [
'label' => __( 'Custom Title & Description', 'chargeforms' ),
'type' => \Elementor\Controls_Manager::SWITCHER,
'return_value' => 'yes',
] );
$this->add_control( 'form_title_custom', [
'label' => __( 'Title', 'chargeforms' ),
'type' => \Elementor\Controls_Manager::TEXT,
'label_block' => true,
'condition' => [ 'custom_title_description' => 'yes' ],
] );
$this->add_control( 'form_description_custom', [
'label' => __( 'Description', 'chargeforms' ),
'type' => \Elementor\Controls_Manager::TEXTAREA,
'condition' => [ 'custom_title_description' => 'yes' ],
] );
$this->end_controls_section();
}
protected function register_title_description_style_controls() {
$this->start_controls_section( 'section_title_description_style', [
'label' => __( 'Title & Description', 'chargeforms' ),
'tab' => \Elementor\Controls_Manager::TAB_STYLE,
'condition' => [ 'custom_title_description' => 'yes' ],
] );
$this->add_control( 'title_color', [
'label' => __( 'Title Color', 'chargeforms' ),
'type' => \Elementor\Controls_Manager::COLOR,
'selectors' => [ '{{WRAPPER}} .chargeforms-elementor-title' => 'color: {{VALUE}}' ],
] );
$this->add_group_control( \Elementor\Group_Control_Typography::get_type(), [
'name' => 'title_typography',
'label' => __( 'Title Typography', 'chargeforms' ),
'selector' => '{{WRAPPER}} .chargeforms-elementor-title',
] );
$this->add_control( 'description_color', [
'label' => __( 'Description Color', 'chargeforms' ),
'type' => \Elementor\Controls_Manager::COLOR,
'separator' => 'before',
'selectors' => [ '{{WRAPPER}} .chargeforms-elementor-description' => 'color: {{VALUE}}' ],
] );
$this->add_group_control( \Elementor\Group_Control_Typography::get_type(), [
'name' => 'description_typography',
'label' => __( 'Description Typography', 'chargeforms' ),
'selector' => '{{WRAPPER}} .chargeforms-elementor-description',
] );
$this->end_controls_section();
}
protected function register_form_container_style_controls() {
$this->start_controls_section( 'section_form_container_style', [
'label' => __( 'Form Container', 'chargeforms' ),
'tab' => \Elementor\Controls_Manager::TAB_STYLE,
] );
$this->add_group_control( \Elementor\Group_Control_Background::get_type(), [
'name' => 'container_background',
'types' => [ 'classic', 'gradient' ],
'selector' => '{{WRAPPER}} .chargeforms-form',
] );
$this->add_responsive_control( 'container_max_width', [
'label' => __( 'Max Width', 'chargeforms' ),
'type' => \Elementor\Controls_Manager::SLIDER,
'size_units' => [ 'px', '%' ],
'range' => [ 'px' => [ 'min' => 10, 'max' => 1500 ] ],
'selectors' => [ '{{WRAPPER}} .chargeforms-form' => 'max-width: {{SIZE}}{{UNIT}};' ],
] );
$this->add_responsive_control( 'container_padding', [
'label' => __( 'Padding', 'chargeforms' ),
'type' => \Elementor\Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', 'em', '%' ],
'selectors' => [ '{{WRAPPER}} .chargeforms-form' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
] );
$this->add_group_control( \Elementor\Group_Control_Border::get_type(), [
'name' => 'container_border',
'selector' => '{{WRAPPER}} .chargeforms-form',
] );
$this->add_control( 'container_border_radius', [
'label' => __( 'Border Radius', 'chargeforms' ),
'type' => \Elementor\Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%' ],
'selectors' => [ '{{WRAPPER}} .chargeforms-form' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
] );
$this->add_group_control( \Elementor\Group_Control_Box_Shadow::get_type(), [
'name' => 'container_box_shadow',
'selector' => '{{WRAPPER}} .chargeforms-form',
] );
$this->end_controls_section();
}
protected function register_label_style_controls() {
$this->start_controls_section( 'section_label_style', [
'label' => __( 'Labels', 'chargeforms' ),
'tab' => \Elementor\Controls_Manager::TAB_STYLE,
] );
$this->add_control( 'label_color', [
'label' => __( 'Text Color', 'chargeforms' ),
'type' => \Elementor\Controls_Manager::COLOR,
'selectors' => [ '{{WRAPPER}} .chargeforms-field label' => 'color: {{VALUE}}' ],
] );
$this->add_group_control( \Elementor\Group_Control_Typography::get_type(), [
'name' => 'label_typography',
'selector' => '{{WRAPPER}} .chargeforms-field label',
] );
$this->add_control( 'label_required_color', [
'label' => __( 'Required Asterisk Color', 'chargeforms' ),
'type' => \Elementor\Controls_Manager::COLOR,
'separator' => 'before',
'selectors' => [ '{{WRAPPER}} .chargeforms-field .is-required:after' => 'color: {{VALUE}} !important' ],
] );
$this->end_controls_section();
}
protected function register_input_style_controls() {
$this->start_controls_section( 'section_input_style', [
'label' => __( 'Inputs & Textarea', 'chargeforms' ),
'tab' => \Elementor\Controls_Manager::TAB_STYLE,
] );
$field_selector = '{{WRAPPER}} .chargeforms-field input[type="text"], {{WRAPPER}} .chargeforms-field input[type="email"], {{WRAPPER}} .chargeforms-field input[type="number"], {{WRAPPER}} .chargeforms-field input[type="tel"], {{WRAPPER}} .chargeforms-field input[type="date"], {{WRAPPER}} .chargeforms-field input[type="url"], {{WRAPPER}} .chargeforms-field select, {{WRAPPER}} .chargeforms-field textarea';
$this->start_controls_tabs( 'tabs_input_style' );
$this->start_controls_tab( 'tab_input_normal', [ 'label' => __( 'Normal', 'chargeforms' ) ] );
$this->add_control( 'input_bg_color', [
'label' => __( 'Background Color', 'chargeforms' ),
'type' => \Elementor\Controls_Manager::COLOR,
'selectors' => [ $field_selector => 'background-color: {{VALUE}}' ],
] );
$this->add_control( 'input_text_color', [
'label' => __( 'Text Color', 'chargeforms' ),
'type' => \Elementor\Controls_Manager::COLOR,
'selectors' => [ $field_selector => 'color: {{VALUE}}' ],
] );
$this->add_group_control( \Elementor\Group_Control_Border::get_type(), [
'name' => 'input_border',
'selector' => $field_selector,
] );
$this->add_control( 'input_border_radius', [
'label' => __( 'Border Radius', 'chargeforms' ),
'type' => \Elementor\Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%' ],
'selectors' => [ $field_selector => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
] );
$this->end_controls_tab();
$this->start_controls_tab( 'tab_input_focus', [ 'label' => __( 'Focus', 'chargeforms' ) ] );
$this->add_control( 'input_bg_color_focus', [
'label' => __( 'Background Color', 'chargeforms' ),
'type' => \Elementor\Controls_Manager::COLOR,
'selectors' => [ '{{WRAPPER}} .chargeforms-field input:focus, {{WRAPPER}} .chargeforms-field select:focus, {{WRAPPER}} .chargeforms-field textarea:focus' => 'background-color: {{VALUE}}' ],
] );
$this->add_group_control( \Elementor\Group_Control_Border::get_type(), [
'name' => 'input_border_focus',
'selector' => $field_selector . ':focus',
] );
$this->end_controls_tab();
$this->end_controls_tabs();
$this->add_responsive_control( 'input_padding', [
'label' => __( 'Padding', 'chargeforms' ),
'type' => \Elementor\Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', 'em', '%' ],
'separator' => 'before',
'selectors' => [ $field_selector => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
] );
$this->add_responsive_control( 'input_height', [
'label' => __( 'Height', 'chargeforms' ),
'type' => \Elementor\Controls_Manager::SLIDER,
'range' => [ 'px' => [ 'min' => 0, 'max' => 100 ] ],
'selectors' => [ '{{WRAPPER}} .chargeforms-field input[type="text"], {{WRAPPER}} .chargeforms-field input[type="email"], {{WRAPPER}} .chargeforms-field input[type="number"], {{WRAPPER}} .chargeforms-field select' => 'height: {{SIZE}}{{UNIT}}' ],
] );
$this->add_responsive_control( 'field_spacing', [
'label' => __( 'Field Spacing', 'chargeforms' ),
'type' => \Elementor\Controls_Manager::SLIDER,
'range' => [ 'px' => [ 'min' => 0, 'max' => 80 ] ],
'selectors' => [ '{{WRAPPER}} .chargeforms-field' => 'margin-bottom: {{SIZE}}{{UNIT}}' ],
] );
$this->add_group_control( \Elementor\Group_Control_Typography::get_type(), [
'name' => 'input_typography',
'selector' => $field_selector,
'separator' => 'before',
] );
$this->end_controls_section();
}
protected function register_placeholder_style_controls() {
$this->start_controls_section( 'section_placeholder_style', [
'label' => __( 'Placeholder', 'chargeforms' ),
'tab' => \Elementor\Controls_Manager::TAB_STYLE,
] );
$this->add_control( 'placeholder_color', [
'label' => __( 'Text Color', 'chargeforms' ),
'type' => \Elementor\Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .chargeforms-field input::placeholder' => 'color: {{VALUE}}; opacity: 1;',
'{{WRAPPER}} .chargeforms-field textarea::placeholder' => 'color: {{VALUE}}; opacity: 1;',
],
] );
$this->end_controls_section();
}
protected function register_radio_checkbox_style_controls() {
$this->start_controls_section( 'section_radio_checkbox_style', [
'label' => __( 'Radio & Checkbox', 'chargeforms' ),
'tab' => \Elementor\Controls_Manager::TAB_STYLE,
] );
$this->add_control( 'radio_checkbox_accent_color', [
'label' => __( 'Accent Color', 'chargeforms' ),
'type' => \Elementor\Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .chargeforms-radio-option input, {{WRAPPER}} .chargeforms-checkbox-option input, {{WRAPPER}} .chargeforms-consent-option input' => 'accent-color: {{VALUE}}',
],
] );
$this->add_responsive_control( 'radio_checkbox_size', [
'label' => __( 'Size', 'chargeforms' ),
'type' => \Elementor\Controls_Manager::SLIDER,
'range' => [ 'px' => [ 'min' => 10, 'max' => 40 ] ],
'selectors' => [
'{{WRAPPER}} .chargeforms-radio-option input, {{WRAPPER}} .chargeforms-checkbox-option input, {{WRAPPER}} .chargeforms-consent-option input' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}',
],
] );
$this->add_group_control( \Elementor\Group_Control_Typography::get_type(), [
'name' => 'radio_checkbox_typography',
'label' => __( 'Option Label Typography', 'chargeforms' ),
'selector' => '{{WRAPPER}} .chargeforms-radio-option, {{WRAPPER}} .chargeforms-checkbox-option, {{WRAPPER}} .chargeforms-consent-option',
'separator' => 'before',
] );
$this->end_controls_section();
}
protected function register_submit_button_style_controls() {
$this->start_controls_section( 'section_submit_button_style', [
'label' => __( 'Submit Button', 'chargeforms' ),
'tab' => \Elementor\Controls_Manager::TAB_STYLE,
] );
$this->add_responsive_control( 'submit_alignment', [
'label' => __( 'Alignment', 'chargeforms' ),
'type' => \Elementor\Controls_Manager::CHOOSE,
'options' => [
'flex-start' => [ 'title' => __( 'Left', 'chargeforms' ), 'icon' => 'eicon-h-align-left' ],
'center' => [ 'title' => __( 'Center', 'chargeforms' ), 'icon' => 'eicon-h-align-center' ],
'flex-end' => [ 'title' => __( 'Right', 'chargeforms' ), 'icon' => 'eicon-h-align-right' ],
'stretch' => [ 'title' => __( 'Justified', 'chargeforms' ), 'icon' => 'eicon-h-align-stretch' ],
],
'selectors' => [ '{{WRAPPER}} .chargeforms-step-actions' => 'display: flex; justify-content: {{VALUE}};' ],
] );
$this->start_controls_tabs( 'tabs_submit_style' );
$this->start_controls_tab( 'tab_submit_normal', [ 'label' => __( 'Normal', 'chargeforms' ) ] );
$this->add_control( 'submit_bg_color', [
'label' => __( 'Background Color', 'chargeforms' ),
'type' => \Elementor\Controls_Manager::COLOR,
'selectors' => [ '{{WRAPPER}} .chargeforms-submit' => 'background: {{VALUE}}' ],
] );
$this->add_control( 'submit_text_color', [
'label' => __( 'Text Color', 'chargeforms' ),
'type' => \Elementor\Controls_Manager::COLOR,
'selectors' => [ '{{WRAPPER}} .chargeforms-submit' => 'color: {{VALUE}}' ],
] );
$this->end_controls_tab();
$this->start_controls_tab( 'tab_submit_hover', [ 'label' => __( 'Hover', 'chargeforms' ) ] );
$this->add_control( 'submit_bg_color_hover', [
'label' => __( 'Background Color', 'chargeforms' ),
'type' => \Elementor\Controls_Manager::COLOR,
'selectors' => [ '{{WRAPPER}} .chargeforms-submit:hover' => 'background: {{VALUE}}' ],
] );
$this->add_control( 'submit_text_color_hover', [
'label' => __( 'Text Color', 'chargeforms' ),
'type' => \Elementor\Controls_Manager::COLOR,
'selectors' => [ '{{WRAPPER}} .chargeforms-submit:hover' => 'color: {{VALUE}}' ],
] );
$this->end_controls_tab();
$this->end_controls_tabs();
$this->add_group_control( \Elementor\Group_Control_Border::get_type(), [
'name' => 'submit_border',
'selector' => '{{WRAPPER}} .chargeforms-submit',
'separator' => 'before',
] );
$this->add_control( 'submit_border_radius', [
'label' => __( 'Border Radius', 'chargeforms' ),
'type' => \Elementor\Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%' ],
'selectors' => [ '{{WRAPPER}} .chargeforms-submit' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
] );
$this->add_responsive_control( 'submit_padding', [
'label' => __( 'Padding', 'chargeforms' ),
'type' => \Elementor\Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', 'em', '%' ],
'selectors' => [ '{{WRAPPER}} .chargeforms-submit' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
] );
$this->add_group_control( \Elementor\Group_Control_Typography::get_type(), [
'name' => 'submit_typography',
'selector' => '{{WRAPPER}} .chargeforms-submit',
] );
$this->add_group_control( \Elementor\Group_Control_Box_Shadow::get_type(), [
'name' => 'submit_box_shadow',
'selector' => '{{WRAPPER}} .chargeforms-submit',
] );
$this->end_controls_section();
}
protected function register_success_message_style_controls() {
$this->start_controls_section( 'section_success_style', [
'label' => __( 'Success Message', 'chargeforms' ),
'tab' => \Elementor\Controls_Manager::TAB_STYLE,
] );
$this->add_control( 'success_bg_color', [
'label' => __( 'Background Color', 'chargeforms' ),
'type' => \Elementor\Controls_Manager::COLOR,
'selectors' => [ '{{WRAPPER}} .chargeforms-success' => 'background: {{VALUE}}' ],
] );
$this->add_control( 'success_text_color', [
'label' => __( 'Text Color', 'chargeforms' ),
'type' => \Elementor\Controls_Manager::COLOR,
'selectors' => [ '{{WRAPPER}} .chargeforms-success' => 'color: {{VALUE}}' ],
] );
$this->add_group_control( \Elementor\Group_Control_Typography::get_type(), [
'name' => 'success_typography',
'selector' => '{{WRAPPER}} .chargeforms-success',
] );
$this->add_control( 'success_border_radius', [
'label' => __( 'Border Radius', 'chargeforms' ),
'type' => \Elementor\Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%' ],
'selectors' => [ '{{WRAPPER}} .chargeforms-success' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
] );
$this->add_responsive_control( 'success_padding', [
'label' => __( 'Padding', 'chargeforms' ),
'type' => \Elementor\Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', 'em', '%' ],
'selectors' => [ '{{WRAPPER}} .chargeforms-success' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
] );
$this->end_controls_section();
}
protected function register_error_style_controls() {
$this->start_controls_section( 'section_error_style', [
'label' => __( 'Error Messages', 'chargeforms' ),
'tab' => \Elementor\Controls_Manager::TAB_STYLE,
] );
$this->add_control( 'error_text_color', [
'label' => __( 'Text Color', 'chargeforms' ),
'type' => \Elementor\Controls_Manager::COLOR,
'selectors' => [ '{{WRAPPER}} .chargeforms-field-error' => 'color: {{VALUE}}' ],
] );
$this->add_group_control( \Elementor\Group_Control_Typography::get_type(), [
'name' => 'error_typography',
'selector' => '{{WRAPPER}} .chargeforms-field-error',
] );
$this->end_controls_section();
}
protected function render() {
$settings = $this->get_settings_for_display();
$form_id = (int) ( $settings['form_id'] ?? 0 );
if ( ! $form_id ) {
if ( \Elementor\Plugin::$instance->editor->is_edit_mode() ) {
echo '' . esc_html__( 'Select a form in the widget settings.', 'chargeforms' ) . '
';
}
return;
}
if ( 'yes' === ( $settings['custom_title_description'] ?? '' ) ) {
if ( ! empty( $settings['form_title_custom'] ) ) {
echo '';
}
if ( ! empty( $settings['form_description_custom'] ) ) {
echo '' . esc_html( $settings['form_description_custom'] ) . '
';
}
}
echo do_shortcode( '[chargeforms id="' . $form_id . '"]' );
}
}