Изменить внешний вид формы Contact Form 7

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

видео Изменить внешний вид формы Contact Form 7

Настройка Contact form 7. Добавление полей

После установки плагина Contact Form 7 и вывода формы на страницу, она выглядит примерно так.



Согласитесь, не очень выразительно. Но её вид можно легко поправить.

Если вы умеетe изменять/добавлять стили CSS, вероятно, вы захотите начать со стилизации полей .

.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea { /* здесь стили: цвет, фон, шрифт, размер, границы и др. */ }

Затем, чтобы усилить сочетание с вашей темой, можно поправить стили для всей формы .


Настройка Contact Form 7. Часть-1

.wpcf7 { /* здесь стили: цвет, фон, шрифт, размер, границы и др. */ }

Как задать стиль только для конкретного поля? Предположим, вы хотите изменить стили для необязательного поля ‘ Тема ‘, которое присутствует в форме по умолчанию после активации плагина.

Всего лишь нужно добавить ID для нужного поля в шаблоне формы.


Contact Form 7. Выводим поля горизонтально, добавляем выбор даты и маску для телефона

<label> Тема [ text your-subject id:fb-subject ] </label>

После чего можно прописывать свои стили CSS.

#fb-subject { /* здесь стили: цвет, фон, шрифт, размер, границы и др. */ }

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

rss