Como exibir entradas de formulário do WordPress em seu site

Deseja exibir suas entradas de formulário do WordPress no front-end do site?

A exibição de entradas de formulário no front-end permite que você mostre informações importantes aos seus visitantes. Você pode usá-lo para mostrar avaliações positivas, criar diretórios, exibir calendários de eventos e muito mais.

Neste artigo, mostraremos como exibir entradas de formulário do WordPress em seu site.

Por que exibir entradas de formulário do WordPress no front-end?

Os formulários são ótimos para manter contato com seus visitantes, obter feedback e sugestões, ajudar os usuários a resolver seus problemas e muito mais. Exibir entradas de formulário em seu site WordPress para os visitantes pode ser útil em determinadas situações.

Por exemplo, você pode exibir depoimentos e análises de produtos que os usuários enviam por meio de um formulário on-line. Dessa forma, você pode aproveitar a prova social para criar confiança na marca e aumentar as conversões.

Também é possível exibir entradas de formulários para criar um diretório de empresas, exibir eventos enviados por usuários em um calendário, exibir estatísticas e mostrar outras informações importantes coletadas por meio de formulários on-line em seu site.

No entanto, por padrão, quando os usuários enviam um formulário no seu site WordPress, as entradas são mantidas em sigilo. Somente o administrador do WordPress e outros usuários que tenham permissão podem visualizar as entradas do formulário.

Vamos ver como você pode exibir entradas de formulários no front-end do seu site WordPress usando o Formidable Forms e o WPForms. Você pode clicar nos links abaixo para ir para a seção de sua preferência.

Tutorial em vídeo

Se você preferir instruções por escrito, continue lendo.

Exibição de entradas de formulários do WordPress usando Formidable Forms

A maneira mais fácil de exibir entradas de formulários no WordPress é usar o Formidable Forms. Ele é um plugin popular de formulário de contato do WordPress e oferece um construtor de formulários completo com muitos recursos para personalização.

Você pode criar todos os tipos de formulários, como pesquisas, questionários, formulários de pagamento e formulários avançados, como calendários de eventos, diretórios e calculadoras.

Primeiro, você precisará instalar e ativar o plug-in Formidable Forms em seu site. Se precisar de ajuda, consulte nosso guia sobre como instalar um plug-in do WordPress.

Para este tutorial, usaremos a versão Formidable Forms Pro porque ela inclui o complemento Visual Views.

Após a ativação, você pode ir para Formidable ” Forms e clicar no botão “+ Add New” na parte superior.

Depois disso, será exibida uma janela pop-up que solicitará a seleção de um tipo de formulário, como formulário de contato, formulário de registro de usuário, pesquisa e outros.

Vá em frente e selecione o tipo de formulário de sua preferência. Para este tutorial, criaremos um formulário de contato para coletar depoimentos de usuários.

Em seguida, você precisará inserir um nome e uma descrição do formulário.

Quando terminar, basta clicar no botão “Create” (Criar).

Agora você pode usar o construtor de formulários para personalizar seu formulário.

O Formidable oferece um construtor de arrastar e soltar que é muito fácil de usar. Basta selecionar qualquer campo de formulário que você gostaria de adicionar ao seu formulário nas opções à esquerda e colocá-lo no modelo de formulário.

Depois de personalizar, vá em frente e incorpore o formulário em qualquer lugar de seu site.

O plug-in oferece várias opções para adicionar seu formulário. A maneira mais fácil é clicar no botão “Incorporar” no construtor de formulários na parte superior e, em seguida, selecionar uma página existente ou criar uma nova página para adicionar o formulário.

Como alternativa, você também pode usar um bloco Formidable Forms ou um bloco de shortcode no editor de conteúdo do WordPress para incorporar seus formulários.

Em seguida, você pode dar um nome à sua página e visualizá-la.

Quando estiver satisfeito com a aparência, vá em frente e publique sua página.

Depois que o formulário estiver ativo e você começar a receber entradas, será necessário instalar e ativar o complemento Visual Views no Formidable Forms.

Para fazer isso, basta acessar Formidable ” Add-Ons no painel do WordPress. Em seguida, role para baixo até o complemento “Visual Views” e clique no botão “Install” (Instalar).

Quando o complemento estiver ativo, você poderá acessar Formidable ” Views no painel do WordPress.

Depois disso, basta clicar no botão “+ Add New” na parte superior.

Em seguida, será exibida uma janela pop-up na qual você precisará selecionar um tipo de visualização. O plug-in oferece uma visualização de grade, tabela, calendário e clássica que você pode usar.

Para este tutorial, usaremos a exibição “Grid” (Grade) para mostrar as entradas do formulário.

Depois disso, você terá de selecionar uma fonte de dados para sua visualização.

Clique no menu suspenso “Use Entries from Form” (Usar entradas do formulário) e selecione seu formulário. Há também uma opção para inserir um nome de exibição.

Depois de selecionar sua fonte de dados, basta clicar no botão “Criar uma visualização”.

Isso iniciará o construtor de visualizações no Formidable Forms.

Para começar, clique no botão “Layout Builder”.

Em seguida, você precisará selecionar um layout para exibir as entradas do formulário.

Basta escolher um layout entre as opções fornecidas na parte superior. Você pode adicionar vários layouts para mostrar as entradas do formulário.

Depois de selecionar um layout, clique no botão “Salvar layout”.

Em seguida, você pode adicionar conteúdo ao construtor de visualizações clicando no botão “+”. Há opções para personalizar o layout das entradas do formulário e adicionar conteúdo antes e depois das entradas do formulário.

O plug-in também oferece opções para alterar a tipografia, a cor do plano de fundo, a borda e muito mais no painel Grid Style Settings (Configurações de estilo de grade) à sua esquerda.

Você também verá um shortcode no campo View Name, que será necessário ao exibir entradas de formulário no seu site.

Há mais opções avançadas no painel Grid Style Settings (Configurações de estilo de grade). Nas configurações avançadas, você pode limitar o número de entradas, o tamanho da página e muito mais.

Quando você tiver personalizado a visualização, não se esqueça de clicar no botão “Update” (Atualizar) na parte superior.

Em seguida, você precisará exibir as entradas do formulário no site do WordPress. Para fazer isso, copie o shortcode fornecido em View Name.

O shortcode terá a seguinte aparência:

[display-frm-data id=2410]

Depois disso, vá para qualquer post ou página em que você gostaria de exibir entradas de formulário. Quando estiver no editor de conteúdo, basta adicionar um bloco “Shortcode”.

Agora, insira o shortcode que você copiou anteriormente no bloco de shortcode.

Depois disso, você pode visualizar a página e publicá-la.

Agora você pode visitar seu site para ver as entradas do formulário em ação.

Veja como eles são exibidos em nosso site de demonstração:

Exibindo entradas de formulário do WordPress usando WPForms

Outra maneira de exibir entradas de formulário no front-end do seu site WordPress é por meio do WPForms. No entanto, esse método requer a edição de código e é recomendado para usuários avançados que tenham conhecimento sobre codificação.

O WPForms é o melhor plugin de formulário de contato para WordPress e permite criar diferentes tipos de formulários usando um construtor de formulários do tipo arrastar e soltar.

Observe que, se quiser ver as entradas do formulário no painel do WordPress, você precisará da versão WPForms Pro. Há também uma versão WPForms Lite que você pode usar gratuitamente, que envia notificações por e-mail de todas as entradas do formulário.

Primeiro, você precisará instalar e ativar o plug-in WPForms. Para obter mais detalhes, consulte nosso guia sobre como instalar um plug-in do WordPress.

Em seguida, você precisará criar um formulário on-line usando o WPForms. Confira nosso guia passo a passo sobre como criar um formulário de contato no WordPress.

Quando começar a receber entradas de formulário, você precisará inserir o seguinte código no arquivo functions.php do seu tema. Fazer isso pode danificar seu site se você cometer um pequeno erro, por isso recomendamos o uso do WPCode.

Para obter mais informações, consulte nosso guia sobre como adicionar facilmente códigos personalizados no WordPress.

/**
 * Custom shortcode to display WPForms form entries in table view.
 *
 * Basic usage: [wpforms_entries_table id="FORMID"].
 * 
 * Possible shortcode attributes:
 * id (required)  Form ID of which to show entries.
 * user           User ID, or "current" to default to current logged in user.
 * fields         Comma separated list of form field IDs.
 * number         Number of entries to show, defaults to 30.
 * 
 * @link https://wpforms.com/developers/how-to-display-form-entries/
 *
 * Realtime counts could be delayed due to any caching setup on the site
 *
 * @param array $atts Shortcode attributes.
 * 
 * @return string
 */
 
function wpf_entries_table( $atts ) {
 
    // Pull ID shortcode attributes.
    $atts = shortcode_atts(
        [
            'id'     => '',
            'user'   => '',
            'fields' => '',
            'number' => '',
                        'type' => 'all' // all, unread, read, or starred.
        ],
        $atts
    );
 
    // Check for an ID attribute (required) and that WPForms is in fact
    // installed and activated.
    if ( empty( $atts['id'] ) || ! function_exists( 'wpforms' ) ) {
        return;
    }
 
    // Get the form, from the ID provided in the shortcode.
    $form = wpforms()->form->get( absint( $atts['id'] ) );
 
    // If the form doesn't exists, abort.
    if ( empty( $form ) ) {
        return;
    }
 
    // Pull and format the form data out of the form object.
    $form_data = ! empty( $form->post_content ) ? wpforms_decode( $form->post_content ) : '';
 
    // Check to see if we are showing all allowed fields, or only specific ones.
    $form_field_ids = isset( $atts['fields'] ) && $atts['fields'] !== '' ? explode( ',', str_replace( ' ', '', $atts['fields'] ) ) : [];
 
    // Setup the form fields.
    if ( empty( $form_field_ids ) ) {
        $form_fields = $form_data['fields'];
    } else {
        $form_fields = [];
        foreach ( $form_field_ids as $field_id ) {
            if ( isset( $form_data['fields'][ $field_id ] ) ) {
                $form_fields[ $field_id ] = $form_data['fields'][ $field_id ];
            }
        }
    }
 
    if ( empty( $form_fields ) ) {
        return;
    }
 
    // Here we define what the types of form fields we do NOT want to include,
    // instead they should be ignored entirely.
    $form_fields_disallow = apply_filters( 'wpforms_frontend_entries_table_disallow', [ 'divider', 'html', 'pagebreak', 'captcha' ] );
 
    // Loop through all form fields and remove any field types not allowed.
    foreach ( $form_fields as $field_id => $form_field ) {
        if ( in_array( $form_field['type'], $form_fields_disallow, true ) ) {
            unset( $form_fields[ $field_id ] );
        }
    }
 
    $entries_args = [
        'form_id' => absint( $atts['id'] ),
    ];
 
    // Narrow entries by user if user_id shortcode attribute was used.
    if ( ! empty( $atts['user'] ) ) {
        if ( $atts['user'] === 'current' && is_user_logged_in() ) {
            $entries_args['user_id'] = get_current_user_id();
        } else {
            $entries_args['user_id'] = absint( $atts['user'] );
        }
    }
 
    // Number of entries to show. If empty, defaults to 30.
    if ( ! empty( $atts['number'] ) ) {
        $entries_args['number'] = absint( $atts['number'] );
    }
 
// Filter the type of entries all, unread, read, or starred
    if ( $atts['type'] === 'unread' ) {
        $entries_args['viewed'] = '0';
    } elseif( $atts['type'] === 'read' ) {
        $entries_args['viewed'] = '1';
    } elseif ( $atts['type'] === 'starred' ) {
        $entries_args['starred'] = '1';
    }
 
    // Get all entries for the form, according to arguments defined.
    // There are many options available to query entries. To see more, check out
    // the get_entries() function inside class-entry.php (https://a.cl.ly/bLuGnkGx).
    $entries = wpforms()->entry->get_entries( $entries_args );
 
    if ( empty( $entries ) ) {
        return '<p>No entries found.</p>';
    }
 
    ob_start();
 
    echo '<table class="wpforms-frontend-entries">';
 
        echo '<thead><tr>';
 
            // Loop through the form data so we can output form field names in
            // the table header.
            foreach ( $form_fields as $form_field ) {
 
                // Output the form field name/label.
                echo '<th>';
                    echo esc_html( sanitize_text_field( $form_field['label'] ) );
                echo '</th>';
            }
 
        echo '</tr></thead>';
 
        echo '<tbody>';
 
            // Now, loop through all the form entries.
            foreach ( $entries as $entry ) {
 
                echo '<tr>';
 
                // Entry field values are in JSON, so we need to decode.
                $entry_fields = json_decode( $entry->fields, true );
 
                foreach ( $form_fields as $form_field ) {
 
                    echo '<td>';
 
                        foreach ( $entry_fields as $entry_field ) {
                            if ( absint( $entry_field['id'] ) === absint( $form_field['id'] ) ) {
                                echo apply_filters( 'wpforms_html_field_value', wp_strip_all_tags( $entry_field['value'] ), $entry_field, $form_data, 'entry-frontend-table' );
                                break;
                            }
                        }
 
                    echo '</td>';
                }
 
                echo '</tr>';
            }
 
        echo '</tbody>';
 
    echo '</table>';
 
    $output = ob_get_clean();
 
    return $output;
}
add_shortcode( 'wpforms_entries_table', 'wpf_entries_table' );

Depois de adicionar o código ao seu site usando o plug-in gratuito WPCode, você precisará inserir o seguinte shortcode em qualquer página ou post para mostrar as entradas do formulário.

[wpforms_entries_table id="FORMID"]

Basta substituir o FORMID pelo ID do seu formulário.

Você pode encontrar o ID do formulário acessando WPForms ” All Forms e, em seguida, observando a coluna Shortcode.

Para adicionar um shortcode, basta criar uma nova página ou editar uma já existente.

Em seguida, adicione um bloco “Shortcode”.

Depois de adicionar o bloco, basta inserir seu shortcode.

Agora, visualize sua página do WordPress e clique no botão “Publish” (Publicar) na parte superior.

Esta é a aparência da visualização de nossas entradas de formulário no front-end:

Você pode personalizar ainda mais a exibição usando estilos CSS personalizados, conforme necessário.

Esperamos que este artigo tenha ajudado você a aprender como exibir entradas de formulário do WordPress em seu site. Talvez você também queira ver nosso guia sobre como criar um tema personalizado para WordPress ou nossas escolhas de especialistas para os melhores plug-ins de formulário de contato para WordPress.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.