Como criar um formulário de contato usando o Formspree

Você pode usar vários métodos em seu site para permitir que os usuários enviem e-mails com segurança para você. Um exemplo é usar o atributo mailto em um formulário de contato. O atributo mailto abre um aplicativo de correio instalado para o usuário inserir uma mensagem.

Para uma melhor experiência, considere integrar uma ferramenta como o Formspree. O Formspree atua como intermediário, registrando os dados do formulário e enviando-os para o endereço de e-mail especificado.

O que é Formspree e como funciona?

Formspree é um serviço de e-mail que você pode integrar em um formulário de contato personalizado. Ao fazer login no Formspree, você pode especificar seu endereço de e-mail de destino para um formulário. O Formspree lida com envios de formulários em seu nome. Ele permite que você

O Formspree gerará um endpoint, que você precisará adicionar ao seu formulário personalizado. Quando um usuário pressiona o botão "Enviar", o formulário usará o endpoint para chamar o serviço de API do Formspree. Isso gerará um e-mail com o conteúdo do formulário de contato.

O Formspree enviará este e-mail para o e-mail de destino que você listou em sua conta do Formspree. Em seguida, você receberá o e-mail em sua caixa de entrada. Sua conta do Formspree também tem um local onde você pode visualizar seus envios de formulário de contato.

Para registrar seu e-mail no Formspree, faça login e insira o endereço de e-mail de destino do seu formulário.

1. Logar em Formspree. Se você não tiver uma conta, precisará inserir seu endereço de e-mail e uma senha. Registre-se usando o endereço de e-mail para o qual deseja que o formulário de contato envie os envios. Você também pode precisar verificar esse endereço de e-mail durante o processo de inscrição.
2. Quando o processo de inscrição estiver concluído, a página "Formulários" será aberta. Clique em Nova forma.
3. Digite qualquer nome para seu formulário de contato e deixe as configurações padrão do projeto. Digite o endereço de e-mail de destino no campo "Enviar e-mails para". É aqui que o Formspree enviará seus envios de formulário de contato. Depois de concluído, clique em Criar formulário.
4. O Formspree fornecerá um endpoint e exemplos de como usá-lo. Você precisará adicionar esse ponto de extremidade ao seu formulário de contato personalizado em seu site (mais sobre isso posteriormente).
5. Por padrão, o Formspree armazena seu formulário em um projeto chamado "Meu primeiro projeto". Se você quiser mudar o nome disso, volte para a página "Formulários". Clique em Definições ao lado do nome do projeto.
6. Aqui, você pode alterar o nome do seu projeto para outra coisa. Por exemplo, você pode renomeá-lo para ter o mesmo nome do seu site. Você também pode adicionar o URL do seu site.

Você precisará adicionar o endpoint fornecido pelo Formspree no formulário de contato no código do seu site.

1. Adicione o endpoint ao atributo "action" do formulário. Isso fará com que o navegador de um usuário envie o formulário para esse URL quando ele o enviar.

   <ação do formulário ="https://formspree.io/f/xjvlaqpe" método="PUBLICAR">
   <!-- Seu formulário aqui -->
   <tipo de botão ="enviar" classe="botão"> Enviar </button>
   </form>

2. Adicione entradas ao seu formulário. Você pode usar este formulário de exemplo que usa a estrutura CSS do Bootstrap:

   <ação do formulário ="https://formspree.io/f/mbjqjrdl" classe="extra-preenchimento" método="PUBLICAR">
   <classe div="grupo de formulários">
   <etiqueta para ="responder a"> Seu endereço de email </label>
   <tipo de entrada ="o email" classe="controle de forma" id="responder a" nome="_responder a" ngModel="responder" ária-descritapor="e-mailAjuda" espaço reservado="[email protected]">
   <ID pequeno ="e-mailAjuda" classe="form-text text-muted"> Seu e-mail não será compartilhado com mais ninguém. </small>
   </div>
   <classe div="grupo de formulários">
   <etiqueta para ="mensagem"> Sua mensagem </label>
   <nome da área de texto ="mensagem" estilo="altura: 200px" classe="controle de forma" id="mensagem" espaço reservado="Ei! EU'Estou entrando em contato com você porque..."></textarea>
   </div>
   <tipo de botão ="enviar" classe="botão"> Enviar </button>
   </form>
   

Para testar se o Formspree está funcionando, envie uma mensagem para si mesmo usando o formulário de contato, pressione Enviar, e verifique a caixa de entrada do seu e-mail.

1. Execute seu site e abra a página que contém o formulário de contato. Digite uma mensagem no formulário de contato e pressione Enviar.
2. Você receberá a mensagem do formulário de contato em sua caixa de entrada.
3. Se você voltar ao Formspree, clique no botão Envios aba. Aqui você também poderá ver as mensagens enviadas do seu formulário de contato.

Formspree é um dos muitos serviços que você pode usar para integrar um formulário de contato personalizado ao seu site. Ele permite que você comece rapidamente a aceitar o feedback do usuário sem ter que se preocupar com os detalhes do back-end.

Se você é novo na criação de formulários com HTML e JavaScript, também pode saber mais sobre a validação de formulários do lado do cliente. Isso ajuda a garantir que seus formulários de contato possam validar todas as entradas do usuário.

Sobre o autor

Sharlene von Drehnen (9 Artigos Publicados)

Sharlene é Tech Writer na MUO e também trabalha em tempo integral em Desenvolvimento de Software. Ela é bacharel em TI e tem experiência anterior em Garantia de Qualidade e tutoria universitária. Sharlene adora jogar e tocar piano.

Mais de Sharlene Von Drehnen