How to Position the Field Description Above the Form Field

Overview

Would you like to position the field description above your form fields? This can be easily achieved with a small PHP snippet added to your site. This tutorial will show you how you can change your field description to be above your form fields.

By default, WPForms will place all field descriptions directly below the form field input.

Setup

In order to move these descriptions above the form field, you’ll first need to copy this snippet to your site. If you need any help in how and where to add snippets to your site, check out this tutorial.

/**
 * Move the field description above the form field.
 *
 * @link   https://wpforms.com/developers/how-to-position-the-field-description-above-the-form-field/
 */

function wpf_dev_field_properties( $properties, $field, $form_data ) {
    
    // Only process this snippet on form ID 225
    if ( absint( $form_data[ 'id' ] ) !== 225 ) {
        return $properties;
    } 
    
    {
        // Position the field description above the form field
        $properties[ 'description' ][ 'position' ] = 'before';
    }

    return $properties;
}
add_filter( 'wpforms_field_properties', 'wpf_dev_field_properties', 10, 3 );

The code shown above is going to move the descriptions above the form fields but only if the form ID is225. Just remember to change the form ID from 225 to match your own form ID. If you need help in finding your form ID, please review this tutorial.

Once you’ve added this code snippet, you’ll see the descriptions will now appear above the form fields.

And that’s it! You’ve now successfully moved the field descriptions on your form to be above the form fields. Would you also like to learn how to limit the number of characters for your form’s text field? Have a look at our article on How to Limit the Number of Characters for a Text Field.

Related

Filter Reference: wpforms_field_properties

FAQ

Q: I’ve added the snippet but this still isn’t working for me?

A: If you’ve added the snippet but you can’t see the change, please clear all site cache and also confirm that you’ve updated the snippet above to reflect the form ID on your form.

Q: How can I do this for all of my forms instead of just 1?

A: If you’d like this functionality for all forms, just remove the call for the form ID. Below is an example of that snippet.

/**
 * Move the field description above the form field.
 *
 * @link   https://wpforms.com/developers/how-to-position-the-field-description-above-the-form-field/
 */

function wpf_dev_field_properties( $properties, $field, $form_data ) {

        // Position the field description above the form field
        $properties[ 'description' ][ 'position' ] = 'before';

    return $properties;
}
add_filter( 'wpforms_field_properties', 'wpf_dev_field_properties', 10, 3 );