Cara - Email Buletin
Pelajari cara membuat buletin email dengan CSS.
Berlangganan newsletter kami
Teks lorem ipsum tentang mengapa Anda harus berlangganan buletin blabla kami. Teks lorem ipsum tentang mengapa Anda harus berlangganan buletin blabla kami. Teks lorem ipsum tentang mengapa Anda harus berlangganan buletin blabla kami.
Cara Membuat Buletin
Langkah 1) Tambahkan HTML
Gunakan elemen <form> untuk memproses input. Anda dapat mempelajari lebih lanjut tentang ini di tutorial PHP kami. Kemudian tambahkan input untuk setiap bidang, bersama dengan tombol "kirim":
Contoh
<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>
Langkah 2) Tambahkan CSS:
Contoh
/* 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: Buka Tutorial Formulir HTML kami untuk mempelajari lebih lanjut tentang Formulir HTML.
Tip: Buka Tutorial Formulir CSS kami untuk mempelajari lebih lanjut tentang cara menata elemen formulir.