Привет уважаемые читатели и гости блога seoslim.ru. Возвращаясь к теме оптимизации и настройке сайтов, хочу рассказать, как у меня реализована форма обратной связи на сайте без использования плагинов: на PHP или HTML.
Если посмотреть на такое решение с одной стороны, то приходят мысли: «А зачем это нужно?», ведь куда проще установить специальный плагин и пользоваться стандартной формой.
Изначально я тоже так считал, о чем рассказывал в статье Плагин Contact Form 7, где расписал весь процесс по созданию простой и в тоже время многофункциональной страницы для обратной связи, а еще о том, как ее дополнительно защитить от разного рода спама, используя КАПЧУ.
Однако все мы понимаем, что плагины плохо сказываются на скорости загрузки блога, что может привести к плохим последствиям, так как если ваш сайт долго открывается, то пользователь может просто не дождаться и закрыть такую страницу.
Вдобавок поисковые системы отслеживают скорость работы всех площадок и еще возьмут и занизят в выдаче долго загружающийся сайт.
Поэтому я стараюсь всеми возможными путями добиваться максимальной загрузки проекта и его быстродействия.
Советую прочитать, что я уже для этого сделал:
— Переехал на скоростной Хостинг
— Оптимизировал базу данных wordpress
Так почему бы и не создать php форму для связи с авторами или службой поддержки площадки, которая будет создавать минимальную нагрузку на сервер, а также будет превосходить стандартные формы по своей функциональности.
Решение задачи с помощью PHP
После долгих проб и ошибок я нашел для себя отличное решение данного вопроса. Мне понравился вариант с использованием скрипта Super AJAX Contact Form, который выполнен на php и jquery. В итоге у меня получилась вот такая красивая контактная форма без плагинов.
Посмотреть работу данной заготовки вы можете на этой страничке.
Достоинства:
— Проверка правильности заполнения всех полей и успешного отправления письма, без перезагрузки страницы.
— Встроенная капча.
— Можно указать тему письма и начало сообщения.
Недостатки:
— Открывать форму придется в новом окне, так как не получилось ее интегрировать на страницу блога.
Теперь давайте подробно рассмотрим, что надо для этого сделать:
Первым делом необходимо скачать сам скрипт AJAX. Его можно скачать на сайте разработчиков, но меня такой вариант не устроил, так как он на английском языке и его нужно будет русифицировать в ручную. То есть все поля придется самостоятельно переводить.
Поэтому предлагаю скачать мой скрипт, который полностью переведен на русский язык.
Теперь нужно указать адрес электронной почты, на которую будут приходить письма. Для этого разархивируйте скаченный ранее файл и откройте файл config.php (его адрес «code» далее «assets» далее «xml»), используя для этого программу Notepad++. Замените e-mail в файле на свой.
Далее в этом же файле спускаемся немного ниже и смотрим, какая стоит кодировка между тегами «charset». Должна быть Utf-8.
Обратите внимание на кодировку в файле index.php. Там должна стоять «windows-1251».
Если будите скачивать мой русифицированный файл, тогда ничего менять не придется, кроме своей электронной почты.
Далее создаете в корне вашего сайта любую папку (в моем случае это «forma-svyazi») и закидываете туда файлы из скаченного и отредактированного архива.
Чтобы контактная форма на php заработала необходимо указать ссылку на файл index.php. У меня это выглядит следующим образом:
https://seoslim.ru/forma-svyazi/index.php |
Чуть не забыл сказать, обязательно закрывайте от индексации ненужные папки и файлы в robots.txt.
Подробнее об этом прочитайте в моей прошлой статье «Как составить правильный файл Robots.txt».
Disallow: /forma-svyazi/ |
Что мне еще здесь нравится, так это возможность добавить различные темы сообщения.
Если, например посетитель захочет написать вам коммерческое предложение, тогда вы и он будите знать к какому разделу это сообщение должно относиться.
Так же можно изменить или убрать приветствие сообщения. Приятнее получать письма от посетителей, которые знают простые правила этикета.
Для этого переходим опять в файл index.php и редактируем отмеченные поля с темой или приветствием.
Также рекомендую посмотреть видео о том, как установить и настроить Super AJAX Contact Form.
Далее я приведу один онлайн сервис по созданию html форм, которая подойдет сайтам на всех движках.
Решение задачи в HTML
Для тех, кто не хочет разбираться с настройками скриптов и php файлами, представляю вашему вниманию сервис по генерации простых форм.
Переходим на сервис Ip-whois и заполняем конструктор по генерации формы.
Далее вставляем на сайт сгенерированный html код.
Затем указываем адрес страницы, где расположена форма и почту, на которую будут приходить письма от посетителей.
Должно получиться, что-то похожее на такую простенькую контактную форму для обратной связи.
Остальные сервисы работают по тому же принципу, сначала заполняете данные, затем создаете, и устанавливает код.
На этом у меня все. Если что-то не получается, пишите в комментариях к статье, будем разбираться вместе. Оцените мою новую страницу «Контакты», мне важно ваше мнение.
Не пропускайте новых статей, подписывайтесь на обновления блога, чтобы узнавать новых статьях одним из первых. Пока!
Загрузка...
А у меня сбой произошел по форме обратной связи. Сегодня исправил. Даже еще одним сервисом воспользовался. Теперь посетитель может оставлять сообщение не только со странички, предназначенной для этого, но и с любого поста. Мне кажется, что это тоже удобно, чтобы незабыть о чем речь в статье была ❗
Видел Алексей ее у вас, тоже может себе ее как-нить поставлю, только он немного закрывает сайдбар слева у вас.
Спасибо за замечание. Поставил с другой стороны, здесь не перекрывает так явно. 😎
Спасибки за сервис формы,очень пригодилось,сам не имею знаний кода,поэтому выручили))
Здравствуйте, использовала скрипт Super AJAX Contact Form,все сделално как вы описали.Проблема: в появляющейся форме вместо букв знак . кодировки всюду проверила. Что делать?
А я Максим пока не рискую вставить код. Поставила этот Аякс и видать что — то не то прописала или не там. У меня чуть блог не загремел по новой. Хорошо, что у меня все файлы PHP cкопированы — быстро восстанавливаю назад на свои места.
Уже сколько раз давала себе зарок: Не зная броду — не шарься в файлах, но как почитаю, что расписывают и понимаю, что легче блогу будет дышать с кодом, руки чешутся, но после последнего раза не рискую. Вот доучу все премудрости, научусь разбираться в стилях — тады ой.
Юлия, откройте index.php в Notepad++, выполните команду: кодировки, перекодировать в utf-8 без BOM. сохраните ваш файл, обновите его на вашем сайте — все должно работать)
отлично написано! спасибо! 🙂
Максим, день добрый.
А как присвоить значение темы сообщение в коде? Например, мне не надо чтобы тему вводил или выбирал пользователь. Но в письме, которое отсылается важно чтобы было указанно с какого сайта запрос.
Заранее спасибо.
Так дотошно я с этой формой обратной связи не разбирался. Пользуйтесь поиском.
Подскажите, я правльно понимаю, что контактная форма не работает с новыми версиям jquery ?
Точнее сказать, она работает, но не так как надо. То есть после отправки сообщений она не очищает поля и удаляет капчу.
Не знаю Виктор, не проверял.
Установила Максим я обратную связь при помощи кода, плюс подчистила еще раз базу и сейчас полегче вроде скорость. Загружается быстрее блог. Еще хочу кое — что убрать, чтобы побыстрее скорость включилась. За статью спасибо.
Для создания формы обратной связи я использую сервис Main-IP.ru. Удобно и можно сделать красивую форму
глупый вопрос но я всегда пугаюсь когда вижу такие слова: «„в корне сайта любую папку“» . Подскажите как и где это создается? 😳
В том месте, где лежат все файлы сайта
Чтобы php форма обратной связи заработала необходимо указать ссылку на файл index.php. У меня это выглядит следующим образом:
Извиняюсь, где эту ссылку создавать?? 🙄
Там где у вас будет располагаться файл index.php от формы обратной связи. В статье все расписано, читайте внимательней.
Спасибо за инструкцию, наверное, в будущем воспользуюсь ей. Хочу потихоньку избавиться от плагинов, естественно от тех, которые с лёгкостью заменяются кодом. Лично я пока что пользуюсь плагином Contact form, его многие советуют. Разве он сильно загружает блог?
Любой плагин грузит блог, так почему бы его не заменить php кодом?
Доброй ночи! Подскажите, пожалуйста, как это окно превратить во всплывающее... Не подходит мне, к сожалению, форма нового окна:(
Добрый вечер!Поставила первый вариант формы на PHP. Работает. Письма приходят.
Но отображение в жутком виде, в тругольничках знаки вопроса.
Подскажите пожалуйста как исправить?
Спасибо.
Проверьте кодировку, должна быть UTF-8
Максим! Почему же полезную ссылку на ресурс, где объясняется как интегрировать форму обратной связи (super ajax contact form) в дизайн сайта вы посчитали за спам? ))))
А почему нет? ))
Ну... ссылки в комментах можно закрыть от индексации, и тогда они будут передавать лишь траффик без веса.
У меня полностью комментарии закрыты от индексации поисковиками.
Тогда давайте куплю ссылку в самой статье. Сколько будет стоить?
700 рублей
Здравствуйте Максим! У меня проблема с обратной связью (второй пример). Всё установил, прописал как надо, но при вызове появляется пустой квадрат и написано ошибка 404. На локалке всё открывается, а как установил на реальный сайт, то возникла проблема. Спасибо.
Привет. Не знаю так как сервисами не пользуюсь.
Здравствуйте,Максим! Мне читатели иногда задают вопросы на блоге, я отвечаю,но хочу настроить так как у Вас — ответ приходит и им на почту тоже. Научите,пожалуйста,как это сделать. Прочитала эту статью, но это не то, по-моему. Спасибо.
Если вы Галина про комментарии, то это сделано с помощью плагина Subscribe To Comments, который создает подписку на комментарии, там галочка появляется около кнопки «Отправить».
Максим, Вы имеете ввиду свою статью seoslim.ru/wordpress/plag...v-wordpress.html ? Нашла по поиску у Вас. Если да, то буду устанавливать предложенный плагин. Спасибо.
Да, в этой статье я его немного описывал.
Здравствуйте, Максим! А подскажите,пожалуйста,где у Вас найти как вставить комментарии на страницу об авторе. У многих вижу, хочу научиться. Это в коде надо что-то добавить, искала в инете, но не поняла до конца, очень заумно преподнесено, а у Вас все доходчиво , легко и просто. Спасибо.
Да нет здесь ничего сложного Галина, и в не какие коды лезть не стоит. Переходите в админку блога, выбираете слева вкладку «Страницы», далее наводите курсор мыши на нужную вам страницу, в вашем случае это «Об авторе» и выбираете «Свойства». Далее ставите галочку «Разрешить комментарии» и жмете «Сохранить».
Максим,фокус не удался. Все сделала как Вы написали. В свойствах галочка стояла уже.Я поставила еще в настройках экрана, но ничего не изменилось. Может, по другому нужно было эту страницу публиковать? Я как обычный пост + медиофайл — фото. Самое интересное,что в админке внизу появилась форма комментариев,но не выводится на блог. В чем может быть дело. Спасибо,что помогаете, Максим! Сейчас попробую комментарий из админки написать, а потом удалю, если появится.
Написала в админке комментарий «тест-проверка».Комментарий оформился,как на статьях с аватаром, но на страницу блога не вывелся. Что-то его не пускает.
Тогда не смогу помочь, так как я комментарии вывожу на страницах именно таким образом. Может дело в шаблоне?
А я вернулась к той статье и сделала вот что, чтоб Вы помогли следующему неумеке. Зашла в админку в page.php и перед вставила , как это в single.php, сохранила. А по методу, что Вы предложили, убрала комменты с других страниц, оставила только"об авторе". Так что Вы мне все-таки помогли. Спасибо.
Молодец Галина
🙂
Здравствуйте,Максим! Хочу уже добить тему комментариев. Дайте, пожалуйста, наводку. У меня они на английском выводятся. Как форму комментариев сделать на русском? Это плагин или ? Спасибо за помощь.
У меня форма комментариев была встроена в шаблон блога, поэтому ничего не пришлось менять. За комментарии, как правило отвечает файл comments.php если что-то в форме у вас на английском, то смотрите это файл и переводите на русский.
Галина, а вы стандартный шаблон используете? Если да то какой?
Здравствуйте, Морис! Шаблон не совсем стандартный, это премиум тема, которая продавалась за деньги, ее кто — то обнулил, а мне товарищ почистил ссылки и использовал. Тема называется zenko magazine.
Максим, добрый вечер или ночь! Снова вернулась на комментарии, а пишу потому, что Вы предлагаете образец формы один, а у Вас другой — который я заполняю. Зачем число с картинки в образце, мы же не сейф вскрываем (шутка). У Вас все классно и понятно, просто супер. Хотелось бы узнать как дойти до такой формы,если не секрет. Спасибо. Добиваю комментарии на блоге и Вас замучила вопросами. Обещаю передышку, спасибо Вам, Вы реально помогаете, грамотно, доходчиво, понятно, а главное есть результат.
Это я привел список форм, которые могут заказать посетители под свой проект, а уже все внедрю и настрою.
Здравствуйте, Максим! Устанавливал такую же форму, уже 2 раза, с разных сайтов, но отправлять письма от пользователей, на мою почту не хочет; проверял с помощью знакомых. На своём компьютере, проверяю, т.е. отправляю себе же письмо, работает отлично, письмо приходит на мэил.ру, но с предупреждением: «Мы не можем проверить подлинность отправителя. Рекомендуем вам быть внимательнее при совершении действий, указанных в письме.» Подскажите, пожалуйста, из-за чего могут не доходить до меня письма? Почту прописал свою и там, где указано в инструкции.
Скопировал код в модуль joomla, повесил на страницу,
на ip-whois.net/forma-obratnoj-svyazi/ адрес и почту ввожу, говорит «На этой странице форма не установлена!»
Форма обратной связи без плагина это хорошо. Но если ничего не понимаешь в кодах, то лучше не лезть в эти дебри и сделать плагином. По сути плагин — это тот же самый код, только с большим функционалом. Ну или на крайний случая нанять специалиста в этом деле.![[good]](https://seoslim.ru/wp-content/plugins/qipsmiles/smiles/6.png "[good]")
добрый день
Может есть статья как добавить нормально reCAPTCHA на данную форму?