Суббота , 17 Февраль 2018
Домой : Разное : Как создать контактную форму без плагинов

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

    Как и многие новички, я раньше увлекался плагинами для WordPress. Не надо копаться в кодах, установил plugin и готово, пользуйся. Но избыток plugins вредит сайту, влияя на скорость загрузки, к тому же некоторые плагины конфликтуют, бывают случаи некорректной работы сайта именно из- за таких приложений. Пишут мне редко, многие владельцы сайтов тоже не могут похвастаться обилием корреспонденции (спам не в счёт). И я подумал: а на фига козе баян ? Plugins для контактной формы (обратная связь) заметно нагружают сайт, у многих функции урезаны, а в самом WordPress они достают рекламой, то есть бесконечными призывами купить платную версию. Да ещё запускают лапы в другое программное обеспечение сайта, к примеру в визуальный редактор. Попытался воспользоваться услугами бесплатных онлайн- сервисов контактной формы, но получилось фиаско- их сгенерированные коды либо не работали, либо дизайн формы искажался на моём сайте. Проблема в том, что для сложных шаблонов (тем) подходят не все сторонние коды. Бывало, вставишь code в свой файл стилей style.css (кстати, файл очень большой), а на сайте пропадают все изображения из- за несовместимости кодов.
    И я решил сам сделать контактную форму для сайта, без всяких плагинов и онлайн- сервисов. А заодно других научить, наверняка кому- понравится дизайн и функциональность этой contact form.
    Аксиома- чем меньше плагинов, тем меньше нагрузка на сервер. Последний plugin заметно влиял на скорость загрузки страницы с c.form- изображение появлялось через три секунды, для современного сайта слишком много. Другое дело страница со своей формой, которая загружается быстро, никаких задержек.

    Так будет выглядеть, если вы сможете всё правильно сделать. Не исключено, что справитесь и с добавлением защиты от спама- известной Google ReCaptcha.
    Отправка сообщений в нашей contact form происходит без перезагрузки страницы. Раньше после отправки сообщения было пустое окно со словом ОК, но можно настроить редирект (возвращение) на к.форму или на главную страницу. Вообще- то не сложно научиться, было бы желание, внимательность и терпение. В конце статьи будет ссылка для загрузки архива с исходниками.

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

    Размещать код contact form рекомендую на специально отведённой странице для контактов (WordPress: Страница- создать новую страницу). Надеюсь, вы умеете работать с текстовым редактором Notepad++. Нет такого ? Ну так скачайте (softportal.com/software-5406-notepad.html).

    Видите «ххххх» в первой строке ? (кликайте по всем картинкам для увеличения). Эта строка- путь к файлу- обработчику mail.php. Вместо «ххххх» впишите название своей темы, то есть шаблона сайта. Тег label— текстовая метка поля ввода, атрибут placeholder— подсказка внутри текстового поля, которая исчезает при вводе данных. Вы можете изменить значения, к примеру вместо «Ваше имя» — «Как вас зовут». В редакторе Notepad++ выделите всё, далее ПКМ- копировать и вставьте код на страницу сайта, потом назовите «Контакты» или как хотите. Обратите внимание на адрес страницы: не должно быть русских букв, допускаются только латинские буквы. В моём случае- https://kompsovety.ru/kontakty/. Кнопку «Опубликовать» пока не нажимайте.

    Создание обработчика формы обратной связи

    Файл- обработчик mail.php вам надо поместить в папку с темой (шаблоном) вашего сайта (пример- /public_html/wp-content/themes/sahifa). Файл будет доступен в административной консоли системы управления сайтом ( WordPress — Внешний вид- Редактор), в дальнейшем вы сможете изменить mail.php, хотя такое вряд ли понадобится. Но сначала подправим файл: в строке 14 вместо ххххх@yandex.ru введите свой почтовый адрес. Не ошибитесь с кодами, даже малейшая небрежность может привести к неработоспособности contact form. Кстати, в этом файле происходит проверка, если поле для ввода (в самой к.форме) останется пустым, то будет сообщение о ошибке (параметр $error). Всё сделали ? Теперь сохраните (меню Файл — Сохранить) и поместите mail.php в папку темы. Вы должны уметь работать с панелью управления сайтом на хостинге. Альтернатива- удобная программа FileZilla, с её помощью вы получите доступ к файлам своего сайта. И так, с mail.php закончили, переходим к с следующему этапу. К сожалению, простого решения нет, в любом случае придётся работать с кодами. Не осилите- пользуйтесь plugins или онлайн- сервисами. Учтите, что такие сервисы встраивают в свои к.формы ссылки на сторонние сайты. Вам это надо ?

    Подключение скриптов и библиотек

    Контактная форма работает на AJAX (Asynchronous Javascript and XML), так что сообщение отправляется без перезагрузки страницы с нашей c.form, но при этом необходимо наличие библиотеки jQuery. Большинство современных тем используют jQuery по умолчанию, поэтому повторное подключение библиотеки не нужно. Но бывают шаблоны без изначальной поддержки таких кодов, так что придётся подключать. Первая строка на скриншоте- код, его нужно вставить в заголовке (header.php) до закрывающего тега </head>.


    Другой способ: в файл functions.php вставьте то, что видно на скриншоте (первую строку не трогайте). Желателен второй способ, ведь если какой- либо plugin вздумает подключить свою версию библиотеки, то она тут же отключится и загрузка произойдёт с CDN Google (ajax.googleapis.com), благодаря чему не будет дублирования скриптов и возможных конфликтов.
    А теперь займёмся скриптом js (Java Script), этот код будет работать в паре с mail.php и отправлять сообщения, а также выводить информацию без перезагрузки страницы. На картинке- файл contact.js:

    В шестой строке вам надо изменить путь к файлу- обработчику mail.php, а именно- вписать название своей темы. Далее закиньте этот файл в папку темы js (у меня путь- /public_html/wp-content/themes/sahifa/js). Подключить этот скрипт можно в заголовке (header.php) или в подвале (footer.php), в конце. Я разместил этот код в подвале сайта.
    <script src=»/wp-content/themes/ххххх/contact.js»></script>
    Знакомые иксы ? Вы уже знаете что делать.
    Главное сделано, форма работоспособна, но дизайн пока никакой. Не проблема, добавим стили CSS.

    Оформление внешнего вида с помощью CSS

    В архиве с исходниками находится файл css.txt. Скопируйте коды и вставьте в свой style.css (этот файл в папке темы).
    Может быть, вы не особо разбираетесь в кодах и толком не знаете как вставить. На картинке- часть style.css:

    В конце файла ниже скобки- строка form#contact { , это начало нашего кода css для c.form.

    Теперь нужны две картинки, они есть в архиве с исходниками. Зелёная иконка — правильное заполнение поля формы, красная иконка— ошибка (форма не заполнена или заполнена неверно). Изображения скопируйте в папку images вашей темы. Теперь в WordPress можете нажать кнопку «Опубликовать», после чего рекомендую нажать Ctrl + F5 (обновление страницы). Попробуйте отправить первое послание самому себе для проверки.

    В случае ошибки увидите сообщение «Заполните это поле».

    Подключение Google ReCaptcha для защиты от спама


    Защита от спама не всем нужна, но всё же прибавим ещё один урок. Подключим известную (и надоевшую) всем Google ReCaptcha. Вернёмся к началу, то есть к HTML основе формы. После строки с тегом textarea добавьте ещё одну строку, содержащую ключ ReCaptcha:
    <div class=»g-recaptcha» data-sitekey=»6w1LdB0TAAAAAMXQinyLbR7iBknC1guI«></div>


    Указанный код (6w1LdB0TAAAAAMXQinyLbR7iBknC1guI) работать не будет, это для примера. Получить ключ надо у Google (ссылка). Придётся там зарегистрироваться и добавить свой сайт.

    Теперь в Notepad+++ откроем mail.php и дополним файл, код надо вставить после тега <php:

    В третьей строке секретный ключ. Вы уже поняли, что надо заменить этот ключ на свой, полученный от Google. А файл recaptcha.php находится в архиве… дальше что ? Правильно догадались, его надо скопировать в папку вашей темы.
    После строки $error  =  ‘ ‘ ; добавьте новую строку  if(!$response) {$error .= ‘Заполните капчу’;} , этот код будет проверять заполненность поля ReCaptcha. Кстати, если вы вздумаете отправить послание без проверки, то произойдёт редирект (перенаправление) с сообщением «Заполните капчу». Придётся начинать по новой. Итак, подключаем скрипт ReCaptcha в секции head своего сайта, конкретно- в файле header.php:

    Не забудем настроить редирект нашей к.формы (mail.php).

    На скриншоте видно как вставить. content=’2; — время в секундах, я выбрал 2 секунды.  url= …  сюда впишите адрес страницы вашей contact form.

    Знакомая всем картинка. Но это довольно эффективная защита от спама. Если вас конкретно достанут спамом- устанавливайте ReCaptcha от Google. Скачивайте архив
    На моём сайте такая к.форма. Коды ReCaptcha я удалил, не особо нужно. В случае чего нетрудно отредактировать файлы, и снова будет эта фирменная примочка Google.

 

Смотрите также

Как подключить Bluetooth наушники к компьютеру

    Вы купили беспроводные наушники, но точно не знаете, как их подключить. Процедура не особо …

Как удалить антивирус Касперского

    Стандартный способ (Windows 10): на панели задач справа в углу нажмите квадратик – Все …

Как проверить работоспособность видеокарты

        Если вы купили б/у видеокарту из Second- Hand (шутка), то обязательно проверьте графический …

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

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

error: Content is protected !!
Rambler's Top100