O que eu queria fazer

Hoje, comecei a desenvolver meu portfólio, e uma coisa que eu realmente queria fazer era criar um formulário de contato através do qual as pessoas pudessem me contatar por e-mail. Como nunca tinha feito isso antes, me perguntei: "Como posso fazer isso?"

A Solução

Então, lembrei de uma biblioteca que eu estava ansioso para aprender, o react-hook-form. Pensei que era a oportunidade perfeita para aprendê-lo, porque ele oferece um controle incrível sobre os dados do formulário. No entanto, eu não tinha ideia de como enviar os dados para o meu e-mail. Depois de fazer uma breve pesquisa, encontrei várias possibilidades, mas uma que me chamou a atenção foi a biblioteca emailjs. Ela era fácil de usar e só exigia uma chave pública, um ID de modelo de e-mail e um ID de serviço do emailjs. Além disso, eu tive que fazer algumas configurações mínimas no VSCode. Neste artigo, eu vou fornecer um exemplo de como configurar o emailjs.

-> Na imagem acima, você pode ver que eu chamo o método register do react-hook-form, que é responsável por acompanhar os dados do formulário. Na próxima imagem, você verá que eu chamo o mesmo método nos meus campos de entrada para atribuir um nome ao campo.

-> O método handleSubmit, também do react-hook-form, lida com o envio do formulário. Passamos nossa outra função, onSubmit, para este método para que ela possa ser executada. A função reset é usada para redefinir o estado do campo de entrada, configurando os valores de volta para strings vazias (" ").

Na função onSubmit, você precisa definir o modelo a ser enviado para o modelo de e-mail do emailjs mencionado anteriormente. As chaves from_name, from_email e message são importantes, como você verá em breve.

Chamamos o emailjs, passando o SERVICE_ID e TEMPLATE_ID que você selecionou no painel do emailjs. Crio duas variáveis para armazenar os valores para mim, e o terceiro parâmetro representa os parâmetros do modelo, que defino na função onSubmit.

Na imagem abaixo, você pode ver o método register para os campos de entrada mencionados anteriormente, assim como as validações do formulário. Isso é basicamente tudo o que você precisa fazer no seu código.

A última coisa importante é garantir que os nomes das variáveis na sua função onSubmit correspondam às chaves do objeto dentro do modelo de e-mail no painel do emailjs, como mostrado abaixo:

Como você pode ver, usei os mesmos nomes para as chaves do meu objeto. É assim que o emailjs reconhece os dados quando são enviados para a API do emailjs.

Isso é tudo por hoje, pessoal!