Como Exibir Entradas de Formulário do WordPress em Seu Site (2 Maneiras)

Você está coletando envios de formulários no seu site WordPress, mas nunca os exibe para seus visitantes? Essa é uma oportunidade perdida.

Exibir entradas como avaliações, listas de membros ou calendários de eventos no seu site lhes dá um propósito. Elas podem ajudar os visitantes a encontrar informações, ver feedback real ou descobrir pessoas e eventos na sua comunidade.

Na WPBeginner, ajudamos muitos proprietários de sites a tornar úteis os dados ocultos de seus formulários. Após testar várias abordagens, encontramos 2 que funcionam muito bem.

Neste guia, mostraremos como exibir entradas de formulário do WordPress no seu site de 2 maneiras fáceis – quer você esteja gerenciando um diretório, uma vitrine ou um site comunitário. 🙌

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

Exibir entradas de formulário significa pegar os dados que seus visitantes enviam e mostrá-los nas páginas públicas do seu site WordPress. Um dos maiores benefícios é a construção de prova social.

Por padrão, os envios de formulário são visíveis apenas para administradores.

Mas exibir depoimentos ou avaliações de produtos que usam feedback real de clientes é uma ótima maneira de construir confiança. De fato, um estudo descobriu que exibir avaliações pode aumentar as taxas de conversão em até 270%.

Você também pode usar entradas de formulário para criar outros recursos úteis para seus visitantes, como diretórios de empresas, listas de membros ou eventos enviados por usuários em um calendário.

Nas seções a seguir, mostraremos como exibir as entradas de formulário no front-end do seu site WordPress usando Formidable Forms e WPForms.

Aqui está uma visão geral rápida de todas as coisas que abordaremos neste guia:

• Displaying WordPress Form Entries by Using Formidable Forms (Easy Way)
  • Etapa 1: Configurar o Formidable Forms
  • Etapa 2: Criar um Formulário
  • Etapa 3: Publicar o Formulário
  • Etapa 4: Ativar Visual Views
  • Etapa 5: Exibir Entradas de Formulário no Front-End
• Displaying WordPress Form Entries by Using WPForms (Advanced)
  • Etapa 1: Instalar o WPForms
  • Step 2: Create a Form and Display Its Entries
• Dica Bônus: Criando Formulários em Conformidade com o GDPR
• Perguntas Frequentes sobre Exibição de Entradas de Formulário no WordPress
• Tutorial em Vídeo: Exibindo Entradas de Formulário do WordPress
• Recursos Adicionais para Usar Formulários do WordPress

Vamos começar.

Método 1: Exibindo Entradas de Formulário do WordPress Usando Formidable Forms

A maneira mais fácil de exibir entradas de formulário no WordPress é usando Formidable Forms. É um popular plugin de formulário de contato para WordPress e oferece um construtor de formulários tudo-em-um com muitos recursos de personalização.

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

Testamos o Formidable Forms minuciosamente para conhecer todos os seus recursos. Você pode ver por que o recomendamos em nossa análise completa do Formidable Forms.

Etapa 1: Configurar o Formidable Forms

Para começar, vamos instalar e ativar o plugin Formidable Forms em seu site. Para este tutorial, usaremos a versão Formidable Forms Pro porque ela inclui o addon 'Visual Views'.

Se precisar de ajuda, consulte nosso guia sobre como instalar um plugin do WordPress.

Ao ativar, você pode ir para Formidable » Forms e clicar no botão ‘+ Adicionar Novo’ no topo.

Etapa 2: Criar um Formulário

Depois disso, um pop-up aparecerá pedindo para você selecionar um tipo de formulário, como um formulário de contato, formulário de registro de usuário, pesquisa ou outro.

Prossiga e selecione seu tipo de formulário preferido. 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 para o formulário.

Quando terminar, basta clicar no botão ‘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 é super fácil de usar. Simplesmente selecione qualquer campo de formulário que você gostaria de adicionar ao seu formulário das opções à esquerda e coloque-o no modelo de formulário.

Etapa 3: Publicar o Formulário

Após personalizar, você pode incorporar o formulário em qualquer lugar do seu site.

O plugin 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 seu formulário.

Alternativamente, você pode usar um bloco ‘Formidable Forms’ ou um bloco de shortcode no editor de conteúdo do WordPress para incorporar seus formulários.

Para este tutorial, escolheremos a opção ‘Criar nova página’.

Uma vez dentro do editor de conteúdo, você verá que criou uma página dedicada para o seu formulário Formidable Forms.

Antes de publicá-la, talvez você queira visualizá-la clicando no botão ‘Visualizar’.

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

Etapa 4: Ativar Visual Views

Após seu formulário estar ativo e você começar a receber envios, você vai querer instalar e ativar o add-on ‘Visual Views’ no Formidable Forms.

Para fazer isso, basta ir em Formidable » Add-Ons na sua área administrativa do WordPress. Em seguida, você pode rolar para baixo até o add-on 'Visual Views' e clicar no botão 'Instalar'.

Assim que o add-on estiver ativo, você pode ir para a página Formidable » Views.

Em seguida, prossiga e clique no botão ‘+ Adicionar Novo’ na parte superior.

Uma janela pop-up aparecerá. Aqui, você precisará selecionar um tipo de visualização, como grade, tabela, calendário ou visualização clássica.

Para este tutorial, escolheremos a visualização ‘Grade’ para mostrar os envios do formulário.

O próximo passo é selecionar uma fonte de dados para sua visualização.

Clique no menu suspenso ‘Usar Entradas do Formulário’ para selecionar seu formulário. Você também pode inserir um nome de visualização.

Após 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 ‘Construtor de Layout’.

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

Simplesmente escolha um layout entre as opções fornecidas no topo. Você pode adicionar vários layouts para mostrar as entradas do formulário.

Após selecionar um layout, clique no botão ‘Salvar layout’.

Você pode então adicionar conteúdo ao construtor de visualizações clicando no botão ‘+’ . Existem opções para personalizar o layout das entradas do formulário e adicionar conteúdo antes e depois das entradas do formulário.

O plugin também oferece opções para alterar a tipografia, cor de fundo, borda e mais no painel ‘Configurações de Estilo da Grade’ à sua esquerda.

Você também verá um shortcode sob o campo ‘Nome da Visualização’, que você precisará ao exibir as entradas do formulário em seu site.

Existem opções mais avançadas no painel ‘Configurações de Estilo da Grade’. Nas configurações avançadas, você pode limitar o número de entradas, o tamanho da página e mais.

Quando você tiver personalizado a visualização, não se esqueça de clicar no botão ‘Atualizar’ no topo.

Etapa 5: Exibir Entradas de Formulário no Front-End

Em seguida, você precisará exibir as entradas do seu formulário em seu site WordPress. Para fazer isso, copie o shortcode fornecido em ‘Nome da Visualização’.

O shortcode ficará assim:

[display-frm-data id=2410]

Depois de copiar o shortcode para a área de transferência, você pode ir para qualquer post ou página onde você gostaria de exibir as entradas do formulário.

No editor de conteúdo, basta adicionar um bloco ‘Shortcode’.

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

Depois disso, você pode querer visualizar a página antes de publicá-la.

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

Veja como elas aparecem em nosso site de demonstração:

Método 2: Exibindo Entradas de Formulário do WordPress Usando WPForms

Você também pode exibir as entradas de formulário usando WPForms, um dos melhores plugins de formulário de contato do WordPress. Este método é mais avançado porque requer a adição de um trecho de código PHP ao seu site.

Para fazer isso, você precisará do WPForms Pro, que armazena todas as entradas de formulário no seu banco de dados do WordPress. A versão gratuita WPForms Lite apenas envia as entradas por e-mail e não as salva, portanto, não funcionará para este método.

No WPBeginner, usamos o WPForms para criar vários formulários, como formulários de contato e pesquisas anuais de usuários. Obtenha mais informações sobre ele em nossa revisão detalhada do WPForms.

Etapa 1: Instalar o WPForms

Primeiro, vamos nos inscrever para uma conta WPForms.

Você pode simplesmente clicar no botão 'Obter WPForms Agora' em o site deles para comprar um plano e criar sua conta.

Com isso feito, prossiga e copie sua chave de licença.

Agora, vamos configurar o plugin.

Para fazer isso, você precisará instalar a versão gratuita do plugin WPForms do repositório do WordPress, que fornece a estrutura básica. Depois disso, você inserirá sua chave de licença para desbloquear todos os recursos Pro.

Para começar, você pode ir para Plugins » Adicionar Novo Plugin na sua área de administração do WordPress.

Em seguida, use o recurso de pesquisa para encontrar rapidamente o plugin WPForms.

No resultado da pesquisa relevante, clique em ‘Instalar Agora’ e ‘Ativar’. Para mais detalhes, consulte nosso guia sobre como instalar um plugin do WordPress.

Etapa 2: Crie um Formulário e Exiba suas Entradas

Após a ativação, você pode começar a criar um formulário online usando o WPForms. Você pode conferir nosso guia passo a passo sobre como criar um formulário de contato no WordPress.

Assim que você começar a receber entradas do formulário, precisará inserir o seguinte código no arquivo functions.php do seu tema.

Mas observe que fazer isso pode quebrar seu site se você cometer um pequeno erro.

É por isso que sempre recomendamos o uso do WPCode, o melhor plugin de snippets de código para WordPress.

Algumas de nossas marcas parceiras usam este plugin porque é a maneira mais segura e fácil de adicionar snippets de código personalizados ao WordPress sem o risco de quebrar o site. Para uma análise mais aprofundada da plataforma, confira nossa revisão do WPCode.

Não se preocupe, você não precisa entender o que o código abaixo faz.

Você só precisa copiá-lo. Em seguida, para inserir o código, consulte nosso guia sobre como adicionar facilmente código personalizado no WordPress para mais informações.

/**
 * 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 plugin gratuito WPCode, você estará pronto para exibir as entradas do seu formulário. Você fará isso usando um shortcode que pode ser colocado em qualquer página ou postagem.

O shortcode básico se parece com isto:

[wpforms_entries_table id="FORMID"]

Apenas lembre-se de substituir FORMID pelo ID do seu formulário real.

Você pode encontrar o ID do formulário indo em WPForms » Todos os Formulários e olhando na coluna Shortcode.

Personalizando a Exibição de Entradas do seu WPForms (Alternativa)

Você também pode personalizar este shortcode para alterar quais campos são exibidos e quantas entradas são mostradas. Isso é super útil para criar exibições limpas e focadas.

Aqui estão algumas opções úteis:

• Mostrar campos específicos: Para mostrar apenas certas colunas, adicione um atributo fields com os IDs dos campos do seu formulário. Por exemplo, para mostrar apenas os campos com os IDs 1 e 3, você usaria:
  [wpforms_entries_table id="123" fields="1,3"]
• Limitar o número de entradas: Para mostrar apenas as 5 entradas mais recentes, adicione o atributo number: [wpforms_entries_table id="123" number="5"]

Você pode encontrar o ‘ID do Campo’ de qualquer campo abrindo seu formulário WordPress no construtor WPForms e clicando nesse campo. O ID é mostrado no topo do painel de configurações à esquerda.

Passo 3: Adicionando o Shortcode à Sua Página

Para adicionar um shortcode, simplesmente crie uma nova página ou edite uma existente.

Em seguida, vá em frente e adicione um bloco de ‘Shortcode’.

Em seguida, basta adicionar seu shortcode ao bloco.

Com isso feito, você pode visualizar sua página do WordPress e clicar no botão ‘Publicar’ no topo.

E é só isso!

Veja como a prévia das nossas entradas de formulário ficou no front-end:

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

Dica Bônus: Criando Formulários em Conformidade com o GDPR

O Regulamento Geral de Proteção de Dados (GDPR) é uma lei da União Europeia que dá às pessoas mais controle sobre seus dados pessoais. Se o seu site coleta informações de usuários, especialmente por meio de formulários, é importante seguir essas regras.

Para tornar seus formulários compatíveis com o GDPR, você deve:

1. Obtenha consentimento explícito: Pergunte aos usuários se tudo bem armazenar e usar suas informações pessoais.
2. Atender às solicitações de acesso: Permita que os usuários vejam as informações pessoais que você tem sobre eles.
3. Honrar solicitações de exclusão: Permita que os usuários solicitem a exclusão de seus dados do seu site.

Para mais detalhes, você pode conferir nosso guia sobre como criar formulários compatíveis com GDPR no WordPress. Ele responderá a todas as suas perguntas em linguagem fácil de entender.

Perguntas Frequentes sobre Exibição de Entradas de Formulário no WordPress

Posso exibir entradas de formulário sem um plugin?

Sim, mas é muito técnico. Você precisaria escrever código PHP e SQL personalizado para consultar seu banco de dados do WordPress e exibir os resultados. Usar um plugin como Formidable Forms ou o método de snippet de código WPForms é muito mais fácil e seguro para a maioria dos usuários.

É seguro exibir dados enviados por usuários em meu site?

Pode ser, mas você precisa ter cuidado. Sempre obtenha consentimento explícito dos usuários antes de tornar seus dados públicos.

Além disso, é muito importante moderar as submissões antes que elas apareçam em seu site. Você deve revisar cada entrada para evitar que conteúdo inadequado seja publicado.

Regra geral: Nunca exiba publicamente informações pessoais sensíveis como nomes completos, endereços de e-mail, números de telefone ou endereços residenciais sem permissão explícita, caso a caso.

Como posso estilizar a aparência das entradas do meu formulário?

Ambos os métodos neste guia permitem que você estilize as entradas. O add-on Visual Views do Formidable Forms tem configurações integradas para cores, fontes e layout. O método de tabela do WPForms produz uma tabela HTML básica que você pode estilizar com CSS personalizado para combinar com seu tema.

Tutorial em Vídeo: Exibindo Entradas de Formulário do WordPress

🎬 Veja em ação! Assista ao nosso tutorial em vídeo para exibir entradas de formulário do WordPress em seu site:

Recursos Adicionais para Usar Formulários do WordPress

Esperamos que este artigo tenha ajudado você a aprender como exibir entradas de formulário do WordPress em seu site.

Em seguida, você também pode querer ver nossos outros guias úteis sobre:

• Como Criar um Formulário de Pedido Online
• Como Adicionar um Campo de Código de Cupom aos Seus Formulários do WordPress
• Como Adicionar Autocompletar para Campos de Endereço no WordPress
• Maneiras de Usar Lógica Condicional em Formulários do WordPress
• Como Bloqueei 18.000 Ataques de Spam de Leads no Meu Formulário WordPress
• Guia Definitivo sobre o Uso de Formulários do WordPress

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