Помогите допилить форму "подписка на рассылку ИМ"

A
На сайте с 18.10.2007
Offline
118
305

Пытаюсь допилить функционал формы для подписки на новости от им.

Не могу понять, если форму оставить пустую, не вводить майл нажать кнопку отправить, transform: translateY(-50%) перестаёт работать.... Введите E-Mail не перемещается, и вводя майл просто мешает.

Сама форма тут developer.pavira.de/#news

Что я упустил?

Заранее спасибо!

S
На сайте с 30.09.2016
Offline
469
#1

Что хотите сделать?

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
A
На сайте с 18.10.2007
Offline
118
#2
Sitealert:
Что хотите сделать?

При клике в поле куда вводить майл "Введите E-Mail" смещается вверх. Не вводить майл и нажать отправить, появляется "This is a required field." и "Введите E-Mail" больше не смещается вверх 😕

S
На сайте с 30.09.2016
Offline
469
#3
alepavlenko:
При клике в поле куда вводить майл "Введите E-Mail" смещается вверх. Не вводить майл и нажать отправить, появляется "This is a required field." и "Введите E-Mail" больше не смещается вверх 😕

Зачем вообще так делали? Есть же placeholder для этой цели.

A
На сайте с 18.10.2007
Offline
118
#4
Sitealert:
Зачем вообще так делали? Есть же placeholder для этой цели.

Что бы transform был☝

S
На сайте с 30.09.2016
Offline
469
#5

Никому не нужное извращение. ИМХО.

A
На сайте с 18.10.2007
Offline
118
#6
Sitealert:
Никому не нужное извращение. ИМХО.

Всё может быть... Но я не про изварщение просил

SocFishing
На сайте с 26.09.2013
Offline
118
#7

Добавить после формы:

<script>var editboxis = document.getElementById("newsletter");

editboxis.onclick = function() {

if (document.getElementsByClassName("validation-advice")[0]!=undefined) {

document.getElementsByClassName("validation-advice")[0].remove();

document.getElementById("newsletter").classList.remove("validation-failed");

}};</script>

★Сервис идентифицирует (https://socfishing.com/?utm_source=searchengines) посетителей вашего сайта и предоставляет их профили ВКонтакте, Телефон, Почта! Цены копеечные, работаем 8 лет.
S
На сайте с 30.09.2016
Offline
469
#8

Вот здесь посмотри, через .kc-input-label и .kc-input-label-focus с переключением через javascript сделано.

A
На сайте с 18.10.2007
Offline
118
#9
Sitealert:
Вот здесь посмотри, через .kc-input-label и .kc-input-label-focus с переключением через javascript сделано.

Я так понял, что раньше выводимый js слой css отключал transform у слоя... Может и не так, но как посоветовал SocFishing я сделал и, работает!!!

Хотя если честно не понял до конца как он это сделал 🍿

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий