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 не будет опубликован. Обязательные поля помечены *