Os sites estáticos não precisam se preocupar com código do lado do servidor, estruturas da web ou qualquer coisa desse tipo. No entanto, isso cria um problema – como lidar com conteúdo dinâmico, em particular como adicionar um formulário de contato a um site estático?
Etapa 1: Crie seu formulário HTML
Se você está construindo um site estático, provavelmente já sabe como fazer um formulário HTML, de qualquer forma, aqui está um modelo rápido para você começar:
<form method="POST" target="_blank">
<h2>Contact Us</h2>
<input type="email" name="email" placeholder="enter your email" required>
<input type="text" name="name" placeholder="enter your name" required>
<textarea name="message" cols="30" rows="10"></textarea>
<button>Submit</button>
</form>Se você precisar de mais modelos de formulário, há muitos online, mas aqui está um conjunto de modelos de formulário de contato bootstrap gratuitos que disponibilizei na semana passada.
Etapa 2: lidar com os envios de formulários
A maneira mais fácil de lidar com os envios de formulários é usar um serviço de terceiros. Eu recomendo usar a API de endpoint de formulário 99Inbound porque há um plano gratuito generoso e permite notificações por email e Slack para novos envios.
Você precisará certificar-se de que cada uma das entradas do formulário tenha um nameatributo (é assim que o terminal do formulário identifica os campos do formulário)
Para integrar a API, basta substituir o formulário actionpelo URL do terminal fornecido pelo serviço. Aqui está um exemplo abaixo.
<form action="https://app.99inbound.com/api/e/123456" method="POST" target="_blank">Agora, quando um usuário enviar seu formulário, o envio será tratado pelo 99Inbound.
Alternativa – Role seu próprio back-end
Em vez de usar um serviço de terceiros, você pode criar seu próprio back-end de envio de formulário. Na verdade, existe um ótimo guia para fazer isso aqui no coderwall . Esta abordagem funciona muito bem, mas requer que você execute seu próprio servidor web, o que pode não ser o que você estava tentando fazer com seu site estático!
Embrulhar
Os sites estáticos são uma ótima maneira simples de publicar conteúdo de marketing, blogs e muito mais. Se você precisa lidar com elementos interativos (como formulários!), Há uma variedade de serviços on-line acessíveis ou gratuitos prontos para ajudar. Esperamos que agora você seja capaz de criar um formulário de contato simples, mas poderoso, para seu site estático.