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


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

Прежде всего, необходимо добавить ключевое слово watermark для тех текстовых полей, где вы хотите использовать placeholder. Например:

1
[text* email id:email class:myclass watermark "Email"]

После этого остается добавить код jQuery в любое место вашего шаблона (можно в хэдер или футер):

1
2
3
4
5
6
7
8
9
10
11
12
<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’, то форма будет иметь аналогичную функциональность, но дефолтное значение будет исчезать при вставке курсора в поле, а не в момент начала печатания чего-то. В принципе, этого вполне достаточно.

За подсказку спасибо code-tricks





Другие посты

Категория: WordPress

Оставить комментарий