Come creare: newsletter di email

Come creare una newsletter di notizie

Primo passo - Aggiungi HTML:

Usa l'elemento <form> per gestire l'input. Puoi trovare ulteriori informazioni nei nostri tutorial PHP.

Poi aggiungere controlli di input per ogni campo e un pulsante di invio:

<form action="action_page.php">
  <div class="container">
    <h2>Iscriviti alla nostra Newsletter</h2>
    <p>Lorem ipsum..</p>
  </div>
  <div class="container" style="colore di sfondo:white">
    <input type="text" placeholder="Nome" name="name" richiesto>
    <input type="text" placeholder="Indirizzo email" name="mail" richiesto>
    <label>
      <input type="checkbox" checked="checked" name="subscribe"> Newsletter quotidiana
    </label>
  </div>
  <div class="container">
    <input type="submit" value="Iscriviti">
  </div>
</form>

Secondo passo - Aggiungere CSS:

/* Impostare lo stile degli elementi del modulo, con bordi intorno */
form {
  bordo: 4px solido #f1f1f1;
}
/* Aggiungere alcune margini interne e colore di sfondo grigio alla conterranea */
.container {
  riempimento: 20px;
  colore di sfondo: #f1f1f1;
}
/* Impostare lo stile degli elementi di input e del pulsante di invio */
input[type=text], input[type=submit] {
  larghezza: 100%;
  riempimento: 12px;
  margine: 8px 0;
  visualizzazione: blocco-in-linea;
  bordo: 1px solido #ccc;
  box-sizing: border-box;
}
/* Aggiungere margine esterno alla casella di selezione */
input[type=checkbox] {
  margine superiore: 16px;
}
/* Impostare lo stile del pulsante di invio */
input[type=submit] {
  colore di sfondo: #04AA6D;
  colore: bianco;
  bordo: none;
}
input[type=submit]:hover {
  opacità: 0.8;
}

Prova tu stesso

Pagine correlate

Tutorial:Formulario HTML

Tutorial:Formulario CSS