Ocultar campos vazios na pré-visualização de entradas do WPForms

Gostaria de ocultar os campos vazios da Pré-visualização de entrada no WPForms? Isso pode ajudar a criar uma visualização mais limpa e focada, mostrando apenas os campos que contêm dados.

Neste tutorial, mostraremos como usar um trecho de código personalizado para remover campos vazios da Visualização de entrada no WPForms.

Adicionar o snippet de código

Para ocultar campos vazios da Pré-visualização de entrada, terá de adicionar um fragmento de código personalizado ao seu site. Se precisar de ajuda para adicionar código personalizado, consulte o nosso tutorial sobre como adicionar snippets de código.

Adicione o seguinte trecho de código PHP ao seu site:

/**
 * Filter the entry preview fields to hide empty fields.
 *
 * @link https://wpforms.com/developers/hiding-empty-fields-in-wpforms-entry-preview
 *
 *
 * @param array $fields    The entry preview fields.
 * @param array $form_data Form data and settings.
 *
 * @return array The filtered entry preview fields.
 */
function wpf_hide_empty_entry_preview_fields( $fields, $form_data ) {
    foreach ( $fields as $field_id => $field ) {
        if ( empty( $field['value'] ) ) {
            unset($fields[$field_id]);
        }
    }
    return $fields;
}

// Add the filter to apply the custom function.
add_filter( 'wpforms_entry_preview_fields', 'wpf_hide_empty_entry_preview_fields', 10, 2 );

Este snippet usa o wpforms_entry_preview_fields para modificar os campos apresentados na Pré-visualização de entrada. O código percorre todos os campos da Pré-visualização de entradas e, para cada campo, verifica se o "valor" está vazio. Se o valor de um campo estiver vazio, remove (anula a definição) esse campo da matriz. Após a conclusão do ciclo, devolve a matriz de campos modificada, que agora só contém campos com valores.

Depois de adicionar o snippet, certifique-se de que testa bem os seus formulários. Envie formulários com várias combinações de campos preenchidos e vazios para garantir que a Pré-visualização de entrada é apresentada como esperado.

E é isso! Agora você ocultou campos vazios da sua Visualização de Entrada do WPForms. Isso cria uma visualização mais limpa e mais focada que mostra apenas campos que contêm dados.

Gostaria de saber mais sobre como personalizar a visualização de entrada no WPForms? Confira nosso tutorial sobre como mostrar campos de visualização de entrada no WPForms.