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.

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.

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;
• 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 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 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. 

Última Atualização: 31.03.2023