Hur skapa: e-postnyhetsbrev

Föregående sida Formulär med ikoner
Nästa sida Stackformulär

Lär dig hur man skapar e-postnyhetsbrev med CSS.

Prenumerera på vårt nyhetsbrev

Lorem ipsum text om varför du bör prenumerera på vårt nyhetsbrev blabla. Lorem ipsum text om varför du bör prenumerera på vårt nyhetsbrev blabla. Lorem ipsum text om varför du bör prenumerera på vårt nyhetsbrev blabla.

Dagligt nyhetsbrev

Prova själv

Hur skapa nyhetsbrev

Steg 1 - Lägg till HTML:

Använd <form>-elementet för att hantera inmatning. Lär dig mer om detta i vår PHP-tutorial.

Sedd för varje fält lägga till inmatningskontroller och 'submit'-knappen:

<form action="action_page.php">
  <div class="container">
    <h2>Prenumerera på vårt nyhetsbrev</h2>
    <p>Lorem ipsum..</p>
  </div>
  <div class="container" style="background-color:white">
    <input type="text" placeholder="Namn" name="name" required>
    <input type="text" placeholder="E-postadress" name="mail" required>
    <label>
      <input type="checkbox" checked="checked" name="subscribe"> Daglig nyhetsbrev
    </label>
  </div>
  <div class="container">
    <input type="submit" value="Subscribe">
  </div>
</form>

第二步 - 添加 CSS：

/* 为表单元素设置样式，使其周围带有边框 */
form {
  border: 4px solid #f1f1f1;
}
/* 为容器添加一些内边距和灰色背景色 */
.container {
  padding: 20px;
  background-color: #f1f1f1;
}
/* 设置输入元素和提交按钮的样式 */
input[type=text], input[type=submit] {
  width: 100%;
  padding: 12px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
/* 为复选框添加外边距 */
input[type=checkbox] {
  margin-top: 16px;
}
/* 设置提交按钮的样式 */
input[type=submit] {
  background-color: #04AA6D;
  color: white;
  border: none;
}
input[type=submit]:hover {
  opacity: 0.8;
}

Prova själv