How to Display Form Entries on your site from WPForms

Ver Markdown

Pretende exibir as submissões de formulário numa página do seu site para mostrar publicamente as submissões completadas pelos utilizadores? Este tutorial irá guiá-lo através da criação e implementação desta funcionalidade no seu site WordPress.

Por defeito, apenas os utilizadores pro podem ver submissões de formulário a partir do painel de administração do WordPress, com base nos Controlos de Acesso atribuídos ao seu utilizador. No entanto, pode facilmente criar a funcionalidade para exibir submissões de formulário no frontend do seu site.

Criação do Shortcode

Primeiro, forneceremos um trecho de código que precisará de ser adicionado ao seu site para que 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 não tiver a certeza de como fazer isto, por favor, consulte 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-lhe usar este shortcode em qualquer lugar do seu site que aceite shortcodes, como páginas, publicações e áreas de widgets.

Apenas usando este [wpforms_entries_table id="FORMID"], os seus visitantes verão as submissões enviadas para o formulário que especificar em id=”FORMID”.

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

Exibição de Submissões de Formulário

Após criar o shortcode, terá de o adicionar a uma página ou publicação no seu site para exibir as suas submissões.

Primeiro, terá de determinar qual o ID do formulário cujas submissões pretende exibir. No nosso exemplo, vamos exibir as submissões para o ID de formulário 211, pelo que o nosso shortcode ficará assim.

[wpforms_entries_table id="211"]

O único atributo obrigatório para usar o shortcode é o id, sem o definir no seu shortcode, nada será exibido, pelo que o ID do formulário deve ser listado dentro do shortcode.

No entanto, pode filtrar ainda mais as suas submissões definindo alguns dos atributos do shortcode e vamos rever cada atributo disponível.

Definição do Atributo type

O uso do atributo type pode ser feito se pretender mostrar apenas submissões 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 pode usar:

all – usar este atributo exibirá todos os tipos de submissão.
read – este atributo exibirá apenas as submissões que foram visualizadas por um administrador.
unread – usando este atributo, verá apenas as submissões que não foram abertas por um administrador no seu site.
starred – este atributo exibirá apenas as submissões que foram marcadas com estrela por um administrador

Utilização do Atributo user

Se um utilizador estiver atualmente com sessão iniciada no seu site e pretender apenas que ele veja as submissões de formulário que enviou, use este shortcode.

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

Se o utilizador não estiver com sessão iniciada, todas as entradas deste formulário seriam exibidas.

Se o utilizador estiver com sessão iniciada mas não tiver completado o formulário (enquanto com sessão iniciada), então Nenhum resultado encontrado. seria exibido na página.

Definir o atributo fields

Para exibir apenas determinados campos, primeiro terá de descobrir os IDs dos campos que pretende exibir. Para encontrar esses IDs de campo, reveja este tutorial.

Assim que souber quais são os IDs dos campos, utilizará isto como o 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"]

Nota: Múltiplos IDs de campo são separados usando uma vírgula no shortcode.

Utilizar o atributo number

Por defeito, o shortcode exibirá apenas as primeiras 30 entradas. No entanto, se pretender exibir uma quantidade menor, terá de utilizar o parâmetro number. Por exemplo, se pretender mostrar as primeiras 20 entradas, adicione o seu shortcode desta forma.

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

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

apresentar entradas de formulário numa vista de tabela padrão

Utilizar o atributo sort e order

Ao utilizar o seu shortcode, pode indicar ao shortcode por qual campo pretende ordenar a tabela e, em seguida, definir se pretende que seja ordenada 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, vamos exibir uma tabela de entradas para o ID de formulário 211 e vamos ordenar esta tabela em ordem asc (ascendente) utilizando o ID de campo 1, que é o ID de campo para o campo Nome do formulário.

Estilizar a Tabela (Opcional)

A estilização da tabela de entradas é completamente opcional, pois a maioria dos temas tem estilos de tabela padrão incorporados, tal como os navegadores. No entanto, queríamos dar-lhe um exemplo para começar, por isso, se quiser alterar os estilos de tabela padrão, copie e cole este CSS no seu site.

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

A estilização da sua tabela de entradas variará dependendo da estilização padrão que o seu tema possa 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 das suas entradas de formulário

Adicionar uma Vista Não-Tabela

Se preferir não utilizar uma vista de tabela HTML para exibir as suas entradas, também temos uma solução alternativa para si. Em vez de criar o seu shortcode com o trecho de código acima, utilize 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 a usar uma tabela padrão, não haverá estilos predefinidos aplicados ao usar esta opção, pelo que o CSS no próximo passo é vital, mas listaremos as classes CSS utilizadas para que possa aplicar os seus próprios estilos a esta opção.

Estilização do Não-tabela

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

.wrapper – este é um wrapper geral em torno de todo o bloco de entradas e pode ser usado se desejar reduzir a largura do bloco para que não se estenda 100% da sua página.
.header-row – este é outro wrapper geral em torno dos rótulos de cada coluna (apenas os rótulos) se desejar alterar a cor de fundo da secção de rótulos.>
.column-label – este wrapper envolverá cada título de rótulo individual. Por exemplo, Nome, Endereço de Email e Sugestão/Comentário têm cada um um destes wrappers à sua volta e pode ser usado para definir o tamanho deste texto.
.entries – este é um wrapper geral em torno das próprias entradas se desejar alterar a cor de fundo desta secção para que 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 desejar fornecer uma cor de fundo diferente para cada linha de entrada.
.details – cada coluna de informação está envolta nesta classe para que possa adicionar quaisquer estilos adicionais que deseje, como tamanho de fonte, cor, etc.

Pode usar o CSS abaixo para adicionar alguns estilos predefinidos para a sua vista não-tabela.

Para qualquer assistência sobre como e onde adicionar CSS ao seu site, reveja 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;
}

Nota: O CSS fornecido acima baseia-se apenas na exibição de 3 campos da sua entrada, o campo Nome, Email e Comentários. Se desejar exibir mais campos, lembre-se de atualizar o seu CSS em conformidade.

Este é um exemplo da forma não tabular após a adição do CSS

E é tudo, criou agora um shortcode que pode ser adicionado em vários locais do seu site para que possa exibir as entradas do seu formulário a utilizadores não administradores. Gostaria também de exibir quantos entradas restam no seu formulário ao usar o addon Form Locker? Experimente o nosso trecho de código para Como Exibir o Número Limite de Entradas Restantes.

Filtro de Referência

wpforms_html_field_value

FAQ

Estas são respostas a algumas das principais perguntas que vemos sobre a exibição de entradas de formulário numa página ou post no WordPress.

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

R: 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' );

Depois, pode usar este shortcode em qualquer lugar do seu site WordPress onde os shortcodes são aceites.

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

Pode simplesmente alterar o type para unread, read ou starred.

P: Porque é que as minhas entradas mais recentes não estão a ser exibidas?

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

Q: Tenho de ter colunas de todo?

R: Não, de todo. Pode apresentar as suas entradas colocando o rótulo à frente do valor do campo e tendo cada campo numa linha separada utilizando 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' );

Utilize o CSS abaixo para estilizar a vista não tabular.

Para qualquer assistência sobre como e onde adicionar CSS ao seu site, reveja 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;
}

pode apresentar as entradas em estilo de lista também

Como Exibir Entradas de Formulário

Resumo de IA

Criação do Shortcode

Exibição de Submissões de Formulário

Definição do Atributo type

Utilização do Atributo user

Definir o atributo fields

Utilizar o atributo number

Utilizar o atributo sort e order

Estilizar a Tabela (Opcional)

Adicionar uma Vista Não-Tabela

Estilização do Não-tabela

Filtro de Referência

FAQ

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

P: Porque é que as minhas entradas mais recentes não estão a ser exibidas?

Q: Tenho de ter colunas de todo?

Este artigo foi útil?

Obrigado pelo seu feedback!