Как добавить форму обратной связи на сайт wordpress – Форма обратной связи для сайта WordPress без плагинов | Создание сайтов и заработок в сети

Содержание

Как создать форму обратной связи на WordPress. Плагин Contact Form 7

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

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

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

Роль формы обратной связи на сайте

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

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

Что вы будете делать? Перейдете на страницу «Контакты» или «Обратная связь» (у всех по-разному). А там только автор разместил E-MAIL, мол кому надо сам свяжется. Теперь вам придется заходить к себе на почту вводить адрес получателя или использовать любой другой почтовый клиент. Одним словом это будет отнимать только лишнее время, а время — ЗОЛОТО.

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

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

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

Выводим раздел «Контакты» плагином Contact Form 7

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

Далее распаковываем архив и закачиваем его в папку с плагинами на хостинг (для этого я использую программу ftp клиент FileZilla). У меня этот путь выглядит так:

/httpdocs/wp-content/plugins

/httpdocs/wp-content/plugins

Можно установить плагины и иным способом, но об этом я уже писал в статье «Обязательные плагины wordpress»

Далее идем в админ панель сайта и активируем только что установленный плагин.

плагин contact form 7

Затем выбираем вкладку «Contact» из левой колонки панели вордпресс. Здесь вам можно будет по желанию отредактировать названия полей формы.

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

Если спуститься немного вниз, там вы увидите поле для ввода e-mail адреса. WordPress автоматически сгенерирует ваш e-mail, но по желанию его можно изменить.

настройки формы для контактов

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

вставляем код

Все делаем из административной панели площадки.

код для contact form 7

Проверяете, что у вас получилось.

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

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

Добавляем капчу в форму для обратной связи

Для того, чтобы добавить капчу сперва скачайте плагин Really Simple CAPTCHA по этой ссылке.  Установите и активируйте его аналогично, как плагин contact-form-7.

Затем опять переходите в админ панель блога и выбираете вкладку «Contact». Выбираем из списка «Сгенерировать тэг» пункт «CAPTCHA».

создаем капчу для обратной связи

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

настройка плагина для обратной связи

И вставляем их в форму настроек и нажимаем «Сохранить».

captcha

Перезагружаем страницу «Контакты» и смотрим что получилось.

капча для формы связи wordpress

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

Заключение

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

Посмотрите видео и у вас не останется ни каких вопросов.

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

Видео-урок, как установить форму обратной связи на WordPress

Здравствуйте, дорогие читатели блога. В сегодняшнем уроке мы будем реализовывать такую вещь, как «форма обратной связи для WordPress». Если вы еще не знаете, такая форма позволяет пользователям сайта отправлять сообщения автору данного блога или сайта.

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

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

Многие начинающие делают раздел «контакты» в виде простых записей, мол, с такими мыслями «Кому надо, тот вручную наберет и напишет». НЕТ! Этого делать не в коем-случае нельзя! Слышите, НЕЛЬЗЯ!

В первую очередь, вы должны позаботиться о комфортабельности для пользователя. Чтобы ему было удобно и уютно у вас на блоге! Хотите придать комфорта, ставьте форму обратной связи на WordPress, как это сделать, читайте ниже.

Форма обратной связи для WordPress. Плагин — contact form 7. Подробный мануал для новичков

Для начала взгляните, как выглядит форма обратной связи для вордпресс на моем блоге.  Хотите себе такую?

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

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

Как видите, в ней несколько полей:

1.    Форма для ввода имени
2.    Форма для ввода e-mail адреса
3.    Форма для ввода темы сообщения (по желанию)
4.    Поле для самого сообщения (нужно вводить желаемый текст, вопрос, предложение и т.п.)
5.    И последнее поле – это каптча, защита от спама. Как защитить себя от спама в комментариях, можете прочесть здесь «Защита от спама — плагин Invisible Captcha»

Я реализовал такую форму обратной связи через плагин «contact form 7» и «Really Simple CAPTCHA».

Идем дальше, плагин «contact form 7» качайте отсюда, а плагин «Really Simple CAPTCHA» можно стянуть здесь. Затем их следует установить и активировать.

После установки и активации двух этих плагинов, слева появляется новый раздел «Контакты (CF7)».

новый раздел

новый раздел

Заходите в настройки и видите такую надпись: «Скопируйте этот код и вставьте его в свой пост, страницу или текстовый виджет».

Код формы

Код формы

Копируем код, на скрине  обведен красной рамочкой. Затем переходите в раздел «Страницы» и создавайте новую страницу.

Давайте ей заголовок, можно задать «Обратная связь», можно «Контакты» или что-то свое придумать, только чтобы пользователям было понятно!

Далее нужно вставить код, который мы скопировали, в поле для ввода текста (см. скрин).

Настройка страницы

Настройка страницы
После вставки кода, сохраняйте настройки, переходите на «главную страницу» блога и обновляйте ее. У вас должна появиться новая страница в меню, «Обратная связь», зайдя на нее, будите наблюдать поля для ввода.

Это практически готовая форма обратной связи. Но здесь не хватает еще каптчи, защиты от спама. Давай добавим ее.
Снова заходите в настройки «Контакты (CF 7)» и справа выберите «Сгенерировать тег» и выберите «Captcha».

И здесь нам говорят, что нужно вставить данные коды в форму слева. Должно получиться такое:

вставка каптчи

вставка каптчи

Затем сохраняйте и переходите снова в форму обратной связи на блоге. Как видим, появилась сама каптча (картинка) и поле для ввода данной каптчи.

И снова возвращаемся в настройки, осталось выполнить самую малость. В поле «Адресат» укажите ваш e-mail, на него будут приходить письма от пользователей. Также можете в сообщение добавить подпись, смотрите скрин, как это сделано у меня.

дополнительные настройки

дополнительные настройки

Протестируйте форму, путем ввода всех данных и отправки на е-mail. У меня все отлично работает.

Вот и все! Форма обратной связи для WordPress установлена и настроена. Теперь ваши читатели охотней будут связываться с Вами.

А чтобы реализовать обратную связь без плагинов и кодов, читайте данную статью: life-crazy.ru/obratnaya-svyaz-dlya-sajta-supportdesk.html

С Уважением, Михед Александр.

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

Для создания формы обратной связи существует множество плагинов (настройка плагина Contact Form 7). Мы же рассмотрим самый простой в настройке — плагин Contact Form.

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

Будем создавать форму вот такого вида:

Установка плагина

  • В Панели управления в разделе «Плагины» выбираем пункт «Добавить новый».
  • Вбиваем в поисковую форму «Contact Form» и нажимаем кнопку «Поиск плагинов».
  • В списке находим нужный нам плагин и жмем ссылку «Установить».
    Нам нужен плагин Contact Form, а не Contact Form 7, это два различных плагина.
  • После установки активируем плагин.

Создание формы (настройка плагина)

После установки и активации плагина в меню появится раздел «BWS Plugins».

  • Выбираем его, а в нем подраздел «Контактная Форма».
  • Откроется страница с настройками плагина, их не очень много, тем не менее, рассмотрим только самые необходимые.
  • В первую очередь, указываем электронный адрес, на который будут приходить письма. И сразу ставим галочку напротив пункта «Дополнительные настройки».
  • «Использовать этот email:» — здесь указываем адрес электронной почты, на который будут приходить оставленные посетителями сообщения.
  • «Отобразить блок Прикрепить файл» – отмечаем пункт, если в форме обратной связи необходима возможность к сообщению прикреплять файлы.
  • «Изменить текст для поля ОТ в письме» — здесь можно указать определенный текст, который будет отображаться в поле «От» письма вместе с e-mail адресом. Удобно сюда вставить название сайта.

    Например, для сайта site.ru мы вводим – «Сообщения с site.ru».
    Это позволит нам сразу определять, откуда пришло письмо.

  • «Выберите email для поля ‘FROM’ письма» — выбираем из двух вариантов.
    В первом случае в поле адрес будет отображаться e-mail человека, который отправил сообщение с сайта. Во втором – указанный нами e-mail.
  • «Отобразить поле для телефона» — добавления к имеющимся полям дополнительного поля, в котором указывается телефон.
  • «Обязательные поля» — отмечаем, какие поля являются обязательным для заполнения (если посетитель их не заполнит, форма откажет ему в отправке сообщения).
  • «Отображение дополнительной информации в письме» — стоит отметить данный пункт, если есть необходимость просматривать дополнительную информацию об отправке сообщений через обратную связь (когда они были отправлены, с какого ip-адреса и т.д.).
  • «Языковые настройки для названия полей в форме» — выбор языка, на котором будет форма обратной связи.
  • «Изменить названия полей контактной формы и сообщений об ошибках» — отметив данный пункт, можно изменить надписи полей по своему усмотрению.
  • «Действие после отправки письма» — вы можете выбрать один из двух вариантов.
    В первом случае посетитель увидит указанный вами текст и останется на странице обратной связи, а во втором – будет перенаправлен  на указанную страницу.
  • Сохраняем настройки, нажав внизу страницы кнопку «Сохранить изменения».

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

Остались вопросы? Задайте их в комментариях! 🙂

Если вы хотите поблагодарить меня за материал — можете сделать это здесь 🙂

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Твитнуть

Поделиться

Поделиться

Отправить

Как создать форму обратной связи в WordPress

Очередной пост по просьбе моих читателей, в нём мы пошагово разберём, как на своём сайте создать отличную форму обратной связи без использования плагинов. Всего будет два шага.

Шаг 1. Страница с формой

Создаём в папке с темой новый файл — это будет шаблон страницы с формой. Файл можно назвать как угодно, нам важно лишь его содержимое.

<?php
/* 
 * Template name: Форма обратной связи
 */
get_header(); // эта строчка кода у вас может отличаться
 
/*
 * Тут мы будем обрабатывать ошибки и выводить соответствующие сообщения
 */
if( isset( $_GET['msg'] ) ) {
	// в случае успеха
	if( $_GET['msg'] == 'success' )
		echo '<span>Сообщение успешно отправлено</span>';
 
	// в случае ошибки
	if( $_GET['msg'] == 'error' )
		echo '<span><strong>Ошибка:<strong> Проверьте правильность введённых вами данных.</span>';
	// вы сами можете добавить различные другие сообщения об ошибках
 
}
 
/* 
 * Антиспам-трюк
 * у нас есть два фейковых поля, при заполнении которых прерывается выполнение скрипта
 * сделаем так, чтобы они были скрыты для пользователей при помощи CSS
 */
echo '<style>textarea[name="comment"],textarea[name="message"]{display:none}</style>';
?>
	<form action="<?php echo site_url() ?>/send.php" method="POST">
		<input type="text" name="name" required="true" placeholder="Имя *" />
		<input type="text" name="email" required="true" placeholder="Email *" />
		<textarea name="comment"></textarea>
		<textarea name="message"></textarea>
		<textarea name="soobschenie" required="true" placeholder="Сообщение *"></textarea>
		<button>Отправить</button>
	</form>
<?php
get_footer();  // эта строчка кода у вас может отличаться

Шаг 2. Файл-обработчик. Отправка формы

В этой статье в качестве файла-обработчика я создал новый файл send.php прямо в директории установки WordPress, но вы можете поместить его и в тему без проблем.

<?php
// проверка на спам - просто прерываем выполнение кода, при желании можно и сообщение спамерам вывести
if( isset( $_POST['comment'] ) || isset( $_POST['message'] ) )
	exit;
 
// подключаем WP, можно конечно обойтись без этого, но зачем?
require( dirname(__FILE__) . '/wp-load.php');
 
// следующий шаг - проверка на обязательные поля, у нас это емайл, имя и сообщение
if( isset( $_POST['name'] )
  && isset( $_POST['email'] ) && is_email( $_POST['email'] ) // is_email() - встроенная функция WP для проверки корректности емайлов
  && isset( $_POST['soobschenie'] ) ) {
 
	$headers = array(
		"Content-type: text/html; charset=utf-8",
		"From: " . $_POST['name'] . " <" . $_POST['email'] . ">"
	);
 
	if( wp_mail( get_option('admin_email'), 'Сообщение с сайта', wpautop( $_POST['soobschenie'] ), $headers ) ) {
		header('Location:' . site_url('/contact?msg=success') );
		exit;
	}
 
 
}
 
header('Location:' . site_url('/contact?msg=error') );
exit;

Миша

В последние годы я долго не знал, что мне делать с сайтом misha.blog, ведь он практически не приносит никакого профита, но недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

лучший плагин на русском языке

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

Однако, услуга платная. Поэтому я решил рассказать вам, как можно сэкономить и при этом не потерять много времени.

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

Возможности Contact Form 7

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

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

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

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

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

Все это очень здорово, но думаю, что пора приступать к делу.

Устанавливаем приложение

Установка стандартная. Осуществляется через раздел «Плагины».

Вводите в поисковую строчку репозитория WordPress название и находите приложение. Нажимаете на кнопку «Установить» и по окончании активируете его. Ссылка для этого появится по завершению процесса.

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

Добавляем форму

Как вы видите, в самой категории мало функций. Лишь самые основные: список созданных вами форм, возможность добавить новую, а также интеграция защиты от спама. Выбираем вторую.

Первым делом меняем название. Это позволит не затеряться в толпе форм, когда их будет значительно больше. Создаете вы его для себя, ну и поисковых машин. Больше никто не увидит этот заголовок. Допустим, пусть это будет форма заказа садовой мебели.

Теперь переходим к редактированию шаблона формы.

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

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

Сейчас поля начинаются и заканчиваются с тега <p>. Если вы видите вот такой знак “/” в скобках, это означает, что атрибут закончил свое действие. Просто избавляетесь от него или копируете, чтобы вставить в другое место.

Если вам нужна простая форма вы просто жмете на «Сохранить» внизу или левой части экрана.

Далее копируете сам код.

Найти его можно и через категорию «Contact Form 7» — «Формы».

Вы можете вставить его в окне любой записи – это самое простое. Открываете статью и открываете «Текстовый режим».

Вклиниваете тег, где предположительно будет размещена форма.

Обновляете статью и готово.

Думаю, что некоторым будет достаточно этого минимума. Единственное, что вам осталось узнать, это звездочки в коде. Они говорят о том, что это поле обязательно для ввода. Без текста, оно не будут отправлено.

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

Добавляем свои поля

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

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

Допустим, вы пишете для сайта о программировании. Естественно вам нужно, чтобы посетители могли оставить ссылку на свой блог. Как правило, это увеличивает количество комментариев к статьям. Что делать?

Вам поможет «Генератор форм», который расположен в верхней части формы.

Здесь можно работать с множеством дополнительных полей, о всех них можно узнать из видео, которое я добавил чуть ниже. Однако, не советую спешить, если вы новичок. Давайте подходить к новой информации постепенно. Сейчас нас интересует URL. Кликаем на него.

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

Если поставить галочку напротив «Обязательно поле», то вы сгенерируете звездочку в коде. Вы уже знаете, что это значит. Пока поле будет пустым, форма не отправится.

Если вы впишете что-то в графу «Значение по умолчанию», то поменяете заголовок, который будет размещаться над добавленным полем.

Хотите всунуть текст внутрь поля? Поставьте галочку рядом с «Использовать в качестве заполнителя».

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

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

Это все равно что знакомиться с кулинарией на примере приготовления хинкали. Слишком много дополнительных и обширных тем для обсуждения, которые на пальцах не объяснишь. И тем не менее у вас и у меня все получится. Я в этом уверен.

«Вставьте тег» и он появится в вашей форме.

Пока блок выглядит вот так: непонятно чего вы хотите от читателя. Необходимо вставить заголовок.

Посмотрите, как созданы другие поля. <p> означает абзац. Вставляем его в начало и в конец нового поля. Во втором случае перед буквой вставляем слеш «/», это означает, что здесь тег должен перестать действовать. Абзац закончился. Большинство тегов html имеет такой вид.

Далее вводим свой название. Любое слово или фразу. Это будет заголовок.

Тег <br> всегда единичный, его не нужно открывать или закрывать. Он означает, что вы хотите перепрыгнуть на следующую строчку.

Теперь форму можно сохранить.

Теперь ваша форма выглядит вот так. Вы уже знаете как посмотреть изменения. Воспользуйтесь предыдущей главой.

Ну вот и все, вы готовы узнать еще больше. Например, как создать сайт в блокноте с минимальными знаниями html или…

Дополнительные возможности: поля и их отличия, чек-боксы и многое другое

Если бы я решил писать обо всех возможностях этой программы и каждом атрибуте, то публикация была бы похожа на «Войну и мир», а вы вряд ли что-либо поняли. Поэтому, я предлагаю вам посмотреть вот это видео, в котором все подробно и наглядно показано.

Благодаря ему можно научиться всему: от создания новых форм любой сложности до установки новой капчи.

Простой способ изменения стиля: цвета, размеры, эффекты

Изменить настройки стиля еще легче. Как это сделать? И снова могу предложить вам полезное видео.

Ну вот и все. Если вы хотите научиться еще большему, например, создавать всплывающую форму, то могу порекомендовать вам бесплатные курсы по html и css Евгения Попова. Все будет намного легче и приятнее, если вы будете знать эти основы и научитесь пользоваться знаниями.

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

Присоединяйтесь, я регулярно отсылаю информацию своим постоянным читателям. Их уже более 200! Узнавайте о простых способах делать сложные сайты.

Желаю вам удачи в ваших начинаниях. До новых встреч.

Не работает форма обратной связи WordPress

Не работает форма обратной связи на блоге WordPress?  Покажу как я вышел из этого положения.

После написания этой статьи, мне писали люди и советовали разобраться с проблемой, а не обходить ее. Проблему я решил, а как я решил проблему, что еще пришлось настраивать, читайте в статье «Не работает форма обратной связи WordPress – Часть II» 

Моя история

Коротко, что произошло у меня. Я «переехал» на другой хостинг, переустановил WordPress (установил последнюю версию) и поставил новую тему Root.

О теме Root читайте в статье «Тема Root для WordPress»

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

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

Убрал плагины поставил форму через шорткод (в теме Root есть такая возможность), письма тоже не приходили.

Тогда решил поменять простую почту, на доменную (имя@ваш домен), результат — ноль.

Мое решение проблемы

Но форма нужна и нужно было как-то выходить из положения.

Возможно мой метод кому-то покажется сложным, но на его осуществление у меня ушло 15 минут.

Если вы знакомы с программой Adobe Muse, то этот способ для вас, но даже если вы не знаете этой программы, то просто делайте все как я покажу и у вас получится.

Кстати, если вы знакомы с Photoshop, то и Adobe Muse вы «осилите». Эти обе программы выпустила одна компания Adobe и интерфейс у них похожий.

В двух словах, что я сделал, а потом разберем подробно.

Я сделал отдельную страницу в Adobe Muse, поставил на нее форму обратной связи.

На своем блоге сделал страницу Напиши мне и поставил туда кнопку Написать сообщение, кликнув по которой посетитель попадает на страницу с формой подписки.

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

Кликаем по кнопке и попадаем на страницу с формой. На этой странице вы можете поставить любой фон (любую картинку) и написать любой текст.

Можно поставить даже видео фон, об этом читайте в статье «Видео фон для одностраничника»

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

ВНИМАНИЕ! Для такой формы понадобится почта с доменным именем. Если у вас еще нет такой почты, то самое время задуматься об этом, в любом случае рано или поздно вам придется создать такую почту.

Если у вас еще нет своего блога, то советую обратить внимание на недорогой хостинг OFFERHOST. На этом хостинге вы создадите свою доменную почту «в два клика».

Также почту с доменным именем можно создать в Яндекс Почта.

Читайте мои статьи:

OFFERHOST. Домен и хостинг
Установка WordPress. Выбор хостинга

 Форма обратной связи в Adobe Muse

Будем считать, что программа Adobe Muse установлена – «запускаем» ее. У меня версия 2018.0.0.685, на ней я и буду показывать.

Кликните Создать (1), потом ОК (2). В следующем окне кликаем мышкой 2 раза.

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

Попадаем в окно программы. Кликните правой кнопкой мыши в любом месте и выберите Шаблон (1)Без шаблона (2).

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

Ставим фон

Чтобы поставить фон, в верхнем меню выберите раздел Заливка в браузере (1).

Можно поставить простой фон или градиентную заливку, но нас интересует Изображение, кликаем Добавить (2) и выбираем картинку у себя на компьютере.

У вас должна быть приготовлена и оптимизированна картинка для фона.

Как оптимизировать картинки, читайте статью «Картинки для вашего блога. Где взять, как оптимизировать»

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

Советую две книги 89 сервисов для работы с графикой

Книги

Что-то подобное должно у вас получится.

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

Снова зайдите Заливка в браузере и поставьте Подгонка – Заполнение (1), а Положение (2) точку поставьте по середине.
Это нужно для того, чтобы фон заполнил весь экран. Можете поэкспериментировать.

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

Ставим форму

Теперь, правое меню, раздел Библиотека мини-приложений (1). Выберите Формы — Простой контакт (2) и перетащите мышкой в окно программы.

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

В правом верхнем углу формы, кликните на синий кружок с белым треугольником (сначала выделите форму), откроется окно настроек формы.

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

Необходимые настройки формы

(1) – название формы латинскими буквами
(2) – адрес доменной почты, куда будут приходить сообщения
(3) – ставим Остаться на текущей странице
(4) – поле, Электронная почта
(5) – поле, Имя

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

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

Хочу сказать, что каждый элемент формы можно редактировать отдельно. Выделите нужный элемент, и вы увидите синий кружок, кликнув по которому можно отредактировать этот элемент.

Вот для примера Окно сообщений.

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

Мы отредактируем Кнопку, а остальные элементы вы редактируйте сами, подбирайте цвет текста, размер и прочее, ориентируясь на дизайн страницы.

Настройка кнопки

Сначала растяните кнопку до нужных размеров, для этого выделите кнопку, потом возьмите за любой маркер (показано стрелочками) и потяните.

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

Меняем надпись на кнопке, шрифт и если нужно цвет. Кнопка должна быть выделена (вокруг кнопки должны быть маркеры).
В левом меню нажимаем букву Т (Инструмент Текст). В правом меню и в верхнем меню появятся инструменты для работы с текстом. Я чаще работаю в правом меню.

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

Кликните по полю с названием текста (1) и выберите нужный текст (2), у меня это Cuprum.
У вас этого шрифта не будет. Установка шрифтов, это отдельная тема.

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

В следующем окне сделайте все остальные настройки. Размер шрифта, цвет, выравнивание и т. д.

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

Теперь поменяем цвет кнопки и придадим ей некоторые эффекты. Кнопка должна быть выделена. Для выделения объектов, в левом меню есть инструмент Выделение (черная стрелочка).
После выделения кнопки перейдите в верхнее меню, раздел Заливка и подберите цвет кнопки, настройки те же, что и при заливке фона.

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

Можно Кнопке добавить Эффекты — Тень, Скос, Свечение. Попробуйте разные эффекты и выберите те, которые вам нравятся.

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

Верхнее меню и разделы, которые нужны для настройки Кнопки и Фона.

(1) Заливка
(2)
Обводка
(3)
Скругление углов
(4)
Эффекты (Тень, Скос, Свечение)
(5)
Заливка в браузере (Сплошная, Градиентная, Изображение)

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

Еще можно настроить состояния кнопки, например:

Стандартное
Курсор над кнопкой
Нажата кнопка мыши
Идет отправка
Форма обратной связи WordPress

СОВЕТ! Чтобы сделать эффект нажатия кнопки нужно, выбрать Стандартное, перейти в Эффекты и поставить Тень.
Потом выбрать Нажата кнопка мыши, перейти в Эффекты и убрать Тень.

Просмотр результата в браузере

В верхнем меню выберите Файл (1)Предварительный просмотр страницы в браузере (2)

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

Вот, что получилось, но сейчас форма работать не будет. Проект, который мы создали нужно загрузить к себе на сайт, на свой хостинг.

Сохраняем файлы проекта и загружаем на хостинг

Снова зайдите меню Файл, выберите Сохранит сайт как… (1) и сохраните где-нибудь на компьютере (создайте отдельную папку для этого проекта).
Далее, нажмите Экспортировать как HTML…(2)

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

Откроется окно экспорта. Пропишите свой домен (1), потом кликните по иконке в виде папки (2) и выберите папку, которую создали для проекта (см.выше).
Нажмите ОК.

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

Сейчас закачаем файлы проекта на хостинг. Для этого нам понадобится файловый менеджер, Total Commander или FileZilla. Я пользуюсь Total Commander, на нем я и покажу.
Если у вас есть или будет свой сайт (блог), вы должны уметь работать с файловыми менеджерами (посмотрите уроки на YouTube).

Запускаем Total Commander, видим 2 окна.

1-е ОКНО – это наш компьютер
2-е ОКНО – это наш хостинг (сайт)

В правом окне (на сайте) создайте новую папку (название латинскими буквами), откройте ее.
В левом окне найдите папку с проектом, выделите все файлы, кроме последнего, Веб-сайт-1 (это файл проекта) и нажмите F5 (копировать файлы).
Все файлы копируются на хостинг.

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

Дальше я делаю так. На хостинге захожу в папку, куда скопировали файлы проекта.
Название, index.html я прописываю в адресную строку, а потом копирую весь адрес страницы (выделено синим), осталось только подставить в начало http.
Это и будет адрес вашей страницы с формой обратной связи.

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

Пример адреса моей странички myobzors.ru/texnich/contact/index.html (без http)
Эту ссылку и надо вставить в Кнопку.

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

Сделать Кнопку и вставить ссылку, вы можете с помощью шорткода. Как это делается вы узнаете из статьи «WordPress шорткод. Плагин Shortcodes Ultimate»

Плагин Shortcodes Ultimate один из самых востребованных плагинов, на сегодня его установили 700 000+ человек.
Этот плагин умеет не только вставлять кнопки, почитайте статью и все узнаете о плагине.

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

С уважением, Сергей Бурдин

Как в WordPress добавить форму обратной связи. — На пути к успеху


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

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

  • открыто размещенный е-майл рискует попасть в базу СПАМеров, а убрать его оттуда уже ну никак. результат-ежедневно 10-100 писем рекламного характера на Ваш адрес, Вам обеспечено.
  • существует вероятность потери клиента. Всегда найдется человек которому нужна Ваша услуга или информация, которую Вы распространяете. Представьте, посетитель готов заказать у Вас то что ему нужно, но не может отправить письмо по е-майл. Причины могут быть самыми разнообразными: он вошел в сеть с чужого компьютера; ему тяжело открывать свою почтовую программу и т.д.

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

Для себя я решил, нужна. Следовательно-ставим.

Поиск плагиновДля осуществления задуманного нам понадобиться плагин для wordpress «Contact Form 7», как обычно открываем панель администратора, в меню справа выбираем раздел «Плагины»—«Добавить новый», вводим для поиска название плагина и устанавливаем. Или по старинке, скачиваем себе на компьютер затем распаковываем и заливаем на свой сайт в папку /wp-content/plugins/. Как Вам больше нравится. После чего идем в панель администратора находим в списке плагинов-неактивный «Contact Form 7» и кликаем на «Активировать».

Почему «Contact Form 7»? Потому что лучше этого плагина я пока не нашел. Это не только форма обратной связи, это целый конструктор форм. Имеет много вкусностей: поддержка нескольких форм; технология ajax; капча; антиспам akismet и в добавок – поддержка русского языка.

Если все закончится без ошибок, то в правом меню административной консоли появится новый пункт-«Contact».

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

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

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

Перед нами откроется несколько окон:

  1. Название формы. Используется в качестве тега, который мы добавим на странице контактов. К тому же это удобно, если Вы будете создавать несколько форм.
  2. Форма обратной связи. Собственно сам генератор форм. В правом окне мы будем выбирать тег, а слева устанавливать поля на свои места. Подробно далее.
  3. Почтовые настройки. Здесь мы будем настраивать как и куда будут направляться сообщения, и в каком формате они будут к Вам приходить.
  4. Сервисные сообщения. В этом окне настраивать нечего. Все уже настроено.
  5. Additional Settings. Какие-то дополнительные настройки, но что делать в этом окне я так и не понял, а Вы?

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

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

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

В правом окне в выпадающем списке выбираем первый пункт «Text field». Это будет поле, текстовое, в которое посетитель введет свое имя. Нам нужно знать имя отправителя, поэтому поле должно быть обязательно к заполненным, для этого ставим галочку в пункте «Required field?».

В поле «Name» вводим имя поля, я назвал его «your-name».

Ниже располагаются два поля, которые необязательно заполнять, это id и class. В id заносим уникальный идентификатор созданного поля. Я его заполнил и ввел «name-user». class отвечает за внешний вид полей. Я особо не утруждался и взял стили от disqus. В конце статьи я расскажу как.

Еще ниже, опять таки опционально, находятся еще два поля: size и maxlength. Т.е. размер поля (ширина) и максимальное количество символов. Я их не заполнял.

У меня установлен плагин Akismet, поэтому я включаю эту опцию в пункте «This field requires author’s name», т.е. в этом поле должно быть имя автора.

В следующее поле можно ввести значение по-умолчанию, т.е. то, что уже будет прописано в созданном поле. Это может быть подсказка, например «Ваше имя» или что либо подобное. Следующая опция «Use this text as watermark?», поставив галочку в этой опции, текст, который Вы пропишите по-умолчанию, будет пропадать при вводе текста пользователем.

В результате проделанных операций внизу блока сгенерировались теги.

Поиск плагиновПервый, в коричневом окне, необходимо вставить в окно слева, поскольку этот тег отвечает за вывод созданного нами поля на странице. Второй, он находится в зеленом окне, отвечает за вывод содержимого созданного поля в сообщении, которое придет на e-mail. Поиск плагинов

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

<p>Ваше имя (обязательно)<br />

[text* your-name id:name-user class:feedbackform akismet:author] </p>

Из зеленого поля, перетаскиваем созданный тег в поле «From» (От кого) и в тело сообщения, у меня это выглядит вот так:

Сделали? Великолепно! Поле для ввода имени пользователя у нас сделано. Но нам, как минимум, потребуется от пользователя еще и адрес его электронной почты, а может быть и адрес его сайта, если он есть, но не обязательно, капча, тема и собственно само сообщение.

Со всеми перечисленными выше полями проблем не будет, кроме капчи, для нее потребуется установка дополнительного плагина «Really Simple CAPTCHA».

Ну что ж, двигаемся дальше.

Закрываем открытый блок под текстовое поле, нажимая на крестик в правом верхнем углу. Кликаем на «Generate Tag» и в выпадающем списке выбираем пункт «Email field».

Описывать также подробно как и выше не имеет смысла, тут все также. Скажу лишь, что я поставил это поле обязательным («Required field?»), прописал id и class, а также включил опцию akismet («This field requires author’s email address»).

Теперь код в левом окне у меня выглядел вот так:

<p>Ваше имя (обязательно)<br />

[text* your-name id:name-user class:feedbackform akismet:author] </p>

<p>Ваш E-Mail (обязательно)<br />

[email* your-email id:email-user class:feedbackform akismet:author_email] </p>

А содержимое «From» и тело сообщения вот так:

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

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

Закрываем блок с опциями e-mail поля и в выпадающем списке «generate tag» выбираем «text field». Тут нам в общем-то ничего нового не предлагается. Только имя свое прописываем, id, class и, если пожелаете, опцию акисмета включаем «This field requires author’s URL».

После того как я прописал теги, у меня получился следующий код будущей формы:

<p>Ваше имя (обязательно)<br />

[text* your-name id:name-user class:feedbackform akismet:author] </p>

<p>Ваш E-Mail (обязательно)<br />

[email* your-email id:email-user class:feedbackform akismet:author_email] </p>

<p>У Вас есть сайт? (необязательно):<br />

[text site-user id:site-user class:feedbackform akismet:author_url watermark «http:\\\\ваш сайт»]</p>

Тег из зеленого окна достаточно, в этот раз, прописать только в тело сообщения.

Мы наверное попросим у пользователя сообщить нам тему его обращения. Создаем «text field», ставим признак обязательного к заполнению поля, прописываем имя, id, class и прописываем теги в левое окно из коричневого поля, вниз, в поле «Subject», из зеленого. Готово.

Далее вводим поле для сообщения. В уже знакомом нам выпадающем списке выбираем пункт «Text area». Ставим галочку «Required field?», т.е. поле обязательно к заполнению, имя, id, class и в этот раз я указал ширину и высоту поля (cols и rows), 80?7.

Для завершения формы, нам осталось добавить только кнопку «Отправить». В выпадающем списке выбираем опцию «Submit button». Здесь, в поле «Ярлык», нам необходимо прописать имя кнопки. Я так и написал «Отправить». Также прописываем id и class. Копируем тег кнопки в поле слева.

Ну что ж, осталось добавить проверку на спам, капчу. Для этого устанавливаем, любым, понравившемся Вам способом, плагин «Really Simple CAPTCHA», и активируем его.

Далее в правом окне настроек «Contact Form 7», из выпадающего списка, выбираем «Generate Tag —> CAPTCHA:»

Поиск плагиновИ копируем по очереди в правое окно две строчки, вставляя их перед кнопкой «Отправить». Поиск плагинов

Да и не забудьте дать подсказку читателям, например «Введите код с картинки». Все и от спама защитились.

Форма готова! Да, не забудьте нажать кнопку «Сохранить».

Но это еще далеко не все возможности. Ведь я не зря назвал этот плагин генератором форм. Помимо всего выполненного нами, можно дать возможность пользователям прикреплять файлы, сделать опрос и т.д. Опций действительно много.

Но это уже предмет другой статьи. Чтобы Вы могли сравнить Ваше произведение с тем, что получилось у меня:

А вот весь код мой формы:

<p>Ваше имя (обязательно)<br />

[text* your-name id:name-user class:feedbackform akismet:author] </p>

<p>Ваш E-Mail (обязательно)<br />

[email* your-email id:email-user class:feedbackform akismet:author_email] </p>

<p>У Вас есть сайт? (необязательно):<br />

[text site-user id:site-user class:feedbackform akismet:author_url watermark «http:\\\\ваш сайт»]</p>

<p>По какому Вы вопросу? (тема, обязательно):<br />

[text* your-subject id:subject-mail class:feedbackform] </p>

<p>Что Вы хотели мне сообщить? (обязательно)<br />

[textarea your-message mail-full 80×7 id:mail-full class:feedbackform] </p>

<p>Введите код с картинки<br />

[captchac captcha-153 class:feedbackform]

[captchar captcha-153]</p>

<p>[submit id:button class:buttonfeedback «Отправить»]</p>

Настало время разместить эту форму на странице контактов или обратной связи, это уж кому как нравиться. Если такой страницы нет, то создаем ее. В панели администратора, в левом ищем пункт «Страницы->Добавить страницу». Заполняете страницу как Вам нравиться и, в нужном месте, добавляете тег созданной формы.

Поиск плагиновЭтот тэг находится под названием формы, в коричневом поле. Да, не забудьте, этот тег необходимо добавлять в режиме HTML.

Ну вот и все, обратной связью мы обеспечены.

Выше я обещал отдать Вам стили, которые взял от дискуса и прикрепил к своей форме обратной связи. Как выглядит эта форма Вы можете посмотреть здесь. Нравится? Тогда берите изображения, их нужно скопировать на ваш сервер в папку /wp-content/theme/Ваша тема/папка с картинками. А в файле style.css нужно добавить следующий код:

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

.feedbackform {

-moz-border-radius:3px 3px 3px 3px;

background:url(«images/inputshadow.gif») no-repeat scroll left top #FFFFFF;

border:1px solid #999999;

margin:3px 0;

padding:3px 5px;

font-family:Arial,Helvetica,sans-serif #333;

font-size:12px;

}

.buttonfeedback {

background:url(«images/button-large.png») repeat-x scroll left bottom transparent;

border:1px solid #999999;

color:inherit;

font-family:Arial,Helvetica,Calibri,sans-serif;

margin:0;

overflow:visible;

-moz-border-radius:4px 4px 4px 4px;

font-size:12px;

font-weight:bold;

padding:6px 8px;

}

Стиль “feedbackform” прописываем всем полям, а “buttonfeedback” соответственно кнопке. Все это пишем в опцию class.

Успешных Вам писем в почтовые ящики!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *