Контакты truck.ironhorse.ru — информация о сайте и форма обратной связи с администрацией

Обратная связь для сайта — Интернет работа

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

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

Формы обратной связи на сайт — что выбрать

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

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

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

Вот скажите мне — это же сколько времени нужно потратить, чтобы к каждому отдельному сайту подобрать скрипт или плагин, удовлетворяющий требованиям? Ну ладно, допустим ты блоггер, работаешь с одним Ворпдрессом и по умолчанию в твоей сборке WordPress есть какой-нибудь плагин wp-contact-form-7.

Остальным-то что делать?

Поэтому я и предлагаю работать с кодом. Ваша персональная «карманная» форма обратной связи на языке PHP и HTML может быть супер гибкой, с множеством полей и AJAX, но она должна:

• Быть в наличии в одной из ваших бесконечных папок со скриптами.
• Работать всегда и везде.
• Не требовать танцев с бубном при встраивании на сайт.

Программисты конечно могут написать самостоятельно подобный скрипт обработки данных на PHP, оформить внешний стиль, прикрутить к нему капчу, добавить проверку правильности ввода полей (в т.ч. email) на странице, добавить поля для загрузки файлов, сделать эту форму на AJAX без перезагрузки.

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

Я же предлагаю сэкономить:

• Время.
• Деньги.
• Трудозатраты.

И поэтому мы будем использовать удобные, готовые универсальные скрипты, которые подойдут и динамическим сайтам на CMS, и статическим сайтам на HTML. Ведь в вопросе «как сделать милую и красивую форму обратной связи» нет «с нуля, разработать, написать, своими руками, самостоятельно». И правильно. А зачем?

Скачайте просто скрипт Simple Send Mail или другую его версию Simple Send Mail Order с сайта landman.ru.

Скачать скрипт формы (.zip, 169Кб)

Вот какие формы вы получите:

Обратите внимание, скрипты поставляются с встроенной каптчей. Второй скрипт (Simple Send Mail Order) имеет одно отличие — он одновременно отправляет два письма. Одно заказчику, другое — вам.

Как сделать одну из таких форм обратной связи на сайте? Качайте архив, закачивайте файлы из архива на сайт в каталог /sendmail, настраиваете конфигурационный файл config.php (прописываете свой email, другие настройки) и можно пользоваться — скрипт формы обратной связи готов к работе. Покажу как выглядит конфигурационный файл:

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

Вставка на сайт производится просто: — можете дать ссылку на /sendmail/index.php

— можете сразу вставить на страницу, при помощи кода

Пример кода:

Код можно найти на сайте, ссылка на который размещена выше.

Форма довольно минималистичная — не всем понравится дизайн «прямиком из девяностых», кому-то не нужна каптча, кому-то не хватает Аякса и красивых сообщений об ошибке. Решение есть.

Super (AJAX) Contact Form — русифицированная версия формы обратной связи

Скачать (.zip, 72.4Кб)

Работает эта штучка на чистом PHP + jQuery & AJAX — очень удобно для блога или небольшого интернет-магазина. Пример формы:

Как выглядит конфиг внутри («codeassetsxmlconfig.php»):

Конфиг для настройки полей («codeassetsxmlfields.php»):

Установка скрипта формы для связи SuperAJAX ContactForm ничем не отличается от инструкции по установке другого скрипта выше. Содержимое архива закачиваете на сервер и пользуетесь.

Преимущества этой формы над предыдущей: — более эстетично привлекательная — используется проверка полей, ошибки выводятся через AJAX — подробнейшая инструкция по установке и настройке внутри

— есть подсказки под полями

Например, посмотрите как в этой форме связи выводятся ошибки:

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

Вы также можете посмотреть интересный видеоурок по данному скрипту:

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

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

Итак, на одном сайтов установлена вот такая «кнопка»:

Если нажать на нее, вниз «выпадет» форма обратной связи:

На другом сайте установлена всплывающая (popup) форма обратной связи, выглядит она так:

А вот что придет вам на почту, после того как пользователь оставит свои контактные данные в форме:

Очень удобно. Вот код для работы формы как в первом случае:

Источник: https://blogwork.ru/obratnaya-svyaz-dlya-sajta/

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

31 август 2015Пример готовой формы для сбора заявок с сайта + исходный код (css, php, html)

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

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

Для чего нужна форма обратной связи на сайте?

Форма обратной связи служит для отправки общений владельцу сайта от посетителей.
В специальные поля вводятся специальные данные (имя, электронная почта, текст). Для отправки сообщения на е-мейл владельцу сайта, необходимо нажать на кнопку «Отправить», может быть и другой вариант.

Ещё один плюс в пользу формы обратной связи – возможность сохранить свой е-мейл в тайне от спамеров.

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

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

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

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

Создаем форму обратной связи на html

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

Вставляем в нужное место на сайте следующий код:

Онлайн заявка

Отправить

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

Вставили код и получилось вот так:

Форма появилась, но надо придать ей вид. Для этого добавляем следующие стили (готовая html верстка формы обратной связи):

/* Форма обратной связи */ #inline { margin-left: 30px; width: 80%; margin: 0 auto; background: #fff; padding: 10px 20px; } .txt { display: inline-block; color: #676767; width: 190px; margin-bottom: 10px; border: 1px solid #ccc; padding: 5px 9px; font-size: 15px!important; line-height: 1.4em; } .txtarea { display: inline-block; color: #676767; width: 617px; margin-bottom: 10px; border: 1px solid #ccc; padding: 5px 9px; font-size: 15px!important; line-height: 1.4em; height: 80px; } .txt:focus, .txtarea:focus { border-style: solid; border-color: #bababa; color: #444; } input.error, textarea.error { border-color: #973d3d; border-style: solid; background: #f0bebe; color: #a35959; } input.error:focus, textarea.error:focus { border-color: #973d3d; color: #a35959; } #send { color: #FFFFFF; display: block; cursor: pointer; padding: 5px 11px; font-size: 1.2em; border: solid 1px #F9F9F9; border-radius: 2px; background: #70C6B9; width: 210px; margin-bottom: 20px; } #send:hover { background: #979797; } /* Форма обратной связи */

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

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

Выглядит это вот так:

Что получается? Посетитель кликает на поле, и скрипт подставляет ему уже готовую маску, с кодом страны. Довольно удобно.

Для этого, необходимо подключить скрипт маски. Скачать его вы сможете в самом конце статьи вместе с исходниками.

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

Для этого перед закрывающимся тегом вставьте следующий скрипт:

Как работает этот скрипт?

1. Производит проверку введенного e-mail.
2. Указывает поля, с которыми будет работать.
3. Проверяет эти поля на заполнения. В случае, если обязательные поля не указаны – выдает сообщение о том, что их нужно заполнить.
4. Обрабатывает введенную информации и инициирует отправку уведомления на почту.
5. Выдает сообщение пользователю о том, что его заявка принята с помощью Ajax.

Осталось сделать самое последнее – создать файл sendmessage.php вставить в него нижеприведенный php код и загрузить его в корень вашего сайта.

Вот и все, простая форма обратной связи для html сайта готова. Не забудьте только поменять e-mail в файле sendmessage.php на свой.

Всплывающая форму обратной связи для сайта

Бывают случаи, когда нужна именно всплывающая форма, которая открывается при нажатии на кнопку. Сделать ее очень просто. В качестве примера возьмем форму, созданную нами ранее и будет работать с ней. Для начала нам нужно подключить jqury fancybox, скачать который вы сможете в конце статьи.

Добавьте эти строчки перед закрывающимся тегом body, только поменяйте путь к файлам на свой. Далее создаем кнопку, при клике на которую будет вызываться форма.

Обратный звонок

И придаем ей стили.

.modalbox { color: #FFFFFF; display: block; cursor: pointer; padding: 10px 11px; font-size: 1.2em; border: solid 1px #F9F9F9; border-radius: 2px; background: #70C6B9; width: 210px; text-decoration: none; text-align: center; margin:0 auto 20px; } .modalbox:hover { background: #979797; }

Обратите внимание, что кнопке, при нажатии на которую будет вызывать всплывающее окно, обязательно должен быть присвоен класс modalbox и путь href=»#inline».

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

Для этого нужно заменить стили #inline со старых на новые.

#inline { display:none; margin-left: 30px; width: 80%; margin: 0 auto; background: #fff; padding: 10px 20px; }

В итоге получаем вот такую кнопку.

При нажатии на которую открывается всплывающее окно с обратной связью.

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

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

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

url: `http://site.ru/sendmessage.php`

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

Ключевые слова статьи: добавить форму обратной связи на сайт, верстка формы обратной связи, форма обратной связи html, форма обратной связи php, форма обратной связи почта, добавить форму обратной связи, css форма обратной связи, форма обратный звонок, виджет обратный звонок.

Источник: https://nabiullin.com/forma-obratnoy-svyazi

Как создать форму обратной связи для Joomla

Качество веб-сайта и его юзабилити во многом зависят от того, смогут ли его  будущие посетители без труда связаться с администрацией или менеджерами.

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

В этой связи представляется логичным использование формы обратной связи.

Сущность и значение формы обратной связи для Joomla

Форма обратной связи представляет собой удобный инструмент для отправки сообщений администрации сайта.

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

Система управления контентом (CMS) Joomla 3 позволяет создать форму обратной связи, которая имеет следующие преимущества:

• Простую настройку;
• Красивый и удобный интерфейс;
• Возможность оперативной отправки сообщений;
• Наличие контактной формы на всех страницах сайта;
• Возможность обойтись без перезагрузки страницы;
• Защиту от спама.

Когда пользователь отправляет администрации письмо через данный компонент оно автоматически приходит на электронный ящик владельцев сайта.

По сути, весь процесс работы формы обратной связи можно представить в виде двух этапов:

1. Заполнение посетителем нужных полей;
2. Отправка сообщения.

Важно отметить, что подобная форма может состоять из произвольного количества полей различного назначения. При этом такие поля, как «E-mail», «Имя», «Тема» и «Сообщение» являются обязательными.

Процесс создания формы обратной связи в Joomla 3: пошаговая инструкция

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

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

Целесообразно детально рассмотреть каждый из этапов создания формы обратной связи на Joomla 3.

Шаг 1

В админ-панели Joomla 3 следует открыть меню «Компоненты» и перейти на вкладку «Контакты»:

Шаг 2

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

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

Источник: https://www.internet-technologies.ru/articles/kak-sozdat-formu-obratnoy-svyazi-dlya-joomla.html

7 лучших плагинов обратной связи для WordPress

Не так давно на блоге выходила заметка «50 самых популярных плагинов для движка WordPress» и так как работа над курсом по WordPress подходит к своему финалу, мы хотим представить вам еще одну подборку плагинов для этого движка. А именно, сегодня мы будем рассматривать топ-лучших плагинов для контактных форм.

Начнем мы из того, что вспомним, какие самые главные страницы или блоки должны быть на всех коммерческих сайтах. Это «О нас» — где расписана информация о компании, «Услуги» — с описанием предоставляемых услуг или товаров и «Контакты» — для получения обратной связи от клиентов или заказы.

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

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

Contact Form 7

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

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

Этот плагин совершенно бесплатный и легко вставляется с помощью простого HTML, а также он может похвастаться AJAX-отправкой.

Jetpack

Это целый набор плагинов, виджетов и сервисов для движка WordPress. И соответственно у него есть свой очень простой, но хороший встроенный конструктор форм. С помощью него вы получаете быстрый и простой интерфейс для добавления форм в любую заметку или страницу сайта. Для этого нужно просто нажать кнопку «Insert Form» и у вас появится возможность быстро создать и добавить форму.

Contact Form Plugin by vCita

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

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

Fast Secure Contact Form

Уникальность этого плагина в том, что роботы-спамеры обнаруживаются на сайте автоматически. Используя капчу и Akismet Fast Secure form плагин блокирует атаки с наиболее популярными спамерскими тактиками.

Эта функция сокращает вероятность появления спама и любой другой нежелательной информации.

Ninja Forms

Универсальный бесплатный плагин с отличным интуитивным drag’n’drop интерфейсом для создания контактных форм на вашем WordPress сайте. В админке вы сможете строить свою форму просто перетаскивая нужные блоки и настраивая их под ваши нужды. А также в нем есть огромное количество функций, среди которых AJAX handler, надежные антиспам модули, импорт и экспорт данных.

Visual Form Builder

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

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

Contact Form от BestWebSoft

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

До встречи в других заметках!

Источник: https://evgeniypopov.com/blog/7-luchshix-besplatnyix-plaginov-obratnoj-svyazi-dlya-wordpress.html

Генератор форм обратной связи для сайта!

Автор: Александр Борисов

 / Дата: 2010-10-29 в 18:21

Привет читатели моего блога.

Генератор форм обратной связи — что это? А это такая штука, которая поможет вам без использования вских скриптов, плагинов и кодов создать на своем сайте красивую форму обратной связи. Статья поможет вам правильно использовать генератор форм обратной связи.

Наверное, у большинства из вас уже есть свой сайт в интернете или вы думаете над его созданием. Хочу вас обрадовать. Буквально через несколько недель, я выпущу свой мини-обучающий курс «Как создать сайт за час», поэтому заходите по чаще на мой блог.

Но об этом позже.

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

Оказывается в интернете существуют готовые ресурсы (генераторы форм обратной связи), которые дают вам готовый HTML код формы, вы вставляете его в любом месте на своем сайте и все! Готово! Связь налажена.

Форма обратной связи от сервиса Main-ip:

Я выбрал вот этот сервис — http://main-ip.ru

Проходим по ссылке, нажимаем «Создать форму»

1. Настраиваем форму и нажимаем «Генерировать» 2.  Снизу появиться ваша готовая форма — нажимаем «Получить код» 3. Копируем появившийся HTML код формы и вставляем его на своем сайте

4. Регистрируемся в базе данных сервиса (указываем ссылку, где вы установили форму и e-mail на который будут приходить сообщения от посетителей вашего сайта )

5. Проверяем работоспособность формы.

Конечно же, на многих конструкторах сайтов уже имеются готовые скрипты и плагины форм обратной связи, но порой такие сервисы будут просто необходимы, к примеру если мы используем сайт на Wep Page Maker, Macromedia dreamweaver и т.д.

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

P.S. Как вам статья? Советую получать свежие статьи на e-mail, чтобы не пропустить информацию о новых бесплатных видеокурсах и конкурсах блога!

C уважением, Александр Борисов

Источник: https://isif-life.ru/dlya-sajta/generator-form-obratnoi-svyazi-dlya-saita.html

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

Здравствуйте! Сегодня я поделюсь с Вами как можно легко и быстро создать простую в установке и удобную в использовании форму обратной связи на WordPress без плагинов, используя простые средствами HTML, CSS и PHP.

Преимущества такой формы очевидны — она универсальна и может быть установлена на любой сайт, включая популярные CMS, такие как WordPress, Joomla и даже на простые HTML сайты. Если в качестве примера рассматривать ВордПресс, то отсутствие дополнительных плагинов снизит потенциальную нагрузку сервер.

Отправка сообщений происходит без перезагрузки страницы! По порядку следуя инструкции в итоге мы должны получить такой результат:

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

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

Для размещения формы обратной связи можно выбрать как отдельную запись, так и статическую страницу. Целесообразно ее использовать на специально отведенной странице для контактов. Итак, предлагаю использовать вот такой код, которой необходимо вставить в HTML-режиме редактора:

1 2 3 4 5 6 7 8 9 10 11

Форма обратной связи Как вас зовут Электронная почта Тема сообщения Отправить сообщение

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

Как вас зовут

Электронная почта

Тема сообщения

Отправить сообщение

<\p>

В первой строке Вам придется немного подкорректировать и указать свой путь к файлу-обработчику (mail.php), о котором расскажу ниже. Содержание тега label (текстовая метка поля ввода) и атрибута placeholder (подсказка внутри текстового поля, исчезающая при вводе) измените при желании.

Для того чтобы заменить текстовое поле с темой сообщения на раскрывающийся список необходимо заменить строку 7, применяя тег select с вариантами выбора option:

7	Выберите темуПункт 1Пункт 2

Выберите темуПункт 1Пункт 2

Атрибут required появился в HTML5 и указывает браузеру, что поле является обязательным для заполнения. Таким образом на стороне пользователя проводится проверка полей до отправки запроса на сервер. Атрибут работает не во всех браузерах, поэтому добавим в обработчике свою проверку.

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

Файл-обработчик с именем mail.php я поместил в папку с темой шаблона, в таком случае он будет доступен для редактирования прямо из админки блога, в меню Внешний вид — Редактор. Создаем файл, открываем его и вставляем туда следующий код:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

Здесь мы повторно проводим проверку заполненности полей перед отправкой на почту. Если одно или несколько полей останутся пустыми — появится сообщение об ошибке, текст этого сообщения Вы можете изменить в параметре $error для каждого поля.

Для использования формы обратной связи на своих блогах Вам потребуется обязательно изменить строку 14, т.к. параметр $address отвечает за то, на какой адрес будет приходить отправленное сообщение.

На этом настройка файла mail.php заканчивается и можно переходить к следующему этапу — подключению необходимых скриптов и стилевому оформлению.

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

Отправка сообщений происходит на AJAX без перезагрузки страницы, поэтому в первую очередь нам необходимо подключить библиотеку jQuery. Большинство современных тем и шаблонов уже используют библиотеку jQuery и подключать ее повторно не требуется. В противном случае она подключается в functions.php следующим образом:

1 2 3 4

function my_jquery() { wp_enqueue_script( 'jquery' ); } add_action( 'wp_enqueue_scripts', 'my_jquery' );

function my_jquery() { wp_enqueue_script( 'jquery' ); } add_action( 'wp_enqueue_scripts', 'my_jquery' );

Есть еще один способ подключить jQuery на WordPress с помощью файла functions.php:

1 2 3 4 5

Источник: https://webliberty.ru/forma-obratnoy-svyazi-na-wordpress-bez-plaginov/

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

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

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

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

Помимо стандартной формы обратной связи советую попробовать мой модуль Wedal Joomla Callback. Он бесплатен и позволяет загружать и отправлять форму обратной связи без перезагрузки страницы.

Создание формы обратной средствами Joomla. Компонент «Контакты».

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

В Joomla есть стандартный компонент с названием «Контакты». Легко понять, что он позволяет показать на сайте список контактов владельцев сайта, менеджеров и.т.д.

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

На сайте Wedal.ru вы можете увидеть пример такой формы:

Как видите, все необходимое для связи имеется. Этой формой посетители пользуются достаточно часто. Как ее создать?

Компонент «Контакты». Добавление контакта.

Переходим в «Компоненты» –> «Контакты» и добавляем новый контакт.

Появится следующая форма:

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

В поле «Дополнительная информация» можете указать какой-то текст, который требуется показать на странице контакта.

Во вкладке «Детали контакта» не заполняем ничего.

Во вкладке «Настройки отображения» скрываем все лишнее:

Во вкладке «Форма обратной связи» показываем форму:

Сохраняем.

Компонент «Контакты». Добавление пункта меню контакта.

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

После этого в появившейся справа форме выбираем созданный нами контакт:

И сохраняем.

На этом все. Можно смотреть на нашу форму на сайте.

Важно! Обязательно проверьте работоспособность полученной формы обратной связи. Иногда, из-за неправильных настроек отправления писем, почта не отправляется. Это ошибка не формы контактов, а настроек Joomla по работе с почтой (смотрите общие настройки Joomla).

Создание формы обратной средствами Joomla. Защита от спама.

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

Первое время, когда форма только создана, советую не защищать ее от спама.

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

Как защитить форму обратной связи от спама? В Joomla 2.5 имеется поддержка наверное самой лучшей капчи(код с картинки) reCAPTCHA. Алгоритм ее активации следующий:

Источник: https://wedal.ru/uroki-joomla/sozdanie-formy-obratnoj-svyazi-standartnymi-sredstvami-joomla.html

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

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

Здесь мы продолжим данную тему и узнаем, как принять данные на сервере и реализовать отправку формы на электронную почту (email).

Итак, давайте настроим форму обратной связи и добавим возможность ее отправки на email.

Исходные файлы текущей статьи вы можете скачать по ссылке.

В этом уроке мы сделаем все максимально просто и своими силами. В частности, для отправки писем мы воспользуемся специальной функцией PHP под названием mail(), которая раньше часто использовалась для отправки писем.

to — email получателя (также можно указать несколько адресов, перечислив их через запятую);

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

subject — тема письма;

message — текст письма.

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

Давайте попробуем отправить письмо, используя данную функцию. Сделаем это в файле mail.php, в котором мы принимаем данные из формы. Новый код данного файла будет таким:

$to = 'mail@site.com'; // адрес получателя$subject = 'Заказ обратного звонка'; // тема письма$message = «Имя: {$_POST['name']} «; // добавляем имя в текст$message .= «Телефон: {$_POST['phone']}»; // добавляем телефон в текст$headers .= 'Content-type: text/plain; charset=utf-8' . » «; // установливаем кодировку$headers .= 'From: mail@site.com' . » «; // добавляем отправителяif( mail($to, $subject, $message, $headers) ){echo 'Ваше сообщение отправлено';echo 'Ошибка!';

Это минимальный код, который уже позволит сформировать сообщение для отправки. Давайте проверим, как он работает:

Как видим, код работает, в ответ мы получаем сообщение о том, что письмо отправлено. Поскольку мы работаем на локальном сервере, здесь письма реально не отправляются функцией mail(), они сохраняются в виде текстового файла в специальной папке. В Open Server это папка userdata empemail. Откроем эту папку и убедимся, что письмо там есть, примерно так оно будет выглядеть:

Отлично! Осталось несколько моментов, которые не помешает поправить в JS скрипте. Например, необходимо выводить сообщение не простым текстом, а именно кодом HTML, а также очищать поля формы после отправки сообщения. Итоговый JS код будет таким:

$('#recall').submit(function(e){var data = $(this).serialize();$('#submit').next().text('Отправляю…');$('#recall').find('input').val('');$('#submit').next().html(res);

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

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

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

В этом случае рекомендуется отправлять письма через SMTP популярных почтовых серверов: gmail, yandex и т.п. Как это сделать мы узнаем в следующей статье.

Ну а на этом текущую статью мы завершаем. Дополнительно по работе с формами вы можете посмотреть этот урок. Удачи!

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Источник: https://webformyself.com/kak-nastroit-formu-obratnoj-svyazi-na-sajte/

Обратная связь для сайта с помощью скриптов форм на Html и Php, а так же онлайн конструкторов и генераторов

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня я хочу поговорить о способах создания форм обратной связи, заказа, контактных и других типов, которые могут понадобиться вебмастеру для организации удобной коммуникации со своими посетителями или клиентами.

Понятно, что при использовании Joomla и WordPress вопрос обратной связи или заказа можно решить использованием различных расширений или плагинов, но есть способы, которые подойдут абсолютно для любого проекта, построенного как на чистом Html, так и использующего движок Cms (скрипты, cms, конструкторы и генераторы форм обратной связи).

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

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

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

Формы обратной связи для Joomla и WordPress

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

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

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

Так вы можете скачать отдельный модуль обратной связи для Джумлы под названием Rapid Contact, который может дать вам новые возможности и функционал (см. демо).

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

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

Эти проблемы решаются с помощью альтернативного компонента для этого движка под названием aiContactSafev, который позволяет создавать на сайте любое количество форм обратной связи (можно привязать их к разным E-mail адресам) и имеет возможность добавлять поле для загрузки файлов, равно как и любые другие типы полей.

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

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

Источник: https://KtoNaNovenkogo.ru/web-obzory/obratnaya-svyaz-dlya-sajta-skripty-form-html-php-joomla-wordpress-sajtov-onlajn-konstruktory-generatory.html

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

(Последнее обновление: 07.07.2016)

Здравствуйте, дорогие друзья — коллеги! Блогу почти год, а я и не подозревал, что форма связи у меня не работает (в комментариях написали).

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

Это же ещё не конец света, данный плагин есть чем заменить, альтернатива всегда найдётся. Не заменимых не бывает!

А можно вообще создать свою собственную контактную форму без плагина, надо только воспользоваться одним из бесплатных онлайн сервисов. Такими, как например: Foxyform.com и Main-ip.ru.

А теперь небольшие инструкции, для тех, кто заинтересовался сервисами.

Foxyform — контактная форма обратной связи с защитой от спама

Заходим на сайт — http://ru.foxyform.com, осматриваемся и приступаем к созданию формы. Сайт на русском языке, проблем не будет:

Контактная форма для вашего сайта с защитой от спама

Как вы можете видеть, с левой стороны страницы есть пояснения, что и как делать. А с левой создание самой формы.

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

2. Расширенные настройки: Тонкая настройка формы — Цвет Фона; Цвет Шрифта; Шрифт; Размер шрифта.

3. Целевой адрес электронной почты: На какой адрес электронной почты должны направляться письма.

Все ваши настройки формы можно предварительно просматривать:

Предварительный просмотр формы

После всех манипуляций с настройками формы для связи, ставьте галочку капчи и нажмите «Создать форму»:

Создать форму связи

Откроется новая страница с готовым кодом:

Код контактной формы

Создаёте новую страницу блога и в режиме «Текст» вставляете скрипт. Всё, готово. Пример:

Готовая контактная форма

Создать контактную форму для сайта с помощью main-ip

Справка: На сайте Main-ip можно не только создать контактную форму для сайта, но и воспользоваться бесплатными сервисами и инструментами.

Веб-мастеру:

Тест скорости интернета — Проверка скорости интернета; Средняя скорость интернета — Проверка скорости интернета; Время загрузки файла — Тест времени для загрузки файла; Узнать информацию о IP — Информация об IP адресе; Проверить IP сайта — Проверяем IP адрес или хост сайта; Время Ping компьютера — Определение Ping компьютера; Хостинг сайта — Определение хостинга сайта; Проверка Email — Проверка почтового адреса; Безопасность компьютера — Безопасность вашего компьютера; Генератор паролей — Поможем вам составить надежный пароль; Шифрование MD5 — Шифрование MD5;

Сайт глазами поискового робота — Сайт глазами поискового робота;

Копирайтеру:

Анализ текста — Анализ текста (длина, стоп-слова…);
Удаление повторений — Удаление повторяющихся строк из текста;

Оптимизатору:

Информация о ТИЦ и PR — Информация о ТИЦ и PR.

Ресурс Main-ip позволяет, не забивая себе голову техническими аспектами, оперативно создать форму обратной связи для вашего сайта. Формы просты в установке и имеют полностью настраиваемый дизайн. Зайдите на сайт — http://main-ip.

ru/genform и с помощью генератора вы можете создать дополнительные поля формы и изменить ее цветовую гамму на наиболее подходящую для вас. Поля которые вам не нужны оставляйте пустыми.

Некоторые размеры имеют ограничения и автоматически обрезаются:

Генератор формы связи

Кроме того, конструктор форм обратной связи, содержит поле для закрепления файлов (max: 9 mb) разных форматов. После всех настроек нажимаем кнопку «Создать форму», откроется предварительный просмотр формы и если всё устраивает кликаете «Получить код»:

Получить код формы

Откроется окно с вашим кодом.

Пожалуйста вставьте данный код на страницу вашего сайта

Скопируйте его, создайте новую страницу на сайте и в режиме «Текст» вставьте его.

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

Так как сообщение отправляет PHP скрипт, находящийся у них на сервере и чтобы скрипт знал, куда отправлять сообщения, сайт должен быть внесен в базу сервиса. Вернитесь на сервис Main-ip и нажмите «Настройка обратной связи»:

Настройка обратной связи

Укажите точный адрес (URL) страницы где установлен html код и ваш E-mail на который будут отправляться сообщения от посетителей. Теперь кликаете «Регистрация». Готово. Можете теперь проверить свою созданную форму обратной связи, написав себе сообщение. Вот пример, готовой формы для связи с автором сайта:

Источник: https://WordPressMania.ru/forma-obratnoy-svyazi-dlya-sayta/

Форма обратной связи Joomla – 5 лучших вариантов

В статье рассматриваются наиболее популярные бесплатные плагины для создания на сайте под управлением CMS Joomla формы обратной связи.

1.      ALF Contact 3.1.8

Сайт разработчика: http://www.alfsoft.com/joomla/alfcontact

Расширение полностью совместимо с Joomla 1.7/2.5/3.x.

ALF Contact 3.1.8 – достаточно функциональный, но в то же время простой и компактный компонент. Устанавливается плагин стандартно через «Менеджер расширений», после установки появляется в списке компонентов.

Для корректной работы плагина необходимо  создать новый пункт меню, в котором будет размещена форма обратной связи. Для этого нужно выбрать в панели управления «Меню»-«Создать новый пункт», а в строке «Тип меню» —  «ALF Contact» — «Contact Form».

Далее следует произвести настройку контактов, выбрав пункт меню «Компоненты» — «ALF Contact».

Таким образом, при наличии более чем одного активного контакта, форма обратной связи предлагает с помощью выпадающего списка выбрать адресата в поле «Кому».

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

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

Для использования капчи необходимо предварительно пройти бесплатную регистрацию на соответствующих сайтах и ввести в настройки компонента полученные логины и ключи. Капча reCAPTHA позволяет использовать на выбор одну из четырех тем оформления, восемь языков (в том числе русский) и поддерживает протокол SSL. Капча от captchas.

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

На вкладке настроек «Redirect» можно выбрать страницу, на которую будет перенаправлен пользователь, задать текст заголовка или гиперссылку, а также текст, появляющийся на экране после заполнения формы обратной связи:

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

2.      Creative Contact Form

Сайт разработчика: http://creative-solutions.net/joomla/creative-contact-form

Расширение полностью совместимо с Joomla 2.5/3.x.

Легкая в настройке и использовании, визуально привлекательная форма обратной связи. Бесплатная версия позволяет создать на сайте лишь одну форму обратной связи с максимум пятью полями. Кроме того, в нижней части формы будет присутствовать информация об авторских правах. Минусом бесплатной версии расширения «Creative Contact Form» является отсутствие защиты от спама в виде капчи.

Установка расширения производится через «Менеджер расширений», рекомендовано воспользоваться опцией «Установить из каталога», предварительно распаковав архив в папку каталога установки.

После установки в списке компонентов появляется новый пункт — «Creative Contact Form».

Щелчок по кнопке «Forms» открывает список имеющихся форм. Поскольку рассматривается бесплатная версия, в которой возможно наличие только одной формы обратной связи, можно отредактировать под свои потребности имеющуюся «Contact Form Example».

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

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

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

Щелчок по заголовку выбранного поля открывает его окно редактирования, содержащее поля «Название», «Форма», «Тип поля», «Обязательно для заполнения», «Состояние» и «Ширина».

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

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

Для просмотра получившейся формы обратной связи нужно создать пункт меню соответствующего типа, и открыть его на сайте либо вставить с помощью короткого кода на одну из имеющихся страниц сайта. Ниже приведен пример работы формы обратной связи, созданной с использованием расширения «Creative Contact Form».

3. aiContactSafe

Сайт разработчика: http://www.algisinfo.com/en/download/category/1-free-extensions.html

Расширение полностью совместимо с Joomla 2.5.

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

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

После установки компонент можно найти в списке  пункта меню «Компоненты» под заголовком «Форма обратной связи». При наведении курсора мыши на этот заголовок выпадает меню с пунктами «Сообщения», «Вложения», «Профайлы», «Поля», «Statuses», «Панель управления» и «О программе».

Пункт меню «Сообщения» содержит все сообщения, созданные пользователями сайта с помощью формы обратной связи. Каждое из сообщений имеет параметры «Название», «Email», «Тема», «Послано отправителю», «ip-адрес отправителя», «Профайл», «Статус», «Отправлено», «ID» и «Дата добавления», что позволяет легко создавать ответы и отслеживать сообщения.

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

Набор типов полей включает в себя текстовую строку, галочку да/нет, выпадающий список, расширенное текстовое поле, список с галочками с возможностью множественного выбора, переключатель, дата, e-mail, список получателей e-mail, контакты Joomla, пользователи Joomla, вхождения из SOBI2, скрытое поле, разделитель, файл, количество и скрытый e-mail.

В пункте меню «Статусы сообщения» возможно создание статусов с параметрами «Имя статуса», «Цвет» и «Порядок». По умолчанию присутствуют статусы «Новое», «Прочитано», «Отвечено» и «Архив».

Пункт меню «Панель управления» позволяет настроить такие параметры формы обратной связи, как имя, e-mail и тема по умолчанию, активировать контроль спама, список слов, письма с которыми необходимо блокировать, активировать запрет по IP-адресам, выбрать папку для закачки вложений, установить входящие в комплект расширения модуль и плагины и другое.

В работе расширение выглядит следующим образом:

Среди минусов расширения стоит отметить его совместимость лишь с Joomla 2.5 и отсутствие возможности выбора и изменения дизайна формы.

4.      FlexiContact 

Сайт разработчика: http://www.lesarbresdesign.info/extensions/flexicontact

Расширение полностью совместимо с Joomla 1.5/1.6/1.7/2.5/3.x.

FlexiContact — простая, но гибкая форма обратной связи для сайтов на CMS Joomla.

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

В «Общих настройках» можно включить ведение логов, автозаполнение; при необходимости ввести текст соглашения или ссылку на него. Удачно реализована настройка вида сообщения, отсылаемых как Администратору, так и Пользователю – визуальный редактор в сочетании с таблицей переменных позволит настроить подходящий вид сообщения быстро, без ошибок и практически не задумываясь.

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

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

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

 5.      Simple Email Form

Источник: http://www.jtemplate.ru/ru/moi-raboty/besplatnye-rasshireniya/1135-forma-obratnoj-svyazi-joomla