Обложка и логотип
Полоса изображения или цвета вверху формы и круглый знак под ней. Два решения, и форма перестаёт выглядеть стандартной.
Как их добавить
«Добавить обложку» и «Добавить логотип» стоят над заголовком формы в редакторе и приглушены, пока вы к ним не приблизитесь. Ни то ни другое не открывает диалог: нажатие сразу ставит заглушку (плоскую полосу для обложки, тёмный круг для логотипа), чтобы макет улёгся ещё до того, как вы что-то выберете.
Обе заглушки смешаны из собственного оформления формы, поэтому принадлежат странице с первого кадра. Нажмите на элемент «Изменить обложку» или на сам круг логотипа, чтобы открыть выбор.
И то и другое переходит в публичную форму и в её встроенную копию. Что стоит на холсте редактора, то и видит респондент.
Панель выбора
Выбор обложки открывается на трёх вкладках. У логотипа есть только первая, потому что логотипом служит ваш собственный файл, а не то, что нужно искать.
Перетащите файл на панель или выберите его на устройстве. Любой формат изображений, который читает ваш браузер, до 10 МБ, с полосой прогресса во время загрузки.
Ищите на Unsplash, не выходя из редактора. Вкладка открывается на популярной подборке и повторяет поиск вскоре после того, как вы перестали печатать.
Восемь образцов, смешанных из оформления вашей формы: две силы акцента, два нейтральных и четыре родственных со сдвигом оттенка. На тёмной теме они возвращаются глубокими тонами, а не пастелью.
Кнопка «Удалить» в шапке панели убирает уже поставленную обложку или логотип и закрывает панель.
Как сдвинуть обложку
В полосе обложки показан кадр высотой 220 пикселей из куда большей картинки, и та часть, которую стоит показать, редко находится ровно по центру. Когда фотообложка уже стоит, рядом с «Изменить обложку» появляется «Изменить положение»: нажмите её и тяните изображение вверх или вниз.
Перетаскивание идёт с демпфированием: протянув всю высоту полосы, вы сдвинете кадр примерно на треть, поэтому кадр встаёт туда, куда вы задумали, а не туда, где остановилась рука.
«Сохранить положение» заново вырезает изображение по новому кадру и сохраняет его; «Отмена» возвращает прежний кадр. Изменить положение можно, только пока доступен полноразмерный оригинал: Fillio тихо подгружает его в фоне, когда вы снова открываете форму.
Что происходит с вашим файлом
Всё происходит в вашем собственном браузере до того, как что-либо загружается. Ничего не отправляется в полном размере, и никакой конвертации на сервере не происходит.
Картинка уменьшается максимум до 2400 px по длинной стороне и перекодируется. Если результат выходит крупнее исходного файла, ваш файл остаётся ровно таким, каким был.
Этот уменьшенный оригинал хранится рядом с обложкой. Именно из него вырезается кадр при каждом последующем сдвиге.
Сама полоса записывается в 1920 × 440, вдвое больше высоты отображения в 220 пикселей, чтобы оставаться чёткой на ретина-экране.
Логотип уменьшается максимум до 400 × 400 и показывается кругом в 100 пикселей.
Файлы PNG уменьшаются, но не перекодируются, поэтому прозрачность сохраняется. GIF и SVG не трогаются вообще. Всё остальное записывается как JPEG.
Скрытый вопрос пропускается при проверке страницы, поэтому обязательный вопрос, скрытый правилом, никогда не помешает отправке.