Gewusst wie: E-Mail-Newsletter
Erfahren Sie, wie Sie mit CSS einen E-Mail-Newsletter erstellen.
Abonniere unseren Newsletter
Lorem ipsum Text darüber, warum Sie unseren Newsletter abonnieren sollten blabla. Lorem ipsum Text darüber, warum Sie unseren Newsletter abonnieren sollten blabla. Lorem ipsum Text darüber, warum Sie unseren Newsletter abonnieren sollten blabla.
So erstellen Sie einen Newsletter
Schritt 1) Fügen Sie HTML hinzu
Verwenden Sie ein <form>-Element, um die Eingabe zu verarbeiten. Mehr dazu erfahren Sie in unserem PHP -Tutorial. Fügen Sie dann Eingaben für jedes Feld zusammen mit einer Schaltfläche "Senden" hinzu:
Beispiel
<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>
Schritt 2) CSS hinzufügen:
Beispiel
/* 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;
}
Tipp: Besuchen Sie unser HTML-Formular-Tutorial , um mehr über HTML-Formulare zu erfahren.
Tipp: Gehen Sie zu unserem CSS-Formular-Tutorial , um mehr darüber zu erfahren, wie Sie Formularelemente gestalten können.