Главная › Новости

Подсказки для формы комментариев WordPress на чистом CSS

Опубликовано: 01.09.2018

Всплывающие подсказки с помощью CSS

Форма комментариев – это неотъемлемая часть сайта. Она позволяет общаться, высказывать свое мнение, оставлять отзывы и поэтому следует ей уделить внимание, как и внешне, так и функциональнее. Подсказки в форме комментариев играют немаловажную роль они вроде навигации для пользователя, сюда вписать имя, туда почту и зависимо от оформления подчеркивают дизайн сайта.

CSS-анимация появления без плагинов

Как раз этим сейчас и займемся. Мы не будем прибегать к jQuery или JavaScript сделаем на чистом CSS. И в результате наши подсказки для комментариев в WordPress получатся очень впечатляющими.

Разметка HTML комментариев

Поскольку подсказки для комментариев будут создаваться с помощью CSS, то придется немного покопаться в файле comments.php . Но для начала рассмотрим, как выглядит чистая HTML форма с подсказками, а затем просто подставим к ней функции из шаблона комментариев.

HTML

<form> <div class="dynamiclabel"> <input id="name" placeholder="Ваше Имя" type="text"> <label for="Ваше Имя">Ваше Имя</label> </div> <div class="dynamiclabel"> <input id="email" placeholder="Email Адресс" type="text"> <label for="email">Email Адресс</label> </div> <div class="dynamiclabel"> <textarea id="feedback" placeholder="Текст Сообщения"></textarea> <label for="Текст Сообщения">Текст Сообщения</label> </div> </form>

Также не забываем про стили оформления и добавим их в файл style.css

CSS

form div.dynamiclabel{ display: block; margin: 30px; font: 16px ; position: relative; } form div.dynamiclabel input[type="text"], form div.dynamiclabel textarea{ width: 320px; padding: 10px; border: 1px solid #c3c3c3; border-radius: 7px; } form div.dynamiclabel textarea{ height: 200px; } form div.dynamiclabel label{ position: absolute; left: 0; border-bottom: 1px solid; border-bottom-color: #ccc; border-bottom-color: rgba(255, 255, 255, 0.2); background-color:#fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); border-radius: 2px; padding: 3px 10px; color: #18919A; font-weight: bold; -webkit-backface-visibility: hidden; top: 10px; -moz-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); opacity: 0; z-index: -1; } form div.dynamiclabel > *:focus{ border-color: rgba(82, 168, 236, 0.8); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6); outline: 0 none; } form div.dynamiclabel > *:focus + label{ opacity: 1; z-index:100; top: -35px; -ms-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -webkit-transform: rotate(-3deg); transform: rotate(-3deg); }

Посмотреть Demo

Итоговый результат думаю получился неплох, теперь осталось соединить HTML форму с формой комментариев WordPress.

Редактируем файл comments.php

Первым делом сделайте копию исходника чтобы можно было вернуть все обратно если что-то не получиться. В файле comments.php необходимо найти вывод формы комментариев, выглядит примерно так:

// input Ваше имя <p><input type="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> /> <label for="author"><small><?php _e('Name'); ?> <?php if ($req) _e('(required)'); ?></small></label></p> // input Ваш Email <p><input type="text" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> /> <label for="email"><small><?php _e('Mail (will not be published)'); ?> <?php if ($req) _e('(required)'); ?></small></label></p> // textarea <p><textarea name="comment" id="comment" cols="58" rows="10" tabindex="4"></textarea></p>

И самая важная часть, отредактировать input и textarea соединив свыше, представленной формой. Сложного ничего нет просто подставляем все функции из WordPress комментариев в HTML форму.

Пример. Input (Ваше Имя)

HTML разметка.

<div class="dynamiclabel"> <input id="name" placeholder="Ваше Имя" type="text"> <label for="Ваше Имя">Ваше Имя</label> </div>

Input из comments.php

<p><input type="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> /> <label for="author"><small><?php _e('Name'); ?> <?php if ($req) _e('(required)'); ?></small></label></p>

Результат.

<div class="dynamiclabel"> <input name="author" id="author" placeholder="Ваше Имя" type="text" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> /> <label for="author"><small><?php _e('Name'); ?> <?php if ($req) _e('(required)'); ?></small>Ваше Имя</label> </div>

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

Источник: http://www.dynamicdrive.com/style/csslibrary/item/pop_up_form_labels/