Как добавить плавающие метки в поля формы в Divi

Добавление плавающих меток к полям формы в Divi может улучшить дизайн и UX любой формы Divi тонким, но мощным способом. Любая форма веб-сайта (не только Divi) обычно включает какое-то поле ввода и метку для этого поля ввода. Например, форма может иметь поле ввода текста для имени, в которое вы можете ввести текст (или имя) и метку для поля ввода этого поля (например, «Имя»). Эта метка может быть видимой или скрытой в зависимости от стиля формы. В дополнение к метке поля ввода могут также содержать псевдоэлемент-заполнитель, который служит своего рода временной меткой в ​​поле ввода, которое остается видимым до тех пор, пока пользователь не введет входное значение. В Divi дизайн по умолчанию скрывает элемент метки и показывает только текст-заполнитель. Добавление плавающей метки в форму Divi позволит дизайнерам сохранить элегантность стиля формы «только заполнитель», а также показывать (или перемещать) метку над полем всякий раз, когда пользователь добавляет значение.

В этом уроке мы покажем вам, как добавить плавающие метки в форму опций электронной почты Divi. Для этого мы собираемся использовать конструктор Divi для разработки формы опций электронной почты. Затем мы добавим несколько пользовательских CSS и JQuery, чтобы эти скрытые метки отображались в поле зрения, когда пользователь фокусируется на поле.

Давайте начнем!

Sneak Peek

Вот краткий обзор дизайна, который мы построим в этом уроке.

Скачайте макет БЕСПЛАТНО

Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

https://youtu.be/j1m14XFztdc

Подпишитесь на наш канал Youtube

Чтобы импортировать макет раздела в свою библиотеку Divi, перейдите в библиотеку Divi.

Щелкните кнопку Импорт.

Во всплывающем окне переносимости выберите вкладку импорта и выберите файл для загрузки со своего компьютера.

Затем нажмите кнопку импорта.

После этого макет раздела будет доступен в Divi Builder.

Давайте перейдем к руководству, не так ли?

Что вам нужно для начала

Для начала вам необходимо сделать следующее:

1. Если вы еще этого не сделали, установите и активируйте тему Divi.
2. Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
3. Выберите вариант «Строить с нуля».

После этого у вас будет чистый холст, чтобы начать проектировать в Divi.

Добавление плавающих меток в поля формы в Divi

Создание формы подписки по электронной почте

Добавьте строку из одного столбца в раздел по умолчанию в Divi Builder.

Добавьте в столбец форму подписки на рассылку по электронной почте.

Откройте модальное окно «Настройки электронной почты». На вкладке содержимого обновите текст заголовка и удалите основной текст.

Обязательно установите связь с поставщиком услуг электронной почты. В противном случае подписка по электронной почте не будет отображаться на действующей странице.

Затем добавьте следующий цвет фона в подписку по электронной почте:

• Цвет фона: # 1f4b74

На вкладке дизайна обновите макет формы:

• Макет: тело сверху, форма снизу

Затем обновите стили полей следующим образом:

• Цвет фона полей: прозрачный
• Цвет текста полей: #ffffff
• Маржа полей: 1.5em вверху
• Заполнение полей: 0.5em сверху, 0.5em снизу, 1em слева, 1em справа
• Размер текста полей: 1.2em
• Высота линии полей: 2em

Затем обновите стили границ полей:

• Поля со скругленными углами: 0 пикселей
• Ширина нижней границы поля: 2 пикселя
• Цвет нижней границы полей: #ffffff

Давайте также обновим стили шрифта заголовка:

• Толщина шрифта заголовка: полужирный
• Стиль шрифта заголовка: TT
• Выравнивание текста заголовка: по центру

А теперь давайте приступим к оформлению кнопки.

• Использовать собственные стили для кнопки: ДА
• Цвет текста кнопки: # 1f4b74
• Цвет фона кнопки: #ffffff
• Расстояние между буквами кнопки: 0,1 м
• Толщина шрифта кнопок: полужирный
• Стиль шрифта кнопки: TT

Для нашей последней настройки дизайна давайте добавим в форму максимальную ширину и отступы следующим образом:

• Максимальная ширина: 500 пикселей
• Заполнение: 5% сверху, 5% снизу, 3% слева, 3% справа

Наконец, нам нужно добавить в модуль класс CSS, чтобы на следующем шаге мы могли настроить его таргетинг с помощью нашего кода CSS и JQuery.

Добавление собственного кода

Чтобы добавить собственный CSS и JQuery, добавьте модуль кода под модулем формы подписки на электронную почту.

CSS

В поле содержимого кода вставьте следующий CSS, убедившись, что CSS заключен в необходимые теги стиля:

.et-float-labels p {
  position: relative !important;
}

.et-float-labels .et_pb_contact_form_label {
  display: block !important;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 1em;
  padding: 0 1em;
  transform: translateY(0%);
  transform-origin: left;
  color: #ffffff;
  font-size: 1.2em;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  z-index: 0;
}

.et-float-labels .et_pb_contact_form_label.active {
  visibility: visible;
  opacity: 0.6;
  top:0;
  transform: translateY(-100%) scale(0.9);
}

.et_pb_module.et-float-labels form p .input::-webkit-input-placeholder {
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.et_pb_module.et-float-labels form p .input::-moz-placeholder {
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:-ms-input-placeholder {
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:-moz-placeholder {
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}  
.et_pb_module.et-float-labels form p .input::placeholder {
  transition: all 0.4s ease-in-out;
}

.et_pb_module.et-float-labels form p .input:focus::-webkit-input-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus::-moz-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus:-moz-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus:-ms-input-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus::placeholder {
  color: transparent !important;
}

JQuery

Под конечным тегом стиля вставьте следующий JQuery и оберните его необходимыми тегами сценария.

jQuery(document).ready(function ($) {
  var $floatLabelInput = $(".et-float-labels .input");
  $floatLabelInput.on("focus", function (e) {
    $(e.target).prev().addClass("active");
    e.stopPropagation();
  });
  $floatLabelInput.on("blur", function (e) {
    if (!$(e.target).val()) {
      $(e.target).prev().removeClass("active");
    } else {
      $(e.target).prev().addClass("active");
    }
  });
});

Нарушение кода

О CSS

Во-первых, мы нацелены на поля и задаем им относительное положение, чтобы мы могли дать элементу метки абсолютное положение в поле (или элементе p).

.et-float-labels p {
  position: relative !important;
}

Затем мы задаем элемент метки в форме и абсолютную позицию с другим стилем, который размещает текст метки так, чтобы он перекрывал текст размещения. Блок display: отменяет свойство display: hidden по умолчанию, поэтому метка готова к отображению. Затем мы скрываем это с скрытой видимостью.

.et-float-labels .et_pb_contact_form_label {
  display: block !important;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 1em;
  padding: 0 1em;
  transform: translateY(0%);
  transform-origin: left;
  color: #ffffff;
  font-size: 1.2em;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  z-index: 0;
}

Затем мы показываем, масштабируем и перемещаем (перемещаем) метку с анимацией слайда вверх, как только она получает «активный» класс, управляемый JQeury.

.et-float-labels .et_pb_contact_form_label.active {
  visibility: visible;
  opacity: 0.6;
  top:0;
  transform: translateY(-100%) scale(0.9);
}

Остальная часть CSS предназначена для скрытия заполнителя с переходом. Для этого нужно много строк, потому что каждому браузеру требуются разные префиксы для нацеливания на псевдоэлемент-заполнитель. Но идея проста - изменить цвет заполнителя на прозрачный.

.et_pb_module.et-float-labels form p .input::-webkit-input-placeholder {
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.et_pb_module.et-float-labels form p .input::-moz-placeholder {
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:-ms-input-placeholder {
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:-moz-placeholder {
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}  
.et_pb_module.et-float-labels form p .input::placeholder {
  transition: all 0.4s ease-in-out;
}

.et_pb_module.et-float-labels form p .input:focus::-webkit-input-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus::-moz-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus:-moz-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus:-ms-input-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus::placeholder {
  color: transparent !important;
}

О JQuery

Сначала мы определяем переменную $ floatLabelInput как элемент ввода в каждом поле формы.

  var $floatLabelInput = $(".et-float-labels .input");

Затем мы используем обработчик события фокуса с функцией для добавления класса («активный») к элементу метки (предыдущему родственнику элемента ввода) всякий раз, когда элемент ввода находится в фокусе. После того, как «активный» класс добавлен к метке, метка отображается, масштабируется и перемещается на место над входом с соответствующим CSS.

  $floatLabelInput.on("focus", function (e) {
    $(e.target).prev().addClass("active");
    e.stopPropagation();
  });

Наконец, мы используем обработчик события размытия с функцией, которая определяет, когда оставить «активный» класс на метке. Если вход не имеет значения, он останется активным, даже если поле ввода не в фокусе. Если у него нет значения, класс удаляется и возвращается состояние по умолчанию для поля.

  $floatLabelInput.on("blur", function (e) {
    if (!$(e.target).val()) {
      $(e.target).prev().removeClass("active");
    } else {
      $(e.target).prev().addClass("active");
    }
  });

Добавление и удаление класса с использованием обработчиков событий «focus» и «blur» (вместо «click») позволяет пользователю видеть эффект даже при навигации с использованием только клавиатуры (т. Е. При нажатии табуляции для циклического перехода по полям).

Конечный результат

Вот окончательный результат наших плавающих меток на полях формы в форме опций электронной почты Divi.

Последние мысли

Добавить плавающие метки в форму Divi не так уж и сложно. Создать форму варианта электронной почты (или любую форму Divi) на удивление легко. Однако при добавлении плавающих меток не забудьте настроить размер и интервал полей формы, чтобы оставить правильный объем места для плавающей метки. После этого мы используем собственный CSS, чтобы эффективно скрыть или показать заполнитель, когда пользователь фокусируется на поле. Поскольку каждому браузеру требуются разные префиксы для нацеливания на псевдоэлемент-заполнитель, важно использовать их правильно. Добавленный нами JQuery добавляет и удаляет класс в элементе label, который при необходимости будет отображать его в поле зрения. В общем, это надежное микровзаимодействие, которое улучшает пользовательский опыт.

Не стесняйтесь использовать этот же процесс для других форм Divi (например, для входа в систему или контактной формы). Только не забудьте добавить настраиваемый класс в форму перед добавлением настраиваемого кода. После этого вам может потребоваться настроить параметры дизайна полей формы, чтобы убедиться, что в нем достаточно места для этих плавающих меток.

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!