Html контактная форма для сайта: Как сделать контактную форму

Leave a Comment / Html / By /

Содержание

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

Обновлено 24 сентября 2022 Просмотров: 120 693 Автор: Дмитрий Петров

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

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

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

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

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


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

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

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

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

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

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

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

Теперь давайте поговорим за WordPress. Лично я пока еще не определился с этим и у меня на странице контактов красуется обычный E-mail, что в общем-то не очень здорово, ибо он уже давно попал в спам-базу, и если бы я не сумел привязать почту для домена через Google Apps к обычному ящику в Гмайле, то поток спама меня бы уже давно захлестнул с головой.

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

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

Собственно, по поводу WordPress. Есть один очень популярный и очень мощный плагин, который зовется Contact Form 7. Популярность его просто зашкаливает, а это значит, что что-то в нем такое есть. Правда для реализации функции капчи вам придется поставить еще дополнительный плагин Really Simple CAPTCHA.

Форму обратной связи можно будет вставить на любую страницу или в любой пост вашего блога на WordPress, а также в виджет. Фактически это своеобразный конструктор для WordPress, позволяющий обновлять информацию в форме без обновления страницы (на технологии ajax). Лично я испытывал этот плагин на KtoNaNovenkogo.ru примерно пару лет назад, и тогда он мне показался очень тяжелым и неуместно громоздким для реализации стоящих передо мною целей (обратная связь).

Понятно, что за это время Contact Form 7 мог стать уже гораздо более подходящим для реализации стоящих перед нами задач и поэтому предлагаю вам опробовать его в работе самостоятельно, опираясь на довольно подробное описание. Если вы пользуетесь каким-либо другим хорошим и легким плагином, то чиркните, пожалуйста, об этом пару слов в комментариях.

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

Но существует еще несколько способов:

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

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

    Три стратегии продвижения сайтовСкачать (150 Мб)
    Html для начинающихСкачать (340 Мб)
    Css для начинающихСкачать (700 Мб)
    Работа с сайтом в DreamweaverСкачать (140 Мб)
    Как получить домен и купить хостингСкачать (120 Мб)
    Как создать свой видеокурсСкачать (600 Мб)

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

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

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

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

Php скрипты форм обратной связи для сайта

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

Там и форма заказа для сайта:

Он представляет из себя архив, содержащий в себе папку, которую нужно будет скопировать в корневую директорию своего сайт (или в любую другую). Далее на странице с контактами вы указываете ссылку с прописанным в ней путем до файла «index.php» из папки «sendmail». Для моего блога это было бы примерно так:_https://ktonanovenkogo.ru/sendmail/index.php (если бы я скопировал каталог со скриптом в корневую папку).

Настройки осуществляются с помощью редактирования содержимого файла «config. php» из директории «sendmail»:

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

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

Существует довольно привлекательный скрипт под названием Super AJAX Contact Form (можно использовать его и для заказа), построенный на основе PHP и jQuery с использованием Ajax:

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

Установка его на сайт ничем не отличается от описанной ранее и заключается в копировании папки со скриптом в корень, а на странице контактов останется только прописать ссылку до файла «index.php» (для моего блога:_https://ktonanovenkogo.ru/code/index.php).

Настройки формы обратной связи производятся в файле «\code\assets\xml\config.php», где можно прописать как отдельный E-mail для различных тем, так и один для всех (смотрите об этом подробнее в видеоуроке).

В Super AJAX Contact Form осуществляется проверка правильности заполнения всех полей и сразу же (без перезагрузки страницы — ajax во всей красе) выдаются подсказки над соответствующими полями, что сильно повышает юзабилити обратной связи:

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

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

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

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

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

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

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

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

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

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

Добавленные поля можно менять местами простым перетаскиванием мыши, удалять и повторно редактировать:

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

То, что кнопка «Submit» осталась не переведенной, не есть большая проблема, ибо это можно будет сделать непосредственно в полученном коде.

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

Обратная связь для Html сайтов (без Php)

Есть онлайн сервисы, предоставляющие бесплатно свои собственные Php обработчики, которые будут расположены на их серверах. К такому типу относится конструктор на ip-whois:

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

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

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

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

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Как создать контактную форму веб-сайта с помощью Google Forms

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

Создать контактную форму в Google Forms очень просто. У Google даже есть шаблон, который вы можете использовать, что значительно упрощает вашу работу. Все, что вам нужно сделать, это загрузить шаблон — настроить его, если хотите, — а затем встроить форму прямо на свой веб-сайт. Вот и все. Давайте начнем.

Создание контактной формы

Для начала перейдите в Google Формы домашнюю страницу и поместите курсор на разноцветный знак плюса (+) в правом нижнем углу.

Знак плюс превращается в фиолетовый карандаш и фиолетовый значок страницы. Щелкните фиолетовый значок страницы.

Когда откроется окно, выберите шаблон «Контактная информация».

Настройка контактной формы

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

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

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

Наконец, щелкните значок настроек, чтобы изменить поведение формы при ее заполнении респондентами.

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

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

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

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

Встраивание контактной формы

После того, как все будет идеально в контактной форме, нажмите кнопку «Отправить» вверху страницы.

Щелкните вкладку угловых скобок (<>), а затем нажмите «Копировать», чтобы скопировать встроенный HTML-код в буфер обмена.

Если вам нужно изменить размеры формы и то, как она отображается на вашем веб-сайте, измените ширину и высоту под HTML-кодом, прежде чем нажимать «Копировать».

Теперь все, что вам нужно сделать, это вставить код в HTML-редактор страницы WordPress или прямо в файл .html вашего веб-сайта, где вы хотите, чтобы форма отображалась.

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

Сбор ответов в Google Таблицах

Одна из лучших функций Google Forms — все собранные ответы можно отправлять прямо в электронную таблицу Google Sheets. Отсюда вы можете использовать формулы и диаграммы Sheet, просматривать ответы в режиме реального времени и устанавливать надстройки для дальнейшего анализа, фильтрации и обработки данных.

Чтобы настроить электронную таблицу для ответов, выберите вкладку «Ответы» и щелкните зеленый значок «Таблицы».

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

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

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

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

Блог / Новости / Как добавить контактную форму на статический сайт


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

Статическая форма контакта с веб-сайтом является наиболее распространенным случаем, и в этой статье вы узнаете, как добавить ее с помощью конструктора форм Kwes. Добавление формы контакта на статический сайт может быть сложной задачей, поскольку на статическом сайте обычно нет &# x27; бэкэнд, который может обрабатывать отправку формы. В этом случае мы могли бы использовать сервис, который сделает это за нас. Существует множество сервисов, таких как формы Netlify или Typeform, но в этом случае мы собираемся использовать сервис Kwes. Мы собираемся создать контактную форму со следующими полями:| Form element     | Form field         | | —————   | —————-   | | Name             | Text input         | | Email            | Email input        | | Message          | Textarea input     | | Button           | Submit button      |Все поля ввода должны быть обязательными, а поле формы электронной почты должно быть проверено.

Интеграция

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

Чтобы завершить интеграцию, необходимо добавить файл JavaScript в нижней части вашbodyтег вашей страницы контактов.Я использую генератор статических страниц Hexo для своего сайта, но он работает с другими генераторами статических сайтов, такими как Hugo или Jekyll. Поскольку большинство статических генераторов сайтов поддерживают Markdown, вы можете вставить код контакта непосредственно в Markdown, и он тоже будет работать. В противном случае вы можете создать отдельную страницу или макет и вставить туда код. Совет: нет необходимости добавлять файл JavaScript на страницы, на которых нет контактной формы. Далее, мы добавим HTML-форму к нашему страница контактов. Чтобы сделать это, добавьте обычные теги и атрибуты формы. Совет. Не забывайте добавлять метки для атрибутов с соответствующими идентификаторами ввода, чтобы сделать вашу форму более доступной. Теперь мы должны добавить атрибуты Kwes. Важно обернуть вашу форму вdivсkwes-fromучебный класс. После этого добавьтеactionприписатьformэлемент, а затем добавитьrulesприписать ваши поля ввода. Код должен выглядеть примерно так:

        Name          E-mail          Message          Submit    Вы можете увидеть все варианты правил в официальной документации Kwes. Перед тем, как опубликовать форму, вы должны сначала проверить ее. С Kwes вы можете сделать это двумя различными способами: 

  • , указав тестовый домен в настройках сайта, или
  • , добавив атрибут HTML.mode=»test»на ваш элемент формы.

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

Kwes features

Kwes имеет встроенную логику для отображения или скрытия любого содержимого в условии. Например, вы можете показать различные детали плана в зависимости от выбранного плана. Для меня наиболее значительным преимуществом является проверка формы. Проверка выполняется как на веб-сайте, так и на веб-сайте. Отсутствие необходимости заново изобретать колесо и писать правила проверки снова и снова — это экономия времени, но это также задача, которую я бы очень хотел избежать в каждом проекте. Имея более 50 правил проверки, Kwes должен охватывать большинство сценариев, даже самых сложных, таких как обработка дат, времени, паролей и загрузок файлов. Когда ваша форма общедоступна, высока вероятность того, что вы получите рассылку спама , С Kwes вы можете получить защиту от спама и даже помочь Kwes узнать, какие сообщения отфильтровывать. Если вам нужен больший контроль над формой и интеграция ее с другими службами, такими как Zapier, вы можете это сделать. Вы даже можете воспользоваться API-интерфейсом Kwes и самостоятельно управлять отправками.

Заключение

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

Теги

Разработчики веб-разработок Программирование, программирование Html Css Javascript Serverless
Источник: https://hackernoon.com/how-to-add-a-contact-form-to-a-static-website-0e3dy3jq6

Если у вас появились вопросы, хотели бы записаться на урок, заказать статью(инструкцию) или приобрести видеоурок — пишите нам в: скайп: olegg.pann telegram, viber,whatsap — +380672998330 добавляйтесь на телеграмм-канал: t.me/webyk email: [email protected] мы в vk: vk.com/programing24 мы в fb: www.facebook.com/webprograming24 Обязательно оперативно ответим на все вопросы


Поделитесь в социальных сетях