Cómo mostrar las entradas de formularios de WordPress en tu sitio (2 maneras)

¿Estás recopilando envíos de formularios en tu sitio de WordPress pero nunca se los muestras a tus visitantes? Esa es una oportunidad perdida.

Mostrar entradas como reseñas, listas de miembros o calendarios de eventos en tu sitio les da un propósito. Pueden ayudar a los visitantes a encontrar información, ver comentarios reales o descubrir personas y eventos en tu comunidad.

En WPBeginner, hemos ayudado a muchos propietarios de sitios a hacer que los datos ocultos de sus formularios sean útiles. Después de probar muchos enfoques, hemos encontrado 2 que funcionan muy bien.

En esta guía, te mostraremos cómo mostrar las entradas de formularios de WordPress en tu sitio de 2 maneras sencillas, ya sea que tengas un directorio, una vitrina o un sitio comunitario. 🙌

¿Por qué mostrar las entradas de formularios de WordPress en el front-end?

Mostrar entradas de formularios significa tomar los datos que tus visitantes envían y mostrarlos en las páginas públicas de tu sitio web de WordPress. Uno de los mayores beneficios es generar prueba social.

Por defecto, los envíos de formularios solo son visibles para los administradores.

Pero mostrar testimonios o reseñas de productos que utilizan comentarios reales de clientes es una excelente manera de generar confianza. De hecho, un estudio encontró que mostrar reseñas puede aumentar las tasas de conversión hasta en un 270%.

También puedes usar las entradas de formularios para crear otros recursos útiles para tus visitantes, como directorios de negocios, listas de miembros o eventos enviados por usuarios en un calendario.

En las siguientes secciones, te mostraremos cómo mostrar las entradas del formulario en el front-end de tu sitio web de WordPress usando Formidable Forms y WPForms.

Aquí tienes un resumen rápido de todo lo que cubriremos en esta guía:

• Displaying WordPress Form Entries by Using Formidable Forms (Easy Way)
  • Paso 1: Configurar Formidable Forms
  • Paso 2: Crear un formulario
  • Paso 3: Publicar el formulario
  • Paso 4: Activar Vistas Visuales
  • Paso 5: Mostrar entradas del formulario en el front-end
• Displaying WordPress Form Entries by Using WPForms (Advanced)
  • Paso 1: Instalar WPForms
  • Step 2: Create a Form and Display Its Entries
• Consejo extra: Creación de formularios que cumplen con el GDPR
• Preguntas frecuentes sobre cómo mostrar entradas de formularios en WordPress
• Tutorial en video: Mostrar entradas de formularios de WordPress
• Recursos adicionales para usar formularios de WordPress

Empecemos.

Método 1: Mostrar entradas de formularios de WordPress usando Formidable Forms

La forma más fácil de mostrar entradas de formularios en WordPress es usando Formidable Forms. Es un popular plugin de formularios de contacto de WordPress y ofrece un constructor de formularios todo en uno con muchas funciones de personalización.

Puedes crear todo tipo de formularios, especialmente formularios avanzados como calendarios de eventos, directorios y calculadoras.

Hemos probado Formidable Forms a fondo para conocer todas sus características. Puedes ver por qué lo recomendamos en nuestra reseña completa de Formidable Forms.

Paso 1: Configurar Formidable Forms

Para empezar, instalemos y activemos el plugin Formidable Forms en tu sitio. Para este tutorial, usaremos la versión Formidable Forms Pro porque incluye el complemento 'Visual Views'.

Si necesitas ayuda, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Tras la activación, puedes ir a Formidable » Formularios y hacer clic en el botón '+ Añadir nuevo' en la parte superior.

Paso 2: Crear un formulario

Después de eso, aparecerá una ventana emergente pidiéndote que selecciones un tipo de formulario, como un formulario de contacto, formulario de registro de usuarios, encuesta u otro.

Continúa y selecciona tu tipo de formulario preferido. Para este tutorial, crearemos un formulario de contacto para recopilar testimonios de los usuarios.

A continuación, deberás introducir un nombre y una descripción para el formulario.

Cuando hayas terminado, simplemente haz clic en el botón 'Crear'.

Ahora, puedes usar el constructor de formularios para personalizar tu formulario.

Formidable ofrece un constructor de arrastrar y soltar que es muy fácil de usar. Simplemente selecciona cualquier campo de formulario que te gustaría añadir a tu formulario de las opciones de la izquierda y colócalo en la plantilla del formulario.

Paso 3: Publicar el formulario

Después de personalizar, puedes incrustar el formulario en cualquier lugar de tu sitio web.

El plugin ofrece múltiples opciones para agregar tu formulario. La forma más fácil es hacer clic en el botón 'Incrustar' en el constructor de formularios en la parte superior, y luego seleccionar una página existente o crear una nueva página para agregar tu formulario.

Alternativamente, puedes usar un bloque de 'Formidable Forms' o un bloque de shortcode en el editor de contenido de WordPress para incrustar tus formularios.

Para este tutorial, elegiremos la opción 'Crear nueva página'.

Una vez que estés dentro del editor de contenido, verás que has creado una página dedicada para tu formulario de Formidable Forms.

Antes de publicarla, es posible que desees previsualizarla haciendo clic en el botón 'Vista previa'.

Cuando estés satisfecho con su apariencia, procede a publicar tu página.

Paso 4: Activar Vistas Visuales

Después de que tu formulario esté en línea y comiences a recibir entradas, querrás instalar y activar el complemento 'Visual Views' en Formidable Forms.

Para hacer eso, simplemente ve a Formidable » Add-Ons desde tu área de administración de WordPress. Luego, puedes desplazarte hacia abajo hasta el complemento 'Visual Views' y hacer clic en el botón 'Instalar'.

Una vez que el complemento esté activo, puedes ir a la página Formidable » Views.

Luego, haz clic en el botón '+ Agregar nuevo' en la parte superior.

Aparecerá una ventana emergente. Aquí, deberás seleccionar un tipo de vista, como cuadrícula, tabla, calendario o vista clásica.

Para este tutorial, elegiremos la vista 'Cuadrícula' para mostrar las entradas del formulario.

El siguiente paso es seleccionar una fuente de datos para tu vista.

Haz clic en el menú desplegable ‘Usar entradas del formulario’ para seleccionar tu formulario. También puedes ingresar un nombre de vista.

Después de seleccionar tu fuente de datos, simplemente haz clic en el botón ‘Crear una vista’.

Esto iniciará el constructor de vistas en Formidable Forms.

Para empezar, haz clic en el botón ‘Constructor de diseño’.

A continuación, deberás seleccionar un diseño para mostrar las entradas de tu formulario.

Simplemente elige un diseño de las opciones dadas en la parte superior. Puedes agregar múltiples diseños para mostrar las entradas del formulario.

Después de seleccionar un diseño, haz clic en el botón ‘Guardar diseño’.

Luego puedes agregar contenido al constructor de vistas haciendo clic en el botón ‘+’. Hay opciones para personalizar el diseño de las entradas del formulario y agregar contenido antes y después de las entradas del formulario.

El plugin también ofrece opciones para cambiar la tipografía, el color de fondo, el borde y más en el panel ‘Configuración de estilo de cuadrícula’ a tu izquierda.

También verás un shortcode debajo del campo ‘Nombre de la vista’, que necesitarás al mostrar las entradas del formulario en tu sitio.

Hay opciones más avanzadas en el panel ‘Configuración de estilo de cuadrícula’. En la configuración avanzada, puedes limitar el número de entradas, el tamaño de página y más.

Cuando hayas personalizado la vista, no olvides hacer clic en el botón ‘Actualizar’ en la parte superior.

Paso 5: Mostrar entradas del formulario en el front-end

A continuación, deberá mostrar las entradas de su formulario en su sitio web de WordPress. Para ello, copie el código abreviado que se encuentra debajo de 'Nombre de la vista'.

El shortcode se verá así:

[display-frm-data id=2410]

Una vez que haya copiado el código abreviado al portapapeles, puede ir a cualquier entrada o página donde desee mostrar las entradas del formulario.

En el editor de contenido, simplemente agregue un bloque de 'Código abreviado'.

Ahora, agregue el código abreviado que copió anteriormente en el bloque de código abreviado.

Después de eso, es posible que desee previsualizar la página antes de publicarla.

Ahora puedes visitar tu sitio web para ver las entradas del formulario en acción.

Así es como se ven en nuestro sitio web de demostración:

Método 2: Mostrar entradas de formularios de WordPress usando WPForms

También puedes mostrar las entradas del formulario usando WPForms, uno de los mejores plugins de formularios de contacto de WordPress. Este método es más avanzado porque requiere agregar un fragmento de código PHP a tu sitio.

Para hacer esto, necesitarás WPForms Pro, que almacena todas las entradas del formulario en tu base de datos de WordPress. La versión gratuita WPForms Lite solo envía las entradas por correo electrónico y no las guarda, por lo que no funcionará para este método.

En WPBeginner, usamos WPForms para crear varios formularios, como formularios de contacto y encuestas anuales de usuarios. Obtén más información al respecto en nuestra reseña detallada de WPForms.

Paso 1: Instalar WPForms

Primero, registrémonos para obtener una cuenta de WPForms.

Simplemente puedes hacer clic en el botón 'Obtener WPForms Ahora' en su sitio web para comprar un plan y crear tu cuenta.

Hecho eso, procede a copiar tu clave de licencia.

Ahora, configuremos el plugin.

Para hacer esto, necesitarás instalar la versión gratuita del plugin WPForms del repositorio de WordPress, que proporciona el marco básico. Después de eso, ingresarás tu clave de licencia para desbloquear todas las funciones Pro.

Para empezar, puedes ir a Plugins » Agregar Nuevo Plugin desde tu área de administración de WordPress.

Luego, usa la función de búsqueda para encontrar rápidamente el plugin WPForms.

En el resultado de búsqueda relevante, haz clic en ‘Instalar ahora’ y ‘Activar’. Para más detalles, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Paso 2: Crea un formulario y muestra sus entradas

Al activarlo, puedes empezar a crear un formulario en línea usando WPForms. Puedes consultar nuestra guía paso a paso sobre cómo crear un formulario de contacto en WordPress.

Una vez que empieces a recibir entradas del formulario, necesitarás ingresar el siguiente código en el archivo functions.php de tu tema.

Pero ten en cuenta que hacerlo puede dañar tu sitio web si cometes un pequeño error.

Es por eso que siempre recomendamos usar WPCode, el mejor plugin de fragmentos de código para WordPress.

Algunas de nuestras marcas asociadas usan este plugin porque es la forma más segura y fácil de agregar fragmentos de código personalizados a WordPress sin arriesgarse a romper el sitio. Para una mirada más profunda a la plataforma, consulta nuestra reseña de WPCode.

No te preocupes, no necesitas entender lo que hace el código a continuación.

Solo necesitas copiarlo. Luego, para ingresar el código, consulta nuestra guía sobre cómo agregar fácilmente código personalizado en WordPress para más información.

/**
 * Custom shortcode to display WPForms form entries in table view.
 *
 * Basic usage: [wpforms_entries_table id="FORMID"].
 * 
 * Possible shortcode attributes:
 * id (required)  Form ID of which to show entries.
 * user           User ID, or "current" to default to current logged in user.
 * fields         Comma separated list of form field IDs.
 * number         Number of entries to show, defaults to 30.
 * 
 * @link https://wpforms.com/developers/how-to-display-form-entries/
 *
 * Realtime counts could be delayed due to any caching setup on the site
 *
 * @param array $atts Shortcode attributes.
 * 
 * @return string
 */
 
function wpf_entries_table( $atts ) {
 
    // Pull ID shortcode attributes.
    $atts = shortcode_atts(
        [
            'id'     => '',
            'user'   => '',
            'fields' => '',
            'number' => '',
                        'type' => 'all' // all, unread, read, or starred.
        ],
        $atts
    );
 
    // Check for an ID attribute (required) and that WPForms is in fact
    // installed and activated.
    if ( empty( $atts['id'] ) || ! function_exists( 'wpforms' ) ) {
        return;
    }
 
    // Get the form, from the ID provided in the shortcode.
    $form = wpforms()->form->get( absint( $atts['id'] ) );
 
    // If the form doesn't exists, abort.
    if ( empty( $form ) ) {
        return;
    }
 
    // Pull and format the form data out of the form object.
    $form_data = ! empty( $form->post_content ) ? wpforms_decode( $form->post_content ) : '';
 
    // Check to see if we are showing all allowed fields, or only specific ones.
    $form_field_ids = isset( $atts['fields'] ) && $atts['fields'] !== '' ? explode( ',', str_replace( ' ', '', $atts['fields'] ) ) : [];
 
    // Setup the form fields.
    if ( empty( $form_field_ids ) ) {
        $form_fields = $form_data['fields'];
    } else {
        $form_fields = [];
        foreach ( $form_field_ids as $field_id ) {
            if ( isset( $form_data['fields'][ $field_id ] ) ) {
                $form_fields[ $field_id ] = $form_data['fields'][ $field_id ];
            }
        }
    }
 
    if ( empty( $form_fields ) ) {
        return;
    }
 
    // Here we define what the types of form fields we do NOT want to include,
    // instead they should be ignored entirely.
    $form_fields_disallow = apply_filters( 'wpforms_frontend_entries_table_disallow', [ 'divider', 'html', 'pagebreak', 'captcha' ] );
 
    // Loop through all form fields and remove any field types not allowed.
    foreach ( $form_fields as $field_id => $form_field ) {
        if ( in_array( $form_field['type'], $form_fields_disallow, true ) ) {
            unset( $form_fields[ $field_id ] );
        }
    }
 
    $entries_args = [
        'form_id' => absint( $atts['id'] ),
    ];
 
    // Narrow entries by user if user_id shortcode attribute was used.
    if ( ! empty( $atts['user'] ) ) {
        if ( $atts['user'] === 'current' && is_user_logged_in() ) {
            $entries_args['user_id'] = get_current_user_id();
        } else {
            $entries_args['user_id'] = absint( $atts['user'] );
        }
    }
 
    // Number of entries to show. If empty, defaults to 30.
    if ( ! empty( $atts['number'] ) ) {
        $entries_args['number'] = absint( $atts['number'] );
    }
 
// Filter the type of entries all, unread, read, or starred
    if ( $atts['type'] === 'unread' ) {
        $entries_args['viewed'] = '0';
    } elseif( $atts['type'] === 'read' ) {
        $entries_args['viewed'] = '1';
    } elseif ( $atts['type'] === 'starred' ) {
        $entries_args['starred'] = '1';
    }
 
    // Get all entries for the form, according to arguments defined.
    // There are many options available to query entries. To see more, check out
    // the get_entries() function inside class-entry.php (https://a.cl.ly/bLuGnkGx).
    $entries = wpforms()->entry->get_entries( $entries_args );
 
    if ( empty( $entries ) ) {
        return '<p>No entries found.</p>';
    }
 
    ob_start();
 
    echo '<table class="wpforms-frontend-entries">';
 
        echo '<thead><tr>';
 
            // Loop through the form data so we can output form field names in
            // the table header.
            foreach ( $form_fields as $form_field ) {
 
                // Output the form field name/label.
                echo '<th>';
                    echo esc_html( sanitize_text_field( $form_field['label'] ) );
                echo '</th>';
            }
 
        echo '</tr></thead>';
 
        echo '<tbody>';
 
            // Now, loop through all the form entries.
            foreach ( $entries as $entry ) {
 
                echo '<tr>';
 
                // Entry field values are in JSON, so we need to decode.
                $entry_fields = json_decode( $entry->fields, true );
 
                foreach ( $form_fields as $form_field ) {
 
                    echo '<td>';
 
                        foreach ( $entry_fields as $entry_field ) {
                            if ( absint( $entry_field['id'] ) === absint( $form_field['id'] ) ) {
                                echo apply_filters( 'wpforms_html_field_value', wp_strip_all_tags( $entry_field['value'] ), $entry_field, $form_data, 'entry-frontend-table' );
                                break;
                            }
                        }
 
                    echo '</td>';
                }
 
                echo '</tr>';
            }
 
        echo '</tbody>';
 
    echo '</table>';
 
    $output = ob_get_clean();
 
    return $output;
}
add_shortcode( 'wpforms_entries_table', 'wpf_entries_table' );

Una vez que hayas agregado el código a tu sitio web usando el plugin gratuito WPCode, estarás listo para mostrar las entradas de tu formulario. Harás esto usando un shortcode que puedes colocar en cualquier página o publicación.

El shortcode básico se ve así:

[wpforms_entries_table id="FORMID"]

Solo recuerda reemplazar FORMID con el ID de tu formulario real.

Puedes encontrar el ID del formulario yendo a WPForms » Todos los formularios y luego mirando la columna Shortcode.

Personaliza la visualización de tus entradas de WPForms (Alternativa)

También puedes personalizar este shortcode para cambiar qué campos se muestran y cuántas entradas se muestran. Esto es súper útil para crear visualizaciones limpias y enfocadas.

Aquí hay un par de opciones útiles:

• Mostrar campos específicos: Para mostrar solo ciertas columnas, agrega un atributo fields con los IDs de campo de tu formulario. Por ejemplo, para mostrar solo los campos con los IDs 1 y 3, usarías:
  [wpforms_entries_table id="123" fields="1,3"]
• Limitar el número de entradas: Para mostrar solo las 5 entradas más recientes, agrega el atributo number: [wpforms_entries_table id="123" number="5"]

Puedes encontrar el ‘ID de campo’ de cualquier campo abriendo tu formulario de WordPress en el constructor de WPForms y haciendo clic en ese campo. El ID se muestra en la parte superior del panel de configuración a la izquierda.

Paso 3: Agregar el Shortcode a tu página

Para agregar un shortcode, simplemente crea una nueva página o edita una existente.

A continuación, procede a agregar un bloque de 'Shortcode'.

Luego, simplemente agrega tu shortcode al bloque.

Hecho esto, puedes previsualizar tu página de WordPress y hacer clic en el botón ‘Publicar’ en la parte superior.

¡Y eso es todo!

Así se veía la vista previa de las entradas de nuestro formulario en el front-end:

Puedes personalizar aún más la visualización utilizando estilos CSS personalizados según sea necesario.

Consejo extra: Creación de formularios que cumplen con el GDPR

El Reglamento General de Protección de Datos (GDPR) es una ley de la Unión Europea que otorga a las personas más control sobre sus datos personales. Si tu sitio web recopila información de los usuarios, especialmente a través de formularios, es importante seguir estas reglas.

Para que tus formularios cumplan con el GDPR, debes:

1. Obtener consentimiento explícito: Pregunta a los usuarios si está bien almacenar y usar su información personal.
2. Cumplir con las solicitudes de acceso: Permite a los usuarios ver la información personal que tienes sobre ellos.
3. Cumplir con las solicitudes de eliminación: Permite a los usuarios solicitar que sus datos sean eliminados de tu sitio.

Para más detalles, puede consultar nuestra guía sobre cómo crear formularios que cumplan con GDPR en WordPress. Responderá a todas sus preguntas en un lenguaje fácil de entender.

Preguntas frecuentes sobre cómo mostrar entradas de formularios en WordPress

¿Puedo mostrar las entradas del formulario sin un plugin?

Sí, pero es muy técnico. Necesitarías escribir código PHP y SQL personalizado para consultar tu base de datos de WordPress y mostrar los resultados. Usar un plugin como Formidable Forms o el método de fragmentos de código de WPForms es mucho más fácil y seguro para la mayoría de los usuarios.

¿Es seguro mostrar datos enviados por el usuario en mi sitio?

Puede ser, pero debes tener cuidado. Siempre obtén el consentimiento explícito de los usuarios antes de hacer públicos sus datos.

Además, es muy importante moderar las envíos antes de que aparezcan en tu sitio. Debes revisar cada entrada para evitar que se publique contenido inapropiado.

Regla general: Nunca muestres públicamente información personal sensible como nombres completos, direcciones de correo electrónico, números de teléfono o direcciones particulares sin permiso explícito y caso por caso.

¿Cómo puedo estilizar la apariencia de las entradas de mi formulario?

Ambos métodos en esta guía te permiten estilizar las entradas. El complemento Visual Views de Formidable Forms tiene configuraciones integradas para colores, fuentes y diseño. El método de tabla de WPForms produce una tabla HTML básica que puedes estilizar con CSS personalizado para que coincida con tu tema.

Tutorial en video: Mostrar entradas de formularios de WordPress

🎬 ¡Véalo en acción! Vea nuestro video tutorial para mostrar las entradas de formularios de WordPress en su sitio:

Recursos adicionales para usar formularios de WordPress

Esperamos que este artículo te haya ayudado a aprender cómo mostrar las entradas de formularios de WordPress en tu sitio.

A continuación, también te puede interesar ver nuestras otras guías útiles sobre:

• Cómo crear un formulario de pedido en línea
• Cómo agregar un campo de código de cupón a tus formularios de WordPress
• Cómo agregar autocompletado para campos de dirección en WordPress
• Formas de usar la lógica condicional en formularios de WordPress
• Cómo bloqueé 18,000 ataques de spam de clientes potenciales en mi formulario de WordPress
• Guía definitiva sobre el uso de formularios de WordPress

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.