How to Build a Profile Page Using Post Submissions

Introduction

Would you like to use WPForms to build a profile page section that would appear under the guest post content using the Post Submissions addon? You may want to have a category that is strictly a section on your site to show your author profile data. Using WPForms and WordPress custom fields this can be easily achieved and we’ll show you how!

Setting up the WordPress Custom Fields

Before beginning to build your form, you’ll need to figure out what custom fields you want in your WordPress posts. To create custom fields in WordPress, please review this tutorial.

For this tutorial, we’re going to be adding a profile section that includes the name of the author, their birthday, and some other personal but fun facts about the author. This information would appear beneath the post on each guest post submission accepted.

Creating a profile form using the Post Submissions addon

Next, create your Post Submission form and add your fields to capture the information you want in your profile post.

Create your form to capture the profile fields

If you need any help in creating a form with the Post Submissions addon, please see this documentation.

Mapping the custom fields

Once you’ve added the fields to your form, you’ll now need to map these fields. Navigate to the Settings » Post Submissions tab to map these custom fields.

Type in the custom field name you set up in above and then from the dropdown, select the form field that maps to the correct field.

Please be aware that custom fields are case-sensitive.

Map your form fields to your custom fields for your profile section

For example, we created a custom field in WordPress called birthday. In our form, we added a Date form field called Birthday.

On the Settings » Post Submissions tab, in the Custom Post Meta section, we typed in birthday for the WordPress custom field name and selected the Birthday form field from the dropdown.

Adding the snippet

Next, you need to copy this snippet to your site.

If you’re not sure where or how to add snippets to your site, please review this tutorial.

/**
 * Add a profile form using Post Submissions
 *
 * @link https://wpforms.com/developers/how-to-build-an-profile-form-using-post-submissions/
 */

function wpf_post_submission_custom_content( $post_id, $fields, $form_data, $entry_id ) {

    // Only do this for form #1089.
    if ( absint( $form_data[ 'id' ] ) !== 1089 ) {
        return;
    }

    /*
     * Field IDs, for reference.
     * 15 - Birthday
     * 16 - "My friends would describe me as"
     * 18 - "The most influential person in my life has been..."
     * 19 - "Five things I couldn't live without"
     */

    // Below we're going to create our new custom content template,
    // using the field IDs listed above :)
    ob_start();
    ?>

    <h2><em><?php echo __('Author Profile', 'text-domain'); ?></em></h2>

    <h3><?php echo __('Name', 'text-domain'); ?></h3>
    <?php echo wpautop( esc_html( $fields[2][ 'value' ] ) ); ?>

    <h3><?php echo __('Birthday', 'text-domain'); ?></h3>
    <?php echo wpautop( esc_html( $fields[15][ 'value' ] ) ); ?>

    <h3><?php echo __('My friends would describe me as', 'text-domain'); ?></h3>
    <?php echo wpautop( esc_html( $fields[16][ 'value' ] ) ); ?>

    <h3><?php echo __('The most influential person in my life has been...', 'text-domain'); ?></h3>
    <?php echo wpautop( esc_html( $fields[18][ 'value' ] ) ); ?>

    <h3><?php echo __('Five things I couldn\'t live without', 'text-domain'); ?></h3>
    <?php echo wpautop( esc_html( $fields[19][ 'value' ] ) ); ?>

    <?php
    $content = ob_get_clean();

    remove_filter('content_save_pre', 'wp_filter_post_kses');
    remove_filter('content_filtered_save_pre', 'wp_filter_post_kses');

    $post = array(
        'ID'           => $post_id,
        'post_content' => $content,
    );
    wp_update_post( $post );

    add_filter('content_save_pre', 'wp_filter_post_kses');
    add_filter('content_filtered_save_pre', 'wp_filter_post_kses');
}
add_action( 'wpforms_post_submissions_process', 'wpf_post_submission_custom_content', 10, 4 );

Please note that you will need to change the form ID and field ID(s) to match what you have in your form. For assistance with finding the correct form and field IDs, please see this tutorial.

By adding this snippet above, you’ll be automatically adding to each guest post submission the user profile section that would appear directly beneath the post.

And that’s all you need to create a profile page section using the Post Submissions addon.

Your custom fields will now show on your profile form post

Would you like to be able to exclude certain posts and pages from your post submission forms? Take a look at our article on How to Exclude Posts, Pages or Categories From Dynamic Choices.

Action Reference: wpforms_post_submissions_process

FAQ

Q: Why is my HTML being stripped out?

A: This is because in the snippet, we’re calling upon esc_html to display what was entered. This means a lot of HTML spans or divs used for formatting is stripped away. If you need to allow HTML in these fields, use wp_kses_post instead.