Mês: junho 2019

Como gerenciar os campos do formulário?

A primeira etapa consiste em gerenciar os campos que vão aparecer no formulário para o usuário preencher.

Visão geral

Descrição dos itens destacados:

1 - Clique no submenu “Campos” do menu “Strong Testimonials”;

2 - Campos padrões do formulário,

3 - Preview do formulário de depoimento.

Como Editar um campo

Ao clicar em um campo ele irá expandir e você verá a tela mostrada na imagem acima, observe a imagem e veja os principais campos pra você pode editar e o efeito que ele causa na visão do usuário.

Caso você pense que tenha campos demais, é só excluir os que não fazem sentido pra você clicando no botão destacado acima.

Inserindo um novo campo

Caso os campos padrões não supram as suas necessidades, você pode criar novos campos para completarem o seu formulário:

Descrição dos itens acima:

*O tipo do campo determina o que será mostrado no campo, por exemplo, se você escolher o tipo Star rating, aparecerá para o usuário um campo para ele avaliar a empresa, e assim por diante.

1 - Clique no botão Add Novo Campo;

2 - Opções para você estilizar o conteúdo do seu campo, use o tipo de campo text para o usuário preencher novas informações. *caso tenha dúvida sobre o que preencher em cada campo revisite a imagem da seção visão geral desse tópico.

Ótimo! Agora é só você editar, inserir e excluir os campos para deixar o formulário de depoimento com os campos que você precisa.

Principais configurações do formulário de depoimento

Depois de definirmos quais os campos que vão compor o nosso formulário, é hora de fazermos as configurações dos principais comportamentos do formulário como, por exemplo, qual será o e-mail que irá receber a notificação de um novo depoimento, quais mensagens vão aparecer para o usuário quando der certo e quando der errado o envio entre outras ações.

Descrição das etapas destacadas acima:

1 - Acesse o menu Configurações para ver as configurações gerais do plugin;

2 - Acesse a aba Formulários para ter acesso às configurações gerais do formulário;

A partir daqui vamos conhecer os principais blocos de configurações de formulário e o que cada item impacta no funcionamento geral do form.

3 - Seção Forms Labels e Messages

O item 3 configura os textos gerais do form

Required - Se você marcar essa opção, aparecerá no topo do formulário a mensagem que você escrever para destacar quais campos são obrigatórios.

Captcha - Mensagem que irá aparecer caso você opte por utilizar o reCaptcha do google. *Falaremos disse mais adiante.

Submit Button - Mensagem que aparecerá no botão de enviar.

Submission Error - Mensagem que aparecerá caso dê algum erro ao enviar o formulário.

Submission Success - Mensagem que aparecerá se o formulário for enviado com sucesso.

Seção Form Actions

Vamos conhecer agora a seção Form Actions, aqui iremos configurar os principais comportamentos do formulário quando o depoimento for enviado.

Descrição dos passos destacados acima.

1 - Upon Successful Submission

Nessa seção nós iremos configurar o que irá acontecer quando o formulário for enviado.

Display message - Essa opção irá mostrar a mensagem de obrigado que você configurou na seção Form Labels & Messages no item Submission Success.

Redirect to a page - Você pode escolher uma página específica do site para que o usuário seja redirecionado depois de enviar o depoimento.

Redirect to a URL - Você pode escolher uma URL externa para redirecionar o usuário depois de enviar o depoimento.

2 - Posts Status

Aqui definimos se o depoimento será enviado direto para o site (Publicado) ou se será sujeito a aprovação (Pendente). Eu prefiro usar o Pendente para evitar depoimento malicioso ou algo do tipo.

3 - Notification Email

Nesse ponto vamos configurar como que o dono do site irá receber a notificação via e-mail de um novo depoimento.

A melhor opção para essa etapa é a Send an email upon new testimonial submission.

Nela você pode escolher se o e-mail será enviado para o e-mail de administrador cadastrado na instalação do WordPress ou se será enviado para um e-mail diferente, além de ter a possibilidade de montar um e-mail personalizado para o seu cliente (se você estiver desenvolvendo um site pra alguém) para avisar do novo depoimento.

No campo Subject  você coloca o assunto e no campo Message você escreve a mensagem, você pode utilizar as tags para montar um e-mail dinâmico onde cada tag será substituída pela informação que o usuário preencher no formulário.

Seção Form Spam Control

A última etapa das configurações é aonde iremos deixar o nosso formulário mais seguro e protegido contra Spans e boots que estão por toda a internet enviando milhares de e-mails maliciosos através de formulários desprotegidos. Para evitar isso vamos então adicionar uma ou duas camadas de segurança.

Marque a opção Honeypot como Antes para que o Strong testimonials possa adicionar um campo do formulário escondido aos olhos humano, porém, visto e preenchido pelos boots, assim é validado se o campo foi preenchido ou não. Se for preenchido será interpretado como um boot e não será enviado, caso ao contrário será enviado.

A opção Captcha é muito interessante também, caso você queira adicionar mais essa camada de segurança basta clicar na opção Google Captcha by BestWebSoft e configurar as keys do google. Não sabe como fazer isso? eu escrevi um tutorial ensinando como utilizar o plugin de captcha e como gerar as keys do google . O processo é bem simples e rápido, depois de gerar as keys e instalar o plugin, basta clicar em configurações, inserir as suas keys e VRAU!

Agora é só salvar as suas alterações.

Finalizamos aqui então as configurações principais do formulário para coleta de depoimentos de clientes. Vamos avançar para a próxima etapa!

 

Criando a View para o Formulário

Citei anteriormente que este tutorial é a continuação do tutorial de como criar depoimentos de clientes com o Strong Testimonials e lá eu explico detalhadamente sobre as views, sendo assim vou apenas dar uma passada rápida nas principais configurações da view do nosso formulário.

Acesse o menu Views do Strong Testimonial, clique em Add new, informe um nome para a sua view e escolha o mode formulário.

Mais abaixo você encontra a seção Actions e nela iremos definir qual Categoria receberá o depoimento enviado pelo formulário. O processo é bem simples, basta você clicar em cima da(s) categoria(s) desejadas.

Maravilha, agora vamos definir os estilos básicos do nosso formulário, eu deixei o meu com as configurações padrões, mas você pode escolher e testar os estilos que mais se adequam à seu projeto.

Depois de ter feito as configurações da sua view só largar o click no Salvar alterações e continuar seguindo o tutorial, pois, agora iremos abordar o último tópico para finalizar o processo.

Inserindo o formulário no site

Por último e não menos importante é hora de inserirmos o formulário efetivamente no nosso site, até o momento fizemos todas as configurações necessárias para que o formulário de comporte do jeito que queremos e chegou a hora de colocar o “trêm” pra rodar.

Depois de ter salvo as alterações, ainda na mesma tela será criado no topo da página um campo chamado Shortcode, basta copiar o conteúdo deste campo e colar no editor de texto da página que você deseja que o formulário apareça.

 

Segue abaixo um print do meu formulário já no site:

Agora é só testar o envio e ver se ele vai se comportar da maneira esperada. Se você seguiu todos os passos certinho é pra dar tudo certo, caso algo não saia como esperado deixe aí nos comentários que eu terei o maior prazer em ajudar.

Instalação do plugin Strong Testimonials para depoimentos no WordPress

A primeira etapa para inserir depoimentos é você instalar o plugin no seu site, para isso vá no menu Plugin / Adicionar Novo, na barra de pesquisa escreva "Strong testimonials". Clique em instalar e depois em ativar no plugin.

Depois de instalar e ativar o plugin, será criado um item no menu principal do painel chamado "Testimonials".

Lindo de bonito, agora o plugin está instalado e podemos partir pra ação. Ao longo do tutorial iremos passar pelos principais itens do menu mostrado acima.

 

Criar Categorias de depoimentos no WordPress

Particularmente eu gosto de começar o processo criando as categorias principais dos meus depoimentos. As categorias te ajudam a organizar os seus depoimentos e mostrar eles de maneira mais assertiva, por exemplo: Se você vende o Serviço X, é interessante que na página de venda desse produto tenha os depoimentos apenas sobre ele. Isso é possível somente com as categorias.

Descrevendo o processo acima

1 - Clique no menu Categorias do Strong Testimonial;

2 - Insira o nome da sua Categoria;

3 - O slug é nome da sua categoria sem assentos, espaço ou caracteres especiais, esse nome aparece na "url" do site,

4 - Clique em adicionar nova categoria.

Para editar ou excluir uma categoria, basta passar o mouse em cima do item na listagem de categorias e escolher a opção desejada.

Boa pácero, agora é só você criar quantas categorias desejar, nesse meu exemplo eu vou criar apenas uma com o nome Slide de depoimentos gerais, pois no tutorial iremos aprender a inserir os depoimentos em formato de slides.

Criar e configurar uma view para mostrar os seus depoimentos

Após criar a categoria, eu continuo o processo criando a view mais indicada para o projeto que estou desenvolvendo.

Uma view é o modelo geral de todos os depoimentos que fazem parte dela, por exemplo: Eu posso ter uma view para mostrar os depoimentos em formato de slide, outra pra mostrar apenas 3 depoimentos e outra view que será o formulário para o usuário enviar um depoimento. Ou seja podemos ter diversos estilos para mostrar nossos depoimentos e o melhor de tudo, segmentados =D

Vamos ao processo: Descrição dos passos acima: 1 - Clique no item Views no submenu do Testimonials; 2 - Clique em Add New para adicionar uma nova view; 3 - Informe um nome para sua view; 4 - Escolha um tipo para sua view; Um pouco sobre os tipos de view Display -  Mostra seus depoimentos em cards, um ao lado do outro; Slideshow -  Cria um Slideshow para exibir os depoimentos (usarei esse); Formulário - Cria um formulário para o usuário inserir um depoimento; Single Template PRO - Se adquirir a versão PRO, você tem acesso à um acervo com diversos templates prontos criados pela equipe que desenvolveu o plugin. Nessa etapa temos que configurar alguns "Grupos" responsáveis pelo funcionamento da view.

Query

No primeiro grupo nós temos a Query, que é responsável por fazer a consulta nos depoimentos cadastrados com base nas condições dos campos e trazer depoimentos específicos para essa view. Um pouco sobre cada campo: Categorias - Para mostrar depoimentos de uma ou mais categorias específicas, basta escolher a opção select do menu para ter acesso a todas as categorias criadas. *É por esse motivo que eu começo criando as categorias, pois na hora de criar a view eu já escolho a categoria certa. Ordenar -  Para ordem aleatória, escolha "Random", para a ordem ser com base no número definido na hora de cadastrar o depoimento, escolha "Menu order", para mostrar os depoimentos recentes primeiro, escolha "Newerest first" e para mostrar os mais antigos primeiro, escolha "Oldest first". Quantity - Permite você limitar a quantidade de depoimentos que será mostrado nessa view

Slideshow

Nesse grupo iremos fazer as configurações gerais de nosso Slideshow. Um pouco sobre os itens da imagem acima (as configurações acima são as que eu fiz no meu projeto) Show - Aqui nós configuramos como os itens serão mostrados no slide, se você escolher a opção "Single" será mostrados apenas 1 depoimento por slide, caso você queira assim como eu, 3 depoimentos por slide é só escolher a opção "Multiple". A opção Multiple mostra uma caixa para você configurar a quantidade de depoimentos mostrados por slide em cada dispositivo. *se você entende de media query fique a vontade para fazer suas alterações nos breakpoints, caso ao contrário deixe as configurações padrões e só mude a quantidade na coluna "Show" da tabela. Transition - Configura o tempo em que slide ficará parado na tela, qual será animação de transição e quanto tempo ela levará até chegar os novos depoimentos. Behavior - Esse item configura os principais comportamentos do slide e dos controles de navegações - Start automatically - Inicia o slide automaticamente; - Pausa em foco - Pausa a contagem do tempo da transição do slide quando o mouse está em cima de um depoimento; - Stop on interaction - Pausa a contagem do tempo da transição do slide quando há qualquer iteração com o slide; Abaixo dos cheks tem uma opção muito interessante, ela nos permite definir se os "box" onde fica cada depoimento serão da mesma altura ou não. Navigation - Nos permite escolher se queremos que mostre as setas de navegação e se terá paginação. (faça o teste com os estilos para ver qual fica mais legal no seu contexto).

Campos

Nesse grupo nós vamos configurar como e quais informações do nosso cliente será mostrada no depoimento. Vamos conhecer um pouco sobre cada opção desse grupo: Título - Define se irá aparecer no depoimento o título que você inserir na hora de cadastrar um depoimento. *Eu prefiro não colocar pois eu uso os campos personalizados pra isso. Imagem em destaque - Marque esse item se você pretende pedir uma foto para a pessoa que lhe enviar o depoimento. Se você escolher por usar a foto em destaque você pode: - Escolher o tamanho que a imagem será exibida; - Escolher se ao clicar na imagem, ela será exibida em um lightbox ou não; - Escolher a ação caso não tenha foto para algum depoimento. Content - Aqui configuramos o que será exibido sobre o depoimento na listagem - Entire content - Mostra na listagem todo o conteúdo que for cadastrado no depoimento. (se tiver mil linhas, nas listagem aparecerá às mil.) - Automatic excerpt - Pega o começo do depoimento e insere como um resumo na listagem. - Manual excerpt - Permite você criar um resumo manual do depoimento do cliente (caso você tenha uma página de detalhes para o depoimento). * Normalmente eu trabalho com depoimentos pequenos em sites que não tem um página de detalhe do depoimento, eu uso a opção Entire content sabendo que tenho que ter discernimento na hora inserir um depoimento. Campos personalizados - Aqui nós definimos quais informações iremos querer sobre a pessoa que enviar o depoimento, você pode clicar em "Add Field" e conferir as opções de campos que você tem. *Essas opções aparecem na hora de cadastrar um depoimento para a categoria escolhida na view.

Style

No grupo Style nós podemos configurar um pouco da aparência do nosso slideshow. Eu recomendo você testar os itens desse grupo para ver qual modelo pre-pronto mais te agrada. Vou falar um pouco sobre os itens do style: Template - Permite você escolher um dos modelos pre-prontos do plugin ou se manjar de CSS, escolha o template Unstyled para ter mais liberdade de edição; Background - Permite você escolher uma cor de fundo para o item de depoimento. Eu gosto do single color e um cinza bem clarinho #f4f4f4; Font Color - A opção custom, permite você colocar uma cor personalizada para o depoimento, senão será pego a cor padrão do site. Css Classes - Pra quem conhece de CSS é só você inserir uma classe aqui e poderá estilizar os depoimentos tendo essa classe como "pai". Depois de fazer todas suas configurações é só clicar em Salvar Alterações.

Gerenciar depoimentos

Depois de criarmos as categorias, as views, é hora de aprendermos a gerenciar os nossos depoimentos, nesse tópico iremos passar por inserir, editar e excluir um item de depoimento.

Como cadastrar novo depoimento, editar e excluir um já existente

Descrição dos itens acima:

1 - Item do menu que mostra uma visão geral de todos os depoimentos;

2 - Botão para Adicionar um novo depoimento;

3 - Ao passar o mouse em cima de um item cadastrado você terá a opção de Editar e Excluir o item em questão, basta clicar na opção desejada.

Como cadastrar / editar conteúdo do depoimento

Quando você seleciona cadastrar ou editar um item, o processo de criação de conteúdo é o mesmo a diferença é bem simples "um cadastra um novo e outro edita um conteúdo já existente"

Vamos conhecer o processo:

Descrição dos itens destacados na imagem:

1- Informe um nome para o seu depoimento (No meu caso ele não vai aparecer, pois eu defini lá na view para ocultar o título e mostrar somente os campos personalizados);

2 - Escreva o conteúdo do depoimento. (Atente-se ao modo que você definiu na view para mostrar o conteúdo na listagem, eu defini para mostrar tudo o que for escrito aqui);

3 - Informe as informações que você julgou necessárias na hora de criar a sua view;

4 - Marque em qual categoria esse depoimento está inserido;

5 - Insira uma imagem para o depoimento caso você tenha escolhido um template que permite foto (eu costumo usar o tamanho de 250x250px);

Depois de realizar o processo acima é só clicar em Publicar / Atualizar e o seu depoimento estará publicado.

Como mostrar depoimentos na página do seu site

Primeiramente parabéns por ter chego até aqui, você é F#&*@!. Chegamos na reta final do processo de inserir depoimentos no WordPress.

Depois que você já criou sua categoria, sua view e cadastrou seus depoimentos, é hora de mostrarmos eles na página do seu site.

Vamos ao processo:

Clique no menu Views no submenu do menu Testimonials e na listagem que aparecerá copie o conteúdo da coluna Shortcode.

Acesse a página em que deseja inserir os depoimentos e cole o Shortode em um bloco de texto. *Esse ponto varia de qual editor de texto ou pageBuilder você usa, eu utilizo o PageBuilder da SiteOrigin e insiro o código no widget de código HTML.

Confira o resultado do meu exemplo:

Agora eu te convido a  testar os outros templates que o plugin oferece e definir qual fica melhor em seu site. Se você quiser aprender a customizar os depoimentos via CSS e assim ter mais liberdade para deixar o layout exclusivo mudando cores, fontes etc... é só deixar nos comentários e quem sabe o seu pedido é atendido =D

Veja um layout que fiz apenas customizando CSS, codificar pode assustar no começo, mas rapidinho você já consegue fazer coisas bem legais com muito mais liberdade:

E aqui finalizamos mais um tutorial, porém por último e não menos importante segue o fluxo do que é necessário fazer para sair dessa postagem com a consciência de que você fez o melhor que podia fazer para ajudar o blog a alcançar cada vez mais pessoas:

• Se você ficou com alguma dúvida, deseja acrescentar algum ponto no tutorial ou quer compartilhar como o conteúdo te ajudou é só deixar nos comentários;
• Se esse post foi útil para você, compartilhe com a comunidade para que possa ajudar outras pessoas também;
• Quer mais tutoriais como esse? Se inscreva no nosso canal do youtube e em nossa newsletter no blog,
• Quer me fazer chorar de alegria? Se inscreva no nosso canal no Youtube ????

Espero que esse post te ajuda a ter mais clareza sobre como inserir depoimentos no WordPress.

 

Quer continuar sua evolução com o Strong Testimonials?

Clique aqui e aprenda como inserir um formulário de captura de depoimentos com o Strong Testimonials