Jak stworzyć: e-mail

Poprzednia strona Formularz z ikoną
Następna strona Formularz układany

Naucz się, jak tworzyć e-maile z użyciem CSS.

Subskrybuj nasz newsletter

Lorem ipsum text about why you should subscribe to our newsletter blabla. Lorem ipsum text about why you should subscribe to our newsletter blabla. Lorem ipsum text about why you should subscribe to our newsletter blabla.

Codzienny newsletter

Spróbuj sam

Jak stworzyć newsletter?

Krok 1 - Dodaj HTML:

Użyj elementu <form> do przetwarzania wejścia. Dowiedz się więcej na temat naszych szkoleń PHP.

Następnie dodaj kontrolki wejściowe dla każdego pola oraz przycisk „Wyślij”:

<form action="action_page.php">
  <div class="container">
    <h2>Subskrybuj nasz Newsletter</h2>
    <p>Lorem ipsum..</p>
  </div>
  <div class="container" style="background-color:white">
    <input type="text" placeholder="Imię" name="name" wymagane>
    <input type="text" placeholder="Adres e-mail" name="mail" wymagane>
    <label>
      <input type="checkbox" checked="checked" name="subscribe"> Daily Newsletter
    </label>
  </div>
  <div class="container">
    <input type="submit" value="Subscribe">
  </div>
</form>

Krok 2 - Dodaj CSS:

/* Ustawienia stylu dla elementów formularza, aby miały obramowanie wokół nich */
form {
  granica: 4px solid #f1f1f1;
}
/* Dodaj pewne wewnętrzne marginesy i szary kolor tła do kontenera */
.container {
  wypełnienie: 20px;
  kolor tła: #f1f1f1;
}
/* Ustawienia stylu dla elementów wejściowych i przycisku submit */
input[type=text], input[type=submit] {
  szerokość: 100%;
  wypełnienie: 12px;
  margines: 8px 0;
  wyświetl: blok;
  granica: 1px solid #ccc;
  box-sizing: border-box;
}
/* Dodaj marginesy zewnętrzne do pola wyboru */
input[type=checkbox] {
  górna margines: 16px;
}
/* Ustawienia stylu przycisku submit */
input[type=submit] {
  kolor tła: #04AA6D;
  kolor: biały;
  brak granicy;
}
input[type=submit]:hover {
  przeźroczystość: 0.8;
}

Spróbuj sam