Блог Александра Кадырова

03.01.201414.03.2016

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

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

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

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

Описание плагина

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

Кроме этого, вы можете подключить к нему плагин Akismet для защиты от спама, реализовать сбор и хранение данных в базе вашего сайта, а так же использовать мультиязычность. Это, на мой взгляд, круто! :-)

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

Плагин устанавливается стандартным способом в WordPress. Заходим в раздел «Плагины» — «Добавить новый», вводим название Contact Form 7 и устанавливаем его из репозитория. Не забываем активировать сразу после установки.

Настройка Contact Form 7

После активации плагина в главном меню WordPress появится новый пункт «Контакты (CF7)», это основное место настроек ваших форм обратной связи. Количество форм ничем не ограничено.

Список существующих форм доступен в разделе «Contact Forms»:

Тут же можно скопировать нужный шорткод для вставки на страницу или в запись:

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

Как видите, каких-то особых дополнительных пунктов в меню нет, поэтому перейдём к созданию самой формы обратной связи. Для этого выбираем пункт «Добавить новую» в главном меню.

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

Но вы можете выбрать из списка любой доступный язык:

После нажатия на кнопку «Добавить новую» появится конструктор формы.

Изменяем название формы

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

После этого появится текстовое поле, в котором введём название с описанием:

И нажмём кнопку «Сохранить».

Как только страница обновится, вы увидите следующее сообщение:

Можно скопировать предложенный шорткод и вставить на нужную нам страницу.
Но вы можете сделать это и позже, как только настроите форму. Выбор за вами.

Изменяем шаблон формы

Шаблон формы — это обычный HTML-код, который формирует внешний вид вашей формы. По умолчанию он содержит 4 поля (имя, электронный адрес, тему и сообщение) и кнопку отправки формы. Выглядит это следующим образом:

Вы можете менять блоки местами, просто вырезая и вставляя их код в любое место.
Например, мы можем поменять местами поле электронного адреса и имя клиента:

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

«Звёздочка» возле кода элемента означает что это поле обязательное и пока клиент не введёт какое-то значение, форма не будет отправлена:

[subscribe_form button=»Я хочу получать материалы рассылки!»]

Как добавить новое поле в форму

Представьте, что вам необходимо в стандартную форму добавить поле с адресом сайта. Конструктор формы этого плагина позволяет безо всяких проблем реализовать задуманное. Достаточно воспользоваться кнопкой «Сгенерировать тэг»:

При нажатии вывалится огромный список возможных дополнительных полей:

Вам останется лишь выбрать тип нужного поля и выполнять ещё ряд простых действий.

Не пугайтесь. Настройки хоть и выглядят устрашающе, но на деле очень простые :-)

Признак «Обязательное поле» позволяет установить дополнительную проверку и пока это поле будет оставаться пустым или иметь некорректное значение, форма не будет отправлена. Эта настройка есть практически у всех типов полей:

Кроме этого, многие поля нашей формы имеют одинаковые настройки имени, указания ID элемента и класса CSS, через которые можно изменять внешний вид этих полей. Они присутствуют практически во всех полях:

Поле «Имя» самое важное, именно оно используется и в шаблоне формы, и в шаблоне письма.

Но за время пользования этим плагином мне ни разу не приходилось менять или устанавливать значения этих атрибутов. Скорее всего и вам не понадобится. Но рассказать и познакомить с ними я обязан :-)

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

Так же специфические поля, типа URL или каких-то других, отличных от обычных текстовых, имеют свои особенные настройки. Например, наше поле URL имеет дополнительную настройку:

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

Теперь нам нужно добавить код этого поля в форму шаблона формы.
Для этого необходимо скопировать предложенный код и вставить его в форму слева:

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

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

И вставить в текстовое поле ниже в «Шаблон письма»:

По аналогии добавляются и другие поля. Всё просто и понятно :-)

Адресат и шаблон письма

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

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

Я думаю вы уже обратили внимание что в этих формах используются непонятные коды, типа [your-name], [your-email]. Так вот, это то самое поле «Имя» из генератора поля, которое я рассматривал выше:

Напоследок я бы рекомендовал вам установить опцию «Использовать HTML-формат письма», так вы можете сделать ваши сообщения с сайта более информативными, используя HTML при вёрстке шаблона.

Ну и дальше вам останется лишь привести в порядок шаблон самого письма:

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

P.S. В настройках этого плагина есть довольно интересная возможность — указать второго адресата сообщения. Честно говоря я сходу не могу придумать зачем это может понадобиться, но раз возможность есть, то кто-то её в любом случае воспользуется.

Настройка сообщений

Ну и какой же это плагин отправки сообщений, если он не позволяет изменить текст уведомлений или надписей? И плагин Contact Form 7 не исключение. Он позволяет перевести любую надпись или сообщение об ошибке:

Не забудьте сохранить все изменения нажатием на кнопку «Сохранить», она в самом верху страницы :-)

Известные проблемы

Бывает так, что при использовании нестандартных контролов, типа email или url, внешний вид отдельных элементов на странице будет отличаться. Например, обратите внимание на поле «Адрес вашего сайта» в самой форме:

Не увидели? А я покажу поближе:

В общем, проблема в том, что внешний вид подобных полей визуально отличается от стандартных текстовых полей. Сравните с полем «Ваше имя», сразу всё поймёте.

Тут есть два варианта решения. Первое — добавить соответствующие стили в файл style.css вашей темы, либо изменить в шаблоне формы тип url на text, тогда всё будет нормально:

Заключение

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

Конечно, обязательно появится кто-то, у кого либо что-то не получится, либо захочется предложить к рассмотрению какой-то другой, аналогичный плагин. Я всегда рад вопросам и предложениям! Не стесняйтесь задавать их в комментариях :-)

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

25.12.201307.07.2019

Отзыв Михаила Албанова

Были проблемы с переносом сайта на WordPress — не отображались другие страницы и не мог зайти в свою админку.

На одном закрытом форуме создал тему на счет своей проблемы и Александр начал давать советы как исправить, но проблему не удалось решить. Тогда Александр сам предложил подключиться к моему ноутбуку удалённо, чтобы мне помочь. И помог)

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

Спасибо за помощь!

16.12.201320.06.2016

Как убрать заголовок виджета в WordPress

Зачем может понадобится сокрытие заголовка виджета? Я вижу только одну причину — он не несёт какой-либо смысловой нагрузки, либо не вписывается в общий дизайн вашего сайта.

Некоторые могут заметить, что нет ничего проще — достаточно просто указать пустое значение в названии виджета следующим образом:

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

Что же делать?

В общем, решение довольно простое и доступно абсолютно любому владельцу сайта на WordPress. Сводится оно к добавлению кода в файл functions.php, который находится в директории с вашей темой и небольшим трюком в именовании виджета.

Подключаемся к FTP вашего хостинга и заходим в директорию с темой.

Открываем файл functions.php и добавляем в конец файла следующие строки кода:

add_filter( 'widget_title', 'hide_widget_title' );
function hide_widget_title( $title ) {
    if ( empty( $title ) ) return '';
    if ( $title[0] == '!' ) return '';
    return $title;
}

Всё! Думали будет сложнее? :-)

Заходим в раздел «Внешний вид» — «Виджеты» и теперь в том виджете, заголовок которого вы хотите скрыть на сайте, достаточно первым символом добавить восклицательный знак, либо оставить его пустым.

Например, скроем заголовок виджета «Облако меток»:

И наслаждаемся результатом на сайте у виджета «Облако меток»:

Если в каком-то из ваших виджетов этот код не сработает — напишите в комментариях, будем вместе разбираться :-)

17.11.201318.02.2014

Evernote — электронный органайзер для компьютера

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

Кто ещё не видел эту программу — ужаснитесь с представленного ниже скриншота:

А теперь давайте в спокойном режиме по шагам разберём, как её готовить и с чем подавать этого аппетитного слоника на стол :-)

Что такое Evernote

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

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

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

«И что?», спросите вы. Все же пользуются закладками, я думаю и вы не исключение. Так вот, дорогой друг, сайты со временем имеют свойство закрываться, удаляться, обновляться. Иногда изменяется структура URL на сайте, либо происходят ещё какие-то непонятные действия (не продлили домен или хостинг, например) и все ваши закладки с полезного сайта летят на дно.

Да-да, на самое настоящее дно! :-)

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

И именно Evernote стал для меня именно тем инструментом, который полностью заменил все имеющиеся у меня в запасе способы сохранения информации: сохранение закладок браузера, экспортирование страниц на компьютер в архивы .MHT или ещё какие-то непонятные и неудобные способы.

Как пользоваться программой Evernote

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

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

Вот основные возможности премиум-подписки:

Офлайн-блокноты. Позволяют сохранить ваши блокноты во встроенную память планшетного компьютера или вашего мобильного устройства, и пользоваться во время отсутствия интернета. Есть мобильная версия этого органазайзера для Android и Apple. Крайне удобно!
Коллективная работа. Регулярно с моим партнёром пользуемся этой фичей. Позволяет дать доступ к общим блокнотам и редактировать каждый свои материалы в онлайне. Это не режим одновременной правки одного и того же блокнота, но позволяет отказаться от пересылки документов по почте или через Skype.
Защита PIN-кодом. Если вы параноик, то функция поможет вам при входе в программу запросить дополнительный пароль. Лично я этим не пользуюсь, как-то пока не приходилось.
1 гигабайт места. Многие подумают, что это крайне мало. Но для хранения текстовых заметок или изображений — самое то. Поэтому не волнуйтесь, этого места вам хватит с лихвой.

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

Ещё раз отдельно отмечу, что у этой программы есть мобильные приложения для устройств Android и Apple, поэтому загляните в интернет-магазины своих устройств и скачайте бесплатную версию. Называется она так же — Evernote.

Внутреннее устройство Evernote

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

Программа использует два вида таксономии (если брать в терминологии WordPress): это блокноты и метки. И есть ещё основной элемент, с которым вы будете работать — это заметка. Давайте познакомимся с ними поближе и узнаем, как и для чего можно их использовать.

Заметки в Evernote

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

Вот так она выглядит открытой в отдельном окне:

Заметки хранятся в блокнотах и им можно задавать метки. Поговорим об этом ниже :-)

Блокноты в Evernote

Блокнот — это что-то типа категорий в WordPress. Если вы не знакомы с WordPress и попали на мой блог случайно, тогда приведу другую аналогию: папки на вашем компьютере. Только с одним ограничением: уровень вложенности равняется одному.

Вот так выглядят блокноты:

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

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

Вы так же как и я будете непонятным взглядом смотреть в этот стандартный блокнот и не поймёте, в чём соль программы-то. Но, как только проникнитесь идеей и начнёте создавать свою структуру блокнотов — вот именно в этот момент вы расцветёте. Именно в этот момент ваше сознание достигнет высшей точки и улыбка растянется до ушей. :-)

Давайте возьмём один из моих блокнотов и посмотрим, что там.
Пусть это будет вложенный блокнот «Food» из блокнота «Personal»:

Сразу скажу — вы можете называть блокноты как посчитаете нужным. Программа отлично работает с русским языком, но вот я решил использовать и английские, и русские названия блокнотов. Так я сам захотел :-)

Что хранится в моём блокноте Food? Правильно! Рецепты блюд :-)

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

Щёлкаем по вот этой кнопке и в меню выбираем нужный нам вариант:

Так выглядит список:

А так карточки:

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

Действия, которые можно делать с заметками, представлены в контекстном меню при нажатии правой кнопки мыши:

Создание блокнота

Создание блокнотов в Evernote выполняется не легко, а очень легко.

Чтобы сделать главный блокнот (не знаю как назвать иначе), щёлкаем правой кнопкой мыши по пункту «Блокноты» в левом меню вашей программы и выбираем в нём «Создать блокнот…»:

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

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

После создания можете создать в новом блокноте дополнительные вложенные, либо же сохранять заметки прямо в него. О сохранении заметок поговорим ниже :-)

Как поделиться блокнотом

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

Для этого нажимаем правой кнопкой мыши по нужному блокноту и выбираем пункт «Поделиться блокнотом»:

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

После этого им на почту придёт сообщение и в программе Evernote появится доступ к вашим блокнотам.

Метки

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

Давайте рассмотрим основные отличия.

Метки имеют неограниченный уровень вложенности

И именно эта функция очень сильно не хватает активным пользователям Evernote, которые предпочитают использовать блокноты. И мне, в том числе…

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

Минус в том, что вы не сможете создать две метки с одинаковым названием. Например, вы хотите в главной метке «Растяжка» создать «Руки» и «Ноги», а ещё в каждой из них вложенную метку «Программа». У вас не получится это сделать, к сожалению.

Название метки должно быть уникальным!

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

При выборе конкретной метки будет отображён тот список заметок, к которым эта самая метка была присвоена. Выбираем структуру «Тренировка» — «Тренажёры» — «Гантели»:

И в области заметок отобразятся только нужные нам:

Метки, в отличие от блокнотов, нельзя делать общими для совместной работы.

Как добавить метку к заметке

Есть ~~два~~ три простых пути. Первый — открыть заметку и добавить метку из панели инструментов:

Второй путь — вызвать контекстное меню на нужной заметке в списке и выбрать там пункт «Пометить заметку…»:

Обновление от 18 февраля 2014.
О третьем способе я узнал совершенно случайно от Антона Ключковского из комментариев к этой записи. Заключается она в простом и удобном решении: выбираются нужные вам записи и перетягиваются на нужные метки в боковой колонке интерфейса Evernote.

Взгляните, как просто:

Расширение Evernote для браузера

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

Для этой задачи необходимо установить расширение для вашего браузера, практически все версии имеют свои расширения в соответствующих каталогах. Я использую Google Chrome, поэтому ставил из магазина Google.

После установки на панели инструментов появится значок с логотипом программы:

Далее заходим на нужный сайт, чью заметку мы хотим сохранить. Я покажу на примере habrahabr.ru. Находим какой-нибудь очень полезный и важный материал, пусть будет вот эта игрушка:

Теперь нам остаётся лишь нажать на этого слоника в панели инструментов и вот что произойдёт:

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

Выбор блокнота и назначение меток

Щёлкая на название блокнота, всплывают дополнительные опции для этой заметки: собственно, сам блокнот на выбор, возможность указать метки и написать комментарий:

Как только вы активно начнёте использовать Evernote, расширение для браузера будет практически идеально подбирать нужный блокнот по умолчанию. Раньше я этого не понимал, а теперь меня осенило :-)

Выбираем область копирования

Переключая значения в области «Копирование», вы можете определить тот фрагмент текста (или весь текст), который будет скопирован. Давайте выберем, например, «Упрощённая статья»:

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

Именно в таком виде заметка будет скопирована в программу. Мне кажется это очень удобным, поэтому пользуюсь упрощённым видом практически всегда. Рекомендую поэкспериментировать :-)

Ну и, для примера, как выглядит тип «Закладка»:

Есть ещё интересная опция, называется «Снимок экрана». После её нажатия автоматически делается скриншот страницы и вы можете добавить всякие прикольные штучки на этот скриншот. Например, стрелку:

С её помощью можно указать на какой-то приклёкший внимание элемент на странице.

Инструментов для выделения достаточно, чтобы покрыть любые пожелания:

С их помощью можно вот такие элементы добавлять:

В общем, поигрались и хватит!

Сохранение заметки из расширения

Теперь вам останется лишь нажать кнопку «Сохранить» и она автоматически улетит в выбранный вами блокнот:

Вот подтверждение этому:

Проверим?

Заключение

В этой заметке я хотел показать вам принцип работы с программой Evernote. Надеюсь вы тоже установите её и сможете навести порядок в своих электронных документах раз и навсегда. Будут вопросы — задавайте в комментариях.

Благодарю за внимание! :-)

12.11.201307.07.2019

Отзыв Веры Стрижовой

Я совсем еще новичок в интернет-технологиях для инфобизнеса, и каждый новый шаг для меня (создание SL или LP, подключение систем оплаты или настройка рассылки) — это отдельная эпопея…

Все говорят — настроить систему платежей — это очень просто! Это правда. Но… То, что просто — это обычно крайне мало и совсем недостаточно )))

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

Помощь и совет специалиста в таких ситуациях — просто спасение! Таким спасителем и стал для меня Александр, когда я билась над очередным «пустяком», который занял полдня… Проблема просто испарилась за пару минут!!!

Огромная благодарность!

27.10.201324.01.2015

Добавление карты сайта в Яндекс.Вебмастер

Совершенно упустил из виду в уроке «WordPress SEO by Yoast» о необходимости добавлении информации о карте сайта (sitemap) в инструменты вебмастера от Яндекса и Google.

Сегодня вспомнил и подготовил короткий ролик на этот счёт :-)

27.10.201327.10.2013

Аудит сайта madam-internet.com

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

В данном видео рассматривается сайт Мадам Интернет — Советы опытной дамы и волшебный бумеранг. Очень интересный и живой сайт, рекомендую всем к ознакомлению!

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

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

Поэтому подписывайтесь на обновления блога и не упустите появление новых инструкций.