Voulez-vous afficher les entrées de formulaire sur une page de votre site pour montrer aux utilisateurs les soumissions de formulaire complétées publiquement ? Ce tutoriel vous expliquera comment créer et mettre en œuvre cette fonctionnalité sur votre site WordPress.
Par défaut, seuls les utilisateurs pro peuvent voir les entrées de formulaire à partir de l'administration de WordPress en fonction des contrôles d'accès attribués à leur utilisateur. Cependant, vous pouvez facilement créer la fonctionnalité permettant d'afficher les entrées de formulaire sur le frontend de votre site.
Création du code court
Tout d'abord, nous allons vous fournir un extrait de code qui devra être ajouté à votre site afin que vous puissiez facilement réutiliser ce même shortcode, à l'exception de la mise à jour de l'ID du formulaire en fonction de vos besoins.
Il suffit d'ajouter l'extrait de code suivant à votre site. Si vous n'êtes pas sûr de savoir comment procéder, veuillez consulter ce tutoriel.
/**
* 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' );
Cet extrait de code va vous permettre d'utiliser ce shortcode partout sur votre site qui accepte les shortcodes, comme les pages, les posts et les zones de widgets.
Il suffit d'utiliser ce [wpforms_entries_table id="FORMID"]vos visiteurs verront les entrées soumises pour le formulaire que vous avez spécifié dans la section id="FORMID".
Le numéro d'identification d'un formulaire peut être trouvé en allant dans WPForms " All Forms et en regardant le numéro dans la colonne Shortcode pour chaque formulaire.
Affichage des entrées de formulaire
Après avoir créé le shortcode, vous devrez l'ajouter à une page ou à un article de votre site pour afficher vos entrées.
Tout d'abord, vous devez déterminer l'ID du formulaire sur lequel vous souhaitez afficher ces entrées. Dans notre exemple, nous allons afficher les entrées pour le formulaire ID 211, de sorte que notre shortcode ressemble à ceci.
[wpforms_entries_table id="211"]
Le seul attribut requis pour utiliser le shortcode est l'id, sans le définir dans votre shortcode, rien ne s'affichera donc l'ID du formulaire doit être listé dans le shortcode.
Cependant, vous pouvez filtrer davantage vos entrées en définissant certains des attributs du shortcode et nous allons passer en revue chaque attribut disponible.
Définition de l'attribut type
L'attribut type peut être utilisé si vous souhaitez n'afficher que les entrées marquées d'une étoile. Voici un exemple.
[wpforms_entries_table id="211" type="starred"]
Vous trouverez ci-dessous d'autres paramètres de type que vous pouvez utiliser :
- all - cet attribut permet d'afficher tous les types d'entrées.
- read - cet attribut n'affiche que les entrées qui ont été consultées par un administrateur.
- unread - en utilisant cet attribut, vous ne verrez que les entrées qui n'ont pas été ouvertes par un administrateur sur votre site.
- starred - cet attribut n'affichera que les entrées qui ont été marquées d'un astérisque par un administrateur.
Utilisation de l'attribut user
Si un utilisateur est actuellement connecté à votre site et que vous souhaitez qu'il ne voie que les entrées de formulaire qu'il a soumises, utilisez ce shortcode.
[wpforms_entries_table id="FORMID" user="current"]
Si l'utilisateur n'est pas connecté, toutes les entrées de ce formulaire s'afficheront.
Si l'utilisateur est connecté mais n'a pas rempli le formulaire (alors qu'il est connecté), le message "Aucun résultat trouvé" s'affiche sur la page.
Définition de l'attribut fields
Pour n'afficher que certains champs, vous devez d'abord trouver les identifiants des champs que vous souhaitez afficher. Pour trouver ces identifiants, veuillez consulter ce tutoriel.
Une fois que vous connaissez les ID des champs, vous les utiliserez comme shortcode. Dans cet exemple, nous voulons seulement le champ Nom qui est le champ ID 0 et le champ Commentaires qui est le champ ID 2.
[wpforms_entries_table id="211" fields="0,2"]
Note : Les ID de champs multiples sont séparés par une virgule dans le shortcode.
Utilisation de l'attribut number
Par défaut, le shortcode n'affiche que les 30 premières entrées. Toutefois, si vous souhaitez en afficher une plus petite quantité, vous devez utiliser l'option number paramètre. Par exemple, si vous souhaitez afficher les 20 premières entrées, ajoutez votre shortcode comme suit.
[wpforms_entries_table id="211" number="20"]
La variable number="20″ passée à l'intérieur du shortcode déterminera le nombre d'entrées que le tableau affichera. Si vous souhaitez afficher toutes les entrées, remplacez le nombre par 9999.
Utilisation des attributs de tri et d'ordre
Lorsque vous utilisez votre shortcode, vous pouvez lui indiquer le champ par lequel vous souhaitez trier le tableau, puis définir si vous souhaitez qu'il soit trié par asc (ordre croissant) ou par desc (ordre décroissant). Un exemple de shortcode ressemblerait à ceci.
[wpforms_entries_table id="211" sort="1" order="asc"]
Dans cet exemple, nous allons afficher un tableau d'entrées pour le formulaire ID 211 et nous allons trier ce tableau par ordre ascendant en utilisant le champ ID 1, qui est l'ID du champ Nom du formulaire.
Décoration de la table (facultatif)
Le style de la table des entrées est totalement facultatif, car la plupart des thèmes, ainsi que les navigateurs, intègrent un style de table par défaut. Cependant, nous avons voulu vous donner un exemple pour commencer, donc si vous voulez changer le style de la table par défaut, vous devrez copier et coller cette feuille de style CSS sur votre site.
Pour obtenir de l'aide sur la manière et l'endroit où ajouter des feuilles de style CSS à votre site, veuillez consulter ce tutoriel.
Le style de votre table d'entrée variera en fonction du style par défaut que votre thème propose ou non pour les tables.
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
}
Ajout d'une vue non tabulaire
Si vous préférez ne pas utiliser de tableau HTML pour afficher vos entrées, nous avons également une solution alternative pour vous. Au lieu de créer votre shortcode avec l'extrait de code ci-dessus, utilisez plutôt cet extrait de code.
/**
* 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' );
Cependant, il est important de noter ici que puisque nous n'utilisons pas un tableau standard, aucun style par défaut ne sera appliqué lors de l'utilisation de cette option. Le CSS dans l'étape suivante est donc vital, mais nous allons énumérer les classes CSS utilisées afin que vous puissiez appliquer votre propre style à cette option.
La mise en scène de la non-table
Vous trouverez ci-dessous une liste détaillée des classes CSS utilisées et de leur utilité (si nécessaire).
- .wrapper - il s'agit d'une enveloppe globale autour de l'ensemble du bloc d'entrées et peut être utilisé si vous souhaitez réduire la largeur du bloc afin qu'il ne s'étende pas à 100 % de votre page.
- .header-row - il s'agit d'une autre enveloppe globale autour des étiquettes de chaque colonne (uniquement les étiquettes) si vous souhaitez modifier la couleur d'arrière-plan de la section des étiquettes.
- .column-label - cette enveloppe s'enroule autour de chaque titre d'étiquette. Par exemple, les titres Nom, Adresse électronique et Suggestion/Commentaire sont entourés d'une de ces enveloppes et peuvent être utilisés pour définir la taille du texte.
- .entries - il s'agit d'une enveloppe globale autour des entrées elles-mêmes si vous souhaitez modifier la couleur d'arrière-plan de cette section pour qu'elle apparaisse différemment des étiquettes.
- .entry-details - il s'agit d'une enveloppe globale autour de chaque entrée individuelle et peut être utile si vous souhaitez fournir une couleur d'arrière-plan différente pour chaque ligne d'entrée.
- .details - chaque colonne d'information est enveloppée dans cette classe afin que vous puissiez ajouter tout style supplémentaire que vous souhaitez, comme la taille de la police, la couleur, etc.
Vous pouvez utiliser la feuille de style CSS ci-dessous pour ajouter un style par défaut à votre vue sans tableau.
Pour obtenir de l'aide sur la manière et l'endroit où ajouter des feuilles de style CSS à votre site, veuillez consulter ce tutoriel.
.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;
}
Remarque : la feuille de style CSS fournie ci-dessus est basée sur l'affichage de trois champs de votre entrée, à savoir le nom, l'adresse électronique et les commentaires. Si vous souhaitez afficher plus de champs, n'oubliez pas de mettre à jour votre CSS en conséquence.
Et voilà, vous avez maintenant créé un shortcode qui peut être ajouté à différents endroits sur votre site afin que vous puissiez afficher les entrées de votre formulaire pour les utilisateurs non-administrateurs. Souhaitez-vous également afficher le nombre d'entrées restantes dans votre formulaire lorsque vous utilisez l'addon Form Locker? Essayez notre extrait de code pour Comment afficher le nombre d'entrées restantes.
Filtre de référence
FAQ
Voici les réponses aux questions les plus fréquentes que nous nous posons sur l'affichage des entrées de formulaire sur une page ou un article dans WordPress.
Q : Comment puis-je afficher uniquement le nombre d'entrées non lues ?
R : Vous devez ajouter cet extrait à votre 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' );
Vous êtes ensuite libre d'utiliser ce shortcode partout sur votre site WordPress où les shortcodes sont acceptés.
[wpf_entries_count id="13" type="unread"]
Vous pouvez simplement changer le type de document pour qu'il soit non lu, lu ou marqué d'une étoile.
Q : Pourquoi mes entrées les plus récentes ne s'affichent-elles pas ?
R : Ce problème est probablement dû à la mise en cache au niveau du serveur, du site ou du navigateur. Veuillez vérifier que votre mémoire cache est bien vide.
Q : Dois-je avoir des colonnes ?
R : Non, pas du tout. Vous pouvez afficher vos entrées en plaçant l'étiquette devant la valeur du champ et en plaçant chaque champ sur une ligne distincte à l'aide de cet extrait et de 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' );
Utilisez la feuille de style CSS ci-dessous pour styliser la vue sans tableau.
Pour obtenir de l'aide sur la manière et l'endroit où ajouter des feuilles de style CSS à votre site, veuillez consulter ce tutoriel.
.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;
}
