How to Display Form Entries on your site from WPForms

Ver Markdown

Você deseja exibir as entradas de formulário em uma página do seu site para mostrar publicamente os envios de formulário concluídos pelos usuários? Este tutorial irá guiá-lo sobre como criar e implementar essa funcionalidade em seu site WordPress.

Por padrão, apenas usuários pro podem visualizar entradas de formulário dentro do painel do WordPress com base nos Controles de Acesso atribuídos ao seu usuário. No entanto, você pode facilmente criar a funcionalidade para exibir entradas de formulário no frontend do seu site.

Criando o Shortcode

Primeiro, forneceremos um trecho de código que precisará ser adicionado ao seu site para que você possa reutilizar facilmente este mesmo shortcode, com a exceção de apenas atualizar o ID do formulário conforme necessário.

Basta adicionar o seguinte trecho de código ao seu site. Se você não tiver certeza de como fazer isso, por favor, revise este tutorial.

/**
* 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.
'sort'   => '',
'order'  => 'asc',
],
$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 = json_decode(json_encode(wpforms()->entry->get_entries( $entries_args )), true);
 
if ( empty( $entries ) ) {
return '<p>No entries found.</p>';
}
 
foreach($entries as $key => $entry) {
$entries[$key][ 'fields' ] = json_decode($entry[ 'fields' ], true);
$entries[$key][ 'meta' ] = json_decode($entry[ 'meta' ], true);
}
 
if ( !empty($atts[ 'sort' ]) && isset($entries[0][ 'fields' ][$atts[ 'sort' ]] ) ) {
if ( strtolower($atts[ 'order' ]) == 'asc' ) {
usort($entries, function ($entry1, $entry2) use ($atts) {
return strcmp($entry1[ 'fields' ][$atts[ 'sort' ]][ 'value' ], $entry2[ 'fields' ][$atts[ 'sort' ]][ 'value' ]);
});
} elseif ( strtolower($atts[ 'order' ]) == 'desc' ) {
usort($entries, function ($entry1, $entry2) use ($atts) {
return strcmp($entry2[ 'fields' ][$atts[ 'sort' ]][ 'value' ], $entry1[ 'fields' ][$atts[ 'sort' ]]['value']);
});
}
}
 
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_fields = $entry[ 'fields' ];
 
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' );

O que este trecho de código fará é permitir que você use este shortcode em qualquer lugar do seu site que aceite shortcodes, como páginas, posts e áreas de widget.

Apenas usando este [wpforms_entries_table id="FORMID"], seus visitantes verão as entradas enviadas para o formulário que você especificar em id=”FORMID”.

O número de ID de um formulário pode ser encontrado indo em WPForms » Todos os Formulários e olhando o número na coluna Shortcode para cada formulário.

Exibindo Entradas de Formulário

Após criar o shortcode, você precisará adicioná-lo a uma página ou post em seu site para exibir suas entradas.

Primeiro, você precisará determinar qual ID de formulário você deseja exibir essas entradas. Em nosso exemplo, vamos exibir entradas para o ID de formulário 211, então nosso shortcode ficará assim.

[wpforms_entries_table id="211"]

O único atributo obrigatório para usar o shortcode é o id, sem defini-lo em seu shortcode, nada será exibido, então o ID do formulário deve ser listado dentro do shortcode.

No entanto, você pode filtrar suas entradas ainda mais definindo alguns dos atributos do shortcode e vamos revisar cada atributo disponível.

Definindo o Atributo type

Usar o atributo type pode ser feito se você quiser mostrar apenas entradas marcadas com estrela. Aqui está um exemplo.

[wpforms_entries_table id="211" type="starred"]

Abaixo estão outros parâmetros de tipo disponíveis que você pode usar:

all – usar este atributo exibirá todos os tipos de entrada.
read – este atributo exibirá apenas entradas que foram visualizadas por um administrador.
unread – usando este atributo, você verá apenas as entradas que não foram abertas por um administrador em seu site.
starred – este atributo exibirá apenas as entradas que foram marcadas com estrela por um administrador

Utilizando o Atributo user

Se um usuário estiver conectado ao seu site e você quiser que ele veja apenas as entradas de formulário que enviou, use este shortcode.

[wpforms_entries_table id="FORMID" user="current"]

Se o usuário não estiver conectado, todas as entradas deste formulário serão exibidas.

Se o usuário estiver logado, mas não tiver completado o formulário (enquanto logado), então Nenhum resultado encontrado. será exibido na página.

Definindo o Atributo fields

Para exibir apenas campos específicos, você precisará primeiro descobrir os IDs dos campos que deseja exibir. Para encontrar esses IDs de campo, por favor, revise este tutorial.

Assim que souber quais são os IDs dos campos, você usará isso como seu shortcode. Neste exemplo, queremos apenas o campo Nome, que é o ID de campo 0, e o campo Comentários, que é o ID de campo 2.

[wpforms_entries_table id="211" fields="0,2"]

Observação: Vários IDs de campo são separados usando uma vírgula no shortcode.

Usando o Atributo number

Por padrão, o shortcode exibirá apenas as primeiras 30 entradas. No entanto, se você quiser exibir uma quantidade menor, precisará usar o parâmetro number. Por exemplo, se você quiser mostrar as primeiras 20 entradas, adicione seu shortcode assim.

[wpforms_entries_table id="211" number="20"]

A variável number=”20″ passada dentro do shortcode determinará quantas entradas a tabela exibirá. Se você quiser mostrar todas as entradas, mude o number para 9999.

exibindo entradas de formulário em uma visualização de tabela padrão

Usando os Atributos sort e order

Ao usar seu shortcode, você pode dizer ao shortcode por qual campo deseja classificar a tabela e, em seguida, definir se deseja que seja classificado por asc (ordem ascendente) ou desc (ordem descendente). Um exemplo desse shortcode seria assim.

[wpforms_entries_table id="211" sort="1" order="asc"]

Neste exemplo, exibiremos uma tabela de entradas para o ID do formulário 211 e classificaremos esta tabela em ordem asc (ascendente) usando o ID de campo 1, que é o ID de campo para o campo Nome do formulário.

Estilizando a Tabela (Opcional)

Estilizar a tabela de entradas é completamente opcional, pois a maioria dos temas tem estilos de tabela padrão incorporados, assim como os navegadores. No entanto, queríamos dar um pontapé inicial com um exemplo, então se você quiser alterar o estilo padrão da tabela, você vai querer copiar e colar este CSS no seu site.

Para qualquer assistência sobre como e onde adicionar CSS ao seu site, por favor, revise este tutorial.

A estilização da sua tabela de entradas variará dependendo da estilização padrão que seu tema pode ou não ter para tabelas.

table {
border-collapse: collapse;
}

thead tr {
height: 60px;
}

table, th, td {
border: 1px solid #000000;
}

td {
white-space: normal;
max-width: 33%;
width: 33%;
word-break: break-all;
height: 60px;
padding: 10px;
}
tr:nth-child(even) {
background: #ccc
}

tr:nth-child(odd) {
background: #fff
}

Adicionar estilo à tabela de entradas do seu formulário

Adicionando uma Visualização Não-Tabela

Se você preferir não usar uma visualização de tabela HTML para exibir suas entradas, temos uma solução alternativa para você também. Em vez de criar seu shortcode com o trecho de código acima, use este trecho de código em vez disso.

/**
* Custom shortcode to display WPForms form entries in non-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.
'sort'   => '',
'order'  => 'asc',
],
$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 exist, 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 = json_decode(json_encode(wpforms()->entry->get_entries( $entries_args )), true);
 
if ( empty( $entries ) ) {
return '<p>No entries found.</p>';
}
 
foreach($entries as $key => $entry) {
$entries[$key][ 'fields' ] = json_decode($entry[ 'fields' ], true);
$entries[$key][ 'meta' ] = json_decode($entry[ 'meta' ], true);
}
 
if ( !empty($atts[ 'sort' ]) && isset($entries[0][ 'fields' ][$atts[ 'sort' ]] ) ) {
if ( strtolower($atts[ 'order' ]) == 'asc' ) {
usort($entries, function ($entry1, $entry2) use ($atts) {
return strcmp($entry1[ 'fields' ][$atts[ 'sort' ]][ 'value' ], $entry2[ 'fields' ][$atts[ 'sort' ]][ 'value' ]);
});
} elseif ( strtolower($atts[ 'order' ]) == 'desc' ) {
usort($entries, function ($entry1, $entry2) use ($atts) {
return strcmp($entry2[ 'fields' ][$atts[ 'sort' ]][ 'value' ], $entry1[ 'fields' ][$atts[ 'sort' ]]['value']);
});
}
}
 
ob_start();
 
echo '<div class="wrapper">';
 
echo '<div class="header-row">';
 
// 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 '<span class="column-label">';
echo esc_html( sanitize_text_field( $form_field[ 'label' ] ) );
echo '</span>';
}
 
echo '</div>';
 
echo '<div class="entries">';
 
// Now, loop through all the form entries.
foreach ( $entries as $entry ) {
 
echo '<div class="entry-details">';
 
$entry_fields = $entry[ 'fields' ];
 
foreach ( $form_fields as $form_field ) {
 
echo '<span class="details">';
 
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 '</span>';
}
 
echo '</div>';
}
 
echo '</div>';
 
echo '</div>';
 
$output = ob_get_clean();
 
return $output;
}
add_shortcode( 'wpforms_entries_table', 'wpf_entries_table' );

No entanto, é importante notar aqui que, como não estamos usando uma tabela padrão, não haverá estilo padrão aplicado ao usar esta opção, portanto, o CSS na próxima etapa é vital, mas listaremos as classes CSS usadas para que você possa aplicar seu próprio estilo a esta opção.

Estilizando o Não-tabela

Abaixo está uma lista detalhada das classes CSS usadas e qual pode ser seu propósito (se necessário).

.wrapper – este é um wrapper geral em todo o bloco de entradas e pode ser usado se você quiser reduzir a largura do bloco para que ele não se estenda por 100% da sua página.
.header-row – este é outro wrapper geral em torno dos rótulos de cada coluna (apenas os rótulos) se você desejar alterar a cor de fundo da seção de rótulos.>
.column-label – este wrapper envolverá cada título de rótulo individual. Por exemplo, Nome, Endereço de E-mail e Sugestão/Comentário cada um tem um desses wrappers ao redor deles e pode ser usado para definir o tamanho desse texto.
.entries – este é um wrapper geral em torno das próprias entradas se você desejar alterar a cor de fundo desta seção para que ela apareça de forma diferente dos rótulos.
.entry-details – este é um wrapper geral em torno de cada entrada individual e pode ser útil se você quiser fornecer uma cor de fundo diferente para cada linha de entrada.
.details – cada coluna de informação é envolvida nesta classe para que você possa adicionar qualquer estilo adicional que desejar, como tamanho da fonte, cor, etc.

Você pode usar o CSS abaixo para adicionar um estilo padrão para sua visualização não-tabela.

Para qualquer assistência sobre como e onde adicionar CSS ao seu site, por favor, revise este tutorial.

.wrapper {
width: 100%;
clear: both;
display: block;
}

.header-row {
float: left;
width: 100%;
margin-bottom: 20px;
border-top: 1px solid #eee;
padding: 10px 0;
border-bottom: 1px solid #eee;
}

span.details, span.column-label {
display: inline-block;
float: left;
width: 33%;
margin-right: 2px;
text-align: center;
margin: 5px 0;
}

.entries {
display: block;
clear: both;
width: 100%;
}

.header-row span.column-label {
text-transform: uppercase;
letter-spacing: 2px;
}

.entry-details {
border-bottom: 1px solid #ccc;
width: 100%;
display: block;
float: left;
margin: 20px 0;
padding-bottom: 20px;
}

Observação: O CSS fornecido acima é baseado na exibição de apenas 3 campos da sua entrada: o campo Nome, E-mail e Comentários. Se você quiser exibir mais campos, lembre-se de atualizar seu CSS de acordo.

Este é um exemplo do formulário não tabular após a adição do CSS

E é isso, você criou um shortcode que pode ser adicionado em vários lugares do seu site para que você possa exibir as entradas do seu formulário para usuários não administradores. Você também gostaria de exibir quantas entradas restam no seu formulário ao usar o Addon Form Locker? Experimente nosso trecho de código para Como Exibir o Número Limite de Entradas Restantes.

Filtro de Referência

wpforms_valor_campo_html

Perguntas Frequentes

Estas são as respostas para algumas das principais perguntas que vemos sobre a exibição de entradas de formulário em uma página ou postagem no WordPress.

P: Como posso exibir apenas uma contagem de entradas não lidas?

R: Você adicionaria este trecho ao seu site.

<?php
/**
* Custom shortcode to display WPForms form entries count for a form.
*
* Realtime counts could be delayed due to any caching setup on the site
*
* @link https://wpforms.com/developers/how-to-display-form-entries/
*
*/
 
function wpf_dev_entries_count( $atts ) {
 
// Pull ID shortcode attributes.
$atts = shortcode_atts(
[
'id'     => '',
'type'   => 'all', // all, unread, read, or starred.
],
$atts
);
 
if ( empty( $atts['id'] ) ) {
return;
}
 
$args = [
'form_id' => absint( $atts['id'] ),
];
 
if ( $atts['type'] === 'unread' ) {
$args['viewed'] = '0';
} elseif( $atts['type'] === 'read' ) {
$args['viewed'] = '1';
} elseif ( $atts['type'] === 'starred' ) {
$args['starred'] = '1';
}
 
return wpforms()->entry->get_entries( $args, true );
 
}
add_shortcode( 'wpf_entries_count', 'wpf_dev_entries_count' );

Então você está livre para usar este shortcode em qualquer lugar do seu site WordPress onde shortcodes são aceitos.

[wpf_entries_count id="13" type="unread"]

Você pode simplesmente alterar o type para ser unread, read ou starred.

P: Por que minhas entradas mais recentes não estão aparecendo?

R: Isso provavelmente se deve ao cache no nível do servidor, no nível do site ou no nível do navegador. Por favor, verifique se o seu cache está completamente limpo.

P: Eu preciso ter colunas?

R: Não, de forma alguma. Você pode exibir suas entradas colocando o rótulo na frente do valor do campo e tendo cada campo em uma linha separada usando este trecho e CSS.

/**
* Custom shortcode to display WPForms form entries in non-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.
'sort'   => '',
'order'  => 'asc',
],
$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 exist, 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 = json_decode(json_encode(wpforms()->entry->get_entries( $entries_args )), true);
 
if ( empty( $entries ) ) {
return '<p>No entries found.</p>';
}
 
foreach($entries as $key => $entry) {
$entries[$key]['fields'] = json_decode($entry['fields'], true);
$entries[$key]['meta'] = json_decode($entry['meta'], true);
}
 
if ( !empty($atts['sort']) && isset($entries[0]['fields'][$atts['sort']] ) ) {
if ( strtolower($atts['order']) == 'asc' ) {
usort($entries, function ($entry1, $entry2) use ($atts) {
return strcmp($entry1['fields'][$atts['sort']]['value'], $entry2['fields'][$atts['sort']]['value']);
});
} elseif ( strtolower($atts['order']) == 'desc' ) {
usort($entries, function ($entry1, $entry2) use ($atts) {
return strcmp($entry2['fields'][$atts['sort']]['value'], $entry1['fields'][$atts['sort']]['value']);
});
}
}
 
ob_start();
 
echo '<div class="wrapper">';
echo '<div class="entries">';
 
// Now, loop through all the form entries.
foreach ( $entries as $entry ) {
 
echo '<div class="entry-details">';
 
$entry_fields = $entry['fields'];
 
foreach ( $form_fields as $form_field ) {
 
echo '<span class="details">';
echo '<span class="label">' . esc_html( sanitize_text_field( $form_field['label'] ) ) . ':</span>';
 
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 '</span>';
}
 
echo '</div>';
}
 
echo '</div>';
echo '</div>';
 
$output = ob_get_clean();
 
return $output;
}
 
add_shortcode( 'wpforms_entries_table', 'wpf_entries_table' );

Use o CSS abaixo para estilizar a visualização não tabular.

Para qualquer assistência sobre como e onde adicionar CSS ao seu site, por favor, revise este tutorial.

.wrapper {
width: 100%;
clear: both;
display: block;
}

span.details {
display: block;
margin-right: 2px;
margin: 5px 0;
}

.entries {
display: block;
clear: both;
width: 100%;
}

.entry-details {
border-bottom: 1px solid #ccc;
width: 100%;
display: block;
margin: 20px 0;
padding-bottom: 20px;
}

span.label {
font-weight: bold;
margin-right: 5px;
}

você também pode exibir as entradas em estilo de lista

Como Exibir Entradas de Formulário

Resumo de IA

Criando o Shortcode

Exibindo Entradas de Formulário

Definindo o Atributo type

Utilizando o Atributo user

Definindo o Atributo fields

Usando o Atributo number

Usando os Atributos sort e order

Estilizando a Tabela (Opcional)

Adicionando uma Visualização Não-Tabela

Estilizando o Não-tabela

Filtro de Referência

Perguntas Frequentes

P: Como posso exibir apenas uma contagem de entradas não lidas?

P: Por que minhas entradas mais recentes não estão aparecendo?

P: Eu preciso ter colunas?

Este artigo foi útil?

Obrigado pelo feedback!