Форма, яку заповнює помічник, крок за кроком

На сторінці для застосунків є невелика форма «Новий клієнт». Попросіть помічника «Заповни форму: Олена Коваль, olena@example.com, тариф Pro, дзвонити після обіду» — і він впише ім’я та пошту, обере Pro, напише примітку і спитає, перш ніж натиснути Зберегти. Ця сторінка показує розмітку, що за цим стоїть. Її зовсім мало.

У панелі: Віджет → Дії на сторінці (налаштування віджета). Дії на сторінці входять у тариф Growth і вищі.

Форма

<form>
  <label>
    <span>Ім'я</span>
    <input name="name" type="text" />
  </label>
  <label>
    <span>Ел. пошта</span>
    <input name="email" type="email" />
  </label>
  <label>
    <span>Тариф</span>
    <select name="plan">
      <option value="">Оберіть тариф</option>
      <option>Starter</option>
      <option>Growth</option>
      <option>Pro</option>
    </select>
  </label>
  <label>
    <span>Примітка</span>
    <textarea name="note"></textarea>
  </label>
  <label>
    <input name="welcome" type="checkbox" />
    <span>Надіслати вітальний лист</span>
  </label>
  <button type="submit" data-sa-commit>Зберегти</button>
</form>

Наш тут лише один атрибут: data-sa-commit на Зберегти. Решта — те, що й так читає екранний диктор, і в цьому вся суть. Віджет називає кожне поле текстом <label>, написаним перед ним, знає варіанти списку за їхнім видимим текстом і відрізняє галочку від кнопки за типом.

Що відбувається, коли відвідувач просить

1. Віджет читає екран: п’ять полів із назвами, чи заповнене кожне, варіанти тарифу і кнопку Зберегти, позначену як ту, що зберігає форму.
2. Помічник надсилає один пакет — заповнити Ім’я, заповнити Ел. пошта, обрати Pro, заповнити Примітка, — і віджет одразу його виконує. Відвідувач бачить, як текст лягає в його власну форму, і може будь-що виправити руками.
3. Зберегти притримується. Помічник питає, називаючи кнопку, а віджет малює два чіпи: Так, натиснути «Зберегти» і Ні, не треба. Відвідувач може відповісти й своїми словами, і вголос.
4. На «так» віджет натискає Зберегти, і помічник каже, що натиснув. Форма показує власний рядок «Збережено», як і для людини.

Це політика за замовчуванням, Натискання з підтвердженням. Згода і збереження.

Добра практика, елемент за елементом

Видимий підпис для кожного поля. Назву поля пишіть у <label> перед елементом або в aria-label. Підпис — це назва, якою користуються обидва: відвідувач каже «постав Pro в поле тарифу», помічник каже «я заповнив Ел. пошта». Placeholder теж годиться як назва, але зазвичай це приклад («напр. Олена»), а поле, назване своїм прикладом, дивно звучить у відповіді відвідувачу.

Варіанти словами, якими говорять люди. select шукає варіант за видимим текстом — спершу точний збіг, тоді входження, — тож «Pro» знаходить «Pro», і «тариф Pro» теж його знаходить. Список, чиї варіанти виглядають як P-03, лишає помічнику тільки код.

Одна «Зберегти», позначена. data-sa-commit на кнопці, що зберігає форму, рівно одна на екран. За Натискання з підтвердженням це натискання, про яке помічник питає; за Зберігати автоматично — натискання, яке віджет робить, щойно поля заповнено. Перемикач, що зберігає себе в момент зміни, отримує той самий атрибут, і про нього теж питають.

Нешкідливі кнопки, оголошені. «Додати ще контакт», «Показати більше полів» не змінюють нічого, чого відвідувач не побачить і не скасує. Позначте таку кнопку data-sa-risk="safe", і помічник натисне її в тому ж пакеті, що й заповнення, не питаючи. Ніколи на «Зберегти», «Надіслати» чи «Видалити».

Приватні поля — поза досяжністю. data-sa-private на полі — або на <fieldset> навколо кількох — ховає їх від читання й від дій, у будь-якому режимі:

<fieldset data-sa-private>
  <legend>Картка</legend>
  <input name="card" inputmode="numeric" />
  <input name="cvc" inputmode="numeric" />
</fieldset>

Паролі, приховані поля й поля файлів поза досяжністю й без жодної розмітки.

Підказка там, де правила немає на сторінці. Те, що про поле знаєте лише ви, пишіть у data-sa-hint. Помічник читає її поруч із назвою поля саме тоді, коли вирішує, що писати; відвідувачі її не бачать.

<textarea
  name="note"
  data-sa-hint="For the sales team: when to call and what about, in English."
></textarea>

Повідомлення про помилки, які можна процитувати. Обгорніть місце, де форма показує помилки, у data-sa-read, і на «чому не зберігається?» помічник відповість вашим власним повідомленням, а не здогадкою.

Справжній disabled. Тримайте атрибут disabled на кнопці «Зберегти», яку ще не можна натиснути. Помічник його читає, каже чому, якщо ваше повідомлення читабельне, і не пробує.

Повторювані рядки як список. Контакти, рядки замовлення, записи FAQ: оголосіть список через data-sa-list, data-sa-row, data-sa-field і data-sa-add, і помічник звертатиметься до «телефону другого контакту» за позицією. Списки й варіанти.

Стабільний id там, де сторінка перемальовується. Фреймворк, що перебудовує форму на кожну зміну, зберігає поля адресованими через data-sa-id="email". Розмітка елементів.

Три перемикачі для цієї форми

На вкладці віджета Дії на сторінці:

Коли читання — Ніколи, помічник однаково знає, які поля заповнені, і може дописати в поле, не читаючи його: append приєднує новий текст у браузері, тож написане відвідувачем не залишає сторінку. Читання екрана.

Сторінка, на якій діяти не можна ніколи, — оформлення замовлення, видалення акаунта — може вимкнути дії на сторінці для власного завантаження через Shukai.setPageActions(false). JavaScript API.