Contact form 7 – как изменить внешний вид формы

contact form 7Плагин Contact form 7 мы обсудили в предыдущей статье. Но не затронули тему изменения внешнего вида самой формы. Именно этот вопрос мы сегодня и попробуем решить.

Начнем с использования специально созданного для Contact form 7 плагина.

Contact Form 7 Style

Этот плагин находится в библиотеке WordPress. Просто введите его название или просто название плагина контактной формы и он будет выложен на первой странице. Активируем его.

Теперь при редакции новой формы, к четырем вкладкам настроек, добавляется пятая, которая так и называется “Contact Form 7 Style шаблоны”

шаблоны

Если Вы переходите на эту вкладку, то просто выбираете тот шаблон, который вам понравился (их несколько, просмотреть их можно перелистывая страницы “карусели” с шаблонами) и сохраняете выбор.

выбор

Для примера выберем шаблон формы для контактов в день Валентина. И вот что у нас получилось.

форма

Теперь пройдемся по настройкам самого плагина. Вы их найдете в левом меню консоли блога.

All Styles – Все стили

В этой опции показаны все стили в виде списка. Если нажать под стилем формы на ссылку “Свойства”, то откроются настройки всех созданных вами форм в плагине Contact form 7. Каждая будет обозначена чек боксом. Установив напротив выбранной формы галочку, вы не заходя в настройке присваиваете ей вид того стиля, который выбрали. Или наоборот – убираете раннее выбранный. Очень удобно.

свойства

Add new – Добавить новую

Это страница конструктора формы. Первое что необходимо сделать – дать ей название. Здесь же – предварительный просмотр и возможность ее публикации или сохранения.

новая форма

Можно не создавать новую форму, а выбрать ту, которая уже создана, но у вас появилось желание изменить ее внешний вид. Просто делаете выбор в окне ниже. Нажав на красную клавишу – предварительно просмотра, отправляете ее в соответствующее окно. Вторая клавиша – отправка изменения и сохранения в плагине Contact form 7.

Здесь же есть очень большой выбор дополнительных шрифтов.

шрифт

Теперь самое интересное – работа с настройками формы. Здесь все очень просто – выбираете кнопку соответствующей настройки – настройки самой формы (ширина, длина, цвет), натройка кнопки, текстового поля, радиокнопок и т.д. И работаете с ними. Если возникают вопросы – просто переведите текст.

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

После завершения работы – сохраните стиль формы.

настройки

CSS Editor – Настройки CSS

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

Setting – Настройки плагина

Переведите интерфейс этих настроек и выберите те, которые считаете нужным. Практически здесь все понятно. Я установила флажки во всех чек боксах.

настройки плагина

System Status – Обратная связь с поддержкой плагина.

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

Плагин SiteOrigin CSS, я его уже упоминала в предыдущей статье, так же очень хорошо и быстро меняет внешний вид формы

Как всегда, предлагаю Вам свою рассылку – “Инструменты в помощь начинающему блогеру”. Подписавшись на которую, будете получать всю последнюю информацию о настройках блога

Ну что же, удачной Вам работы! Будут вопросы или пожелания, пишите в комментариях. Если информация была для Вас полезной – делитесь ей со своими друзьями в социальных сетях
Смирнова Ирина

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