Как создать форму обратной связи для сайта — Решено!

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

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

Этот пост посвящён тому, как очень просто создать форму обратной связи для блога или сайта используя только HTML и CSS.Здравствуйте, уважаемый читатель. На связи Евгений Назаров.

Сразу должен сказать, что для меня это занятие оказалось совсем непростым, я перелопатил чуть ли не весь Интернет в поисках подходящей формы обратной связи, которая корректно работала бы на моём Блоге с моей темой.

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

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

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

 

Как создать красивую, рабочую форму обратной связи

Решение нашлось само собой, как раз в тот момент когда я перестал искать.
Мой друг делал себе лендинг и попросил меня оценить его работу. В тот момент я заметил у него форму обратной связи и спросил, как он её сделал.

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

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

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

Но это было совсем не важно, самое главное что она, блин, рабочая, отправляет письма.

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

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

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

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

 

Как вставить форму обратной связи на блоге.

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

Для этого качаем архив с кодом и нужными нам картинками по этой ссылке.

1) Далее вставляем код HTML через редактор WordPress предварительно переключившись на «Текст», прямо на ту страницу, где вы желаете видеть форму.

Редактор wordpressЭто картинка, код вы можете скачать по ссылке выше.

Код HTML

В коде нужно прописать адрес почты, на которую вы хотите получать письма, её нужно вставить во второй строчке вместо mail@mail.com без пробелов.

2) Сделали?! Хорошо. Теперь добавим ей стилей, вставив его в самый конец файла style.css вашей темы.

Это картинка, код вы можете скачать по ссылке выше.
Код css

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

Если кнопка отправить находится не в том месте, где должна быть, то поиграйтесь в идентификаторе #contact_submit со значением margin-left: 470px; увеличивая или уменьшая число.

На этом всё, можете опубликовывать страницу. Если форма отображается не корректно или без стилей, попробуйте зажать сочетание клавиш ctrl+F5 или если у вас стоит плагин HyperCash или что-то подобное, удалите весь кеш через него.
Удалить кеш

Теперь всё должно работать.

 

Подтвердите вашу почту.

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

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

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

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

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

 

Всегда с Вами,
Евгений Назаров.

Понравилась статья? Поделись ею в Соц. Сетях.

5 Комментариев “Как создать форму обратной связи для сайта — Решено!”

  1. Приветствую, я профессиональный маркетолог, и владелец своих бизнесов.
    Я заметил Ваш ресурс, и готов помочь с его продвижением в интернете.
    Занимаюсь продвижением проектов уже более 7 лет.
    Условия сотрудничество обсуждаться индивидуально.
    Могу помочь с созданием качественного сайта, привлечь целевых клиентов возможно даже бесплатными методами, автоматизировать процесс работы и многое другое.
    Если Вам стало интересно, пишите на почту business.andrej@yandex.ru .
    Я рад познакомиться с Вами, и с наступающим Новым Годом!

    • Здравствуйте!
      Вы точно сделали всё, как описано?
      Какая у вас тема блога? У меня Catch Box, на ней всё работает.

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

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

*