hs.graphicsDir ="http://mixyblog.ru/wp-content/plugins/auto-highslide/highslide/graphics/"; hs.outlineType = "rounded-white"; hs.outlineWhileAnimating = true; hs.showCredits = false; window._wp_rp_static_base_url ='http://dtmvdvtzf8rz0.cloudfront.net/static/'; window._wp_rp_wp_ajax_url ="http://mixyblog.ru/wp-admin/admin-ajax.php"; window._wp_rp_plugin_version = '2.5'; window._wp_rp_post_id = '2439'; window._wp_rp_num_rel_posts = '7'; /* */ VK.init({apiId: 2857685, onlyWidgets: true}); VK.init({apiId: 3242173, onlyWidgets: true});
CqQRcNeHAv

Форма обратной связи в WordPress, как сделать форму с помощью плагинов, скриптов и онлайн

Tweet

Здравствуйте, уважаемые посетители блога Mixyblog.ru! Сегодня хочу поговорить о довольно полезной штуке для блога на WP или сайта. У посетителей иногда может возникнуть вопрос, который не хотелось бы оглашать в комментариях так вот, чтобы добраться до администрации сайта, существуют альтернативные способы связи, о которых и будет этот пост.

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

Нужна ли форма обратной связи сайту или блогу? Я думаю, что да. С одной стороны, можно указать Е-mail или аську. Но данные способы чреваты последствиями, которые будут досаждать вам кучей предложений от спамеров, пытающихся впарить всякую ерунду. С другой, форма связи выглядит привлекательней и будет намного удобней для добросовестных читателей блога. Поэтому ставить её всё таки нужно.

Я рассмотрю несколько способов создания связи, с помощью плагинов, скриптов и онлайн-конструкторов. Думаю, будет правильней дать вам самим выбирать оптимальный вариант реализации данного вопроса. Итак, начнём с самого лёгкого, а именно, с плагинов.

Создание формы обратной связи с помощью плагинов

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

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

Плагин Contact Form 7

Допустим, вас не устраивает стандартная форма обратной связи, тогда нажимаем «Редактировать» и переходим в настройки. Там в поле «Форма» в левой части вы увидите стандартный код, который выводит форму, а в правой части выпадающее меню: «Сгенерировать тэг», с помощью которого можно создавать поля: Имя, E-Mail, Сообщение и т.д.

Стандартный код, можно полностью удалить и приступить к созданию своих полей. Теперь нажимаем на «Сгенерировать тэг» — «Текстовое поле». Данный тэг позволяет сделать поле для ввода имени посетителя, который пишет вам сообщение.

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

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

2. — Собственно, имя поля. Его можно не изменять и оставить таковым. (text-630)

3. — ID созданного поля, можно не указывать, но я указал. Цифра 630 в имени text-630 и является ID.

4. — Здесь можно указать длину поля. Напротив стоит настройка «maxlength» — задаёт максимальное количество символов, которое пользователь может ввести в поле. Я ничего там не указывал. Если есть желание — экспериментируйте.

5. — В этом окне можно указать стили и настроить тем самым внешний вид формы обратной связи. Если хотите, то указывайте «feedbackform». В конце я дам код, вставив его в файл «Style.css», можно настроить внешний вид. Делается это очень легко.

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

7. — Это код вывода поля, который нужно скопировать и вставить в левую часть формы. 8. — Этот код вставляем в тело сообщения ниже, которое будет приходить вам на почту:

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

Таким же образом делаем другие поля, выбрав в выпадающем меню «Поле email», добавляем поле для почты. Чтобы добавить поле для написания сообщения выбирайте опять же «Текстовое поле», обратите внимание, что подобных тэгов там два, для поля сообщения нужно выбрать второй.

Последним в очереди идёт «Кнопка отправки». Там надо написать ярлык допустим «Отправить» и указать стили, только уже не «feedbackform», а для кнопки «buttonfeedback». В итоге у меня получился вот такой код в левой части формы:

<p>Ваше имя (обязательно)<br />
 [text* text-630 20/ id:630 class:feedbackform] </p>  

<p>Ваш E-Mail (обязательно)<br />
  [email* email-348 20/ id:348 class:feedbackform] </p>

<p>Тема сообщения (обязательно)<br />
  [text* text-816 25/ id:816 class:feedbackform] </p>

<p>Сообщение<br />
  [textarea* textarea-794 id:794 class:feedbackform] </p>

<p>[submit class:buttonfeedback "Отправить"]</p>

Теперь остаётся добавить новую страницу в админке WP: «Страницы» — «Добавить новую». Переключив редактор страницы из «Визуальный редактор» в «HTML» или, начиная с обновления версии движка 3.5.1, «Визуально» — «Текст». И поместить туда код, который вы увидите в верху страницы настроек плагина:
Плагин Contact Form

Теперь на странице будет красоваться форма связи. В фантазии я вас не ограничиваю, данный плагин является конструктором, поэтому наворотить можно, что угодно. Но. Не обошлось и без минусов. У плагина нету поддержки капчи, для тех, кому она крайне необходимо придётся установить стороннее расширение Really Simple CAPTCHA.

Добавить его можно из админки или скачать отсюда. Затем нужно установить и активировать, больше ничего не требуется. Далее переходим в настройки плагина Contact Form: «Сгенерировать тэг» — «CAPTCHA».
Капча Contact Form
Надо взять два кода отображения капчи и перенести их в форму в левой части. Вот, что получилось у меня:

<p>Ваше имя (обязательно)<br />
 [text* text-630 20/ id:630 class:feedbackform] </p>
 
<p>Ваш E-Mail (обязательно)<br />
  [email* email-348 20/ id:348 class:feedbackform] </p>
 
<p>Тема сообщения (обязательно)<br />
  [text* text-816 25/ id:816 class:feedbackform] </p>
 
<p>Сообщение<br />
  [textarea* textarea-794 id:794 class:feedbackform] </p>

<p>Введите код с картинки<br />
[captchac captcha-562]
[captchar captcha-562]</p>
 
<p>[submit class:buttonfeedback "Отправить"]</p>

Ну а теперь, чтобы форма обратной связи на WordPress блоге не казалась унылой, можно добавить стили, которые я обещал вам в начале поста. Для этого откройте папку с вашей темой фтп клиентом, которая находится по адресу: «wp-content/themes/название темы» и найдите файл «Style.css». Затем откройте его любым PHP редактором и в самый конец поместите код:

.feedbackform {
 -moz-border-radius:5px 5px 5px 5px;
 background: no-repeat scroll left top #FFFFFF;
 border:3px solid #999999;
 margin:1px 0;
 padding:3px 5px;
 font-family:Arial,Helvetica,sans-serif #333;
 font-size:12px;
 }
 
.buttonfeedback {
 background: repeat-x scroll left bottom transparent #e64646;
 border:1px solid #e64646;
 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;
 }

Здесь, можно изменить цвет фона, шрифта, размер и т.д. Если знаний языков нет, меняйте циферки, цвета и смотрите результат.))

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

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

Название ему Usernoise, можно добавить из админки последнюю версию или скачать отсюда версию 1.0.5. Как обычно распаковываем и заливаем в папку с плагинами: «wp-content/plugins». Активируйте и переходите в настройки. Там всё понятно, объяснять не буду, скажу только, что сообщения вам будут приходить, как в админку WP, так и на почту.

Скрипты для создания форм обратной связи на AJAX

AJAX — технология, позволяющая страницам обращаться к серверу в фоновом режиме, то есть без перезагрузки. А это значит, что данные скрипты не будут оказывать никакого влияния на загрузку сайта, что очень даже хорошо.) Итак, поискав в интернете достойных представителей, которые помогут нам в этом вопросе, я выбрал, на мой взгляд, лучший скрипт о котором собираюсь рассказать.

Super AJAX Contact Form. Он удобен тем, что сразу выводятся сообщения об ошибках заполнения полей, при успешной отправке данных, пользователю об этом сообщается. Это существенно повышает юзабилити формы, что и делает этот скрипт лучшим в своём роде.

скрипт Super AJAX Contact Form

Установка не займёт и двух минут. Нужно скачать его отсюда, распаковать архив и папку «AJAX» залить на сервер в корневую папку блога. Далее в папке «AJAX» нужно зайти в каталог «assets» в нём найти папку «xml» и открыть на редактирование файл «config.php» Для чего это делается? В этом файле вы укажете E-mail на который будут приходить сообщения, отправленные пользователями.

AJAX Contact Form

В тегах «address» нужно указать основной емэйл на который будут приходить письма. Обратите внимание на три выделенные строчки: «Support», «Sales» и «Other». Если посмотреть на скриншот выше, то можно увидеть, что скрипт предлагает выбрать тему письма: «Проблема», «Важно» и «другое». Так вот, если вы укажете отдельные адреса к этим строчкам, то и письма будут приходить на разные емэйлы, в зависимости от выбора темы сообщения.

Указывать отдельную почту или нет — решать вам. На этом все настройки заканчиваются. В папке «AJAX» кроме «assets» лежит файл index.php который и будет выводить форму связи Super AJAX Contact Form. Чтобы посмотреть, как выглядит скрипт на вашем сайте, нужно прописать путь к нему в строке браузера «http://домен.ru/AJAX/index.php» этот путь будет являться ссылкой, при переходе по ней в новом окне откроется форма.

Увы я так и не смог интегрировать её в страницу сайта, что только не делал все равно не догоняю)). Поэтому скрипт будет открываться в новом окне, если есть идеи на этот счёт, пишите в комментариях. Далее я столкнулся ещё с одной проблемой. Ссылки на блоге по умолчанию с расширением «Html» поэтому изменить её в редакторе не получится. Можно конечно поменять расширения ссылок в параметрах «Постоянные ссылки» или в файле «.htaccess» но в этом случае изменятся все ссылки.

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

<div class="menu-links">
           <div id="pagemenucontainer">
	<ul id="pagemenu">
    <li  class="current_page_item" ><a href="http://блог.ru/">Home</a></li>
   <li class="page_item page-item-181"><a href="http://блог.ru/kontaktyi">Контакты</a></li>
    		</ul>
            </div>
	</div>

Далее открываем файл «header.php» вашей темы и ищем код, который выводит ссылки в меню в шапке сайта. У меня он выглядит следующим образом:

<div class="menu-links">
                    <div id="pagemenucontainer">
					<?php
                    if(function_exists('wp_nav_menu')) {
                        wp_nav_menu( 'depth=1&theme_location=menu_1&menu_id=pagemenu&outer-wrapper=&fallback_cb=menu_1_default');
                    } else {
                        menu_1_default();
                    }
                    
                    function menu_1_default()
                    {
                        ?>
                        <ul id="pagemenu">
    						<li <?php if(is_home()) { ?> class="current_page_item" <?php } ?>><a href="<?php echo get_option('home'); ?>/">Home</a></li>
    						<?php wp_list_pages('depth=1&sort_column=menu_order&title_li=' ); ?>
    					</ul>
                        <?php
                    }
                    
                ?>
                    </div>
				</div>

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

<a href="http://домен.ru/AJAX/index.php" target="_blank">Контакты</a>

На этом всё не забудьте скрыть папку «AJAX» в файле Robots.txt, так же существуют и онлайн генераторы форм связи, с помощью которых вы сможете дать волю воображению и наделать себе всяческих форм.))

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

Подобных сервисов конечно много, но я рассмотрю только два и первый из них будет Русскоязычный сайт Main-ip.ru. Он генерирует простенькие формы и дает возможность настраивать цвет и поля. После всех манипуляций вы получите код формы, который нужно вставить на страницу в редакторе.

Итак, идём на страницу создания формы, вы увидите поля ввода информации а справа настройку цвета. После того, как определились с цветом и количеством полей нажимаем «Генерировать» — «Получить код». Полученный код нужно вставить в редактор, предварительно включив режим «Html». На этом всё — форма работает. Остаётся зарегаться на сайте и указать адрес страницы с кодом и E-mail на который будут приходить сообщения. Сайт бесплатный, но при отправке письма, пользователю будет показываться контекстная реклама с ссылкой вернуться на главную.

Онлайн генераторы контактных форм

Второй сайт Англоязычный и предлагает куда больше функций. Всё вроде бы ничего, за исключением лимита сообщений. По мне дак сто сообщений в месяц вполне хватит, на блогах в основном оставляют комментарии к постам не так ли? Ладно переходим на сайт и в правом верхнем углу нажимаем на ссылку «SIGN UP»-зарегистрироваться. Предлагаю воспользоваться чудесным браузером хром, который всё переведёт. Но если это по каким-то причинам невозможно смотрите скриншоты и читайте.)

Контакты онлайн

Как показано на скриншоте я сделал простую форму обратной связи. Итак:

1. Вкладка с простыми полями, добавляет название формы (Heading), поле имя(Text Boks), сообщения(Text Area) и кнопку отправить(Submit Button).

3. Вкладка, содержащая поля: E-mail, адрес, телефон и т.д. Кликнув по ней, можно добавить окно для ввода почты.

4. Данная кнопочка позволяет сделать поля для ввода обязательными, кликнув по полю и нажав её, появляется звёздочка.

5. Если в полях при создании формы написан какой-то текст, данная кнопка незамедлительно его удалит!!)

Теперь можно перейти к оформлению, нажав на «Form Style». Там всё довольно понятно и легко, объяснять не требуется. Переходим ко вкладке «Setup & Embed». Нужно отредактировать страницу, которая будет показываться посетителю после того, как он отправит сообщение. Для этого кликаем на «Thank you» и выбираем «Thank You message»(страница благодарности), откроется редактор и в нём можно написать, что то вроде этого:

форма контактов

Я сделал самую стандартную форму, далее нужно получить код и вставить в редакторе на страницу блога. Для этого кликаем на «Embed Form» и выбираем движок вордпресс, откроется код который нужно вставить туда, где будет форма связи. У меня это страничка «Контакты». Кстати, чтобы оптимизировать страницы под ключевики почитайте мою статью про плагин All in One SEO Pack. На этом всё подписывайтесь на обновления, дабы не пропустить новые посты. Желаю удачи!!!

Буду признателен, если вы воспользуетесь данными кнопками и подпишетесь на обновления!
8
Твитнуть
VK.Widgets.Like("vk_like", {type: "button"});
VK.init({apiId: 2857685, onlyWidgets: true});
WordPress

3 комментариев

  1. Uarukmers:

    Спасибо за статью, все подробно и понятно описано, именно так я и сделал на своем блоге.

    1. Rimskij:

      Не за что) Рад, что статья оказалась полезной)

  2. Сергей:

    Присоединюсь к коменту выше, очень полезная статья, мне помогла всё ясно, как день!!!

'2439' id='comment_post_ID' />

ВКонтакте
FaceBook
  • Рубрики

  • Реклама:

    Хорошие цены на кухни в Челябинске.



    Популярные

  • //
    document.write("<\/a>") $(function(){ $('dl.tabs dt').click(function(){ $(this) .siblings().removeClass('selected').end() .next('dd').andSelf().addClass('selected'); }); });