Formularios de Elementor en el Dashboard de WordPress

Este snippet es una herramienta esencial para los administradores de sitios web que utilizan Elementor y desean mejorar la gestión de los formularios de su sitio. Proporciona una visión clara y organizada de los formularios, incluyendo el total de formularios enviados, la cantidad de formularios sin leer y un resumen detallado de cada formulario. Este código es perfecto para aquellos que buscan mantener un seguimiento eficiente de la interacción de los usuarios con sus formularios.

formularios de elementor en un widget de wordpress

Código

function elementor_forms_dashboard_widget() {
    global $wpdb;

    // Obtener la cantidad total de formularios
    $total_forms = $wpdb->get_var("SELECT COUNT(*) FROM {$wpdb->prefix}e_submissions");

    // Texto para total de formularios
    $total_forms_text = $total_forms == 1 ? '1 formulario' : "$total_forms formularios";

    // Obtener la cantidad de formularios sin leer
    $unread_forms = $wpdb->get_var("SELECT COUNT(*) FROM {$wpdb->prefix}e_submissions WHERE is_read = 0");

    // Clase adicional si hay formularios sin leer
    $unread_class = $unread_forms > 0 ? 'elementor-form-unread isunread' : 'elementor-form-unread';

    // Texto y estilo para formularios sin leer
    $unread_forms_text = $unread_forms == 1 ? '1 formulario' : "$unread_forms formularios";

    // Mostrar los datos
    echo "<p class='elementor-form-total'><span class='elementor-form-icon'></span> Formularios total: <a href='/wp-admin/admin.php?page=e-form-submissions#/?status=all&page=1&per_page=50&order=desc&order_by=created_at'><strong>$total_forms_text</strong></a></p>";
    echo "<p class='$unread_class'><span class='elementor-form-icon'></span> <span style='color:#000'>Formularios sin leer:</span> <a href='/wp-admin/admin.php?page=e-form-submissions#/?status=unread&page=1&per_page=50&order=desc&order_by=created_at'><strong>$unread_forms_text</strong></a></p>";

    // Obtener nombres de formularios y contar envíos
    $form_counts = $wpdb->get_results("SELECT form_name, COUNT(*) as total, SUM(is_read = 0) as unread FROM {$wpdb->prefix}e_submissions GROUP BY form_name");

    echo "<div style='margin-top: 20px;' class='listforms'><strong>Resumen de Formularios:</strong><ul>";

    foreach ($form_counts as $form) {
        // Estilo para número de formularios sin leer
        $unread_style = $form->unread > 0 ? 'style="color: red;"' : '';

        echo "<li>{$form->form_name} (Total: {$form->total} - Sin leer: <span $unread_style>{$form->unread}</span>)</li>";
    }

    echo "</ul></div>";

    // Botón que lleva a la página de envíos de formularios de Elementor
    echo '<a href="/wp-admin/admin.php?page=e-form-submissions#/?status=all&page=1&per_page=50&order=desc&order_by=created_at" class="button button-primary">Ver Formularios</a>';
}

function add_elementor_forms_dashboard_widget() {
    wp_add_dashboard_widget('elementor_forms_dashboard_widget', 'FORMULARIOS', 'elementor_forms_dashboard_widget');
}

function elementor_forms_dashboard_styles() {
    echo '
    <style>
        p.elementor-form-total,
        p.elementor-form-unread{
            background: #efefef;
            padding: 5px 10px 10px 10px;
            border-radius: 5px;
        }
        p.elementor-form-unread.isunread strong{color:red}
        p.elementor-form-unread.isunread {
            background: #ff000014;
        }
        .listforms strong {
            font-size: 14px;
        }
        .listforms ul li {
            border-bottom: 1px solid #eee;
            margin:  0;
            padding: 5px 0;
            font-size: 12px;
        }
        .elementor-form-icon::before {
            font-family: Dashicons;
            content: "\f466";
            margin-right: 10px;
            float: left;
            clear: both;
            padding-top: 4px;
        }
        span.elementor-form-icon {
            margin: 0;
            padding: 0;
            font-size: 24px;
            margin-bottom: 0px;
        }
        .elementor-form-unread .elementor-form-icon::before {
            color: red; /* Color rojo para formularios no leídos */
        }
    </style>';
}

add_action('wp_dashboard_setup', 'add_elementor_forms_dashboard_widget');
add_action('admin_head', 'elementor_forms_dashboard_styles');

 

Instalación del Snippet

Para instalar y comenzar a usar este snippet en tu sitio WordPress con Elementor, sigue estos pasos:

  1. Accede al panel de administración de WordPress.
  2. Dirígete a Apariencia > Editor de Temas.
  3. Localiza y abre el archivo functions.php de tu tema activo.
  4. Copia y pega el código del snippet al final del archivo functions.php.
  5. Guarda los cambios realizados.

Características y Funcionalidad

Visualización de Formularios

El snippet proporciona un widget en el dashboard de WordPress que muestra:

  • El número total de formularios enviados.
  • La cantidad de formularios que aún no se han leído.
  • Un resumen por nombre de formulario, incluyendo el total de envíos y los no leídos.

Diseño Intuitivo

El diseño incluye:

  • Iconos y colores que facilitan la identificación rápida del estado de los formularios (leídos/no leídos).
  • Enlaces directos para acceder a los detalles de los formularios.

Casos de Uso del Snippet

Mejora de la Gestión de Formularios

Los administradores pueden ver rápidamente cuántos formularios necesitan su atención, lo que permite una gestión más eficiente y una respuesta más rápida a los usuarios.

Análisis y Seguimiento

Este snippet es ideal para llevar un seguimiento de la interacción de los usuarios con los formularios, lo que puede ayudar en el análisis de datos y en la toma de decisiones basada en el comportamiento del usuario.

Personalización y Estilo

El código incluye estilos CSS que puedes modificar para adaptar la apariencia del widget a las necesidades de tu sitio. Los estilos determinan colores, fuentes y el diseño general del widget en el dashboard.

Consideraciones Finales

Compatibilidad y Rendimiento

Este snippet está diseñado específicamente para sitios que usan Elementor. Es importante verificar la compatibilidad con la versión actual de WordPress y Elementor.

Seguridad y Privacidad

Al manipular datos de formularios, siempre ten en cuenta las consideraciones de privacidad y seguridad, asegurándote de que tu sitio cumpla con las normativas correspondientes.

 

 

¡Más Snippets, Más Opciones!

Al compartir, motivamos a más desarrolladores a contribuir. Ayúdanos a hacer de este directorio un punto de referencia en snippets.

Facebook
Twitter
LinkedIn
Telegram
WhatsApp

¿Cómo implementar este snippet en la web?

Tienes 2 opciones, una de ellas es mediante plugin y la otra pegando el código en tu web.

1. Añadir snippet con plugin

code-snippets

Code Snippets

Por Code Snippets Pro

  1. Descarga el plugin o búscalo en el repositorio de plugins de Wordpress e instálalo en tu web.
  2. En el menú lateral del Escritorio verás un nuevo enlace (Fragmetos de código). Ves a Fragmentos de código > Añadir nuevo.
  3. Se abrirá una página con un título, bloque de código, descripción y etiquetas, rellena el título con el que quieras guardarlo, ejemplo: Añadir Google Analytics.
  4. En la parte código verás que está activo PHP, ahí pega el código del snippet
  5. La descripción y las etiquetas solo son para tu información y para que luego encuentres más fácil los snippets.
  6. Publicar y activar el snippet.

2. Añadir snippet en el functions.php

Diseño web con WordPress

Accede al archivo functions.php de tu tema o tema hijo, pega el snippet y guarda el archivo.

Lo encontrarás en Apariencia > Editor de archivos de tema, pinchas sobre el enlace  functions.php y pegas el código al final del archivo.

Relacionados: