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

HTML и CSS WordSmall

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

Как раз этим сейчас и займемся. Мы не будем прибегать к 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/

— Не забывайте делиться с друзьями в социальных сетях: —

Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

E-mail Google+ Twitter
Добавить комментарий
bold quote code