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:
- o campo “e-mail” é solicitado, pois os e-mails são enviados para este endereço. Você não pode criar um formulário de inscrição para coletar apenas números de telefone. Para a inscrição correta dos dados do formulários não remova o
<input type = "email" required>do formulário. - você pode adicionar até 10 campos;
- o campo de texto contém até 64 caracteres;
- o menu suspenso (
<select>tag) 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 input name) 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 |
enctype |
Especifique a codificação dos dados do formulário antes de enviá-los para o servidor. Pode obter os valores multipart/form-data або 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 texto 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 da <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 inicia. |
disabled |
Atributo booleano que indica que o usuário não pode interagir com o botão. |
type |
Tipo de botão:
|
Última Atualização: 28.06.2024
ou