> For the complete documentation index, see [llms.txt](https://docs.floui.io/guia/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.floui.io/guia/artigos/tutoriais/disparos-de-e-mail-apos-um-novo-registro-no-formulario.md).

# Disparos de e-mail após um novo registro no formulário

Crie disparos de e-mails automáticos sempre que um novo cadastro for realizado pelo seu time ou cliente através de um Floui Forms.

## Introdução

Neste tutorial, vamos ensinar a criar e configurar um fluxo de envio de e-mail com SMTP utilizando a plataforma Floui. Ao final desse tutorial, você será capaz de automatizar disparos de e-mail a partir da inclusão de novos registros de formulários.

<figure><img src="https://215079342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F226k0cnPTn1PWu9xHcK8%2Fuploads%2FHKJjDqfQsk3KCzQtAWer%2Fimage.png?alt=media&amp;token=4a662858-f42a-4151-a1ed-eabafe0e397a" alt=""><figcaption></figcaption></figure>

## Orientações

* Neste tutorial iremos precisar de um Forms e uma Database que podem ser criados através do menu esquerdo do seu Workspace. Saiba mais sobre a criação de [Floui Form](/guia/ferramentas/construcao/floui-forms.md) e [Floui Database](/guia/conectores/categorias/servicos-do-floui/floui-database.md).
* Ter uma conta no portal <https://mailtrap.io/>&#x20;
* Criar um novo fluxo.

## Conectores relacionados

1. [Form](/guia/conectores/categorias/triggers/form.md)
2. [Floui Database - Criar registro](/guia/conectores/categorias/servicos-do-floui/floui-database/criar-registro.md)
3. [Condition](/guia/conectores/categorias/conectores-essenciais/condition.md)
4. [Enviar e-mail com SMTP](/guia/conectores/categorias/servicos-externos/smtp/enviar-e-mail-com-smtp.md)
5. [Debbugger](/guia/conectores/categorias/monitoramento/debugger.md)
6. [Logger](/guia/conectores/categorias/monitoramento/logger.md)

## Passo a Passo <a href="#pewk8f3ihh4j" id="pewk8f3ihh4j"></a>

### 1. Iniciando o fluxo

O Floui Forms é uma ferramenta integrada e pode ser usada em diferentes cenários. Neste tutorial, usaremos o conector do tipo trigger para iniciar uma automação sempre que um novo registro for adicionado.&#x20;

Abaixo, podemos observar que ao acessar a URL pública do formulário, saiba mais sobre [Publicação de Forms](/guia/ferramentas/construcao/floui-forms.md#publicacao).&#x20;

<div><figure><img src="https://215079342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F226k0cnPTn1PWu9xHcK8%2Fuploads%2FpVXZkHWfWWNHyn9e2cdn%2Fimage.png?alt=media&amp;token=6c347951-b161-48cb-837a-80398c047d6b" alt=""><figcaption><p>Configurando o trigger de Form</p></figcaption></figure> <figure><img src="https://215079342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F226k0cnPTn1PWu9xHcK8%2Fuploads%2Fsp2g3Ffwg51xn9iavIuB%2Fimage.png?alt=media&amp;token=f3c22a4b-cf36-4c49-8a87-33c21ff74756" alt=""><figcaption><p>Entrada de dados através do Forms</p></figcaption></figure></div>

### 2. Salvando os dados

Agora, precisamos salvar os dados recebidos pelo formulário. Para isso, usaremos o conector do Floui Database, o banco NoSQL interno do Floui.

<figure><img src="https://215079342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F226k0cnPTn1PWu9xHcK8%2Fuploads%2FZDnEZWPd6d9cTPIJLtCH%2Fimage.png?alt=media&amp;token=de47eef1-866f-4c25-8eb7-1a057ee8ad00" alt=""><figcaption><p>Configurando o conector para cadastro de novos usuários</p></figcaption></figure>

Na coluna **Campo** foi adicionado cada atributo criado no Floui Database. Já na coluna **Valor**, passamos como parâmetro os dados enviados através do novo registro feito em nosso formulário.&#x20;

### 3. Verificando o retorno do banco <a href="#id-1auc7yt3w5af" id="id-1auc7yt3w5af"></a>

Antes de realizarmos a notificação por e-mail, precisamos garantir de fato que os dados foram salvos no banco de dados. Para isso, podemos monitorar o log exibido pelo componente **Floui Database - Criar registro.**

<div><figure><img src="https://215079342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F226k0cnPTn1PWu9xHcK8%2Fuploads%2FleKPPMwoZhRMTaNzLiE8%2Fimage.png?alt=media&amp;token=72158e14-2761-4b4a-a1a5-55b7c42ec5a8" alt=""><figcaption><p>Log de sucesso</p></figcaption></figure> <figure><img src="https://215079342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F226k0cnPTn1PWu9xHcK8%2Fuploads%2FKbF6XYewt9pJgFRPobzB%2Fimage.png?alt=media&amp;token=869a15c8-c1f3-4e64-aa38-340622db701a" alt=""><figcaption><p>Log de erro</p></figcaption></figure></div>

Nas imagens acima podemos verificar dois dos cenários possível, uma requisição com sucesso aonde os dados foram salvos no banco e o outro cenário aonde um problema foi identificado pelas regras de negócio do banco.

No cenário de sucesso, além do objeto **data** contendo todos os dados cadastrados, podemos observar a adição de alguns atributos exclusivos aos bancos de dados do tipo NoSQL.

*\_id, table, updated\_ad e created\_at.* Neste exemplo, usaremos o \_id para validar a existência de um novo regitro.

### 4. Criando a validação

Os componentes de validação chamados de **Condition** recebem como parâmetro uma expressão JavaScript. Em lógica de programação, por padrão, um parâmetro if sempre será comparado com um booleano do tipo true.

<div><figure><img src="https://215079342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F226k0cnPTn1PWu9xHcK8%2Fuploads%2Fjh7R5RXEyNEiuA9yMF0m%2Fimage.png?alt=media&amp;token=9acd5a18-9464-4c78-93ec-c09606161beb" alt=""><figcaption></figcaption></figure> <figure><img src="https://215079342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F226k0cnPTn1PWu9xHcK8%2Fuploads%2FWseXRcJ5U8M8K1bugjDw%2Fimage.png?alt=media&amp;token=ffe21696-2492-4d92-b9d3-826d7d10720b" alt=""><figcaption></figcaption></figure></div>

Com isso, definimos duas vertentes para as opções possíveis. Caso tenha sucesso, partimos para o envio de e-mail com os dados cadastrados. E em caso de erro, podemos adicionar os dados em uma fila e tratar posteriormente.

### 5. Configurando uma conta

O conector responsável pelo envio automatizado de e-mails é o [**Enviar e-mail com SMTP**](/guia/conectores/categorias/servicos-externos/smtp/enviar-e-mail-com-smtp.md)**.** Adicione uma nova conta de serviço acessando o menu do Workspace > Contas de Serviço > + Criar conta do tipo SMTP Account.&#x20;

<div align="center"><figure><img src="https://215079342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F226k0cnPTn1PWu9xHcK8%2Fuploads%2FIYYGJZSLQsUcS0D7gCWx%2Fimage.png?alt=media&amp;token=dc2544c4-d0c1-45a9-a456-ebbaf0785756" alt="" width="473"><figcaption><p>Configurando uma conta SMTP no painel Contas de serviço</p></figcaption></figure></div>

### 6. Enviado e recebendo e-mails

Depois de aplicar seu modelo de HTML e CSS, podendo ser inline ou através das marcações dentro da tag \<style>\</style> e configurar os dados dinâmicos com notações mustache, seu e-mail estará pronto para o envio.&#x20;

Preparamos abaixo duas imagens que ilustram este cenário.

<div><figure><img src="https://215079342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F226k0cnPTn1PWu9xHcK8%2Fuploads%2F8PhfSumwwcKSA65fewwp%2Fimage.png?alt=media&amp;token=419b1729-45f6-4def-bc2b-2d99a5db8bc6" alt=""><figcaption><p>Aplicando um template</p></figcaption></figure> <figure><img src="https://215079342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F226k0cnPTn1PWu9xHcK8%2Fuploads%2FwXMMJK3cP0Oe4EKT6ygs%2Fimage.png?alt=media&amp;token=a008e672-a8e9-484f-9997-660ec4d3479a" alt="" width="522"><figcaption><p>Recebendo o e-mail</p></figcaption></figure></div>

## Conclusão <a href="#id-9fnphym5ght5" id="id-9fnphym5ght5"></a>

Realizar automações se tornou rápido e fácil com o Floui. Em poucos minutos você consegue configurar uma automação que resulta em atualizações para seus clientes compartilhando informações de forma segura e intuitiva.&#x20;

Ficou com dúvidas sobre o processo? Compartilhe com a gente através da abertura de chamados disponível em [https://floui.freshdesk.com](https://floui.freshdesk.com/)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.floui.io/guia/artigos/tutoriais/disparos-de-e-mail-apos-um-novo-registro-no-formulario.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
