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, я его уже упоминала в предыдущей статье, так же очень хорошо и быстро меняет внешний вид формы

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

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

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