Hoe - E-mail nieuwsbrief
Leer hoe u een e-mailnieuwsbrief maakt met CSS.
Abonneer op onze nieuwsbrief
Lorem ipsum tekst over waarom je je zou moeten abonneren op onze nieuwsbrief blabla. Lorem ipsum tekst over waarom je je zou moeten abonneren op onze nieuwsbrief blabla. Lorem ipsum tekst over waarom je je zou moeten abonneren op onze nieuwsbrief blabla.
Een nieuwsbrief maken
Stap 1) HTML toevoegen
Gebruik een <form> element om de invoer te verwerken. U kunt hier meer over leren in onze PHP -tutorial. Voeg vervolgens voor elk veld invoer toe, samen met een knop "verzenden":
Voorbeeld
<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>
Stap 2) CSS toevoegen:
Voorbeeld
/* 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;
}
Tip: Ga naar onze HTML-formulierhandleiding voor meer informatie over HTML-formulieren.
Tip: Ga naar onze CSS Form Tutorial voor meer informatie over het opmaken van formulierelementen.