Contact Form 7: меняем стиль оформления (плагины)

Здравствуйте, сегодня рассмотрим 3 плагина, которые помогут вам красиво оформить контактную форму, созданную с помощью плагина Contact Form 7.


Скачать исходники для статьи можно ниже

1. Contact Form 7 Style

Сведения о плагине Contact Form 7 Style:
Сайт плагина: “wordpress.org/plugins/contact-form-7-style/”
Количество активных установок: 30,000+
Автор плагина: Johnny, dorumarginean, mlehelsz, MirceaR

Плагин имеет 7 + 5 готовых стилей оформления контактной формы, в том числе Рождество (Новый Год) и День святого Валентина:

плагины оформления contact forn 7

Чтобы применить один из них к контактной форме – нужно воспользоваться вкладкой “Contact Form 7 Style Template”:

Также плагин Contact Form 7 Style позволяет создавать свои (пользовательские) стили оформления – для этого нужно зайти в пункт “Contact Style”:

Менять можно размер полей, отступы, границы полей, цвет, фон, шрифт.

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

2. Contact Form 7 Skins

Сведения о плагине Contact Form 7 Skins:
Сайт плагина: “wordpress.org/plugins/contact-form-7-skins/”
Количество активных установок: 20,000+
Автор плагина: Neil Murray

После установки и активации плагина заходим в пункт “Contact Form 7” создаем новую форму (изменяем форму) и видим, что внизу появилось новое окошко:

, где мы можем выбрать “Шаблоны” (Template) или “Стили” (Style) формы:

3. Mammoth .docx converter

Сведения о плагине Mammoth .docx converter:
Сайт плагина: “ru.wordpress.org/plugins/mammoth-docx-converter/”
Количество активных установок: 9,000+
Автор плагина: Michael Williamson

После установки и активации плагина при создании новой/изменении существующей формы у вас появится новое окошка справа:

Чтобы применить стили плагина нужно удалить код формы от Contact Form 7 и вставить вместо него код формы плагина “Mammoth .docx converter”.
Коды разных форма от плагина “Mammoth .docx converter” можно найти здесь:
“cf7materialdesign.com/demos/”

На этом все! Красивых и функциональных вам сайтов!

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *