Entrar Inscrever-se
Webflow

Integrando Formulários Webflow com Rowy: Guia Completo para Gerenciamento Avançado de Dados

Xavier

• 7 min read

Os formulários são um componente vital de qualquer website interativo, servindo como a principal ponte de comunicação entre visitantes e proprietários de sites. Embora o Webflow ofereça uma maneira intuitiva de criar formulários, gerenciar as submissões e integrá-las de forma flexível com um backend pode apresentar desafios, especialmente em relação a limites de submissão e tipos de dados. É aqui que o Rowy, uma plataforma low-code que transforma o Firestore (um banco de dados NoSQL do Google Firebase) em uma interface semelhante a uma planilha, surge como uma solução poderosa.

Este artigo detalha como enviar submissões de formulários do Webflow diretamente para o Rowy, permitindo não apenas contornar limitações, mas também desbloquear um gerenciamento de dados mais robusto e flexível. Exploraremos desde a configuração básica até funcionalidades avançadas, como o tratamento de diferentes tipos de dados e o uso de parsers de webhook.

Por que Integrar Webflow com Rowy para Gerenciamento de Formulários?

A integração de formulários do Webflow com o Rowy oferece vantagens significativas sobre o sistema de gerenciamento de formulários nativo do Webflow. Compreender esses benefícios é crucial para decidir se essa abordagem é adequada para o seu projeto.

Superando Limites de Submissão Nativos do Webflow

Muitos planos do Webflow impõem limites ao número de submissões de formulários que podem ser processadas nativamente. Ao direcionar as submissões para o Rowy, que utiliza o Firestore como backend, você efetivamente obtém submissões ilimitadas, pois não estará utilizando o mecanismo de formulários do Webflow para armazenamento. Isso é particularmente útil para sites com alto tráfego ou campanhas que geram um grande volume de leads.

Flexibilidade e Gerenciamento de Dados como um Banco de Dados Real

Por padrão, as submissões de formulários no Webflow não são tratadas como itens de um Sistema de Gerenciamento de Conteúdo (CMS) ou como entradas diretas em um banco de dados flexível. Com o Rowy, cada submissão de formulário pode se tornar uma linha em uma tabela do Firestore, permitindo que você visualize, edite, filtre e manipule esses dados com a mesma facilidade de uma planilha, mas com o poder de um banco de dados NoSQL. Isso abre portas para automações, integrações com outras ferramentas e uma análise de dados mais profunda.

Suporte a Diversos Tipos de Dados com Rowy

O Rowy, aproveitando a flexibilidade do Firestore, permite o uso de uma variedade muito maior de tipos de dados do que os formulários padrão do Webflow. Por exemplo, se você precisar que usuários submetam um valor de cor específico através de um seletor de cores, ou um valor booleano (verdadeiro/falso) através de um checkbox, o Rowy pode armazenar e apresentar esses dados de forma nativa e intuitiva, algo que seria mais complexo de gerenciar apenas com o Webflow.

Configuração Básica: Enviando Dados do Webflow para o Rowy em Minutos

Conectar seu formulário Webflow ao Rowy é um processo surpreendentemente rápido. Siga estes passos para ter sua integração funcionando em pouco tempo.

Passo 1: Preparando a Tabela no Rowy

Primeiro, acesse seu workspace no Rowy:

  1. Clique no botão '+' para criar uma nova tabela.
  2. Escolha 'Primary collection' como tipo de tabela e crie uma nova coleção. Dê um nome significativo, como WebflowForms.
  3. Defina um nome para a tabela que será exibido na interface do Rowy.
  4. Inicialmente, adicione uma coluna básica para teste. Por exemplo, uma coluna chamada name do tipo 'Short Text'.

Passo 2: Criando o Webhook no Rowy

O webhook será o endpoint que receberá os dados do Webflow.

  1. Na sua tabela recém-criada no Rowy, clique no ícone de Webhooks (geralmente um ícone de gancho ou corrente) na barra de ferramentas superior.
  2. Clique em 'Add webhook'.
  3. Selecione o tipo 'Basic'.
  4. Dê um nome ao seu webhook, por exemplo, webflow_webhook.
  5. Certifique-se de que o endpoint do webhook está ativado.
  6. Copie a 'Endpoint URL' gerada. Você precisará dela para configurar o Webflow.
  7. Para a configuração básica, não é necessário alterar 'Verification', 'Conditions' ou 'Parser'.
  8. Clique em 'Add' e depois em 'Save & Deploy'.

Passo 3: Configurando o Formulário no Webflow

Agora, vá para o seu projeto no Webflow:

  1. Selecione o bloco do formulário (Form Block) que você deseja integrar.
  2. Nas configurações do formulário (Form Settings), encontre o campo 'Action'. Cole a URL do webhook do Rowy que você copiou anteriormente neste campo.
  3. Altere o campo 'Method' para 'POST'.
  4. É importante que os nomes dos campos de entrada (Input fields) no seu formulário Webflow correspondam às chaves (Field Keys) das colunas que você criou ou espera no Rowy. Por exemplo, se você tem uma coluna 'name' no Rowy, o campo de texto correspondente no Webflow deve ter o 'Name' (nas configurações do campo) definido como name.
  5. Anote o 'ID' do seu formulário Webflow (encontrado nas configurações do Form Block). O padrão pode ser algo como wf-form-Your-Form-Name. Você precisará dele para o código personalizado. Por conveniência, o vídeo sugere usar wishlist-form como ID para corresponder ao código de exemplo.

Passo 4: Adicionando o Código Personalizado ao Webflow

Para que o formulário Webflow envie os dados para o endpoint externo (Rowy) e manipule a resposta, é necessário um pequeno trecho de código JavaScript.

  1. Nas configurações da página do Webflow onde o formulário está localizado, vá para a seção 'Custom Code'.
  2. No campo 'Before </body> tag', cole o seguinte código JavaScript (este código pode ser encontrado no blog do Rowy ou na descrição do vídeo original):
    <script type="text/javascript">
    $('#wishlist-form').each(function(i,el){
    form = $(el);
    form.submit(function(e) {
    // Impede o envio padrão do formulário
    e.preventDefault();
    form = $(e.target);
    const formData = new FormData(e.target);
    const submissionData = {};
    // Extrai os dados do formulário
    for (const [key, value] of formData) {
    submissionData[key] = value;
    }
    fetch(form.attr('action'), {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(submissionData)
    }).then((response) => {
    // Lógica para sucesso (ex: mostrar mensagem de sucesso)
    form.hide(); // Opcional: esconde o formulário
    // Webflow usa classes como .w-form-done e .w-form-fail
    form.siblings('.w-form-done').show(); // Mostra mensagem de sucesso do Webflow
    form.siblings('.w-form-fail').hide(); // Esconde mensagem de falha do Webflow
    }).catch((err) => {
    console.log(err);
    // Lógica para falha (ex: mostrar mensagem de erro)
    form.siblings('.w-form-done').hide(); // Esconde mensagem de sucesso do Webflow
    form.siblings('.w-form-fail').show(); // Mostra mensagem de falha do Webflow
    });
    });
    });
    </script>
    Importante: Certifique-se de que o seletor $('#wishlist-form') no código corresponda ao ID do seu formulário Webflow. Se você usou um ID diferente, atualize-o no código.
  3. Salve as alterações e publique seu site Webflow.

Testando a Integração

Acesse a página publicada do seu site Webflow, preencha o formulário e envie. Se tudo foi configurado corretamente, você deverá ver a mensagem de sucesso do Webflow, e os dados aparecerão como uma nova linha na sua tabela do Rowy.

Explorando Funcionalidades Avançadas com Rowy e Webflow

Com a integração básica funcionando, podemos explorar como o Rowy lida com cenários mais complexos e tipos de dados variados.

Monitorando Submissões com Logs de Webhook no Rowy

Se algo não estiver funcionando como esperado, ou se você simplesmente quiser inspecionar os dados brutos que estão chegando, o Rowy oferece logs detalhados para seus webhooks.

  1. No Rowy, clique no ícone de engrenagem (Configurações da Tabela) no canto superior direito.
  2. Acesse a aba 'Cloud logs' e, em seguida, a sub-aba 'Webhooks'.
  3. Aqui você verá uma lista das requisições recebidas pelo seu webhook, incluindo o corpo (body) da requisição. Isso é extremamente útil para depuração, permitindo ver exatamente quais dados o Webflow está enviando.

Trabalhando com Tipos de Dados Específicos no Rowy

Vamos ver como configurar campos booleanos e de cor.

Campos Booleanos (Verdadeiro/Falso) com Rowy

Suponha que você queira adicionar um campo de checkbox ao seu formulário, como 'Aceito os termos'.

  1. No Rowy: Adicione uma nova coluna à sua tabela. Dê um nome (ex: aceito_termos) e escolha o tipo 'Toggle'. Este tipo armazena valores booleanos (true/false).
  2. No Webflow: Adicione um elemento 'Checkbox' ao seu formulário. Nas configurações do Checkbox Field, defina o 'Name' para corresponder à chave da coluna no Rowy (aceito_termos). O Rowy é inteligente o suficiente para interpretar o valor padrão de um checkbox marcado (geralmente 'on') como true.
  3. Publique as alterações no Webflow. Ao submeter o formulário com o checkbox marcado, você verá o valor true (ou um toggle ativado) na coluna correspondente no Rowy.

Campos de Cor com Rowy e o Parser de Webhook

Adicionar um seletor de cores é um pouco mais avançado, pois requer uma pequena personalização no parser do webhook no Rowy.

  1. No Rowy: Adicione uma nova coluna chamada cor_preferida (por exemplo) e selecione o tipo 'Color'.
  2. No Webflow: Como o Webflow não possui um campo de entrada de cor nativo, use um elemento 'Embed' dentro do seu formulário. Insira o seguinte código HTML:
    <input type="color" name="cor_preferida" value="#FF8000">
    O atributo name deve corresponder à chave que você usará no Rowy. O value define uma cor padrão.
  3. Personalizando o Parser no Rowy: O campo 'Color' do Rowy espera os dados em um formato específico: um objeto com uma chave hex. O valor enviado pelo input HTML type="color" é apenas a string hexadecimal (ex: #FF8000). Precisamos transformar isso.
    1. Volte para as configurações do seu webhook no Rowy.
    2. Expanda a seção 'Parser (3)'.
    3. Você verá um código JavaScript. Por padrão, ele pode ser algo como:
      const basicParser = async(req, db, ref) => {
      const { body } = req;
      return body;
      }
    4. Modifique este código para reestruturar o dado da cor:
      const basicParser = async(req, db, ref) => {
      const { body } = req;
      const row = {
      ...body, // Mantém todos os outros campos do formulário
      cor_preferida: { hex: body.cor_preferida } // Transforma o campo de cor
      };
      // Remove o campo original 'cor_preferida' se não quiser duplicidade
      // delete row.cor_preferida; // Descomente se a chave original for igual à da coluna Color
      // Porém, se a chave do input HTML (body.cor_preferida) for diferente da chave da coluna Color no Rowy,
      // e você nomeou a coluna Color como 'cor_preferida' no Rowy, a linha acima não é necessária.
      // O importante é que o objeto final tenha `cor_preferida: { hex: 'valor_hex' }` se 'cor_preferida' é a chave da coluna Color.
      // Se você nomeou a coluna Color no Rowy como 'minhaCor', então seria: minhaCor: { hex: body.cor_preferida }
      return row;
      }
      Este código pega o valor hexadecimal de body.cor_preferida e o aninha dentro de um objeto com a chave hex, que é o formato que o campo 'Color' do Rowy espera.
    5. Clique em 'Update' e depois em 'Save & Deploy' no webhook.
  4. Publique o Webflow e teste. A cor selecionada aparecerá corretamente no campo 'Color' do Rowy.

Gerenciando Campos Adicionais

Se o seu formulário Webflow enviar campos que não possuem colunas correspondentes na sua tabela Rowy, esses dados adicionais serão simplesmente descartados por padrão. Isso mantém sua tabela Rowy limpa, contendo apenas os dados que você explicitamente configurou para coletar. Se você precisar desses dados, certifique-se de criar as colunas correspondentes no Rowy antes da submissão.

Conclusão

A integração de formulários do Webflow com o Rowy representa um avanço significativo para usuários que buscam mais poder e flexibilidade no gerenciamento de dados de formulários. Ao seguir os passos detalhados neste guia, você pode não apenas superar limitações comuns, mas também enriquecer suas aplicações web com um backend de dados mais robusto e adaptável às suas necessidades. A capacidade de usar tipos de dados variados e personalizar o parsing das informações abre um leque de possibilidades para coletar e utilizar os dados dos seus usuários de maneira mais eficaz.

Inscreva-se, Fique Atualizado!

Digite seu e-mail
Inscrever-se