Come fare per - Newsletter via e-mail
Scopri come creare una newsletter via email con CSS.
Iscriviti alla nostra Newsletter
Lorem ipsum testo sul perché dovresti iscriverti alla nostra newsletter blabla. Lorem ipsum testo sul perché dovresti iscriverti alla nostra newsletter blabla. Lorem ipsum testo sul perché dovresti iscriverti alla nostra newsletter blabla.
Come creare una newsletter
Passaggio 1) Aggiungi HTML
Utilizzare un elemento <form> per elaborare l'input. Puoi saperne di più su questo nel nostro tutorial PHP . Quindi aggiungi input per ogni campo, insieme a un pulsante "invia":
Esempio
<form action="action_page.php">
<div class="container">
<h2>Subscribe to our Newsletter</h2>
<p>Lorem ipsum..</p>
</div>
<div class="container" style="background-color:white">
<input type="text" placeholder="Name" name="name" required>
<input type="text" placeholder="Email address" name="mail" required>
<label>
<input type="checkbox" checked="checked"
name="subscribe"> Daily Newsletter
</label>
</div>
<div class="container">
<input type="submit"
value="Subscribe">
</div>
</form>
Passaggio 2) Aggiungi CSS:
Esempio
/* Style the form element with a border
around it */
form {
border: 4px solid #f1f1f1;
}
/* Add some padding and a grey background color to containers */
.container {
padding: 20px;
background-color: #f1f1f1;
}
/* Style the input elements and the
submit button */
input[type=text], input[type=submit] {
width: 100%;
padding: 12px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Add margins to the checkbox */
input[type=checkbox] {
margin-top: 16px;
}
/* Style the submit button */
input[type=submit] {
background-color: #04AA6D;
color: white;
border: none;
}
input[type=submit]:hover {
opacity: 0.8;
}
Suggerimento: vai al nostro Tutorial per moduli HTML per saperne di più sui moduli HTML.
Suggerimento: vai al nostro tutorial sui moduli CSS per saperne di più su come applicare uno stile agli elementi dei moduli.