Изменить стили Contact Form 7

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

Kontakty-wp-best.png

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

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

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

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

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

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

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

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

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

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

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

к содержанию ↑

Изменить стили формы с помощью Contact Form 7 Style — для ленивых

Скачайте плагин и установите. В меню ‘Contact Style’ нажмите ‘Add New’.

Выберите элемент для стилизации.

Add New Style ‹ Choose element— WordPress.png

Настройки стилизации идентичны для каждого элемента.

Add New ‹ Change Element Styles— WordPress.png

choose element state — normal — обычное состояние, hover — вид при наведении

width / height — ширина/высота элемента

background — color — цвет фона, image — картинка в качестве фона, position — положение, size — размер, repeat — повтор

margin / padding — отступы/поля

border — width — толщина границы, style — стиль границы, color — цвет, radius — скругление

position — позиция элемента

Настройки кликабельны и интуитивны, экспериментируйте.

Вы можете смотреть превью во время стилизации. Отметьте вверху страницы контактную форму и нажмите Generate Preview. Область просмотра находится внизу.

Вид формы ‘После’ 5 минут экспериментирования:

Kontakty-Izmenennyj-stil-wp-best.png

к содержанию ↑

Готовые стили для Contact Form 7

Вам неохота морочить себе голову, создавая собственный стиль? Хотя я не рекомендую это, вы можете выбрать уже готовый стиль для вашей формы.

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

Contact Styles ‹ Predefined — WordPress.png

Для более повседнего использования обратите внимание на плагин Contact Form 7 Skins. Образцы бесплатных скинов вы можете посмотреть здесь //cf7skins.com/skins/styles/

Вот еще плагин Form Styles For Contact Form 7 с простыми, но симпатичными предустановленными стилями.

Простая и чистая форма контактов — Contact Form Clean and Simpleс разметкой Bootstrap, Google капчей и спам-фильтрами. Кстати, обратите внимание, довольно популярный плагин.

Если вы поищете самостоятельно в интернете, уверен, вы найдете многочисленные шаблоны и стили для Contact Form 7.

Но если вы потратите немного времени на стилизацию, вы сможете создать уникальный вид для вашей формы контактов, и вы будете не только ею гордиться, но также получать большое количество сообщений от вашей аудитории, потому что им будет приятно писать в неё и слать вам письма. 🙂

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

avatar
1 Цепочка комментария
1 Ответы по цепочке
0 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
2 Авторы комментариев
Иванirina Авторы недавних комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
irina
Гость
irina

Сейчас в Contact form7 нет настроек стилей, а как добавить стили для одной,конкретной формы вручную?