Cómo hacer un Sitio Web o Blog en 2022 - Guía fácil y Gratuita para Crear un Sitio Web

Cómo mostrar entradas de formulario de WordPress en su sitio

¿Quiere mostrar las entradas de su formulario de WordPress en la parte frontal de su sitio?

Mostrar entradas de formulario en la interfaz le permite mostrar información importante a sus visitantes. Puede usarlo para mostrar reseñas positivas, crear directorios, mostrar calendarios de eventos y más.

En este artículo, le mostraremos cómo mostrar las entradas del formulario de WordPress en su sitio.

¿Por qué mostrar las entradas de los formularios de WordPress en el frontend?

Los formularios son excelentes para mantenerse en contacto con sus visitantes, recibir comentarios y sugerencias, ayudar a los usuarios a resolver sus problemas y más. Mostrar entradas de formulario en su sitio web de WordPress para sus visitantes puede resultar útil en determinadas situaciones.

Por ejemplo, puede mostrar testimonios y reseñas de productos que los usuarios envían a través de un formulario en línea. De esta manera, puede aprovechar la prueba social para generar confianza en la marca y aumentar las conversiones.

También puede mostrar entradas de formulario para crear un directorio de empresas, mostrar eventos enviados por usuarios en un calendario, mostrar estadísticas y mostrar otra información importante recopilada a través de formularios en línea en su sitio web.

Sin embargo, de forma predeterminada, cuando los usuarios envían un formulario en su sitio web de WordPress, sus entradas se mantienen privadas. Sólo el administrador de WordPress y otros usuarios que tengan permiso pueden ver las entradas del formulario.

Veamos cómo puede mostrar entradas de formulario en la parte frontal de su sitio web de WordPress usando Formidable Forms y WPForms. Puede hacer clic en los enlaces a continuación para ir a su sección preferida.

Vídeotutorial

Suscríbete a WPBeginner

Si prefiere instrucciones escritas, siga leyendo.

Visualización de entradas de formularios de WordPress mediante el uso de formularios formidables

La forma más sencilla de mostrar entradas de formularios en WordPress es utilizar Formidable Forms. Es un complemento de formulario de contacto de WordPress popular y ofrece un creador de formularios todo en uno con muchas funciones de personalización.

Puede crear todo tipo de formularios, como encuestas, cuestionarios, formularios de pago y formularios avanzados como calendarios de eventos, directorios y calculadoras.

Primero, deberá instalar y activar el complemento Formidable Forms en su sitio. Si necesita ayuda, consulte nuestra guía sobre cómo instalar un complemento de WordPress.

Para este tutorial, usaremos la versión Formidable Forms Pro porque incluye el complemento Visual Views.

Tras la activación, puede ir a Formidable » Formas y haga clic en el botón ‘+ Agregar nuevo’ en la parte superior.

Después de eso, aparecerá una ventana emergente que le pedirá que seleccione un tipo de formulario, como un formulario de contacto, un formulario de registro de usuario, una encuesta y más.

Continúe y seleccione su tipo de formulario preferido. Por el bien de este tutorial, crearemos un formulario de contacto para recopilar testimonios de los usuarios.

A continuación, deberá ingresar un nombre y una descripción del formulario.

Cuando haya terminado, simplemente haga clic en el botón “Crear”.

Ahora puede utilizar el creador de formularios para personalizar su formulario.

Formidable ofrece un constructor de arrastrar y soltar que es muy fácil de usar. Simplemente seleccione cualquier campo de formulario que desee agregar a su formulario de las opciones a su izquierda y colóquelo en la plantilla de formulario.

Después de personalizarlo, continúe e incruste el formulario en cualquier lugar de su sitio web.

El complemento ofrece múltiples opciones para agregar su formulario. La forma más sencilla es hacer clic en el botón ‘Insertar’ en el generador de formularios en la parte superior y luego seleccionar una página existente o crear una nueva página para agregar su formulario.

Alternativamente, también puedes usar un bloque Formidable Forms o un bloque de código corto en el editor de contenido de WordPress para incrustar tus formularios.

A continuación, puede darle un nombre a su página y obtener una vista previa de ella.

Cuando esté satisfecho con su apariencia, continúe y publique su página.

Una vez que su formulario esté activo y comience a recibir entradas, deberá instalar y activar el complemento Visual Views en Formidable Forms.

Para hacer eso, simplemente vaya a Formidable » Complementos desde su panel de WordPress. A continuación, desplácese hacia abajo hasta el complemento ‘Vistas visuales’ y haga clic en el botón ‘Instalar’.

Una vez que el complemento esté activo, puede ir a Formidable » Vistas desde su panel de WordPress.

Después de eso, simplemente haga clic en el botón ‘+ Agregar nuevo’ en la parte superior.

A continuación, aparecerá una ventana emergente donde deberá seleccionar un tipo de vista. El complemento ofrece una vista de cuadrícula, tabla, calendario y clásica que puede utilizar.

Para este tutorial, usaremos la vista ‘Cuadrícula’ para mostrar las entradas del formulario.

Después de eso, deberá seleccionar una fuente de datos para su vista.

Continúe y haga clic en el menú desplegable ‘Usar entradas del formulario’ y seleccione su formulario. También hay una opción para ingresar un nombre de vista.

Después de seleccionar su fuente de datos, simplemente haga clic en el botón “Crear una vista”.

Esto iniciará el creador de vistas en Formidable Forms.

Para comenzar, continúe y haga clic en el botón “Creador de diseño”.

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

Simplemente elija un diseño de las opciones dadas en la parte superior. Puede agregar varios diseños para mostrar las entradas del formulario.

Después de seleccionar un diseño, continúe y haga clic en el botón “Guardar diseño”.

A continuación, puede agregar contenido al creador 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 complemento 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 su izquierda.

También verá un código corto debajo del campo Ver nombre, que necesitará cuando muestre las entradas del formulario en su sitio.

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

Cuando haya personalizado la vista, no olvide hacer clic en el botón “Actualizar” en la parte superior.

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

El código corto se verá así:

[display-frm-data id=2410]

Después de eso, vaya a cualquier publicación o página donde desee mostrar las entradas del formulario. Una vez que estés en el editor de contenido, simplemente agrega un bloque de ‘Código corto’.

Ahora, ingrese el código corto que copió anteriormente en el bloque de código corto.

Después de eso, puedes obtener una vista previa de la página y publicarla.

Ahora puede visitar su sitio web para ver las entradas del formulario en acción.

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

Mostrar entradas de formulario de WordPress mediante el uso de WPForms

Otra forma de mostrar entradas de formulario en la parte frontal de su sitio web de WordPress es a través de Formularios WP. Sin embargo, este método requiere editar el código y se recomienda para usuarios avanzados que tienen conocimientos de codificación.

WPForms es el mejor complemento de formulario de contacto para WordPress y le permite crear diferentes tipos de formularios usando un generador de formularios de arrastrar y soltar.

Solo tenga en cuenta que si desea ver las entradas de su formulario en el panel de WordPress, necesitará el WPForms Pro versión. También hay una WPForms Lite versión que puede utilizar de forma gratuita, que envía notificaciones por correo electrónico de todas las entradas de su formulario.

Primero, deberá instalar y activar el complemento WPForms. Para obtener más detalles, consulte nuestra guía sobre cómo instalar un complemento de WordPress.

A continuación, deberá crear un formulario en línea utilizando WPForms. Puede consultar nuestra guía paso a paso sobre cómo crear un formulario de contacto en WordPress.

Una vez que comience a recibir entradas del formulario, deberá ingresar el siguiente código en el archivo funciones.php de su tema. Hacerlo puede dañar su sitio web si comete incluso un pequeño error, por lo que recomendamos usar Código WPC.

Consulte nuestra guía sobre cómo agregar fácilmente código personalizado en WordPress para obtener 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 '

No entries found.

'; } ob_start(); echo ''; echo ''; // 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 ''; } echo ''; echo ''; // Now, loop through all the form entries. foreach ( $entries as $entry ) { echo ''; // 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 ''; } echo ''; } echo ''; echo '
'; echo esc_html( sanitize_text_field( $form_field['label'] ) ); echo '
'; 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 '
'; $output = ob_get_clean(); return $output; } add_shortcode( 'wpforms_entries_table', 'wpf_entries_table' );

Una vez que haya agregado el código a su sitio web usando el complemento gratuito de WPCodedeberá ingresar el siguiente código corto en cualquier página o publicación para mostrar las entradas del formulario.

[wpforms_entries_table id="FORMID"]

Simplemente reemplace el FORMID con el ID de su formulario.

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

Para agregar un código corto, simplemente cree una página nueva o edite una existente.

A continuación, continúa y agrega un bloque de ‘Código corto’.

Después de agregar el bloque, simplemente ingrese su código corto.

Ahora obtenga una vista previa de su página de WordPress y haga clic en el botón “Publicar” en la parte superior.

Así es como se veía la vista previa de las entradas de nuestro formulario en la interfaz:

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

Esperamos que este artículo le haya ayudado a aprender cómo mostrar las entradas de los formularios de WordPress en su sitio. Es posible que también desee ver nuestra guía sobre cómo crear un tema de WordPress personalizado o nuestras selecciones de expertos para obtener los mejores complementos de formulario de contacto para WordPress.