/
CriaĆ§Ć£o de formulĆ”rios (Contact 7)

CriaĆ§Ć£o de formulĆ”rios (Contact 7)

Owned by Gabriel Sacata Aranda
Last updated: ago. 09, 2024
5 min read

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.

Related content