Résumé IA
Voulez-vous afficher les entrées de formulaire sur une page de votre site pour montrer publiquement les soumissions de formulaires complétées par les utilisateurs ? Ce tutoriel vous guidera dans la création et l'implémentation de cette fonctionnalité sur votre site WordPress.
Par défaut, seuls les utilisateurs pro peuvent voir les entrées de formulaire depuis l'administration WordPress en fonction des contrôles d'accès attribués à leur utilisateur. Cependant, vous pouvez facilement créer la fonctionnalité pour afficher les entrées de formulaire sur le frontend de votre site.
Création du Shortcode
Tout d'abord, nous vous fournirons 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 selon vos besoins.
Ajoutez simplement l'extrait de code suivant à votre site. Si vous n'êtes pas sûr de la manière de faire, 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' );
Ce que cet extrait de code va faire, c'est vous permettre d'utiliser ce shortcode n'importe où sur votre site qui accepte les shortcodes, tels que les pages, les articles et les zones de widgets.
En utilisant simplement [wpforms_entries_table id="FORMID"], vos visiteurs verront les entrées soumises pour le formulaire que vous spécifiez dans id=”FORMID”.
L'numéro d'ID d'un formulaire peut être trouvé en allant dans WPForms » Tous les formulaires 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 sur votre site pour afficher vos entrées.
Tout d'abord, vous devrez déterminer l'ID du formulaire pour lequel vous souhaitez afficher ces entrées. Dans notre exemple, nous allons afficher les entrées pour l'ID de formulaire 211, donc notre shortcode ressemble à ceci.
[wpforms_entries_table id="211"]
Le seul attribut requis pour utiliser le shortcode est id, sans le définir dans votre shortcode, rien ne s'affichera, donc l'ID du formulaire doit être listé à l'intérieur du shortcode.
Cependant, vous pouvez filtrer vos entrées encore plus en définissant certains des attributs du shortcode et nous allons examiner chaque attribut disponible.
Définition de l'attribut type
L'utilisation de l'attribut type peut être utilisée si vous souhaitez afficher uniquement les entrées marquées. Voici un exemple.
[wpforms_entries_table id="211" type="starred"]
Ci-dessous se trouvent d'autres paramètres de type disponibles que vous pouvez utiliser :
- all – l'utilisation de cet attribut affichera tous les types d'entrées.
- read – cet attribut n'affichera que les entrées qui ont été vues 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 par un administrateur
Utilisation de l'attribut user
Si un utilisateur est actuellement connecté à votre site et que vous souhaitez uniquement qu'il voie les entrées 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'afficheraient.
Si l'utilisateur est connecté mais n'a pas rempli le formulaire (pendant qu'il était connecté), alors Aucun résultat trouvé. s'afficherait sur la page.
Définition de l'attribut champs
Pour n'afficher que certains champs, vous devrez d'abord connaître les identifiants des champs que vous souhaitez afficher. Pour trouver ces identifiants de champ, veuillez consulter ce tutoriel.
Une fois que vous connaissez les identifiants des champs, vous utiliserez ceci comme shortcode. Dans cet exemple, nous voulons uniquement le champ Nom qui est l'identifiant de champ 0 et le champ Commentaires qui est l'identifiant de champ 2.
[wpforms_entries_table id="211" fields="0,2"]
Remarque : Les identifiants de champ multiples sont séparés par une virgule dans le shortcode.
Utilisation de l'attribut nombre
Par défaut, le shortcode n'affichera que les 30 premières entrées. Cependant, si vous souhaitez afficher un nombre inférieur, vous devrez utiliser le paramètre nombre. Par exemple, si vous souhaitez afficher les 20 premières entrées, ajoutez votre shortcode comme ceci.
[wpforms_entries_table id="211" number="20"]
La variable number="20" passée dans le shortcode déterminera le nombre d'entrées que le tableau affichera. Si vous souhaitez afficher toutes les entrées, changez le nombre à 9999.
Utilisation des attributs sort et order
Lorsque vous utilisez votre shortcode, vous pouvez indiquer au shortcode par quel champ vous souhaitez trier le tableau, puis définir si vous souhaitez qu'il soit trié par asc (ordre ascendant) ou desc (ordre descendant). Un exemple de ce shortcode ressemblerait à ceci.
[wpforms_entries_table id="211" sort="1" order="asc"]
Dans cet exemple, nous allons afficher un tableau des entrées pour le formulaire ID 211 et nous allons trier ce tableau par ordre asc (ascendant) en utilisant l'identifiant de champ 1, qui est l'identifiant de champ pour le champ Nom du formulaire.
Mise en forme du tableau (facultatif)
La mise en forme du tableau des entrées est entièrement facultative car la plupart des thèmes ont un style de tableau par défaut intégré, tout comme les navigateurs. Cependant, nous voulions vous donner un exemple pour commencer, donc si vous souhaitez modifier le style par défaut du tableau, vous voudrez copier et coller ce CSS sur votre site.
Pour toute aide sur comment et où ajouter du CSS à votre site, veuillez consulter ce tutoriel.
La mise en forme de votre tableau d'entrées variera en fonction de la mise en forme par défaut que votre thème peut ou non avoir pour les tableaux.
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-tableau
Si vous préférez ne pas utiliser une vue 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 de tableau standard, aucun style par défaut ne sera appliqué lors de l’utilisation de cette option. Le CSS de l’étape suivante est donc essentiel, mais nous allons énumérer les classes CSS utilisées afin que vous puissiez appliquer votre propre style à cette option.
Styliser le non-tableau
Vous trouverez ci-dessous une liste détaillée des classes CSS utilisées et de leur objectif (si nécessaire).
- .wrapper – il s’agit d’un wrapper global autour de l’ensemble des entrées et peut être utilisé si vous souhaitez réduire la largeur du bloc afin qu’il ne s’étende pas sur 100 % de votre page.
- .header-row – il s’agit d’un autre wrapper global 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 – ce wrapper englobera chaque titre d’étiquette individuel. Par exemple, Nom, Adresse e-mail et Suggestion/Commentaire ont chacun un de ces wrappers autour d’eux et pourraient être utilisés pour cibler la taille de ce texte.
- .entries – il s’agit d’un wrapper global 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’un wrapper global autour de chaque entrée individuelle et pourrait être utile si vous souhaitez fournir une couleur d’arrière-plan différente pour chaque ligne d’entrée.
- .details – chaque colonne d’informations est enveloppée dans cette classe afin que vous puissiez ajouter tout style supplémentaire souhaité, tel que la taille de la police, la couleur, etc.
Vous pouvez utiliser le CSS ci-dessous pour ajouter un style par défaut à votre vue non-tableau.
Pour toute aide sur comment et où ajouter du 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 : Le CSS fourni ci-dessus est basé sur l’affichage de seulement 3 champs de votre entrée : le champ Nom, le champ E-mail et le champ 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é à divers endroits de votre site afin que vous puissiez afficher les entrées de votre formulaire aux utilisateurs non administrateurs. Souhaitez-vous également afficher le nombre d’entrées restantes sur votre formulaire lors de l’utilisation du module complémentaire Form Locker ? Essayez notre extrait de code pour Comment afficher le nombre limite d’entrées restantes.
Filtre de référence
FAQ
Ce sont les réponses à certaines des questions les plus fréquentes concernant l’affichage des entrées de formulaire sur une page ou un article dans WordPress.
Q : Comment puis-je afficher uniquement un décompte des entrées non lues ?
R : Vous ajouteriez 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' );
Ensuite, vous êtes libre d’utiliser ce shortcode n’importe où sur votre site WordPress où les shortcodes sont acceptés.
[wpf_entries_count id="13" type="unread"]
Vous pouvez simplement changer le type en unread, read ou starred.
Q : Pourquoi mes nouvelles entrées ne s’affichent-elles pas ?
R : Cela est probablement dû à la mise en cache au niveau du serveur, du site ou du navigateur. Veuillez vérifier que votre cache est complètement vidé.
Q: Dois-je avoir des colonnes du tout ?
R: Non, pas du tout. Vous pouvez afficher vos entrées en plaçant l'étiquette devant la valeur du champ et en ayant chaque champ sur une ligne séparée en utilisant cet extrait et ce 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 le CSS ci-dessous pour styliser la vue non-tableau.
Pour toute aide sur comment et où ajouter du 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;
}
