Criação de formulÔrios (Contact 7)

Criação de formulÔrios (Contact 7)

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:

Ā 

image-20240809-144714.png

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.

Ā 

image-20240809-144928.png

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.

image-20240809-145611.png

Selecionei a opção de campo de texto e fiz as seguintes alterações:

Ā 

image-20240809-145829.png

E ao clicar em ā€œInserir tagā€œ, o Contact 7 criou o campo de texto exatamente onde estava meu cursor.

Ā 

image-20240809-145925.png

Isso permite uma realocação fĆ”cil de campos dentro do formulĆ”rio. Cercando com as tags ā€œlabelā€œ de HTML…

image-20240809-150302.png

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.

image-20240809-150509.png

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.

Ā 

image-20240809-150743.png

Visualizando a pĆ”gina…

image-20240809-150819.png

Ā 

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.

Ā 

image-20240809-151027.png

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.

image-20240809-151304.png

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]ā€.

Ā 

image-20240809-152615.png

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.

image-20240809-152814.png

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.

image-20240809-152953.png

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.

image-20240809-192138.png

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.