Розділ 4 · Завдання 3

Підключаємо форму до сервісу

Три зміни в тезі

— і кнопка «Надіслати» реально працює.

Завдання

Візьми форму з Розділу 2 (уроки 10, 25) і онови тег <form> навколо неї:

index.html
<form action="https://api.web3forms.com/submit" method="POST">
  <input type="hidden" name="access_key" value="ТВІЙ_КЛЮЧ_СЮДИ">

  <input type="text" name="name" class="field" placeholder="Твоє ім’я">
  <textarea name="message" class="field" placeholder="Твоє повідомлення" rows="4"></textarea>
  <button type="submit" class="btn">Надіслати</button>
</form>
  
Як це читати

action="https://api.web3forms.com/submit" — куди відправляти дані форми (замість «нікуди»).

method="POST" — спосіб відправки даних (стандарт для форм, що щось змінюють чи надсилають).

<input type="hidden" name="access_key" value="...">́ — приховане поле з твоїм ключем із завдання 2. Користувач його не бачить, але сервіс за ним розуміє, кому переслати лист.

name="name" і name="message" — у кожного поля з’явився атрибут name. Це підпис, під яким значення поля прийде тобі в листі (без нього сервіс не знатиме, як назвати дані).

Перевір

Заповни форму на своїй сторінці і натисни «Надіслати» — за кілька секунд лист має прийти на пошту, яку ти вказав у Web3Forms.

Курс створено за підтримки бухгалтерського бюро Galakton, Білосток, Польща