Displaying WS Form Submissions on the Front-End of Your WordPress Site Using PHP

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

<?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"] where form_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!