Placeholder contact form 7 чтобы не стирать

Популярный плагин Contact form 7 не отличается особой красотой своей стандартной формы, по этому для многих пользователей встает вопрос, как изменить внешний вид. Именно этим мы сейчас и займемся, я попытаюсь дать вам универсальный вариант, который подойдет для любого сайта.

Ранее я уже рассказывал о том как установить и настроить Contact Form 7, сейчас не будем об этом говорить, а сразу перейдем к необходимым изменениям дизайна.

Для начала нам нужен доступ к админке и файлу style.css, его можно найти во вкладке “Внешний вид”/”Редактор”. По умолчанию, именно нужный файл вам и откроется. Рекомендую открыть несколько вкладок в браузере:

1. Вкладка Contact Form 7 для правки формы.
2. Страницу на сайте с формой обратной связи.
3. Редактор с открытым файлом 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;
}

Теперь разберем все подробнее:

1. Вначале займемся отступами. Внешние отступы (от края до начала формы) — margin: 5px, внутренние отступы (от начала формы до внутренних элементов) —padding: 10px.
2. Заливка формы или ее фон определяется свойством background: #B3AFAF, цвет можете подбирать какой угодно, просто заменив значение.
3. Определяемся с семейством шрифта, если менять не хотите можно не прописывать это правило (font-family: Georgia, “Times New Roman”, Times, serif).
4. Цвет текста определяет свойство 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%;
}

Теперь разберем все поподробнее:

1. Первый класс к которому мы обратимся name-cf он принадлежит полям с именем и емейлом. Для них задаем отступ в 2px (padding: 2px) и обтекание (float:left), что бы выровнять два поля в один ряд.
2. Далее подправим ширину полей задав им оптимальный (для моего шаблона) размер в 270px (.name-cf input { width: 270px; }). Если у вас поля все еще в одну строчку или же слишком маленький размер, подберите свой вариант.
3. Поле с названием темы сделаем на всю ширину формы, так как текста там может быть больше (.thems-cf input { width: 100%;}). Если вы хотите свое, точное значение укажите его в пикселях.
4. Следующий блок который мы добавили к форме предназначен для отмены обтекания (.thems-cf input {width: 100%; }).
5. Так же как и в предыдущем случае, поле с текстом сообщения делаем на всю ширину (text-cf textarea {width: 100%;}).

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

Выравниваем кнопку “Отправить” по центру, изменяем фон и ширину.

Переходим к нашей кнопке, выровняем по центру и добавим фон:

.submit-cf {
width: 200px; /*ширина блока*/
height: 25px; /*высота*/
margin: 0 auto; /* Отступ слева и справа */
}
.submit-cf input {
width: 200px;
background:#96B195;
}

Традиционно объясняю что к чему:

1. Первым правилом мы определяем ширину и высоту блока в котором будет размещена кнопка и ставим ее по центру формы.
2. Вторым правилом задаем цвет фона кнопки (background:#96B195, если не указать будет такого же цвета как и все остальные поля), устанавливаем ширину кнопки (width: 200px, желательно что бы была такого же размера, как ширина блока, что бы кнопка не двигалась в стороны).

Сохраняем наши настройки и смотрим что у нас получилось:

Соглашусь далеко не шик, но зато адекватно смотрится в целом, ниже форма по умолчанию, думаю эффект очевиден. В любом случае мы научились изменять внешний вид формы Contact Form 7.

Надеюсь для вас статья была полезной, если же что-то не так или возникли проблемы оставьте свой комментарий и я постараюсь ответить (подправить).

По умолчанию в WP нет такого функционала, но на помощь приходят плагины и специально разработанные конфигурации для движка.

Форма обратной связи WordPress плагином Contact Form 7

Разберу бесплатный Contact Form 7, который переведен на русский язык. В стандартном исполнении она включает в себя:

• Имя
• Адрес почты
• По желанию телефон
• Текст сообщения
• Капча

Не люблю капчу, но добавил ее после того, как на один из клиентских сайтов начал сыпаться спам.

Добавить капчу reCaptcha

Устанавливаем плагин стандартно через админку WordPress, так выглядит в панели.

CF7 в поиске

Настроим reCaptcha от гугла, заходим в раздел интеграция, и нажимаем на ссылку google.com/recaptcha. Должны иметь аккаунт в Google.

Ссылка на рекапчу

Перебросит в сервис, настраиваем пункты как на скриншоте, правильно вводим домен, внизу нажимаем отправить.

Привязка captcha к сайту

Копируем данные для капчи, оба ключа.

Ключи доступа

Переходим обратно в плагин WordPress и нажимаем кнопку Настройки интеграции.

Интеграция

Вводим ключи скопированные на сервисе reCaptcha, записываем в соответствующие разделы и сохраняем.

Сохранение настроек

Создание формы

Заходим в настройки и создаем новую форму. Стираем стандартную разметку.

Стираем стандартные надписи

Вводим название нового проекта и нажимаем кнопку Текст, потому что имя будут вводить текстом без правил.

Поле текст

Появиться всплывающее окно, настраиваем по потребностям.

Генератор тегов

1. Тип определяет обязательно ли посетителю заполнять поле, я поставил да
2. Имя не меняем это уникальный идентификатор
3. Значение по умолчанию, ввел фразу, которую увижу внутри
4. Использовать вместо заполнителя, то есть пока ничего не будет введено надпись будет отображаться
5. Не советую пользоваться полем Akismet
6. Для добавления стилей вводим class или id, сделал pole-imya
7. Вставляем тег в общее поле

Аналогично нажимаем кнопку e-mail, видим тот же интерфейс.

Генератор почты

Ввод почты можно сделать через текст, но тогда потеряете функцию проверки правильности. Плагин проверит есть ли знак @.

Добавляем раздел текстовой области и телефона (по желанию), принцип одинаковый.

Кнопки телефон и текстовая область

Ранее настраивали интеграцию капчи в WordPress, в базовой версии CF7 нет кнопки для вставки captcha, для этого создан шорткод [recaptcha] помещаем под остальными элементами.

Осталось добавить кнопку отправки, выбираем из списка и настраиваем ее вывод.

Кнопка отправить

В результате получился такой код.

Финальный код CF7

Настройка отправки письма

Нажимаем сохранить, переходим во вкладку Письмо, теперь настраиваем отправку на почту.

Изменение параметров письма

1. Теги полей созданные ранее
2. Адрес почты куда будут приходить письма
3. От кого и тема, заполняйте по желанию
4. Дополнительные заголовки, полностью очищаем
5. Прописываем в теле письма, что желаем получать на почту после отправки. Например, набрал Почта и вставил, соответствующий тег напротив этого слова.
6. Внизу нажимаем Сохранить

Сохранение

Протестируйте остальные вкладки уведомлений и настроек, можно поменять текст, выводящийся в разных ситуациях.

Вставка формы на сайт

Вверху страницы сформировался шорт код, копируем его.

Шорткод

Идем в любую запись и вставляем.

Помещаем shortecode в страницу

После нажатия кнопки Посмотреть, перекинет на сайт с отображением проделанной работы.

Финальный вариант

Хорошая черта у разработчиков тем на WordPress – заранее делать продукт, поддерживающий CF7, что облегчает жизнь и не нужно прописывать CSS стили в код сайта. Моя тема поддерживает плагин и выводит вполне красивую картинку. Если не устраивает, то к каждому полю прописывали class, используйте его для изменения оформления. Проверил работу темы, письма приходят быстро. Про остальные способы вставить шорткод в WordPress, читайте по ссылке.

Ко всему материалу приложу видео инструкцию, показываю не только процесс создания, но и как сделать красивое оформление формы, потому что текстом весь процесс не описать.

Сделать поля горизонтально в строчку

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

<div class=”flex-form”>
[text* your-name]
[email* your-email]
[text your-subject]
</div>
[textarea your-message]
[submit “Отправить”]

Поле Имя, Почта и Телефон хочу выстроить в строчку. Не забываем сохранять изменения.

Оборачиваем в div

Заходим в админке WordPress Внешний вид > Редактор тем > style.css прописываем стили для обратной связи WordPress в конец файла.

.flex-form{display:flex;}
@media only screen and (max-width: 655px){.flex-form{display:block;}}

Прописываем стили

Из стилей видно, что div с классом flex-form присвоили свойство display:flex оно задает расположение элементов в строку, без дополнительных параметров пространство делится поровну.

Вторая запись показывает когда разрешение экрана достигло 655 пикселей, форма меняет свойство с flex на block и форма начнет отображаться как раньше с полями друг под другом. Этот предел в 655 меняется индивидуально, стиль сделан чтобы на мобильных устройствах обратная связь выглядела нормально.

Всплывающая форма обратной связи

Положительно на приеме заявок действуют всплывающие окна с обратной связью от CF7. Плагин для вывода всплывающего окна будет Popup Maker. Описывать не буду, ссылка на материал расположена в этом абзаце. В дополнение приложу видео из той статьи.

Как добавить в elementor

Для вставки формы в elementor нужно использовать раздел shortcode. Форма создана по инструкции выше, значит шорткод от CF7 есть. Переходим в создание страницы в элементоре и в поиске по элементам ищем шорткод.

Поиск элемента в elementor

Далее перетаскиваем модуль в активную область, в параметрах блока вставляем код формы. Функция сработала и вывела на экран результат в виде формы обратной связи.

Элементор обработал запрос

Используем настройку темы

В большинстве шаблонов WordPress нет инструментов для создания в автоматическом режиме обратной связи. Но наши темплейты от WPShop имеют встроенную функцию, которая выводится с помощью шорткода. Разберем на примере Root. Перехожу в создание страницы, далее смотрим на снимок.

Надстройка в ROOT

• Прописываем текст [ contactform ] (без пробелов внутри скобок)
• Жмем предпросмотр

Откроется страница с уже адаптированной, размеченной и сверстанной формой, по которой посетитель может получить обратную связь с администратором.

ROOT работа встроенной функции

Feedback через виджеты

Вставить feedback в виджеты просто. Поможет виджет текст, переносим его в активную зону и прописываем шорткод в него.

Используем виджет текст

Задаем заголовок, заносим конфигурацию в текстовую область, переходим на блог и смотрим, как обрабатывается обратная связь.

Форма в виджете

Обратная связь без плагина

Если предпочитаете способы без плагина, то есть отличная инструкция, нашел на просторах интернета, если хозяин кода объявится, то с удовольствием поставлю ссылку.

Открываем файл function.php для редактирования, прописываем в самый низ код, как пользоваться FTP и изменять PHP разбирали тут.

/*код обратной связи*/
add_shortcode( ‘art_feedback’, ‘art_feedback’ );
function art_feedback() {

ob_start();
?>
<form id=”add_feedback”>
<input type=”text” name=”art_name” id=”art_name” class=”required art_name” placeholder=”Имя” value=””/>

<input type=”Почта” name=”art_email” id=”art_email” class=”required art_email” placeholder=”Ваш E-Mail” value=””/>

<input type=”text” name=”art_subject” id=”art_subject” class=”art_subject” placeholder=”Тема” value=””/>

<textarea name=”art_comments” id=”art_comments” placeholder=”Введите ваше обращение” rows=”10″ cols=”30″ class=”required art_comments”></textarea>

<input type=”checkbox” name=”art_anticheck” id=”art_anticheck” class=”art_anticheck” style=”display: none !important;” value=”true” checked=”checked”/>

<input type=”text” name=”art_submitted” id=”art_submitted” value=”” style=”display: none !important;”/>

<input type=”submit” id=”submit-feedback” class=”button” value=”Отправить”/>
</form>
<?php

return ob_get_clean();
}

Создали форму в HTML разметке WordPress и подвязываем ее на шорткод. Думаю такой подход будет удобен, потому что вывести блок можно будет в любом месте.

Заходим в создание страницы в панели WordPress, пишем [art_feedback], нажимаем на просмотреть.

В гутенберге в любой текстовый блок вставляете строку.

Вносим вывод в запись

Перейдя на сайт увидим не сформированную форму, поля работают, но письмо отправляться не будет, потому что не привязан PHP обработчик.

Плохой внешний вид

Теперь настроим внешний вид, вставляем данный код в файл style.css активной темы.

#add_feedback {
margin: 20px 0 0;
position: relative;
}

#art_name, #art_email, #art_subject, #art_comments {
padding: 10px 5px;
display: inline-block;
width: 49.548%;
border-radius: 3px;
border: 1px solid #ddd;
font-size: 0.9em;
}

#art_subject {
width: 100%;
margin: 5px 0;
}

#art_comments {
width: 100%;
}

#add_feedback .button {
border: none;
padding: 10px 20px;
color: #fff;
font-size: 1em;
display: inherit;
margin: 10px 0 0 0;
border-radius: 3px;
background-color: #2f94ce;
}

#add_feedback input[type=”text”]:focus, #add_feedback input[type=”password”]:focus, #add_feedback input[type=”email”]:focus, #add_feedback textarea:focus {
color: #444;
box-shadow: 0 0 3px rgba(68, 68, 68, 0.2);
}

.error-text {
background: #F59E9E;
padding: 15px 0px;
text-align: center;
color: #fff;
}

.error-name, .error-email, .error-comments {
display: inline-block;
font-size: 11px;
position: absolute;
top: -30px;
color: white;
border: 1px solid red;
padding: 5px 10px;
line-height: 1.1;
background: red;
box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.3);
}

.error-name:after, .error-email:after, .error-comments:after {
content: ”;
position: absolute;
left: 20px;
bottom: -10px;
border: 5px solid transparent;
border-top: 5px solid red;
}

.error-comments {
top: 16%;
left: 0;
}

.error-name {

left: 0;
}

.error-email {
right: 4%;
}

.message-success {
background: rgba(0, 128, 0, 0.5);
color: #fff;
padding: 20px;
text-align: center;
margin: 20px auto;
border-radius: 3px;
}

#add_feedback .error {
border: 1px solid red;

}

#add_feedback .required:after {
content: ‘*’;
position: absolute;
left: 20px;
bottom: -10px;
}

#art_name:focus::-moz-placeholder,
#art_name:focus:-moz-placeholder,
#art_name:focus:-ms-input-placeholder,
#art_email:focus::-webkit-input-placeholder,
#art_email:focus::-moz-placeholder,
#art_email:focus:-moz-placeholder,
#art_email:focus:-ms-input-placeholder,
#art_comments:focus::-webkit-input-placeholder,
#art_comments:focus::-moz-placeholder,
#art_comments:focus:-moz-placeholder,
#art_comments:focus:-ms-input-placeholder,
#art_subject:focus::-webkit-input-placeholder,
#art_subject:focus::-moz-placeholder,
#art_subject:focus:-moz-placeholder,
#art_subject:focus:-ms-input-placeholder {
color: transparent
}

Обновляем style.css на сервере и смотрим как преобразилась обратная связь на странице.

Сверстанный блок

Создаем файл feedback.js и помещаем в него код. Загружаем на хостинг в папку js активной темы.

jQuery(document).ready(function ($) {
var add_form = $(‘#add_feedback’);

// Сброс значений полей
$(‘#add_feedback input, #add_feedback textarea’).on(‘blur’, function () {
$(‘#add_feedback input, #add_feedback textarea’).removeClass(‘error’);
$(‘.error-name,.error-email,.error-comments,.message-success’).remove();
$(‘#submit-feedback’).val(‘Отправить сообщение’);
});

// Отправка значений полей
var options = {
url: feedback_object.url,
data: {
action: ‘feedback_action’,
nonce: feedback_object.nonce
},
type: ‘POST’,
dataType: ‘json’,
beforeSubmit: function (xhr) {
// При отправке меняем надпись на кнопке
$(‘#submit-feedback’).val(‘Отправляем…’);
},
success: function (request, xhr, status, error) {

if (request.success === true) {
// Если все поля заполнены, отправляем данные и меняем надпись на кнопке
add_form.after(‘<div class=”message-success”>’ + request.data + ‘</div>’).slideDown();
$(‘#submit-feedback’).val(‘Отправить сообщение’);
} else {
// Если поля не заполнены, выводим сообщения и меняем надпись на кнопке
$.each(request.data, function (key, val) {
$(‘.art_’ + key).addClass(‘error’);
$(‘.art_’ + key).before(‘<span class=”error-‘ + key + ‘”>’ + val + ‘</span>’);
});
$(‘#submit-feedback’).val(‘Что-то пошло не так…’);

}
// При успешной отправке сбрасываем значения полей
$(‘#add_feedback’)[0].reset();
},
error: function (request, status, error) {
$(‘#submit-feedback’).val(‘Что-то пошло не так…’);
}
};
// Отправка
add_form.ajaxForm(options);
});

Папка js на сервере

Теперь загружаем вторую часть кода в function.php.

/*вторая часть*/
add_action( ‘wp_enqueue_scripts’, ‘art_feedback_scripts’ );
function art_feedback_scripts() {

// Обработка полей
wp_enqueue_script( ‘jquery-form’ );

// Подключаем файл скрипта
wp_enqueue_script(
‘feedback’,
get_stylesheet_directory_uri() . ‘/js/feedback.js’,
array( ‘jquery’ ),
1.0,
true
);

// Задаем данные объекта ajax
wp_localize_script(
‘feedback’