Contact form 7 примеры оформления css. Советы, хаки, секреты. Остальные вкладки формы
После установки плагина Contact Form 7 и вывода формы на страницу, она выглядит примерно так.
Согласитесь, не очень выразительно. Но её вид можно легко поправить.
Если вы умеетe изменять/добавлять стили CSS, вероятно, вы захотите начать со стилизации полей .
Wpcf7 input, .wpcf7 input, .wpcf7 textarea { /* здесь стили: цвет, фон, шрифт, размер, границы и др. */ }
Затем, чтобы усилить сочетание с вашей темой, можно поправить стили для всей формы .
Wpcf7 { /* здесь стили: цвет, фон, шрифт, размер, границы и др. */ }
Как задать стиль только для конкретного поля? Предположим, вы хотите изменить стили для необязательного поля ‘Тема ‘, которое присутствует в форме по умолчанию после активации плагина.
Всего лишь нужно добавить ID для нужного поля в шаблоне формы.
После чего можно прописывать свои стили CSS.
#fb-subject { /* здесь стили: цвет, фон, шрифт, размер, границы и др. */ }
Для того, чтобы сделать простой, но приятный дизайн формы обратной связи, вам вовсе не нужно быть веб-программистом или компьютерным гиком. Всю необходимую информацию вы легко можете найти в интернете вместе с примерами и пояснениями.
Вот еще плагин Form Styles For Contact Form 7 с простыми, но симпатичными предустановленными стилями .
Простая и чистая форма контактов — Contact Form Clean and Simple — с разметкой Bootstrap, Google капчей и спам-фильтрами . Кстати, обратите внимание, довольно популярный плагин.
Если вы поищете самостоятельно в интернете, уверен, вы найдете многочисленные шаблоны и стили для Contact Form 7.
Но если вы потратите немного времени на стилизацию, вы сможете создать уникальный вид для вашей формы контактов, и вы будете не только ею гордиться, но также получать большое количество сообщений от вашей аудитории, потому что им будет приятно писать в неё и слать вам письма. 🙂
Хотите отображать поля формы обратной связи сделанной при помощи плагина Contact Form 7 в несколько колонок? Это простое руководство позволит вам сделать это за пару минут.
Вставьте этот CSS код любым удобным способом. Как вариант, это может быть: файл style.css вашей темы, дополнительные стили в настройщике активной темы или дополнительный плагин для вставки CSS.
One-half, .one-third, .two-third, .one-fourth { position: relative; margin-right: 4%; float: left; margin-bottom: 10px; } .two-third { margin-right: 2.5%; } .one-half { width: 48%; } .one-third { width: 30.66%; } .two-third { width: 66%; } .one-fourth {width: 22%;} .last { margin-right: 0 !important; clear: right; } @media only screen and (max-width: 1024px) { .one-fourth { width: 100%; margin-right: 0; } } @media only screen and (max-width: 767px) { .one-half, .one-third, .two-third { width: 100%; margin-right: 0; } } .wpcf-wrap { min-height: 90px; } div.wpcf7-response-output { width: 100%; clear: both; margin: 0; } .wpcf-accept { clear: both; } .wpcf7-acceptance > .wpcf7-list-item { margin: 0; } .wpcf-accept > .wpcf7-form-control-wrap { display: inline-block !important; }
Поля Contact Form 7 в 2 колонки
Чтобы сделать поля формы в 2 колонки, необходимо использовать подобную конструкцию, которую нужно вставить в основное поле создания формы Contact Form 7:
Поля имя и email выстроятся в две колонки, а текстовая область для сообщения будет под ними.
Поля Contact Form 7 в 3 колонки с подтверждением
Если же вы хотите сделать горизонтальную форму, где все поля и кнопка отправки будут находится в одну линию, а поле подтверждения согласия на обработку данных под ними, то используйте подобную конструкцию.
Поля Contact Form 7 в 3 колонки без подтверждения
Если же вы считаете, что подтверждение о согласии на обработку персональных данных для слабаков, то вот вариант без него:
Поля Contact Form 7 в 4 колонки
Ну и на дорожку, поля и кнопка Contact Form7 в 4 колонки. С подтверждением:
И без подтверждения:
Как убрать автоматическую вставку тега P в Contact form 7
По умолчанию Contact Form 7 вставляет тег
Когда создаёт свою разметку. Это частенько приводит к неприятным сюрпризам и если вы столкнулись с таковым, то нужно сделать следующее.
- Найдите в корневой папке вашего сайта файл wp-config.php;
- Прокрутите файл до конца и отыщите комментарий /* Это всё, дальше не редактируем. Успехов! */ или /* That"s all, stop editing! Happy blogging. */ ;
- Вставьте этот код define("WPCF7_AUTOP", false); НАД надписью из пункта 2;
- Сохраните файл.
Вот таким образом мы очень просто можем отображать форму Contact Form 7 в 2, 3 и даже 4 колонки. Разумеется, невозможно разобрать 1000 и 1 ситуацию всего в одной статье. Пишите в комментариях свои ситуации! Будем разбирать и дополнять статью вместе. Только указывайте какой вариант кода используете.
Контактная форма - неотъемлемый атрибут большинства сайтов. Именно поэтому в каталоге WordPress так много плагинов для контактных форм. Один из самых популярных - это Contact Form 7. Плагин позволяет создавать формы любых видов; очень гибок и удобен в настройке; развивается уже много лет и содержит много наработок.
Создание и показ контактных форм
Создание форм в админке
После установки плагина появится пункт меню "Contact Form 7", через который можно создавать и удалять формы.
Форма на картинке создана при активации плагина автоматически.
Используем форму по умолчанию, для этого создадим страницу "Связаться со мной" и вставим туда шорткод формы.
Лицевая часть сайта
А теперь сохраним статью и посмотрим, как выглядит наша форма (используется тема Twenty Sixteen):
На картинке вид формы после отправленного письма (об этом говорит извещение внизу формы).
Настройка формы (создание сложных форм)
Пример выше показывает как вставить готовую и очень простую форму контактов. А теперь давайте рассмотрим как создать форму посложнее. Для этого вернемся в админку, в менеджер форм и зайдем в редактирование формы по умолчанию.
В верхнем поле - название формы (его видно только в админке), указываем понятное для себя название, например: "Отзыв о сайте", "Форма заявки на работу", "Форма обратной связи" и т.п.
Под заголовком - шорткод. Его используем в записях, для вывода формы.
И ниже - четыре вкладки:
- Шаблон формы
- Письмо
- Дополнительные настройки
Рассмотрим каждую вкладку отдельно.
Шаблон формы
В этой вкладке можно настроить поля и внешний вид формы. Рабочей областью является HTML редактор WP. Только вместо привычных кнопок мы видим кнопки вставки разных полей формы.
Вёрстка формы
Для верстки можно использовать html-теги и шорткоды плагина. Шорткоды добавляют поля формы, а html теги позволяют создать произвольную HTML структуру. К примеру, наша дефолтная форма выглядит так:
А при отображении в записи она превратится в такой HTML:
Синтаксис шорткодов
Давайте кликнем по кнопке «Текст». Открывается окно, где мы можем указать атрибуты текстовому полю. Указываем и жмем "Вставить тег".
Тег в последствии будет преобразован в текстовое поле с html кодом:
Шорткоды можно удобно создавать через конструктор шорткодов.
Но конструктор не дает возможность изменить шорткод (там можно только создать шорткод). Изменить шорткод можно двумя способами:
- удалить и создать с помощью конструктора новый.
- изучить синтаксис и исправить шорткод поля вручную.
С конструктором вы и сами разберетесь.
А тут мы разберем синтаксис шорткода.
Для примера рассмотрим тег текстового поля с дополнительными опциями:
Text(обязательный) Тип поля: text, select, password, number и т.д. (в данном случае поле текстовое). Определяет, в какой элемент формы будет преобразован наш тег, а значит какой вид данных он будет принимать. * Звёздочка делает поле обязательным для заполнения (форма не будет отправлена и отобразиться уведомление о том, что поле надо заполнить). client-name(обязательный) Имя поля, используется как атрибут name в input, а так же используется при формировании шаблона отправляемого письма. id:my-id Атрибут id в input со значением my-id. Используется для оформления. class:my-class Атрибут class в input со значением my-class. Используется для оформления. placeholder "Введите имя" Использовать текст "Введите имя" как placeholder.
Соблюдайте порядок атрибутов тега: сначала идёт тип поля, затем его имя и только потом дополнительные опции.
Типы полей
- Текстовые поля: text , email , tel , url , textarea
- Числовые поля: number , range
- Поля с датой: date
- Чекбоксы, радио, списки: checkbox , radio , select
- Поле с загрузкой файла: file
- CAPTCHA: captchac и captchar
- Опросы: quiz
- Поле "Принять": acceptance
- Кнопка "Отправить": submit
- Произвольный тип поля
Шаблон письма
Во второй вкладе можно тонко настроить шаблон (вёрстку) и свойства отправляемого письма. В полях данной вкладки можно использовать специальные теги полей формы - это дает возможность передавать в письме указанные в форме данные.
Теги состоят из имен полей из шаблона формы. Например, мы создали текстовое поле с именем: . Теперь в шаблоне письма можно использовать тег . В письме вместо этого тега будет подставлено значение поля, введенное пользователем (ФИО).
Заголовки письма:
- Дополнительные заголовки - По умолчанию тут прописано Reply-To: . Заголовок Reply-To говорит нам, что на этот электронный ящик можно ответить нажав кнопку "Ответить" в почтовой программе, а тег формы - это имя поля из шаблона. Указанный пользователем email будет вставлен вместо этого тега. Получится что-то типа Reply-To: [email protected] .
Кому - электронный ящик, куда будет отправлено письмо. Можно указать сколько угодно ящиков через запятую.
От кого - имя и электронный ящик, от кого пришло письмо. Обычно тут указывается почта сервера (например [email protected]).
Можно указать любую почту, но если домен почты будет отличаться от домена сайта - форма не пройдет проверку и будет «ругаться» на этот параметр, хотя письма всё равно будут отправляться.
Тема - Заголовок письма. По нему будет понятно с какой формы были отправлены данные. К примеру, тема письма "Ошибка на сайте", "Заказ обратного звонка" и так далее. Выбираете такой заголовок, чтобы проще было работать с полученными письмами.
Тело письма
Это следующая важная часть данной вкладки. Тут указывается сам текст письма. В тексте используем всё те же теги формы (имена полей из шаблона формы).
Разберем дефолтное письмо:
От: <> Тема: Сообщение: -- Отправлено с сайта Изучаем плагин Contact Form 7 (http://test-wp.ru)
У нас было 4 поля, которые заполнял пользователь. После отправки письма теги превратятся в значения и мы получим такое письмо:
От: Дмитрий
Не обязательные поля в теле письма
Если юзер не заполнит поле, а оно используется в теле письма, то тело письма будет неполным. К примеру в теле написано Человек с города , но юзер не заполнил поле , а значит в письме мы получим Человек с города... Такая строка в письме лишняя. Чтобы убрать эту строку из письма, поставьте галочку на пункте "Исключить вывод строк с пустыми тегами сообщения". Обратите внимание, что это сработает только тогда, когда текст и шоткод поля находятся в одной и той же строке.
Опция "Использовать HTML-формат письма". Позволяет использовать в теле письма HTML теги. При этом можно использовать ограниченный список HTML тегов, потому что не все почтовые клиенты или сервисы умеют правильно обрабатывать сложную HTML разметку. Можно использовать: таблицы, маркированные списки, жирность, абзацы и так далее. Подробнее ищите в сети.
Contact Form 7 позволяет отправлять письмо на два адреса, причем настройки для каждого письма разные. Это может пригодиться, когда надо отправить администратору сайта письмо с полной информацией и дубликат менеджеру, где содержится только данные о заказе.
Уведомления при отправке формы
В данной вкладке вы можете отредактировать сообщения, которые выводит форма в той или иной ситуации: при удачной или неудачной отправке письма, или при ошибках.
Теги шаблона письма не работают в этих полях.
Дополнительные настройки
Эта вкладка предназначена для продвинутых пользователей и даёт возможность с помощью JS кода расширять возможности формы. К примеру, вешать события для аналитики.
Об использовании данного функционала я расскажу в отдельной статье.
Популярный плагин Contact form 7 не отличается особой красотой своей стандартной формы, по этому для многих пользователей встает вопрос, как изменить внешний вид. Именно этим мы сейчас и займемся, я попытаюсь дать вам универсальный вариант, который подойдет для любого сайта.
Ранее я уже рассказывал о том , сейчас не будем об этом говорить, а сразу перейдем к необходимым изменениям дизайна.
Для начала нам нужен и файлу style.css, его можно найти во вкладке «Внешний вид»/»Редактор». По умолчанию, именно нужный файл вам и откроется. Рекомендую открыть несколько вкладок в браузере:
- Вкладка Contact Form 7 для правки формы.
- Страницу на сайте с формой обратной связи.
- Редактор с открытым файлом CSS.
Вкладки открыты приступим к внесению изменений, для начала немного подправим нашу форму.
Добавляем классы к форме Contact Form 7.
Когда мы откроем форму для правки мы увидим примерно следующую картину:
Такая форма обратной связи будет выглядеть примерно так:
Скучно, не пропорционально, скажем прямо не красиво.
Для изменения внешнего вида формы нужно немного поработать со стилями, но для начала добавим несколько классов в шаблон формы. Для этого открываем форму для правки (как на картинке выше) и дописываем следующие классы:
Писать мало, поэтому ошибок наделать трудно. В сети вы наверное находили советы без применения и добавления классов. Все дело в том что без добавления классов может возникнуть несколько проблем. К примеру вы захотите добавить сразу несколько форм на сайт, все они примут идентичный вид, а это не всегда удобно, по этому стоит использовать именно предложенный мной вариант.
Классы добавлены, пока ничего не изменилось, следующим шагом будет определение id формы.
Определяем ID формы на странице.
Для начала нужно понять что одна и та же форма будет иметь разные id на разных страницах сайта, так устроен плагин, он добавляет дополнительный параметр при каждом вызове формы. Сейчас разберем поподробнее.
Для правки формы нужно ее добавить на страницу или в запись, в необходимом месте, то-есть вставить шорткод. После этого переходим на эту страницу и кликаем по форме правой кнопкой мыши и выбираем пункт «Просмотреть код» это для браузера Chrome, если у вас другой, то там примерно такой же текст.
В открывшемся коде ищем начало нашей формы, выглядит это так:
Именно это и будет id формы. Возвращаясь назад, покажу какой id имеет эта же форма на другой странице.
Как видим, идентификатор отличается всего несколькими цифрами. По этому для начала нужно определиться на какой странице будет расположена форма, а уж затем приступать к правке стилей.
Ну что, очередной шаг сделан, мы определили id, прописали наши классы, теперь приступим непосредственно к изменению внешнего вида.
Стилизация формы Contact Form 7, работа с файлом style.css
Забегая вперед скажу что предложенный мной вариант навряд покажется вам идеальным. Дело в том что каждый кто читает эти строки хочет видеть свою форму именно такой какой он ее представляет. Я не телепат, и не смогу угодить всем, но постараюсь дать вам наводку где и в каком месте искать информацию и что изменять. Так что простите сразу за возможное разочарование, панацеи нет, придется и вам немного поработать.
Изменяем цвет фона, отступы, шрифт формы.
После проделанной работы переходим к стилям. Сперва изменим (если это нужно) фоновый цвет формы, подгоним наши отступы, подберем необходимый шрифт и цвет текста. Все эти настройки будем проводить заранее зная ID. Как его узнать, мы рассматривали выше.
Сперва обратимся к файлу style.css, добавим первые правила для ID формы (добавлять нужно в самом низу файла), в моем случае это wpcf7-f172-p34-o1, вам же нужно подставить ваш идентификатор:
#wpcf7-f172-p34-o1 {
margin: 5px;
padding: 10px;
background: #B3AFAF;
font-family: Georgia, «Times New Roman», Times, serif;
color: #000;
}
Теперь разберем все подробнее:
- Вначале займемся отступами. Внешние отступы (от края до начала формы) - margin: 5px, внутренние отступы (от начала формы до внутренних элементов) -padding: 10px.
- Заливка формы или ее фон определяется свойством background: #B3AFAF, цвет можете подбирать какой угодно, просто заменив значение.
- Определяемся с семейством шрифта, если менять не хотите можно не прописывать это правило (font-family: Georgia, «Times New Roman», Times, serif).
- Цвет текста определяет свойство color, которое сейчас стоит в черном цвете (color: #000).
С данными параметрами можете экспериментировать сами, подбирать отступы, цвета и шрифты. Для этого нужно лишь изменить значение, сохранить новый вариант, обновить страницу и посмотреть изменения. Не бойтесь экспериментов, тут вы не сможете поломать ничего, в крайнем случае стили просто не сработают и вы легко все исправите как было.
Определяем отступы между полями, изменяем рамку.
Переходим к нашим полям, добавим отступов:
#wpcf7-f172-p34-o1 p{
margin:5px;
}
Это отступы по краям полей, что бы текст и блоки не сливались в одно целое.
Следующим этапом будут рамки, я дам свой вариант, а вы сможете найти в сети множество вариантов которые вам понравятся и заменить их.
#wpcf7-f172-p34-o1 input,textarea {
border: 3px double #000;
}
О рамках немного подробнее. Значение в 3px это ширина рамки, double двойное использование (если не нужно, можно удалить это слово), #000 цвет рамки так же можете подобрать свой.
Меняем ширину полей и их расположение.
Name-cf {
float:left;
padding: 2px;
}
.name-cf input {
width: 270px;
}
.thems-cf input {
width: 100%;
}
.clear-cf {
clear: both;
}
.text-cf textarea {
width: 100%;
}
Теперь разберем все поподробнее:
- Первый класс к которому мы обратимся name-cf он принадлежит полям с именем и емейлом. Для них задаем отступ в 2px (padding: 2px ) и обтекание (float:left ), что бы выровнять два поля в один ряд.
- Далее подправим ширину полей задав им оптимальный (для моего шаблона) размер в 270px (.name-cf input { width: 270px; } ). Если у вас поля все еще в одну строчку или же слишком маленький размер, подберите свой вариант.
- Поле с названием темы сделаем на всю ширину формы, так как текста там может быть больше (.thems-cf input { width: 100%;}). Если вы хотите свое, точное значение укажите его в пикселях.
- Следующий блок который мы добавили к форме предназначен для отмены обтекания (.thems-cf input {width: 100%; } ).
- Так же как и в предыдущем случае, поле с текстом сообщения делаем на всю ширину (text-cf textarea {width: 100%;} ).
Можно обновить файл стилей и посмотреть на изменения, если нужно, подогнать размеры под ваши нужды.
Выравниваем кнопку «Отправить» по центру, изменяем фон и ширину.
Переходим к нашей кнопке, выровняем по центру и добавим фон:
Submit-cf {
width: 200px; /*ширина блока*/
height: 25px; /*высота*/
margin: 0 auto; /* Отступ слева и справа */
}
.submit-cf input {
width: 200px;
background:#96B195;
}
Традиционно объясняю что к чему:
- Первым правилом мы определяем ширину и высоту блока в котором будет размещена кнопка и ставим ее по центру формы.
- Вторым правилом задаем цвет фона кнопки (background:#96B195, если не указать будет такого же цвета как и все остальные поля), устанавливаем ширину кнопки (width: 200px , желательно что бы была такого же размера, как ширина блока, что бы кнопка не двигалась в стороны).
Сохраняем наши настройки и смотрим что у нас получилось:
Соглашусь далеко не шик, но зато адекватно смотрится в целом, ниже форма по умолчанию, думаю эффект очевиден. В любом случае мы научились изменять внешний вид формы Contact Form 7 .
Надеюсь для вас статья была полезной, если же что-то не так или возникли проблемы оставьте свой комментарий и я постараюсь ответить (подправить).
С помощью плагина Сontact form 7 быстро создается форма обратной связи на wordpress сайте. Форма обратная связь очень частое явление, она присутствует на многих коммерческих сайтах. Плагин contact form 7 совершенно бесплатный и на русском языке, что делает работу с ним удобной и быстрой. Он не новый, но пользуется своей популярностью и сейчас.
Обратная связь на WordPress
Веселый у нас народ, а главное честный...к чему это я. Недавно узнал как одна фирма попросила «контору по созданию и раскрутке сайтов» добавить им форму обратной связи на главную страницу. Данный прием является очень хорошим ходом для привлечения новых запросов от клиентов и пользуется своей популярностью.
Заплатили за такую форму, вы сейчас упадете, 40 000 рублей. Именно такую сумму озвучили и, что самое интересное, с ними согласились и все оплатили. Речь не идет про супер форму, в которой присутствует много всплывающих окон, варианты выбора из списка и другие навороты. Все простенько и скромненько. Москва есть Москва).
Кстати, вот такую форму на рисунке со всеми фишками с нуля, мне заплатили 15 000 рублей. В ней присутствует три варианта отправки формы, заполненные поля с выбором и другие мелкие прибамбасы. Данная форма сделана с нуля, аналогов конечно много, но именно такая присутствует только на одном сайте.
Кстати, если вы не хотите устанавливать дополнительный плагин на сайт по каким то причинам, есть способ добавить форму обратной связи на wordpress без плагинов. Такой пример я наводил . Только с добавлением кода, без никаких плагинов.
Contact form 7: Настройка
Не будем усложнять задачу, с помощью плагина contact form 7 можно быстро и без труда добавить на сайт wordpress простую форму обратной связи. Она не будет сильно подгружать сервер, работает без сбоев и проблем. Заходим в Плагины — Добавить новый и пишем в поиске его название. После того, как вы его скачали и установили, слева в админке появится новая строчка contact form 7.
- Заходим в админку сайта, Плагины.
- Пишем в поиске contact form 7.
- Устанавливаем и настраиваем.
Заходим в нее и добавляем новую форму. Перед созданием самой формы, вам предложить выбрать язык, русский язык присутствует, его и выбираем. Первая вкладка «Шаблон формы». В ней происходит добавление новый полей в форму. Сверху присутствую разные кнопки для вставки новых полей. Нажимаем, выбираем и добавляем к себе на форму по очереди поля, которые вам нужны.
Я покажу вам вариант самой стандартной формы, которую можно использовать на большинстве сайтов. Если некоторые строчки вам не нужны, их можно убрать.
Человек должен написать свое имя, почту, описать проблему по которой он обращается, номер телефона. В форме присутствует кнопка для вставки изображения и проверка робот вы или нет. Если некоторые пункты вам не нужны, их можно просто выделить и удалить.
Все поля не обязательные для заполнения. Если нужно сделать некоторые поля обязательным для заполнения contact form 7, просто пишите (обязательно) в необходимый пункт и все будет работать. Пример показан на рисунке ниже.
Чтоб не переписывать данные из картинки, показываю пример всего кода для вставки. Скопируйте в свою форму и сохраните настройки. На второй вкладке «Письмо» можно (нужно) указать почтовый ящик, куда будут приходить все запросы.
Ваше имя (обязательно)
Ваш e-mail (обязательно)
Опишите Вашу проблему...
Телефон (обязательно)
< p > Вашеимя(обязательно) < br / > [ text* your - name ] < / p > < p > Вашe - mail (обязательно) < br / > [ email* your - email ] < / p > < p > ОпишитеВашупроблему. . . < br / > [ textarea your - message ] < / p > < p > Телефон(обязательно) < br / > [ tel tel - 378 ] < p > [ file file - 143 ] < / p > < p > [ quiz quiz - 740 class : blank _ 3"Сколько будет? 7+5=?|12" ] < / p > < p > [ submit "Отправить" ] < / p > |
После того, как вы все сделали и сохранили, плагин покажет вам одну строчку шорткода, это и есть сама форма. Ее нужно вставить в любое место на сайте, где должна появиться готовая форма. Обычно вставку делают через виджеты в сайдбар. Вы подумали это конец?) не совсем.
Результат вас может огорчить, вы увидите совсем чистую и пустую по оформлению форму. Вот, что у меня получилось на финише и после того, как я добавил несколько стилей.
Я не добавлял в таблицу стилей новые классы и так далее. Можно и так найти уже созданные стили данной формы и добавить в нее свои. Для этого нужно воспользоваться плагином для браузера FireBug и вы легко сможете добавить свои стили в вашу форму. Добавить можно все, что угодно...все зависит от вашей фантазии.Какие свойства используются для изменения шрифта можно .
wp-content/plugins/contact-form-7/modules
Вот в этой папке есть два файла (textarea.php) и (text.php). В них и находятся стили для формы, которые можно изменять и добавлять новые свои. Например, если нужно изменить длину ячейки, в файле (textarea.php) есть строчка: $atts["cols"] = $tag->get_cols_option ("27");Цифра 27 как раз и отвечает за длину ячейки.
Надеюсь у вас все получится. Если что то не получается, задавайте свои вопросы в комментариях...я обязательно на них отвечу.