[User Story] Criar uma página de contato

[todo]

Contexto

Não há nenhuma página de contato no site Educodar. É importante para os visitantes do site entrar em contato diretamente com Educodar. Este user story irá ajudar Educodar nos termos de partnership e marketing.

Entrega de Valor

Como uma visitante de site Educodar
Eu quero ter acesso e preencher um formulário de contato
Dessa forma Eu posso obter respostas para minhas perguntas sobre Educodar.

Escopo

Nós precisamos criar uma nova página para formulário de contato.

---

Critérios de Aceitação

AC1

Dado que visitante está navegando pelo site Educodar
Quando a pessoa navega para a página "Contato"
Então a pessoa deve encontrar o formulário com os seguintes campos:

• Campo de texto de nome completo (obrigatório), com tamanho mínimo de 5 e máximo de 214 caracteres.
• Campo de texto de e-mail (obrigatório), com tamanho mínimo de 3 e máximo de 254 caracteres.
• Campo de mensagem (obrigatório), com tamanho mínimo de 15 e máximo de 1024 caracteres.
• Botão de envio com texto "Enviar mensagem."

AC2

Dado que visitante de site não colocou caracteres suficientes no campo "Mensagem"
Quando a pessoa perde o foco no campo "Mensagem"
Então a pessoa deve receber uma mensagem de aviso: "Você terminou de escrever a mensagem? Por favor, escreva pelo menos 15 caracteres"

AC3

Dado que visitante do site preencheu a quantidade mínima de caracteres no campo "Mensagem"
Quando a pessoa clica em "Enviar Mensagem"
Então mensagem de contato deve ser enviado e usuário deve ver a mensagem de sucesso: "Sua mensagem foi enviada. Gratidão por entrar em contato com a gente".

AC4

Dado que visitante do site começou a preencher o formulário de contato
Quando a pessoa tenta sair ou recarregar a página
Então o navegador deve perguntar se a pessoa realmente deseja sair

AC5

Dado que visitante do site não preencheu o campo de e-mail corretamente
Quando a pessoa perde foco nesse campo ou tenta clicar em "Enviar mensagem"
Então a pessoa deve ver a mensagem de validação: "Por favor, confira se você digitou seu e-mail corretamente"

AC6

Dado que visitante do site está tentando preencher o campo de e-mail comm mais de 254 caracteres.
Quando a pessoa perde o foco do campo ou tenta clicar em "Enviar mensagem"
Então a pessoa deve ver a mensagem de erro: "Parece que o e-mail que você informou é muito longo. Por favor, confira o campo de e-mail"

AC7

Dado que visitante do site preencheu os campos do formulário corretamente e a conexão de Internet foi perdida.
Quando a pessoa tenta enviar o formulário de contato
Então a pessoa deve ver a mensagem de erro: "Ops! Tivemos um problema ao enviar sua mensagem. Por favor, tente novamente"

---

🎨 Contexto adicional (como mockups visuais)

• Adicionar mockups visuais.

Aprovações de versões

• 1.0: User story (in English) refined and approved by @jimmyandrade, @LucasCarvalhais and @mrsimas on July 25, 2019;
• 2.0: User story (em Português) refinada e aprovada por @jimmyandrade, @LucasCarvalhais e @mrsimas em 6 de agosto de 2019.

web/src/pages/codigo-de-conduta.js

Lines 39 to 44 in 842b5f8

	{/* @todo Create a contact us page */}
	<p>
	Você pode conversar diretamente com a organização ou{" "}
	<a href="mailto:[email protected]">
	entrar em contato conosco
	</a>{" "}

---

This issue was generated by todo based on a todo comment in 842b5f8 when #215 was merged. cc @educodar.