Como criar um formulário de inscrição simples

Você pode preencher sua lista de endereçamento usando um formulário de inscrição - coloque-o em seu site ou página de blog. Com a SendPulse, você pode escolher um formulário predefinido, criar um com nosso editor de arrastar e soltar ou obter o código HTML sem estilos e scripts de comportamento para personalizá-lo você mesmo.

Neste artigo, analisaremos como criar um formulário de inscrição simples com nosso editor.

Vá para "Email ">" Formulários de inscrição ">" Criar um novo formulário "e clique em" Obter código HTML sem estilos.

Selecione uma lista de endereçamento

Selecione a lista de endereçamento à qual deseja adicionar seus assinantes. Você pode escolher em uma lista existente ou criar uma nova.

Clique em Obter código.

Selecione um remetente

Selecione o endereço do remetente do qual os e-mails de confirmação serão enviados.

As inscrições por meio de um formulário simples são realizadas com a opção double opt-in. Isso significa que os usuários precisam confirmar a inscrição clicando em um link no e-mail de confirmação automática de inscrição.

Certifique-se de usar um endereço de remetente que esteja em seu domínio corporativo. Isso é importante para passar por filtros de spam e também pelo reconhecimento do remetente.

Leia mais sobre como criar um e-mail corporativo com seu domínio.

Para determinar o seu e-mail de confirmação, acesse "Configurações do serviço" > "Ferramentas de assinatura." Selecione então o seu e-mail de confirmação de registro, ou crie um, clicando em "Novo e-mail de confirmação".

Copie o código

Para adicionar o código à sua página, clique em Copiar o código e cole o código no seu site.

Observe que o campo com o código não se destina à edição e não salva as alterações inseridas. Para personalizar o formulário de sua solicitação, copie o código proposto e edite-o no editor antes de adicioná-lo ao seu site.

Personalizar o formulário

O formulário consiste em dois campos por padrão - um para inserir um nome e um endereço de e-mail e o botão "Inscrever-se".

Você pode personalizar o formulário usando tags - elementos de linguagem de marcação (HTML) e estilizá-los usando CSS. Você também pode configurar a condição de exibição, o número de caracteres e outras configurações para o comportamento do formulário usando JS.

Ao personalizar seu formulário, preste atenção nos seguintes pontos:

  • você pode adicionar até 10 campos;
  • o campo de texto contém até 64 caracteres;
  • o menu suspenso (tag <select>) não suporta a opção "múltiplo".

Personalizar os campos

Para fazer com que os campos do formulário correspondam às variáveis ​​da sua lista de endereçamento, atribua os nomes dos campos (no nome de entrada) com nomes de variáveis ​​que diferenciam maiúsculas de minúsculas. Por exemplo, se você tiver a variável de cidade em seu catálogo de endereços ("Cidade"), input name = "City"

Os elementos do formulário

Vamos aprender as tags usadas para criar o formulário.

Saiba mais sobre HTML, CSS e JavaScript neste livro de referência.

A tag <form>

A tag <form> adiciona um formulário de inscrição à página. Você pode aplicar os seguintes atributos a esta tag:

  • action - aceita o caminho completo ou relativo para o arquivo do servidor (no nosso caso, a URL é emitida por SendPulse, e não há necessidade de alterá-la);
  • method- informa o servidor sobre o método de solicitação (o formulário só aceita o método POST);
  • name- define um nome de formulário exclusivo;
  • autocomplete - habilita ou desabilita o autocompletar (pode ser on ou off);
  • target - janela ou quadro onde o manipulador carrega o resultado (pode assumir os valores _blank, _self, _parent, _top);
  • novalidate - cancela a verificação dos dados inseridos quanto à exatidão;
  • multipart/form-data e text/plain

A tag <input>

Usando a tag <input>, você pode criar vários elementos de interface, como um botão ou caixa de seleção, e assim fornecer um formulário interativo ao usuário.

Para enviar dados ao servidor, coloque a tag <input> dentro de um contêiner <form>.

Observe que um formulário pode conter até 10 campos de entrada, incluindo entrada oculta.

O atributo mais comum da tag <input> - type - informa ao navegador que tipo de elemento de formulário é (por exemplo, checkbox, radio, text, email e assim por diante).

Você pode usar caixas de seleção quando precisar selecionar várias opções da lista proposta:

<input type="checkbox" attributes>

Uma caixa de seleção pode ter os seguintes atributos:

  • checked - pré-seleção da caixa de seleção;
  • name - o nome da caixa de seleção para identificação pelo processador do formulário;
  • value - o valor a ser enviado ao servidor.

Se você precisar selecionar apenas uma opção, use radio:

<input type="radio" name="name" attributes>

Um radio pode ter os seguintes atributos:

  • checked - pré-seleção do radio;
  • name - o nome do grupo de radio; radio é um item de grupo, o nome de todos os radios no mesmo grupo deve ser o mesmo;
  • valor - o valor a ser enviado ao servidor.

Você pode adicionar uma área de texto para entrada de dados. Para fazer isso, use o atributo type com o text valor:

<input type="text" attributes>

Os atributos mais comuns para um campo de entrada de texto são:

  • value- valor inicial;
  • size- tamanho (em caracteres) para o campo de entrada, você pode adicionar até 64 caracteres;

A tag <select>

Com a tag <select>, você pode criar um item suspenso. 

Cada novo item da lista é criado usando a tag <option> dentro do <select> container:

<select>
 <option>Item 1</option>
 <option>Item 2</option> 
</select>

Os atributos mais comuns do <select> tag são:

  • name - define o nome do elemento;
  • required - determina se uma seleção é necessária antes de enviar o formulário.

A tag <button>

Com a tag <button>, você pode criar botões clicáveis, por exemplo, para enviar dados ao servidor.

Para enviar dados ao servidor, coloque a tag <button> dentro de um contêiner <form>.

Os atributos mais comuns para esta tag são:

  • name - nome do botão;
  • value - valor inicial;
  • disabled - atributo booleano que indica que o usuário não pode interagir com o botão;
  • type - tipo de botão:
    • submit - o botão envia os dados para o servidor
    • reset - o botão redefine todos os dados para os valores originais;
    • button - o botão não tem comportamento padrão. 
Rate this article about "Como criar um formulário de inscrição simples"

User Rating: 5 / 5 (6)

    Outros artigos úteis

    Popular em nosso blog

    Teste o SendPulse hoje gratuitamente