оформление формы contact form 7
Полное руководство по Contact Form 7
Установка плагина
1. В админ-панели перейдите Плагины > Добавить новый и в строке поиска впишите название дополнения.
Установка плагина Contact Form 7 из админки WordPress
2. В найденной карточке нажмите по очереди кнопки Установить и Активировать.
Вывод на сайте
После активации в админке откройте раздел Contact Form 7.
Список форм
В списке уже есть готовая форма. Вы можете создать их сколько нужно. Для каждой автоматически создается уникальный шорткод. Чтобы показать форму на сайте, его нужно вставить в редакторе контента или в шаблоне темы. Для примера выведем на отдельной странице.
1. Кликните Страницы > Добавить новую.
Создание новой страницы на сайте WordPress
2. Укажите название (например Контакты).
3. Скопируйте шорткод.
Шорткод формы
4. Вставьте в блок Шорткод из раздела Виджеты и нажмите Опубликовать.
Блок Шорткод
В итоге пользователь увидит:
Страница с формой CF7
Как создавать формы
Перейдите Contact Form 7 > Добавить новую.
Создание контактной формы
CF предлагает стартовый шаблон, который можно удалить или изменять. Этот простой пример сделан для того, чтобы было легче разобраться. Чтобы вставить новое поле, нажмите кнопку нужного элемента.
В текстовой области видны поля, которые будут показаны посетителю. Их можно редактировать вручную. Для верстки доступны:
Символом «*» отмечены обязательные к заполнению поля.
Если вы пока не определились с полями, оставьте как есть. К ним сможете вернуться позже.
Настройка письма
Когда заполненная пользователем форма обратной связи будет отправлена, администратор сайта получит email-уведомление. В нем указано имя посетителя, контакты и текст сообщения. Вы можете настроить формат этого уведомления. Для этого откройте вкладку Письмо.
В поле Кому вписывайте рабочий e-mail. На этот адрес будут приходить все уведомления.
Настройка уведомлений
Следующая закладка отвечает за сообщения, которые будут выводиться при заполнении формы.
Настройка уведомлений при отправке формы
Интеграция reCaptcha
1. В браузере наберите https://www.google.com/recaptcha/admin/create
2. В опции Ярлык введите произвольное название, отметьте reCAPTCHA v3, в настройке Домены укажите имя сайта, примите Условия использования и кликните Отправить.
Добавление reCAPTCHA на сайте Google
3. Скопируйте ключи.
4. В админ-панели перейдите Contact Form 7 > Интеграция и кликните Настройки интеграции.
Настройки интеграции в плагине
5. Добавьте скопированные ключи, сохраните изменения.
Установка целей метрики
В CF можно отслеживать конверсии для анализа поведенческих факторов. Рассмотрим как это сделать для Яндекс.Метрики.
1. В Метрике зайдите Настройка > Цели > Добавить цель.
Настройка цели в Яндекс-Метрике
2. Придумайте название цели, отметьте JavaScript-событие, укажите Идентификатор цели. Последний нужен для отслеживания действий.
Настройка цели в Яндекс-Метрике
3. Добавьте в файл functions.php активной Ворпресс-темы код
ID формы можно посмотреть, если открыть ее на редактирование.
Редактирование формы
Готовые шаблоны
Оформление в CF7 одинаковое для всех форм. Каждую из них можно видоизменить.
Плагин Contact Form 7 Style
Вы сможете применить к выбранной форме один из нескольких готовых шаблонов. Установка стандартная.
Чтобы задать внешний вид форме:
Решение проблем и исправление ошибок
Рассмотрим некоторые трудности, которые возникают при работе с дополнением CF7.
Не отправляются письма
Тут может быть несколько проблем:
Как исправить?
Чтобы заставить работать почту, есть несколько способов.
1. Стандартные настройки
Откройте вкладку Письмо в своей форме и в опции Кому проверьте, правильно ли указан адрес. Он должен быть рабочим.
2. WP Mail SMTP
Если ваш хостинг ставит жесткие ограничения на отправку писем или запрещает их вообще, тогда нужно стороннее решение. Такое бывает, если использовать почтовые ящики, созданные на хостинге.
Теперь о всех сообщениях, оставленных в форме, вы будете уведомлены.
3. Код
Использовать SMTP можно без плагина, с помощью кода в functions.php.
В коде нужно вписать свой email-адрес и пароль.
Сontact form 7 настройка внешнего вида. Изменяем дизайн форм.
Популярный плагин Contact form 7 не отличается особой красотой своей стандартной формы, по этому для многих пользователей встает вопрос, как изменить внешний вид. Именно этим мы сейчас и займемся, я попытаюсь дать вам универсальный вариант, который подойдет для любого сайта.
Ранее я уже рассказывал о том как установить и настроить Contact Form 7, сейчас не будем об этом говорить, а сразу перейдем к необходимым изменениям дизайна.
Для начала нам нужен доступ к админке и файлу style.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;
>
Теперь разберем все подробнее:
С данными параметрами можете экспериментировать сами, подбирать отступы, цвета и шрифты. Для этого нужно лишь изменить значение, сохранить новый вариант, обновить страницу и посмотреть изменения. Не бойтесь экспериментов, тут вы не сможете поломать ничего, в крайнем случае стили просто не сработают и вы легко все исправите как было.
Определяем отступы между полями, изменяем рамку.
Переходим к нашим полям, добавим отступов:
#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.
Надеюсь для вас статья была полезной, если же что-то не так или возникли проблемы оставьте свой комментарий и я постараюсь ответить (подправить).
MnogoBlog
как создать сайт на wordpress, настроить и оптимизировать wordpress
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 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) формы:
После установки и активации плагина при создании новой/изменении существующей формы у вас появится новое окошка справа:
На этом все! Красивых и функциональных вам сайтов!
Изменяем стили для contact form 7. Три готовых решения
Приветствую вас дорогой читатель моего блога!
Сегодня я хочу поделиться с вами некоторыми своими наработками и заготовками для придания более приятного вида форме обратной связи, созданной при помощи плагина Contact Form 7.
Навигация по статье:
К сожалению, по умолчанию оформление этой формы выглядит довольно невзрачно.
Выглядит не очень. Не правда ли?
К счастью всё это можно легко исправить и подогнать под дизайн Вашего сайта
Я предлагаю вам 3 варианта готовых стилей для Contact Form 7
Куда вносить изменения?
Перед тем как править стили нужно определиться куда вносить изменения.
Мы можем прописать новые стили прямо в файл стилей плагина, но после обновления этот файл заменится и Ваша работа пойдёт коту … ну вы сами знаете куда.
Более надёжным вариантом будет внесение изменений прямо в файл стилей вашей темы. Однако если вы и тему регулярно обновляете и не используете дочернюю тему то и в этом случае файл стилей заменится. Помните об этом и как минимум делайте себе резервные копии вашей темы и сайта в целом.
Первый вариант стиля для Contact Form 7
Для этого варианта нам не нужно будет ничего менять в самой форме, достаточно будет просто приписать стили в файл style.css вашей темы.
Для тех кто не помнит в какой папке он лежит вот путь:
Для того чтобы получить такой результат как на картинке выше приписываем в самом конце файла style.css следующие стили:
Вы можете изменить цвет фона на свой.
Делается этот вот здесь
При этом не забудьте загрузить изображение фона в папку images вашей темы.
Вот пример с фоном.
Для градиента замените эту строку на следующую:
Здесь первое значение цвета это верхний цвет, второе это нижний и в конце задаётся однотонный фон на случай если браузер не поддерживает свойство linear-gradient.
Вот как выглядит этот градиент:
Для того чтобы при активации полей они подсвечивались мы приписали следующие стили:
Второй вариант стилизации Contact Form7
Для того чтобы реализовать этот вариант помимо стилей нам ещё нужно будет немного доработать код, в котором задаются поля формы.
Для этого переходим в административную часть сайта и открываем меню «Contact form 7» — «Формы» — находим нашу форму и нажимаем «Изменить»
Далее удаляем тот код что там есть и вставляем следующий:
После добавления кода не забываем сохранить изменения. Теперь в файл стилей дописываем:
Я внесла код комментарии где можно поменять фон и т.д.
Если возникает необходимость поменять ширину формы, то это делается так:
Третий вариант стилей для Contact Form7
Теперь давайте рассмотрим ещё один вариант оформления стилей для Contact Form7 c использованием подписи полей внутри самого поля (placeholder)
Для этого открываем нашу форму для редактирования и удаляем все поля кроме кнопки отправки сообщения.
Далее добавляем 2 поля типа «text» при этом в поле «Значение по умолчанию» введём Значение нашего поля, например, «Ваше имя»
И сразу под этим полем нужно поставить галочку «Use this text as the placeholder of the field»
Если нужно чтобы поле было обязательным для заполнения то ставим галочку возле «Required field»
После этого нужно не забыть перейти на вкладку «Письмо» и подставить значения новых полей в письмо, которое будет приходить администратору.
В моём случае это выглядит так:
У вас будут другие значения шоткодов.
Для того чтобы придать этой форме более аккуратный вид допишем следующие стили:
Стили для вывода сообщений
Ещё один момент это вывод сообщений об ошибках и отправке сообщения.
Для того чтобы стилизовать их нам понадобятся классы «wpcf7-not-valid» для задания стилей тексту, который выводится под полем формы и «wpcf7-response-output» — отвечает за стиль сообщений внизу формы.
Я добавила красную рамку для неправильно заполненных или пустых полей а так же тень и закруглённые углы для выводящихся сообщений. Вы можете дописать в эти классы всё на что хватит вашей фантазии.
Видеоинструкция
На этом у меня всё. Надеюсь что смысл дописания своих стилей Вам понятен. Желаю вам удачи в подгонке стилей под дизайн вашего сайта и терпения. Уверена что у вас всё получится.
Если что пишите в комментарии. Всегда рада на них ответить.
С уважением Юлия Гусарь
Читайте также:
Подписаться на рассылку
93 комментария
А как сделать такую же как у вас //impuls-web.ru/kontakty/, имя и почта в строчку?
Александр!
У меня там сделано по принципу как в варианте оформления 2. Сначала нужно вставить HTML код в саму форму при редактировании, а потом дописать в CSS файл стили.
Код отправила Вам на почту.
Спасибо, удачи Вам!
Добавляйте ещё материал на сайт 🙂
И Вам удачи! Над добавлением материалов работаю 🙂 Так что заходите как нибудь ещё.
Спасибо за информацию. Очень интересно и полезно. А можно и мне выслать код такой формы, как у Вас в контактах.
Максим, отправила Вам письмо с кодом на почту. Если будут вопросы — пишите сюда.
А каким образом можно сделать такую форму?
На днях подготовлю статью с ещё несколькими вариантами стилей для Contact Form 7 и вышлю Вам ссылку на неё там сделаю такой вариант, как Вы показали и можно будет взять из неё код.
Добрый день, Юлия! Согласна с предыдущими комментариями. Информация очень полезная. Спасибо, что делитесь своими знаниями и кодами) Ожидаю очередной пост с вариантами стилей для Contact form 7. На рассылку новостей уже подписалась) Желаю успехов)
Здравствуйте! Дайте, пожалуйста ссылку на Ваш сайт (на страницу с формой). Там нужно поэкспериментировать с селлектором CSS. Не видя сайта не смогу Вам сходу подсказать.
И еще вопрос — если к примеру не менять кнопку — а просто ее выровнять относительно всей формы, как это сделать (к примеру передвинуть к середине формы, а не слева как сейчас)?
Только сейчас понял, что я не только стиль (css) не могу поменять у кнопки, но даже текст на ней (т.е. в окне настройки формы прописываю своей текст — а он не меняется)
Здравствуйте, Евгений! Вам попалась очень интересная тема с готовой интеграцией Contact Form 7. В самой теме предусмотрено что стандартная кнопка этого плагина как бы подменяется кнопкой из темы. Поэтому по факту получается что это уже не кнопка плагина а кнопка темы и править её текст и внешний вид так как для плагина Вы не можете.
Для того чтобы изменить цвет данной кнопки пропишите в файл стилей темы следующий код:
.temp_submit_cf7 > div <
background: red; /*вместо red пишете цвет, который Вам нужен*/
margin-top: 20px; /*отступ сверху задавать не обязательно, так что если что удалите*/
>
Для выравнивания по центру в style.css дописываем:
.temp_submit_cf7 <
width:100%!important;
text-align:center;
>
.temp это название класса блока, который встраивается вместо стандартной кнопки и для которого применены все стили оформления. Получается что тема заменяет кнопку плагина на свой фрагмент кода.
Для того чтобы исправить текст на кнопке — самым правильным решением, которое я вижу будет русификация данной темы (хотя бы частичная). Потому что текст на кнопке выводится из языкового файла.
Что касается текста на кнопке, то там чтобы его исправить нужно либо руссифицировать тему, либо лазить в коде и искать откуда он переменную с этим текстом берёт и там править.
Но это всё не самое страшное. Хуже то, что тема не даёт выбирать язык для формы и получается что работает на английском, что не очень удобно.
Я бы на Вашем месте поискала другую тему, а если ничего подобного не найдёте, тогда уж дальше с этой разбираться. Потому что тема достаточно сложно сделана, и если у Вас пока мало опыта во всём этом, то Вы с ней намучаетесь 🙂
и у меня возможно глупый вопрос — должна ли форма отправлять письма если я пока делаю сайт на локальном сервере, т.е. моего сайта нет в интернете. Или я смогу проверить отправку только после того, как размещу сайта на домене в интернете?
На локальном сервере отправка почты не работает! Поэтому проверить Вы сможете только после переноса на реальный хостинг в интернете.
Т.е. правильно я понимаю, нужно искать тему, в которой нет формы обратной связи? (хотя я не думаю, что найду такую) или просто конкретно в этой теме такая сложность и обычно таких проблем не возникает?
Вообще конечно хотелось бы использовать эту тему (т.к. внутри нее хороший набор шорткодов для настройки темы под себя, т.е. как-бы встроенный конструктор), если знаете аналоги напишите.
Но это всё не самое страшное. Хуже то, что тема не даёт выбирать язык для формы и получается что работает на английском, что не очень удобно.
не совсем понял. В принципе все сообщения об ошибках, отправке и т.д. на сколько я смог заметить я могу менять на русский, названия полей тоже. Проблема именно в кнопке — может где-то можно поставить приоритет настроек кнопки от формы над настройками темы?
Я установила эту тему к себе на тестовый сайт, где по умолчанию везде русский язык выставлен. Когда я пытаюсь отправить сообщение с этой формы, то все сообщения выводятся на английском. Вот скриншот http://prntscr.com/amp9k0
Если я пытаюсь создать новую форму, то тема не даёт мне выбирать язык. Во всяком случае стандартным способом.
Почему я думаю, что проблема в настройке только кнопки, а не всей формы — у меня получается настраивать стиль для полей — я их могу менять, а вот кнопку нет
Проблема заключается в том что тема не русифицирована и у неё сложная структура, из-за чего вносить некоторые изменения может быть достаточно сложно. Вот и всё 🙂 Всё это решаемо.
Здравствуйте! Спасибо большое за статью, благодаря ей изменила форму обратной связи.
Осталось несколько вопросов:
1. Хочу изменить размер кнопки отправить, подскажите, как это сделать?
Здравствуйте, Наталья!
Для того чтобы изменить размер кнопки можно в файл стилей Вашей темы в самом конце дописать следующее:
.wpcf7-submit <
width:300px!important; /*ширина кнопки*/
height:30px!important; /*высота кнопки*/
>
Если это не поможет, то нужно более детально изучать Вашу тему и её стили. Скорее всего в ней уже изначально будут применяться какие то стили, приоритет которых будет выше, чем у тех что я Вам дала.
Осталось несколько вопросов:
1. Хочу изменить размер кнопки отправить, подскажите, как это сделать?
И Вам спасибо за комментарий!
Здравствуйте Юлия. Мои Вам комплименты.
Помогите с настройкой формы contact form 7. Ни как не могу найти видео как настраивать форму чтобы поля были разделены на столбцы. Пример:
ФИО ( первая строчка во всю ширину)
Контактный телефон Ваш email (это вторая строка, 2 поля в одной строке)
Выпадающие меню Вып а дающие меню (это третья строка, 2 поля в одной строке)
Подскажите как это сделать. Может у Вас в планах снять видео? Думаю многим будет это полезно.
С Благодарностью за Ваш труд. Всех Благ.
Здравствуйте, Юрий! К сожалению видео по данной теме у меня пока нет 🙁 Но есть статья, в которой я даю код для размещения полей формы в несколько столбцов — вот ссылка
Там в первом примере рассматривается как сделать поля в 2 столбца и в один. Используя код из этого примера можно реализовать форму подобную той, которая Вам нужна.
Здравствуйте. Спасибо за ваше решение со стилями контактной формы. Очень ценный опыт ). У меня второй вариант шотокодов не работает со вторым вариантом кода. Хотя если ставить с первым то все нормально. Есть еще проблема. Контактная форма у меня находится в сайтбаре справа, и при просмотре с экрана другого размера, часть формы начинает уходить за кран. Если есть у вас решение этой проблемы буду благодарен )
Здравствуйте, Евгений!
По поводу размера формы на маленьких экранах. Попробуйте в CSS задать ширину формы не в пикселях а в процентах. Иди вместо width: 280px; прописать max-width: 280px; width:90%;
Гарантировать что это сработает не могу так как здесь многое зависит от стилей темы. В идеале прописать ряд свойств и медиазапросов для формы чтобы сделать её адаптивной.
По поводу проблемы с шорткодами во втором варианте. Что именно не работает? В чём это выражается?
Спасибо за ваш ответ и рекомендации. Я пробовал задавть ширину и в процентах и в пикселях. Что толко не пробовал. Ничего пока не получилось. Понял что проблема не с контактной формой скорее всего а с областью. Никак ее не зафиксировать. Возможно если бы я был более опытным то смог бы. Вот ставишь например 25 процентов область от ширины экрана и она остается 25 процентов. В коде задавать ширину вообще не работает. Высота работает и в процентах и в пикселях. А вот на ширину никак не реагирует. Тема «Fluida».
Не помню что точно не получилось с шотокодами вторыми. Помоему верстка поехала. Я оставил помоему 3-й вариант.
А ссылку на Ваш сайт можете дать?
Юля Здравствуйте. Не могу найти код стиля формы у себя на хостинге. Все файлы прошарил и ни чего не нашел. Поможете? strana-zachetov@yandex.ru Мой емеил. Спасибо
Вам не нужно его искать. Вам нужно добавить показанные в статье стили в файл style.css, который находится в папке с темой сайта, если, конечно же, он сделан у Вас на WordPress.
Да. Только он в самом начале и я только знакомлюсь с этой CMS, так что делаю потихоньку. Раньше работал с другой системой. Она значительно удобнее.
Вот ссылка http://www.maff-stroy.ru
Вы правы! Здесь дело в самой области, в которой находится форма. Для того чтобы это исправить нужно править адаптивность данной темы.
Спасибо. Придется разбираться еще и с этим )
Скажите, а как разместить поля формы горизонтально (в строчку)?
Здравствуйте, Вячеслав!
Вот статья, в которой описан подобный вариант расположения полей: Готовые стили для Contact Form 7
Подскажите пожалуйста можно ли как нибудь применить контакт форм7 не на сайте ворд пресса? и как это сделать. буду благодарен, если дадите ссылочку на подробный туториал.
п.с. в программировании 0, причем полный.
Я не совсем поняла вопрос. Вот ряд статей с видео по настройке этого плагина:
Там есть видеоинструкция.
Прикольно! Спасибо автор
Спасибо за комментарий!
Юля! Искренне рада, что попала на страницы Вашего блога. Спасибо за улучшение Контактной формы. Я нашла то, что искала. Правда еще не пробовала. В прошлом году начала делать сайты, для себя. Ничто не предвещало то, что я буду делать для других. Сейчас люди просят. И я делаю. И учусь. Делаю и учусь. С удовольствием буду заглядывать на Вашу страничку. Завтра попробую переделать форму. Вопросы возникают постоянно, и я так благодарна Вам за то, что делитесь своими наработками!
Творческих Вам и программных успехов. А также и жизненных!
Галина, спасибо Вам больше за тёплые слова! Очень приятно!
Здравствуйте, Светлана! Если вышлите ссылку на страницу с указанной проблемой, то могу посмотреть, но не обещаю что в ближайшие дни так как работы много.
Здравствуйте, Юлия. Очень нравятся ваши уроки, все четко и понятно, даже для новичков))
Подскажите, как менять цвет поля для заполнения? В ваших примерах, как я поняла, меняется цвет фона только?
Тема сайта — fruitful
Здравствуйте! За цвет полей отвечает тоже самое свойство, что и за цвет фона. Его нужно задать для класса поля.
Наверное не внимательно смотрела, этот код мне поможет?
background:#d4d4d4; /*фон полей формы*/
border:1px solid #8a8a8a;
Да, background:#d4d4d4; /*фон полей формы*/ как раз и меняет цвет поля. Но здесь я задавала классы полей самостоятельно, при создании формы. Если вы не указывали свои классы, то они будут отличаться.
Что-то когда поля прописываешь (заполняешь), текст чёрный и поле синее. Не ух ты. Первый вариант.
не работают ваши скрипты
Это стили, а не скрипты. Все стили рабочие, это моя рабочая заготовка, которую я использую для создания сайтов. Убедитесь, что у вас отключено кэширование в браузере и в WordPress.
Юлия здравствуйте, подскажите пожалуйста, откуда может появляться слово «текст» в самом начале всплывающей формы, оно даже не в теге «р» просто текст, нигде не прописывал, как убрать не понятно, Спасибо большое.
Вы заготовку кода для всплывающей формы брали у меня? Там в примере стоит для примера слово «Текст» перед шорткодом:
Его нужно удалить или заменить на свой.
Не могу сделать кнопку по центру, ставлю разные варианты (слева и справа получается)
.wpcf7-submit <
background: linear-gradient(#75FFB6, #75FFB6), #75FFB6!important;
color:#000!important;
text-transform:uppercase;
float:auto;
margin:auto;
width:290px!important;
>
Нужно ещё свойство display:block; или display:inline-block; добавить так как margin:auto не работает для строчных элементов. А кнопка по умолчанию является строчным. Так же вместо float:auto; нужно написать float:none;
Блог однозначно в копилку 🙂 Спасибо за статью.
Но есть одна трабла: настроил форму из первого варианта, но она выдается с какой-то дополнительной подложкой. Не могу понять почему. Подскажите, если не сложно.
Напишите в стилях:
#fancybox-outer <
box-shadow: none!important;
>