How to Add Material Design to Your Form Fields Using CSS

/**

 * Move label position from above form field to below

 *

 * @link https://wpforms.com/developers/how-to-add-material-design-to-your-form-fields-using-css/

 */

function wpf_dev_display_field_before( $field, $form_data ) {

    // Only run this snippet on form ID 697

    if ( absint( $form_data[ 'id' ] ) !== 697 ) {

    return;

    }

    // Remove the action that sets the label before the form field

    remove_action( 'wpforms_display_field_before', array( wpforms()->frontend, 'field_label' ), 15 );

}

add_action( 'wpforms_display_field_before', 'wpf_dev_display_field_before', 10, 2 );

function wpf_dev_display_field_after( $field, $form_data ) {

    // Only run this snippet on form ID 697

    if ( absint( $form_data[ 'id' ] ) !== 697 ) {

    return;

    }

    // Set the label to appear after the form field is displayed

    wpforms()->frontend->field_label( $field, $form_data );

}

add_action( 'wpforms_display_field_after', 'wpf_dev_display_field_after', 10, 2 );