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

## 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="/files/7HfrF0jZ4IAIpt2VWMAQ" 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="/files/hipGcUQi8wubvZO20jDK" alt=""><figcaption><p>Configurando o trigger de Form</p></figcaption></figure> <figure><img src="/files/bAUCOhyYrjdihPXug4wr" 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="/files/OtUWfpAO9FuCs3M76BjV" 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="/files/crqtvlhxKDMqdLOqxIvd" alt=""><figcaption><p>Log de sucesso</p></figcaption></figure> <figure><img src="/files/gsMXt58FegZ300SyTtFe" 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="/files/keYl09kxINqUzAMU9Xm8" alt=""><figcaption></figcaption></figure> <figure><img src="/files/sXAgxV6AO7BlZFgVC2nA" 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="/files/aMn4euH90MUMUicoX2X6" 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="/files/JQ4Sh1PTz5VU7mZxSYrZ" alt=""><figcaption><p>Aplicando um template</p></figcaption></figure> <figure><img src="/files/mEuZKFPejwBpRIq4sRH6" 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: Querying This Documentation

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

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

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

The question should be specific, self-contained, and written in natural language.
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.