Como fazer - Boletim informativo por e-mail
Aprenda a criar um boletim informativo por e-mail com CSS.
Assine a nossa newsletter
Lorem ipsum texto sobre por que você deve assinar nossa newsletter blabla. Lorem ipsum texto sobre por que você deve assinar nossa newsletter blabla. Lorem ipsum texto sobre por que você deve assinar nossa newsletter blabla.
Como criar um boletim informativo
Etapa 1) Adicionar HTML
Use um elemento <form> para processar a entrada. Você pode aprender mais sobre isso em nosso tutorial PHP . Em seguida, adicione entradas para cada campo, juntamente com um botão "enviar":
Exemplo
<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>
Etapa 2) Adicionar CSS:
Exemplo
/* 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;
}
Dica: Acesse nosso Tutorial de formulários HTML para saber mais sobre formulários HTML.
Dica: Acesse nosso Tutorial de formulário CSS para saber mais sobre como estilizar elementos de formulário.