This article will guide you to create a simple WordPress plugin to display WS Form submissions on the front-end of your WordPress site.
Coming soon: the best way to display entries from WS Form on the front-end will be with DataKit!
Prerequisites
- WS Form: Ensure you have WS Form installed and activated.
- Basic Knowledge of PHP and WordPress: Understanding the basics of PHP and how WordPress works is essential.
Step 1: Create a WS Form
First, you need to create a WS Form. Follow these steps:
- Go to your WordPress dashboard.
- Navigate to WS Form > Add New.
- Select a template or create a form from scratch.
- Customize your form fields as needed.
- Save your form.
Here are the official docs for creating a form in WS Form.
Step 2: Add submissions
This article is showing you how to display submissions from a WS Form form, so now you need to add submissions!
For now, preview the form (here’s how to preview a WS Form form) and start adding a few submissions. That will allow you to see some entries.
Step 3: Create a Custom Plugin
We’ll create a custom plugin to handle fetching and displaying the form submissions.
Step 3.1: Set Up the Plugin
- In your WordPress installation, navigate to the
wp-content/plugins
directory. - Inside this directory, create a file named
ws-form-submissions.php
.
Step 3.2: Add Plugin Code
Open ws-form-submissions.php
and add the following code:
<?php
/**
* Plugin Name: WS Form Submissions Display
* Description: Display WS Form submissions on the front-end.
* Version: 1.0
* Author: Your Name
* Author URI: Your Website
* License: GPLv2 or later
*/
// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
/**
* Fetch WS Form fields and labels.
*
* @param int $form_id The ID of the form.
* @return array The form fields and their labels.
*/
function get_ws_form_fields( $form_id ) {
// Load WS Form classes.
if ( ! class_exists( 'WS_Form_Submit' ) || ! class_exists( 'WS_Form_Field' ) ) {
return array();
}
$ws_form_submit = new WS_Form_Submit();
$ws_form_submit->form_id = $form_id;
$submit_fields = $ws_form_submit->db_get_submit_fields();
$fields = array();
if ( $submit_fields !== false ) {
$ws_form_field = new WS_Form_Field();
foreach ( $submit_fields as $id => $field ) {
$fields[ 'field_' . $id ] = $field['label'];
}
}
return $fields;
}
/**
* Fetch WS Form submissions.
*
* @param int $form_id The ID of the form.
* @return array The form submissions.
*/
function get_ws_form_submissions( $form_id, $limit = 100 ) {
// Load WS Form classes.
if ( ! class_exists( 'WS_Form_Submit' ) ) {
return array();
}
$ws_form_submit = new WS_Form_Submit();
$ws_form_submit->form_id = $form_id;
// Retrieve the submissions.
$submissions = $ws_form_submit->db_read_all(
$ws_form_submit->get_search_join(),
$ws_form_submit->get_search_where(),
$ws_form_submit->get_search_group_by(),
$ws_form_submit->get_search_order_by(),
$limit, // Limit.
0, // Offset.
true, // Get meta.
true, // Get expanded.
false, // Bypass user capability check.
false // Clear hidden fields.
);
return $submissions;
}
/**
* Display WS Form submissions on the front-end.
*
* @param array $atts Shortcode attributes.
* @return string The HTML output for the form submissions.
*/
function display_ws_form_submissions( $atts ) {
$atts = shortcode_atts(
array(
'form_id' => 1,
'limit' => 100,
),
$atts,
'ws_form_submissions'
);
$form_id = intval( $atts['form_id'] );
$limit = intval( $atts['limit'] );
$fields = get_ws_form_fields( $form_id );
$submissions = get_ws_form_submissions( $form_id, $limit );
if ( empty( $submissions ) ) {
return '<p>No submissions found.</p>';
}
ob_start();
?>
<table>
<thead>
<tr>
<th>Date</th>
<?php foreach ( $fields as $label ) { ?>
<th><?php echo esc_html( $label ); ?></th>
<?php } ?>
</tr>
</thead>
<tbody>
<?php foreach ( $submissions as $submission ) { ?>
<tr>
<td><?php
$timestamp = strtotime( $submission->date_added );
echo '<span title="' . date( 'Y-m-d H:i:s', $timestamp ) . '">' . esc_html( human_time_diff( $timestamp ) ); ?> ago</span></td>
<?php foreach ( $fields as $field_id => $label ) { ?>
<td>
<?php
if ( isset( $submission->meta[ $field_id ]['value'] ) ) {
$value = $submission->meta[ $field_id ]['value'];
if ( is_array( $value ) ) {
echo esc_html( implode( ', ', $value ) );
} else {
echo esc_html( $value );
}
}
?>
</td>
<?php } ?>
</tr>
<?php } ?>
</tbody>
</table>
<?php
return ob_get_clean();
}
add_shortcode( 'ws_form_submissions', 'display_ws_form_submissions' );
Step 4: Activate the Plugin
- Go to your WordPress dashboard.
- Navigate to Plugins > Installed Plugins.
- Find the WS Form Submissions Display plugin and click Activate.
Step 5: Use the Shortcode
Now that you have created the plugin and activated it, you can use the shortcode on any page or post to display the form submissions.
- Edit the page or post where you want to display the submissions.
- Add the shortcode
[ws_form_submissions form_id="1"]
whereform_id
is the ID of your WS Form.
You can modify the number of submissions displayed by updating the limit
attribute. The default is 100. To only display 20 submissions, you can use [ws_form_submissions form_id="1" limit="20"]
, where form_id
is the ID of your WS Form.
Conclusion
So now you have a table showing WS Form submissions on the front-end of your site. This is a good starting point, but it lacks a lot of functionality that you’ll probably want, like searching, sorting, editing, deleting…building a full solution is much more work. That’s where DataKit will come into the picture 😉
But for now, give this starter code a try. Play around, customize it! See if you can add some different options that you can define using shortcode attributes. This is a starting point, not an end. Have fun!