Cómo hacer un Sitio Web o Blog en 2024 - 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 del 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.

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

¿Por qué mostrar las entradas del formulario de WordPress en la interfaz?

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

Por ejemplo, puede ver 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 ver las entradas del formulario para crear un directorio de empresas, ver los eventos enviados por los usuarios en un calendario, ver 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 autorizados 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 favorita.

Vídeotutorial

Regístrate en WPBeginner

Si prefieres instrucciones escritas, sigue leyendo.

Ver entradas de formularios de WordPress usando Formidable Forms

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.

Después de la activación, puede ir a Formidable » Módulos y haga clic en el botón «+ Agregar nuevo» en la parte superior.

Agregar un nuevo módulo

A continuación, aparecerá una ventana emergente pidiéndole que seleccione un tipo de formulario, como formulario de contacto, formulario de registro de usuario, encuesta y más.

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

Seleccione el tipo de formulario

A continuación, deberá ingresar el nombre y la descripción del módulo.

Cuando haya terminado, simplemente haga clic en el botón «Crear».

Ingrese el nombre y la descripción del módulo

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

Formidable ofrece un constructor de arrastrar y soltar que es súper fácil de usar. Simplemente seleccione cualquier campo de formulario que desee agregar a su formulario de las opciones de la izquierda e insértelo en su plantilla de formulario.

🔥 Leer:  ¿Por qué sigo recibiendo las mismas historias de Instagram? ¿Cómo detener las historias repetidas?
Construye tu formulario

Después de la personalización, continúe e incruste el formulario en cualquier lugar de su sitio web.

El complemento ofrece múltiples opciones para agregar su módulo. La forma más sencilla es hacer clic en el botón «Insertar» en el creador de formularios de arriba y luego seleccionar una página existente o crear una nueva página para agregar el formulario.

Insertar el formulario en una nueva página

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 nombrar su página y obtener una vista previa de ella.

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

Obtenga una vista previa y publique su formulario

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

Para hacer esto solo sube Fantástico » 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».

Instale el complemento Visual Displays

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

A continuación, simplemente haga clic en el botón «+Agregar nuevo» en la parte superior.

Agregar una nueva vistaAgregar una nueva vista

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.

Seleccione un tipo de vista

A continuación, deberá seleccionar una fuente de datos para su vista.

Continúe y haga clic en el menú desplegable «Usar elementos del formulario» y seleccione el formulario. También hay una opción para ingresar un nombre para la vista.

Una vez que haya seleccionado su fuente de datos, simplemente haga clic en el botón «Crear una vista».

Seleccionar fuente de datos

Esto iniciará el creador de vistas en Formidable Forms.

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

Seleccione un creador de diseños

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

Simplemente elija un diseño de las opciones proporcionadas anteriormente. Puede agregar varios diseños para mostrar las entradas del formulario.

Construye tu diseño

Una vez que haya seleccionado 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 «+». Tiene opciones para personalizar el diseño de las entradas de su formulario y agregar contenido antes y después de las entradas de su 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 Nombre para mostrar, que necesitará al mostrar las entradas del formulario en su sitio.

Agregar contenido a la vista

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.

Después de personalizar su vista, no olvide hacer clic en el botón «Actualizar» en la parte superior.

A continuación, deberá mostrar las entradas del formulario en su sitio web de WordPress. Para hacer esto, copie el código corto proporcionado bajo el nombre de la vista.

El código corto se verá así:

[display-frm-data id=2410]

A continuación, 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».

🔥 Leer:  Cómo quitar el patrón de bloqueo olvidado en Galaxy A9 2016
Seleccione el bloque de código corto

Ahora inserte 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.

Introduce el código corto

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

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

Vista previa de las entradas del formulario

Ver entradas de formularios de WordPress usando 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 una modificación del código y se recomienda para usuarios avanzados que tengan conocimientos de codificación.

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

Tenga en cuenta que si desea ver las entradas del formulario en su panel de WordPress, necesitará el WPForms Pro versión. También hay una WPForm Lite versión que puede utilizar de forma gratuita, que envía notificaciones por correo electrónico de todas las entradas del 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 en sus formularios, deberá insertar el siguiente código en el archivo Functions.php de su tema. Esto podría dañar tu sitio web incluso si cometes un pequeño error, por lo que te recomendamos usarlo Código WP.

Para obtener más información, consulte nuestra guía sobre cómo agregar fácilmente código personalizado en WordPress.

/**
 * 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' );

Después de agregar el código a su sitio web usando el Complemento gratuito de WPCódeDeberá insertar 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 su ID de formulario.

🔥 Leer:  ¿Cómo imprimo varios archivos de Photoshop a la vez?

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

Encuentre el ID del formulario de WPForms

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».

Seleccione el bloque de código cortoSeleccione el 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.

Ingrese el código corto para mostrar las entradas del formulario

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

Ver las entradas de WPForms en la interfaz

Puede personalizar aún más la vista 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 consultar 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.