How to Store Checkbox Values as Arrays With Post Submissions

Updated:

Introduction

Would you like to store Checkbox values as arrays for your Post Submissions form on a custom meta field created from Advanced Custom Fields plugin? With a small PHP snippet, you can store these values in an array for your custom fields.

By default, when custom fields are mapped in the Post Submission addon, WPForms stores the data in the custom field in the same format WPForms stores the data in all forms.

An example being for Checkbox form fields (and anything with multiple values), WPForms store the values as a single string, with each value on a new line.

Red
Green
Blue

However, with a small PHP snippet, you can easily change this to have it stored as an array.

array( 'Red', 'Green', 'Blue')

Creating your custom fields

First, we’re going to create a custom field for our posts using the Advanced Custom Fields plugin.

If you need more information about setting up custom fields, please see this article.

Remember when setting up your ACF fields, it should be like for like. If you create a custom field for a checkbox, make sure the form field is also a checkbox.

create your custom fields in your post

Creating the form

Now it’s time to create your post submission form and add a Checkbox field to the form.

add a checkbox field to your form

If you need any assistance in setting up a post submission form, please see this documentation.

Once you’ve added the remaining fields to your form, go to the Settings tab and click Post Submissions to make sure your custom field is mapped correctly.

make sure to map any and all custom fields on the Post Submissions tab of your form builder

Adding the snippet to store values as arrays

To store the values as an array, you’ll just need to copy this snippet to your site.

If you need any help adding snippets to your site, please see this tutorial.

/**
 * Turn checkbox values into an array.
 *
 * @link https://wpforms.com/developers/how-to-store-checkbox-values-as-arrays-with-post-submissions/
 */
 
function wpf_dev_post_submission_process_meta( $field_value, $meta_key, $field_id, $fields, $form_data ) {

    // Only run on my form with ID = 443
    if ( absint( $form_data[ 'id' ] ) !== 443 ) {
            return;
    } 
     
    // The $meta_key name is the same name that shows in the Field Name on Advanced Custom Fields
    if ( $meta_key === 'have_visited' ) {

            $field_value = explode( "\n", $field_value );

        }
 
    return $field_value;
}
add_filter( 'wpforms_post_submissions_process_meta', 'wpf_dev_post_submission_process_meta', 10, 5 );

It’s important to note here that in the entries screen of WPForms and in the meta field while editing the post, you’ll still see a checkbox. It’s only when you echo out the values that it will show as an array (on a single line) and we’ll show you that in the next step. Also remember to update the form ID from 443 to match your own form ID. If you need help in where to find your form ID, please check out this helpful documentation.

Displaying the values

Now it’s time to display those values on your single post template. WPForms never recommends making live changes to your theme so it’s best to use a child theme or a custom function to echo this out on your template.

For more information on creating a child theme, have a look at this excellent article from our friends at WPBeginner.

display the values as arrays on your single post template

For the purpose of this tutorial, we’ve created our child theme and on single.php we added this line of code to first make sure values are there and if they are to display them. 

			<div class="states_wrapper">
				<?php if( get_field('have_visited') ): ?> 
					<p>I've already visited these states in the last 5 years: <?php the_field('have_visited'); ?></p> 
				<?php endif; ?>
			</div>

When your post is displayed, you’ll see the states are listed in a paragraph format rather than a line-by-line display.

now your checkbox values will be shown in a single line

And that’s it! You’ve successfully changed how these values are stored in your WordPress database. Would you like to also use images for your Checkbox form field labels instead of text? Take a look at our article on How to Apply Images to Checkbox Labels Using CSS.

Filter Reference: wpforms_post_submissions_process_meta

FAQ

A: Can I use this in other addons as well?

A: Absolutely! For example, if you take the same scenario as mentioned in this tutorial, you could add this to the User Registration addon so it’s automatically saved to the user profile page while using ACF to add further information to the WordPress User Profile. 

/**
 * Turn checkbox values into an array with the User Registration addon.
 *
 * @link https://wpforms.com/developers/how-to-store-checkbox-values-as-arrays-with-post-submissions/
 */

function wpf_dev_user_submission_process_meta( $field_value, $meta_key, $field_id, $fields, $form_data ) {
      
        // The $meta_key name is the same name that shows in the Field Name on Advanced Custom Fields
        if ( $meta_key === 'have_visited' ) {
                $field_value = explode( "\n", $field_value );
            }
      
        return $field_value;
    }
    add_filter( 'wpforms_user_registration_process_registration_custom_meta_value', 'wpf_dev_user_submission_process_meta', 10, 5 );

Notice how the filter name is now wpforms_user_registration_process_registration_custom_meta_value this means, when you create a registration form with the User Registration addon, this information will be stored to the user’s profile.

Tagged:
Still stuck? How can we help?
Last Updated on Dec 14, 2023