Contact Form + placeholder

Многие авторы сайтов на WordPress для организации пользовательских форм используют популярный плагин Contact Form 7. Плагин позволяет создавать формы любой сложности и конфигурации, в том числе, и обычные формы обратной связи так популярные у блогеров.

В HTML5 появился новый удобный атрибут тега input под названием placeholder (подсказывающий текст, текст подсказка). Атрибут поддерживается всеми современными браузерами и IE10+. Значение этого атрибута будет использовано внутри поля формы, который исчезает при получении фокуса или начале набора текста (зависит от браузера).

К сожалению, у плагина Contact Form 7 нет опции позволяющей использовать этот новый атрибут, зато есть watermarkcontactform7.com/text-fields, эта опция позволяет определить значение по умолчанию, т.е. атрибут value. Отлично! Заменим средствами javascript и jQuery в частности, атрибут value на placeholder для формы/форм созданных этим плагином.

Добавим следующий код в footer.php используемой темы:

<script>
(function($) {
	var findInput = $( '#cform' ).find( "input[type='text']" );
	findInput.each(function(index) {
		var placeholderName = $(this).attr( 'value' );
		$(this).removeAttr( 'value' );
		$(this).attr( 'placeholder', placeholderName );
	});
}(jQuery));
</script>

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

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

Обратите внимание на предыдущие записи: