Miten luoda: sähköposti-tilaus

Edellinen sivu Ikonillinen lomake
Seuraava sivu Rivistetty lomake

Opi, miten luodaan sähköposti-tilaus.

Tilaa uutiskirjeemme

Lorem ipsum teksti siitä, miksi sinun tulisi tilata uutiskirjeemme blabla. Lorem ipsum teksti siitä, miksi sinun tulisi tilata uutiskirjeemme blabla. Lorem ipsum teksti siitä, miksi sinun tulisi tilata uutiskirjeemme blabla.

Päivittäinen uutiskirje

Kokeile itse

Miten luoda uutiskirje

Ensimmäinen vaihe - lisää HTML:

Käytä <form>-elementtiä syötteen käsittelyyn. Voit saada lisätietoja PHP-opastuksestamme.

Sitten lisää jokaiselle kentälle syöttökontrolli ja 'Lähetä'-painike:

<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>

第二步 - 添加 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;
}

Kokeile itse