fornecer aos seus clientes formulários simples de inscrição e registro em seu site é essencial para capturar leads, aumentar sua lista de E-mail e aumentar as vendas gerais.
há apenas um problema: HTML.HTML5 é o código padrão usado para fazer a maioria das páginas da web funcionar. É a linguagem da internet. Mas como qualquer linguagem de programação—de Javascript e jquery A PHP e CSS3—há uma curva de aprendizado íngreme, especialmente se você nunca tocou em nenhum código.
não tema. Estamos aqui para ajudar. Podemos transformá-lo em Bill Gates durante a noite, mas com a ajuda de alguns exemplos úteis, até o final deste tutorial, você estará pronto para criar um formulário de registro básico usando HTML em nenhum momento.
Before Antes de começarmos: quer evitar o incômodo de usar HTML? Com um construtor de formulários como o Paperform, você pode economizar tempo e criar um formulário de registro profissional poderoso em minutos.
5 passos para criar um formulário de registro HTML
você está ocupado, nós sabemos. Há um trilhão de artigos para ler. Filmes Netflix para assistir. Programas de TV para compulsão. Então, vamos direto ao Guia de cinco etapas para criar um formulário de registro em HTML.
Passo 1. Escolha um editor HTML
assim como você precisa de um processador de texto para criar um documento de texto, você precisa de um editor de texto para criar código HTML. Essas ferramentas de desenvolvimento convertem o código estranho e maravilhoso que você digita em um formulário de registro.
existem dezenas (senão centenas) de editores HTML no mercado, a maioria dos quais tendem a oferecer recursos semelhantes. Não vamos aborrecê-lo com os detalhes, mas há algumas coisas importantes que tornarão sua vida mais fácil:
detecção de erros: Destaque automaticamente os erros de sintaxe para facilitar as correções.
preenchimento automático: sugere elementos HTML relevantes com base em alterações anteriores (economiza muito tempo com código longo).
destaques de sintaxe: aplica cores a diferentes tags HTML com base em determinadas categorias para facilitar a leitura e a classificação do seu código.
pesquisar e substituir: Localize e sobrescreva todas as instâncias de um código específico em vez de editar cada uma individualmente.
se você está realmente entrando em codificação, há mais recursos para se preocupar, mas isso deve mais do que cobri-lo para este formulário de registro simples.
qual aplicativo você seleciona é uma questão de preferência pessoal. Quer algo que você pode usar no seu navegador? Tente Codepen. Barebones? Bloco++. Uma interface minimalista e um campo de entrada intuitivo? Texto Sublime todo o caminho.
nosso co-fundador e residente Code-geek, Dean, jura por VS Code.
“do ponto de vista Nerd VS Code Se encaixa perfeitamente na pilha de tecnologia da Paperform e tem ótimos plugins de desenvolvimento remoto que eu amo. É ótimo para coisas HTML também, e super personalizável se você gosta de suas ferramentas para ficar bem enquanto ainda tem toda a funcionalidade que você precisa.
não há necessidade de corrigir isso demais. Infelizmente, não há editor de HTML que gere um formulário de registro para você, não importa o quão grande possa ser. Essa parte é toda sua.
Passo 2. Crie seu arquivo HTML
o próximo passo é informar ao seu editor de texto que você pretende criar um arquivo HTML. Faça isso criando um novo arquivo e salvando-o com o “.html” extensão.
por exemplo, ” myform.galeria”. Depois de sinalizar ao editor que você está criando código HTML, ele deve gerar automaticamente o seguinte código para você:
<!DOCTYPE html><html><head> <title></title></head><body> </body></html>💡 dica: alguns editores não preencherão automaticamente. Não faz mal. Basta copiar e colar este código acima e ele terá o mesmo efeito.
Passo 3. Adicione campos de texto e crie seu formulário
tudo bem. É hora de começar a adicionar o código relevante e transformar esse HTML barebones em um formulário de registro.
agora, se você está aqui apenas para o código que entendemos. Você encontrará tudo o que precisa de um parágrafo ou dois abaixo. Sinta-se livre para pular em frente. 👇
mas se você estiver interessado em aprender um pouco sobre o que você está entrando realmente significa, permita-nos um interlúdio Tutorial HTML de disparo rápido.
um formulário HTML é composto por”elementos de formulário”. Estas são coisas como caixas de texto, botões de opção, caixas de seleção e menus suspensos que tornam realmente possível para as pessoas interagirem com seu formulário ao vivo.
cada elemento tem sua própria tag específica. Por exemplo, a tag HTML <form> define seu código como um formulário, enquanto <textarea> pode ser usada para coletar entradas do Usuário.
esses elementos são como sapatos: eles sempre vêm em pares. Todas as tags que você deseja incluir em seu formulário devem ser inseridas entre as tags open <form> e closed </form>.
Ok, são as notas brilhantes. Agora, para o código, você realmente precisa inserir. Aqui:
<!DOCTYPE html><html> <head> <h1> Company Registration Form</h1> </head> <body> <form> <table> <tr> <td> Email Address: </td> <td> <input type="text" email=""> </td> </tr> <tr> <td> Password: </td> <td> <input type="Password" name=""> </td> </tr> </table> </form> </body> </html>este código HTML (básico) produzirá algo assim:
não é exatamente a coisa mais bonita do mundo é? Mas ei, você perguntou como criar um formulário de registro HTML. Não atire no mensageiro.
a tag < tr > informa para organizar as respostas seguidas, enquanto< td > (que significa dados da tabela) sinaliza que você deseja capturar qualquer tipo de respondente. Neste caso, adicionamos dois campos para simplificar:
- digite o endereço de E-mail
- digite senhas
não há nada que o impeça de adicionar campos adicionais. Os tipos de entrada variam de Números e datas a cores ou mesmo imagens. Basta copiar o código abaixo e inserir o tipo de entrada desejado. W3Schools tem uma ótima lista para guiá-lo.
<tr> <td> Email Address: </td> <td> <input type="text" email=""> </td>💡 dica: selecionar o tipo de entrada correto é crucial. Ele informa ao formulário como o texto deve ser exibido na tela. Por exemplo, a última coisa que queremos é que a senha de alguém fique visível quando a digita, então usamos o tipo de entrada “senha” para ocultá-la.
Passo 4. Adicionar espaços reservados
um espaço reservado é o texto dentro dos campos do formulário que solicita que os respondentes respondam de uma maneira específica. É usado principalmente como um empurrão na direção certa, mas também é uma estratégia útil para tornar os formulários mais envolventes.
por exemplo, digamos que você esteja adicionando um campo de nome simples ao seu formulário. Você poderia digitar ” inserir nome “e ser feito com ele, ou você poderia enfeitar as coisas escrevendo” Bruce Wayne ” para um pouco de talento.Seja qual for a estratégia que você escolher, é bastante simples adicionar espaços reservados ao seu formulário de registro HTML. Após o tipo de entrada, insira “placeholder=” com o texto que deseja exibir.
<!DOCTYPE html><html><head><h1> Company Registration Form</h1></head><body><form><table><tr><td>Email Address:</td><td><input type="mail" placeholder="Email" name=""></td></tr><tr><td>Password:</td><td><input type="Password" placeholder="Password" name=""></td></tr></table></form> </body></html>inserir este código produzirá um formulário como este:
Pretty barebones. Mas funciona. Você pode criar opções adicionais para os clientes selecionarem seus dados demográficos, como idade ou sexo, usando um código semelhante ao acima.
para criar um campo de gênero, insira os seguintes valores no seu código (logo acima da última tag </table>). Também adicionaremos um número de telefone e a opção ‘assunto’ suspensa.
<input type="checkbox" name="Male" value="Male"> Male<br> <input type="checkbox" name="Female" value="Female"> Female<br>isso transformará o campo de dados em caixas de seleção—uma para homem e outra para mulher. Agora Veja como será a iteração final do seu formulário de registro HTML:
não é exatamente a grande revelação que você esperava, certo? Você pode imaginar alguém pesquisando sua empresa no Google e sendo recebido com esta página? Ou compartilhar isso nas redes sociais?
é seguro dizer que esse tipo de formulário de login em HTML não encorajaria exatamente ninguém a se inscrever no seu negócio. Haveria uma pergunta esmagadora em suas mentes, que é provavelmente a mesma que você tem. . .
Por Que meu formulário de registro HTML é tão feio?
como você não pode ver o seu formulário HTML não é particularmente atraente. É um patinho feio. O que é bom – nem todos podemos ser Margot Robbie – mas não atrai exatamente as pessoas a preenchê-lo.
e esse é o problema. Formulários HTML tendem a ser:
- Chato
- Maçante
- Difícil para personalizar
- Desajeitado para gerenciar
Esta é a natureza simples de HTML. É uma estrutura que ajuda a completar as ações de formulário necessárias, no entanto, certamente não ganhará nenhum prêmio de design.
a solução fácil para este problema é usar um construtor de formulários on-line dedicado como Paperform para evitar o trabalho pesado de HTML ou CSS. Você pode criar um belo registro, formulários de contato e páginas de destino completas—entre centenas de outras criações—em questão de minutos sem uma única linha de código.
mas talvez você esteja realmente definido em toda a coisa HTML (ou talvez você seja apenas um otário para punição). De qualquer forma, se você está realmente comprometido com o seu formulário de registro HTML, você pode melhorar sua aparência usando CSS.
Passo 5: Edite seu formulário de registro HTML com CSS
CSS é uma linguagem de programação usada para estilizar um documento HTML. Ele personaliza como os elementos HTML são exibidos na tela e permite personalizar tudo, desde cores e opacidade da fonte até adicionar uma imagem de fundo ou vincular a outra página com uma tag <href>.
Agora, você estaria aqui a semana toda se listássemos cada propriedade CSS. Poderíamos fazer isso e tentar impulsionar o SEO desta página, mas isso não é divertido para ninguém. Se você está atrás de uma lista abrangente, recomendamos a lista de referência CSS do W3School.
por causa do nosso tutorial, daremos ao nosso formulário de registro HTML uma reforma rápida com CSS. Personalizaremos a cor do texto, o estilo da fonte e Ajustaremos as margens para uma aparência (um pouco) melhor.
Tip dica: a maneira mais comum de adicionar CSS a uma página HTML é com um arquivo de folha de estilo externo vinculado ao elemento. Esta folha de estilo é criada no mesmo editor de texto e salva com o “.css” extensão.
aqui está o código que usaremos:
table {font-family : Arial, Helvetica, sans-serif;font-size : 100%; font-weight: bold; background-color: white} h1 { color: #ea503f; font-family: Arial; text-align: center }e com essa magia de estilo, sua forma vai acabar parecendo a abaixo. É um pouco como bater batom em um porco, mas é melhor até certo ponto.
por que um formulário de registro HTML não é a melhor solução
enquanto aprende a codificar e criar formulários de registro básicos é uma habilidade divertida para pegar, você deve reconsiderar seriamente usá-los para qualquer finalidade importante. Não tente inicializar, simplesmente não vale a pena o tempo, esforço e frustração.
Se você precisa de um formulário de contato para seus clientes, um formulário de login para o seu negócio, ou um estudante formulário de inscrição para o novo ano lectivo, qualquer solução sticky-gravado em conjunto com o HTML e o CSS vai terminar acima de olhar polido e profissional—especialmente se você não tem nenhum antes de habilidades de codificação.
felizmente, há outra maneira de criar formulários de registro muito mais fáceis, rápidos e intuitivos: um construtor de formulários on-line como o Paperform. Com nossa plataforma fácil, você pode estar instalado e funcionando com uma forma bonita e de marca em questão de minutos.
com o Paperform, você não obtém apenas um formulário HTML básico. Você obtém uma experiência dinâmica que permite coletar qualquer tipo de dados de que precisa—de simples detalhes de contato a cálculos complexos e até mesmo receber pagamentos. Nenhuma experiência de design necessária.
além disso, a personalização é fácil. Ajuste cores e fontes e ajuste a interface do usuário do seu formulário com alguns cliques. Então, quando estiver satisfeito com sua nova criação, você pode incorporar o formulário em seu site, hospedá-lo on-line gratuitamente ou incorporá-lo em seu site WordPress com nosso plugin WordPress.
para mostrar como é fácil, criamos um formulário de inscrição com aparência elegante:
não tem vontade de construir sua própria criação? É para isso que serve nossa biblioteca de mais de 600 modelos de formulário. Selecione um de nossos modelos de registro, adicione-o à sua conta com um clique e comece a correr mais rápido do que você pode beber seu café da manhã.
um formulário de inscrição é apenas o começo do que você pode fazer com o Paperform. Experimente você mesmo com nosso teste gratuito de 14 dias-não é necessário cartão de crédito.
formulário de inscrição em HTML FAQs
posso criar um formulário de inscrição em HTML sem CSS?
Sim, mas não seria bonito. Na verdade, pareceria algo desde os primeiros dias da Microsoft. Não é nada bonito.
Como faço para criar um formulário de registro HTML com upload de imagem?
para adicionar um campo de upload de imagem, use o tipo de entrada” arquivo”.
posso fazer um formulário HTML sem usar uma tabela?
embora o comando table ajude no alinhamento, é fácil fazer um formulário sem ele. Basta inserir diretamente suas entradas sem os comandos’ tr ‘ou’ td’.
é possível usar um formulário de registro HTML para compras on-line
Sim. Para criar um formulário de compras on-line, inclua campos para informações de contato, endereço de entrega, ID do produto e ponto de entrega. As coisas ficam complicadas ao coletar pagamentos, e é por isso que recomendamos os formulários de pagamento simples da Paperform.
Como faço para criar uma página de login e registro? Nós cobrimos como criar estes, mas a resposta é com um monte de código e ajustes. É muito mais fácil usar um construtor de formulários on-line dedicado, como o Paperform.