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

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

Моя история

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ставим фон

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

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

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

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

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

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

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

Ставим форму

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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