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.
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 email de recebimento 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.
...
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]”.