Cómo crear: newsletter de correo electrónico

Cómo crear una newsletter de noticias

Primer paso - Agregar HTML:

Usa el elemento <form> para manejar la entrada. Puedes obtener más información en nuestro tutorial de PHP.

Luego, agrega controles de entrada para cada campo y un botón de "Enviar":

<form action="action_page.php">
  <div class="container">
    <h2>Suscríbete a nuestro Boletín</h2>
    <p>Lorem ipsum..</p>
  </div>
  <div class="container" style="color_fondo:white">
    <input type="text" placeholder="Nombre" name="name" requerido>
    <input type="text" placeholder="Dirección de correo electrónico" name="mail" requerido>
    <label>
      <input type="checkbox" checked="checked" name="subscribe"> Boletín Diario
    </label>
  </div>
  <div class="container">
    <input type="submit" value="Suscríbete">
  </div>
</form>

segundo paso - Añadir CSS:

/* Establecer el estilo de los elementos del formulario, para que tengan un borde alrededor */
form {
  borde: 4px sólido #f1f1f1;
}
/* Añadir algunos márgenes internos y color de fondo gris al contenedor */
.container {
  relleno: 20px;
  color_fondo: #f1f1f1;
}
/* Establecer el estilo de los elementos de entrada y el botón de envío */
input[type=text], input[type=submit] {
  ancho: 100%;
  relleno: 12px;
  margen: 8px 0;
  mostrar: bloque_en_linea;
  borde: 1px sólido #ccc;
  box-sizing: borde_bloque;
}
/* Añadir margen externo al cuadro de selección */
input[type=checkbox] {
  margen_superior: 16px;
}
/* Establecer el estilo del botón de envío */
input[type=submit] {
  color_fondo: #04AA6D;
  color: blanco;
  borde: none;
}
input[type=submit]:hover {
  opacidad: 0.8;
}

Prueba por su cuenta

Páginas relacionadas

Tutoriales:Formulario HTML

Tutoriales:Formulario CSS