Использование placeholder-ов для Contact Form 7.

На момент написания этой статьи популярный плагин WordPress для создания форм Contact Form 7 не предусматривает использование «плэйсхолдеров». Возможно, эта возможность появиться позднее. Сейчас мы можем реализовать это через добавление небольшого jQuery-кода в нашу тему.

Прежде всего, необходимо добавить ключевое слово watermark для тех текстовых полей, где вы хотите использовать placeholder. Например:
[text* email id:email class:myclass watermark "Email"]

После этого остается добавить код jQuery в любое место вашего шаблона (можно в хэдер или футер):
<script>
jQuery(document).ready(function() {
    jQuery("form p span input").each(function() {
        jQuery(this).attr("placeholder", jQuery(this).attr("title"));       
    });  
 
    jQuery("form p span textarea").each(function() {
        jQuery(this).attr("placeholder", jQuery(this).text());
        jQuery(this).text("")   
    });
});
</script>

Если вы используете только ‘watermark’, то форма будет иметь аналогичную функциональность, но дефолтное значение будет исчезать при вставке курсора в поле, а не в момент начала печатания чего-то. В принципе, этого вполне достаточно.
Теги:
placeholder
Добавлено: 19 Мая 2018 21:34:03 Добавил: Андрей Ковальчук Нравится 0
Добавить
Комментарии:
Нету комментариев для вывода...