Так сложилось что стили которые используются плагином Contact Form 7 по умолчанию, совсем не привлекательные. Я бы даже сказал что они просто ужасны. В связи с этим каждый раз активируя данный плагин на новом сайте приходится доводить красоту в ручную, и что бы это все дело не было рутиной я создал экспорт формы и прописал для неё стили, которые можно загрузить и скопировать с данного сайта. Ниже находится сам файл экспорта:
После того как импортируете формы не забудьте заменить на вкладке формы «Письмо»
в поле «Кому» [email protected]
на ваш Email, в поле «От кого»
место [email protected]
укажите адрес с Email с Вашего домена. Так же замените
на Ваш полный путь к логотипу, то есть как пример укажите:
Файл экспорта импортируем обычным способом WordPress:
Заполнение вкладки Email письма:
Если Вам необходимы дополнительные теги для использования в письме, вы всегда можете их узнать здесь.
С помощью плагина Сontact form 7 быстро создается форма обратной связи на wordpress сайте. Форма обратная связь очень частое явление, она присутствует на многих коммерческих сайтах. Плагин contact form 7 совершенно бесплатный и на русском языке, что делает работу с ним удобной и быстрой. Он не новый, но пользуется своей популярностью и сейчас.
Веселый у нас народ, а главное честный...к чему это я. Недавно узнал как одна фирма попросила «контору по созданию и раскрутке сайтов» добавить им форму обратной связи на главную страницу. Данный прием является очень хорошим ходом для привлечения новых запросов от клиентов и пользуется своей популярностью.
Заплатили за такую форму, вы сейчас упадете, 40 000 рублей. Именно такую сумму озвучили и, что самое интересное, с ними согласились и все оплатили. Речь не идет про супер форму, в которой присутствует много всплывающих окон, варианты выбора из списка и другие навороты. Все простенько и скромненько. Москва есть Москва).
Кстати, вот такую форму на рисунке со всеми фишками с нуля, мне заплатили 15 000 рублей. В ней присутствует три варианта отправки формы, заполненные поля с выбором и другие мелкие прибамбасы. Данная форма сделана с нуля, аналогов конечно много, но именно такая присутствует только на одном сайте.
Кстати, если вы не хотите устанавливать дополнительный плагин на сайт по каким то причинам, есть способ добавить форму обратной связи на wordpress без плагинов. Такой пример я наводил . Только с добавлением кода, без никаких плагинов.
Не будем усложнять задачу, с помощью плагина contact form 7 можно быстро и без труда добавить на сайт wordpress простую форму обратной связи. Она не будет сильно подгружать сервер, работает без сбоев и проблем. Заходим в Плагины — Добавить новый и пишем в поиске его название. После того, как вы его скачали и установили, слева в админке появится новая строчка 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 как раз и отвечает за длину ячейки.
Надеюсь у вас все получится. Если что то не получается, задавайте свои вопросы в комментариях...я обязательно на них отвечу.
Почти каждый блог, созданный на платформе WordPress, использует Contact Form 7. Он в своей области очень популярен, тем более разработчики постоянно его развивают. Перед остальными подомными модулями имеет ряд преимуществ, в частности, простоту настроек, локализацию, добавление и управление всеми возможными элементами формы.
И сегодня рассмотрим плагин Contact Form 7 Style , который предназначен для того, чтобы визуально создавать стили для Contact Form 7. Изначально, кроме своего оформления, у плагина есть готовые стили формы в виде шаблонов. Где вы просто выбираете вариант шаблона и ставите галочку какой форме, созданной вами ранее, применить это оформление. Давайте разберем это на деле.
Пропускаем часть объяснения и создание форм, так как тема обзора направлена именно на стилизацию формы. Для этого, как говорилось выше, мы воспользуемся специальным плагином. После его установки в боковой панели добавится раздел «Contact Styles » с пяти подразделами.
В первом разделе «All Styles » находится уже готовые шаблоны стилей формы, и тут же будут сохраняться стили созданными вами. При наведении курсора мыши на один из шаблонов, появляются дополнительные кнопки управления: Изменить, Свойства, Удалить. При нажатии на кнопку «Свойства» отобразится все доступные формы связи имеющиеся на вашем сайте. Где нужно только поставить галочку напротив нужной формы и сохранить изменения.
В разделе «Add New » можно самостоятельно сделать шаблон для формы со своими стилями, как это показано выше на видео. Переключаясь между элементами формы и визуально оформлять все поля как в нормальном состоянии, так и в hover эффекте.
Хотите отображать поля формы обратной связи сделанной при помощи плагина 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; }
Чтобы сделать поля формы в 2 колонки, необходимо использовать подобную конструкцию, которую нужно вставить в основное поле создания формы Contact Form 7:
Поля имя и email выстроятся в две колонки, а текстовая область для сообщения будет под ними.
Если же вы хотите сделать горизонтальную форму, где все поля и кнопка отправки будут находится в одну линию, а поле подтверждения согласия на обработку данных под ними, то используйте подобную конструкцию.
Если же вы считаете, что подтверждение о согласии на обработку персональных данных для слабаков, то вот вариант без него:
Ну и на дорожку, поля и кнопка Contact Form7 в 4 колонки. С подтверждением:
И без подтверждения:
По умолчанию Contact Form 7 вставляет тег
Когда создаёт свою разметку. Это частенько приводит к неприятным сюрпризам и если вы столкнулись с таковым, то нужно сделать следующее.
Вот таким образом мы очень просто можем отображать форму Contact Form 7 в 2, 3 и даже 4 колонки. Разумеется, невозможно разобрать 1000 и 1 ситуацию всего в одной статье. Пишите в комментариях свои ситуации! Будем разбирать и дополнять статью вместе. Только указывайте какой вариант кода используете.
Популярный плагин Contact form 7 не отличается особой красотой своей стандартной формы, по этому для многих пользователей встает вопрос, как изменить внешний вид. Именно этим мы сейчас и займемся, я попытаюсь дать вам универсальный вариант, который подойдет для любого сайта.
Ранее я уже рассказывал о том , сейчас не будем об этом говорить, а сразу перейдем к необходимым изменениям дизайна.
Для начала нам нужен и файлу style.css, его можно найти во вкладке «Внешний вид»/»Редактор». По умолчанию, именно нужный файл вам и откроется. Рекомендую открыть несколько вкладок в браузере:
Вкладки открыты приступим к внесению изменений, для начала немного подправим нашу форму.
Когда мы откроем форму для правки мы увидим примерно следующую картину:
Такая форма обратной связи будет выглядеть примерно так:
Скучно, не пропорционально, скажем прямо не красиво.
Для изменения внешнего вида формы нужно немного поработать со стилями, но для начала добавим несколько классов в шаблон формы. Для этого открываем форму для правки (как на картинке выше) и дописываем следующие классы:
Писать мало, поэтому ошибок наделать трудно. В сети вы наверное находили советы без применения и добавления классов. Все дело в том что без добавления классов может возникнуть несколько проблем. К примеру вы захотите добавить сразу несколько форм на сайт, все они примут идентичный вид, а это не всегда удобно, по этому стоит использовать именно предложенный мной вариант.
Классы добавлены, пока ничего не изменилось, следующим шагом будет определение id формы.
Для начала нужно понять что одна и та же форма будет иметь разные id на разных страницах сайта, так устроен плагин, он добавляет дополнительный параметр при каждом вызове формы. Сейчас разберем поподробнее.
Для правки формы нужно ее добавить на страницу или в запись, в необходимом месте, то-есть вставить шорткод. После этого переходим на эту страницу и кликаем по форме правой кнопкой мыши и выбираем пункт «Просмотреть код» это для браузера Chrome, если у вас другой, то там примерно такой же текст.
В открывшемся коде ищем начало нашей формы, выглядит это так:
Именно это и будет id формы. Возвращаясь назад, покажу какой id имеет эта же форма на другой странице.
Как видим, идентификатор отличается всего несколькими цифрами. По этому для начала нужно определиться на какой странице будет расположена форма, а уж затем приступать к правке стилей.
Ну что, очередной шаг сделан, мы определили id, прописали наши классы, теперь приступим непосредственно к изменению внешнего вида.
Забегая вперед скажу что предложенный мной вариант навряд покажется вам идеальным. Дело в том что каждый кто читает эти строки хочет видеть свою форму именно такой какой он ее представляет. Я не телепат, и не смогу угодить всем, но постараюсь дать вам наводку где и в каком месте искать информацию и что изменять. Так что простите сразу за возможное разочарование, панацеи нет, придется и вам немного поработать.
После проделанной работы переходим к стилям. Сперва изменим (если это нужно) фоновый цвет формы, подгоним наши отступы, подберем необходимый шрифт и цвет текста. Все эти настройки будем проводить заранее зная 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;
}
Теперь разберем все подробнее:
С данными параметрами можете экспериментировать сами, подбирать отступы, цвета и шрифты. Для этого нужно лишь изменить значение, сохранить новый вариант, обновить страницу и посмотреть изменения. Не бойтесь экспериментов, тут вы не сможете поломать ничего, в крайнем случае стили просто не сработают и вы легко все исправите как было.
Переходим к нашим полям, добавим отступов:
#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%;
}
Теперь разберем все поподробнее:
Можно обновить файл стилей и посмотреть на изменения, если нужно, подогнать размеры под ваши нужды.
Переходим к нашей кнопке, выровняем по центру и добавим фон:
Submit-cf {
width: 200px; /*ширина блока*/
height: 25px; /*высота*/
margin: 0 auto; /* Отступ слева и справа */
}
.submit-cf input {
width: 200px;
background:#96B195;
}
Традиционно объясняю что к чему:
Сохраняем наши настройки и смотрим что у нас получилось:
Соглашусь далеко не шик, но зато адекватно смотрится в целом, ниже форма по умолчанию, думаю эффект очевиден. В любом случае мы научились изменять внешний вид формы Contact Form 7 .
Надеюсь для вас статья была полезной, если же что-то не так или возникли проблемы оставьте свой комментарий и я постараюсь ответить (подправить).
