Display WordPress Form Submissions with DataKit

This feature is COMING SOON! Sign up for updates

DataViews is a WordPress component that provides an API to render datasets using different types of layouts (table, grid, list, etc.). DataViews is included with WordPress.

DataKit is a PHP SDK that allows you to easily create DataViews from a variety of data sources, including WS Form.

Demo

Tutorial

The DataKit plugin includes a WS Form data source which can be used to create DataViews that show WS Form submissions from any of your forms. Registering a DataView is achieved with some simple PHP code that can be added to functions.php or a code snippet plugin.

This tutorial explains how the above demo is achieved.

Install DataKit

To learn how to install the DataKit plugin, please refer to https://docs.datakit.org/.

Create Table Data Source

First create an instance of the WSFormDataSource class. In this example we create an instance for form ID 123. Change 123 to match your form ID.

// Create table data source
use DataKit\Plugin\Data\WSFormDataSource;

$dk_table_data_source = new WSFormDataSource( 123 );

Create Table Fields

Next we configure which fields we want to display in the data view. DataKit provides a variety of different field types. In this example we are going to display an image field for a WS Form File Upload field and text fields for the name, email and phone fields.

// Create table fields
use DataKit\DataViews\Field\ImageField;
use DataKit\DataViews\Field\TextField;

$dk_table_fields = array(

    // File Upload (ImageField)
    ImageField::create( 'field_1', 'Photo' )->not_sortable()->alt( 'My Image' )->size(50),

    // First Name (TextField)
    TextField::create( 'field_2', 'First Name' )->sortable()->always_visible(),

    // Last Name (TextField)
    TextField::create( 'field_3', 'Last Name' )->sortable()->always_visible(),

    // Email (TextField)
    TextField::create( 'field_4', 'Email' )->sortable(),

    // Phone (TextField)
    TextField::create( 'field_5', 'Phone' )->sortable(),
);

You can also include other submission meta data by changing the first parameter in the create method, for example:

• id
• date_added
• date_updated
• status
• status_full
• duration
• tracking_remote_ip (Any tracking enabled is available as a meta key)

For security reasons, user data is not exposed publicly.

Create Table Data View

Next we create the table data view by using the table method of the DataView class. In this example, we are using the paginate method to set the rows per page to 5.

// Create table data view
use DataKit\DataViews\DataView\DataView;

$dk_table_data_view = DataView::table(

    // Table ID
    'ws-form-dataview',

    // Table data source
    $dk_table_data_source,

    // Table fields
    $dk_table_fields,

)->paginate(5);

Register Table Data View

Next, we register the table data view. This needs to occur when the WordPress init action runs.

// Register table data view
add_action( 'datakit/loaded', function() use ( $dk_table_data_view ) {

    do_action( 'datakit/dataview/register', $dk_table_data_view );
} );

Add Shortcode to Page

Once the table data view has been registered it can then be embedded into any page using the dataview shortcode.

[dataview id="ws-form-dataview"]

Tips

• When using File Upload fields you should choose a public File Handler setting such as Media Library, otherwise the images won’t render in the DataView.

Further Reading

• DataKit
• DataKit Documentations
• DataViews Component

The post Display WordPress Form Submissions with DataKit appeared first on WS Form.