| Índice | ||
|---|---|---|
|
Olá! Este tutorial ensina a criar formulários dentro do Wordpress. Para este tutorial estamos usando o Contact 7, um plugin que, além de oferecer uma variedade de campos e customização fácil do email a ser enviado, é compatível com um outro plugin de extração de relatório de formulários enviados, o “CRM Entries“
Atenção: recomendamos que o formulário seja antes criado em uma página de testes. Após estar pronto, só precisa copiar o elemento para a página desejada.
Criando o formulário
Antes de criar o formulário, tenha um rascunho dos campos que serão usados, e a ordem dos mesmos.
Para criar o formulário, procure por esta opção na barra lateral esquerda de seu Wordpress:
Para editar um formulário, apenas pouse o mouse em cima do formulário existente, e clique em “Editar“. Vamos criar um novo. Procure pela opção “Adicionar novo“, geralmente no topo da página.
Ele já virá preenchido com algumas opções bastante comuns de formulários de contato. Vamos usar como exemplo.
OBS: este campo de texto para inserção dos campos de formulário aceita HTML. Então se você estiver familiarizado com HTML, conseguirá fazer algumas customizações a mais, como colocar campos lado a lado, com tamanhos personalizados, cores de destaque…
Você verá essa seção, que são as opções de campos que o Contact 7 oferece. São muitas opções, e ao selecionar cada uma, ela dará uma gama de personalizações para suas necessidades. Vamos selecionar como exemplo um campo de texto. Repare na posição do meu cursor, circulada abaixo.
...
Selecionei a opção de campo de texto e fiz as seguintes alterações:
E ao clicar em “Inserir tag“, o Contact 7 criou o campo de texto exatamente onde estava meu cursor.
Isso permite uma realocação fácil de campos dentro do formulário. Cercando com as tags “label“ de HTML…
...
Feitas as alterações necessárias, só precisa salvar o formulário.
Inserindo o formulário na página
Para inserir o formulário na página, edite a página desejada, e adicione o elemento indicado abaixo.
...
Será aberto um menu dropdown com os formulários existentes. Vamos escolher “Formulário de teste“. Salve as mudanças, e visualize as alterações ou salve a página.
Visualizando a página…
...
Configurando template de email de formulário
Criado o formulário, é hora de configurar o formato do email para recebimento do mesmo.
Vamos voltar para a edição do formulário na seção mostrada no início de nosso manual, na aba destacada abaixo.
Primeiramente edite essas informações iniciais; pode remover os campos conforme precisar.
Enquanto o formulário está em fase de testes, é bom inserir seu endereço de email institucional no campo “Para“, para receber os que forem enviados.
...
E na seção abaixo, temos o corpo de email. Repare como ele chama os campos do formulário para preencher as informações no email pelo nome; no caso então, para que ele mostre o texto do meu campo customizado criado mais acima, preciso chamar a informação pelo campo “[text-377]”.
Em seguida, temos a seção de anexos, onde você disponibiliza arquivos para download que foram enviados. São chamados da mesma forma que os campos acima. Um exemplo comum de aplicação seria um formulário de “Trabalhe conosco“, e o anexo seria o currículo do candidato.
...
Em seguida, só precisa salvar o formato do email.
SMTP, CRM Entries e envio do formulário
Se o SMTP em seu Wordpress não estiver corretamente configurado, ele não fará o envio dos formulários para o email desejado, disparando uma mensagem de erro.
...
Isso significa que o formulário foi perdido?? Não! (Ufa!)
Dentro do plugin “CRM Entries“, o formulário fica disponível para conferência e extração de relatório. Você verá como fazer essa extração no tutorial do link a seguir: https://datacakebr.atlassian.net/wiki/x/AwAweQ .
Mas esta não é a situação ideal, visto que a mensagem de erro ainda aparece. O ideal é que sejam verificadas e corrigidas as configurações de SMTP do seu site.
Caso o SMTP esteja configurado corretamente, ele vai permitir o envio do email.
...
Caso precise configurar seu SMTP dentro do Wordpress, siga este tutorial: https://datacakebr.atlassian.net/wiki/x/FwAZgw
Esperamos que o tutorial tenha ajudado!
At.te. Equipe Datacake.