Форма обратной связи для сайта

Содержание

Каждое действие, которое вы совершаете при настройке вашего ресурса, имеет значение. Немаловажно наличие формы обратной связи с пользователями контента, потому что таким образом они могут задать интересующий вопрос, уточнить какие-то детали, даже высказать недовольство.  Да, и такое бывает, но не стоит на этом зацикливаться, это всего лишь двигатель работы над собой и своим сайтом. И так, учимся создавать  бесплатную форму обратной связи.

Как создать страницу  «Контакты»

Следующая страница «Контакты» и с ней —  форма обратной связи html с отправкой на почту.

И так, создаем новую страницу (о том, как это сделать, читайте здесь), вводим для нее заголовок «КОНТАКТЫ»:

заголовок

В поле текста пишите все данные, которые посчитаете нужным: ФИО, название организации, номер телефона, ссылки в социальных сетях, адрес электронной почты и т.д.

Как создать ссылку на почту

Теперь расскажу, как вашу ссылку на социальные сети сделать рабочей, с переходом по ней в новом окне браузера. Пишем любую фразу, идентифицирующую вашу ссылку, например « Я В КОНТАКТЕ» или «МЫ в Telegram» и др.

Теперь переходим на вашу страничку в VK, или группу в Telegram, копируем ссылку. Далее возвращаемся в нашу административную панель, выделяем текст, который будет соответствовать ссылке (Я В КОНТАКТЕ), нажимаем в редакторе текста значок  ссылки, в появившемся поле вводим скопированную ссылку.  Здесь же активируем  опцию «ОТКРЫТЬ В НОВОЙ ВКЛАДКЕ», для того, чтобы визит на вашей страничке сайта не закончился, и пользователю легко было на нее вернуться после просмотра перенаправленного контента.

вставка ссылки

Сохраняем сделанные изменения (нажимаем кнопку «ОБНОВИТЬ», затем можно просмотреть, что получилось — «ПРОСМОТРЕТЬ» или сразу опубликовать  — кнопка «ОПУБЛИКОВАТЬ») и обязательно проверяем работоспособность созданных ссылок.

То же самое делаем, чтобы добавить почтовый ящик:

вставка ссылки на почтовый ящик

Форма обратной связи html с отправкой на почту

Для создания формы обратной связи wordpress, необходимо установить плагин CONTACT FORM 7.

Заходим в меню «ПЛАГИНЫ», выбираем пункт «ДОБАВИТЬ НОВЫЙ» и в поисковой строке вводим название. Из списка появившихся выбираем:

поиск плагина

Нажимаем кнопку «УСТАНОВИТЬ»,  а затем «АКТИВИРОВАТЬ».

Далее переходим в настройки плагина — генератору форм обратной связи. В списке наших плагинов ищем «CONTACT FORM 7», пункт «НАСТРОЙКИ»:

настройка плагина

Здесь может быть техническая страница «КОНТАКТНАЯ ФОРМА» нам не нужна, мы ее удаляем (выбираем действие «УДАЛИТЬ», а затем «ПРИМЕНИТЬ»).

Выбираем пункт меню «ДОБАВИТЬ НОВУЮ»:

добавить новую страницу

В поле заголовка мы вписываем название «КОНТАКТЫ» и сохраняем:

вводим заголовок новой страницы

 У нас появляется шорт-код, который отвечает за работу формы обратной связи на сайте:

шорт код

 

Его нужно скопировать и добавить на уже созданную страничку «КОНТАКТЫ».  Для этого добавляем новый блок (нажимаем значок «+»)

вставка нового блока

 который так и называется «ШОРТ-КОД»:

вставка блока шорт-кода

Вводим скопированный шорт-код, обновляем и публикуем изменения на странице:

вставка шорт-кода в выбранный блок

Настройка формы обратной связи — регистрация почтового ящика

Создать форму обратной связи онлайн это значит быть постоянно на связи с посетителями или подписчиками вашего ресурса. И так, возвращаемся к нашему плагину CONTACT FORM 7. Сначала открываем вкладку «ШАБЛОН ФОРМЫ» и исправляем все надписи – пишем на русском языке (your name и др.):

исправляем шаблон формы

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

Далее открываем вкладку  «ПИСЬМО» и заполняем поля:

  • КОМУ – вводим свой адрес электронной почты, куда будут приходить уведомления о полученных комментарияхкому
  • ОТ КОГО – это адрес, с которого отправляются письма (в данном случае комментарии), требуется подтвердить почту на хостинге:от кого
  • Поле ТЕМА (your subject) – название сайта;
  • Вместо «SITE- TITLE» вписываем название сайта.

Теперь переходим к регистрации почтового ящика на хостинге.

Заходим в личный кабинет хостинга, в меню ищем вкладку «ПОЧТА»:почта но хостинге

 пишем название домена, далее «ДОБАВИТЬ ЯЩИК»:

добавить ящик

Заполняем поля «ЛОГИН» и «ПАРОЛЬ» (не забудьте его сохранить), и нажимаем кнопку «СОЗДАТЬ»:

создать почтовый ящик

Должно получится вот так:

зайти в почтовый ящик

Далее можно зайти в настройки, созданного почтового ящика, включить рассылку и добавив свой ящик gmail, чтобы письма переадресовывались на ваш рабочий адрес.

Тело письма

Как сделать форму обратной связи разобрались.  Что еще нам осталось сделать  для завершения настройки — прописать контактные данные.

Возвращаемся в плагин, нам нужна вкладка «ПИСЬМО». В разделе «ТЕЛО ПИСЬМА» прописываем свои контактные данные:

«ЭТО СООБЩЕНИЕ ОТПРАВЛЕНО САЙТА (ВАШЕ НАЗВАНИЕ)»

«АДРЕС САЙТА (ССЫЛКА НА ВАШ РЕСУРС)»

«АВТОР САЙТА (НА ВАШЕ УСМОТРЕНИЕ)»

«АДРЕС САЙТА (ПОЧТОВЫЙ ЯЩИК, КОТОРЫЙ МЫ ЗАРЕГИСТРИРОВАЛИ НА ХОСТИНГЕ)».

тело письма

В итоге должно получиться примерно вот так:

20-1

Как изменить текст в чекбоксе «Сохранить моё имя, email и адрес сайта в этом браузере для последующих моих комментариев» без плагина

Вот мы и создали страничку «КОНТАКТЫ». Осталась еще одна маленькая хитрость. Вы наверно часто встречали на других сайтах шаблон формы обратной связи с фразой: «Сохранить моё имя, email и адрес сайта в этом браузере для последующих моих комментариев», но в самой форме обратной связи поля для указания сайта нет? Ваш сайт будет не как все, а намного грамотнее.

Так вот, если вы удалили выше поле для ввода ссылки на сайт, в формулировке «Сохранить моё имя, email и адрес сайта в этом браузере для последующих моих комментариев» слово «САЙТ»  все равно сохранится. Чтобы это исправить, нужно сделать следующее – подкорректировать код. Нет, не пугайтесь, в этом нет ничего сложного.

Заходим в административную панель, вкладка «ВНЕШНИЙ ВИД», пункт меню «РЕДАКТОР ТЕМ» ищем справа function.php:

вставка кода

И ВСТАВЛЯЕМ КОД:

/* Меняет текст чекбокса GDPR */
function comment_form_change_cookies_consent( $fields ) {
$commenter = wp_get_current_commenter();
$consent = empty( $commenter['comment_author_email'] ) ? '' : ' checked="checked"';
$fields['cookies'] = '<p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"' . $consent . ' />' .
'<label for="wp-comment-cookies-consent">Сохранить моё имя и email в этом браузере для последующих моих комментариев.</label></p>';
return $fields;
}
add_filter( 'comment_form_default_fields', 'comment_form_change_cookies_consent' )

 

результат вставки кода

Не забудьте обновить изменения.

Форма обратной связи красивая:

форма обратной связи красивая

Все, наша форма обратной связи готова, переходим к созданию следующих страниц «Пользовательское соглашение» и «Политика конфиденциальности».