Como criar: comunicação por e-mail

Como criar uma newsletter de notícias

Primeiro passo - Adicione HTML:

Use o elemento <form> para lidar com entradas. Saiba mais sobre isso em nosso tutorial PHP.

Então, adicione controles de entrada para cada campo e um botão "Enviar":

<form action="action_page.php">
  <div class="container">
    <h2>Inscrever-se na nossa Newsletter</h2>
    <p>Lorem ipsum..</p>
  </div>
  <div class="container" style="cor_fundo:white">
    <input type="text" placeholder="Nome" name="name" obrigatório>
    <input type="text" placeholder="Endereço de e-mail" name="mail" obrigatório>
    <label>
      <input type="checkbox" checked="checked" name="subscribe"> Newsletter Diária
    </label>
  </div>
  <div class="container">
    <input type="submit" value="Inscrever-se">
  </div>
</form>

Segundo passo - Adicionar CSS:

/* Definir estilo dos elementos do formulário para que tenham borda ao redor */
form {
  borda: 4px sólida #f1f1f1;
}
/* Adicionar some margem interna e cor de fundo cinza para o contêiner */
.container {
  preenchimento: 20px;
  cor_fundo: #f1f1f1;
}
/* Definir estilo dos elementos de entrada e botão de envio */
input[type=text], input[type=submit] {
  largura: 100%;
  preenchimento: 12px;
  margem: 8px 0;
  exibição: bloco-inline;
  borda: 1px sólida #ccc;
  box-sizing: border-box;
}
/* Adicionar margem externa para a caixa de seleção */
input[type=checkbox] {
  margem_topo: 16px;
}
/* Definir estilo do botão de envio */
input[type=submit] {
  cor_fundo: #04AA6D;
  cor: branco;
  borda: none;
}
input[type=submit]:hover {
  opacidade: 0.8;
}

Experimente você mesmo

Páginas relacionadas

Tutorial:Formulário HTML

Tutorial:Formulário CSS