Веб-дизайн и поисковая оптимизация

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

посмотреть еще ролики можно перейдя на

Вам может быть интересно

Google Forms - как создать интернет-опрос на сайте в Гугл Формах
SendPulse - Push уведомления для сайта и бесплатный вариант их подключения от СендПульс Онлайн HTML редакторы - визуальные, IDE и редакторы для установки на сайт
Ускорение и защита вашего сайта в облачном сервисе Айри.рф

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

Недавно я делал статью о том, как сделать с помощью плагина Contact Form 7. Также просто можно сделать форму обратной связи на Joomla и других популярных CMS.

Но, что делать сайтам, которые не используют популярные CMS? – Остается делать все руками.

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

Заказать установку и настройку готовой формы за 500 рублей можно здесь (это для тех кому лень руками поработать или навыка недостаточно).

Принцип работы формы обратной связи на html

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

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

Для полей с email адресом и сайтом будет проводиться обязательная проверка правильности ввода данных.

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

Для работы контактной формы, созданной на html, требуется 3 элемента.

Первый отвечает за структуру самой формы, за тип и количество полей ввода данных. Это обычный html код.

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

Третий отвечает за внешний вид. Устанавливает размеры и расположение полей ввода данных, добавляет различные цвета и эффекты. Это все задается CSS стилями.

Демо версия формы

Настройку каждого из этих элементов мы с вами разберем по шагам.

Создание HTML макета

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

Для обозначения форм в html используется тег

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

Начнем с первой строки.

class=”contact_form” – указываем класс, для того, чтобы в будущем задать CSS стили.

action=”contact-form.php” – указываем название файла со скриптом, который будет обрабатывать данные формы и осуществлять отправку сообщения. Если файл лежит в той же папке, что и страница с формой, то достаточно указать только название файла, если в другой, то нужно будет указать и путь к файлу.

Дальше идут 4 блока

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

Type – отвечает за тип вводимых данных, text – обычный текст, email – электронный адрес, такие поля автоматически проверяются на правильность (должна присутствовать @), tel – телефон, url – адрес сайта.

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

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

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

pattern=”(http|https)://.+” – эта конструкция служит для проверки корректности поля веб сайт, указывает на то, что адрес обязательно должен содержать http://текст или https://текст , в противном случае будет ошибка.

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

Поля для ввода самого сообщения размечается тегом , в котором cols задает количество символов поля в ширину, а rows число строк.</p><p><b>Защита от спама </b> – невидимое поле с именем name=bezspama. У него стоит стиль display:none – это значит поле невидимо людям, но боты его будут заполнять на автомате.</p><p>И завершающий элемент любой формы – кнопка отправки сообщения, она задается тегом <button> </button>, имеющим свой класс для настройки внешнего вида и тип “submit”.</p><p>Для добавления или удаления полей, достаточно убрать ненужные или вставить новые по аналогии с существующими, прописав для них все свойства и имена.</p><h2>Оформление CSS стилями</h2><p>Если вы посмотрите в браузере на то, что получилось, то увидите нечто корявое и непривлекательное. Для того, чтобы у нас получилась <a href="/life-hacks-wi-fi/beznadezhnyi-form-html-primer-sozdaniya-krasivoi-html-formy-raznica-mezhdu.html">красивая форма</a> обратной связи, придется поработать над ее стилями (html будет недостаточно).</p><p>Если вы владеете CSS, то задать оформление для всех элементов формы сможете без проблем, тут даже не потребуется моя помощь.</p><p>Если же вы не знакомы со стилями, то я просто дам вам <a href="/life-hacks-for-pc/gotovyi-hosts-fail-dlya-ofisa-fail-hosts.html">готовый файл</a>, в котором уже все прописано таким образом, что ваша форма будет идентична той, что в примере.</p><p>Подключить стили можно двумя способами:</p><ol><li>Скопировать содержимое файла в файл style.css, который уже есть на вашем сайте (добавьте в самый конец)</li><li>Поместить файл, который я дал, на ваш хостинг и подключить его.</li> </ol><p>Подключаются файлы стилей следующим кодом <link rel=”stylesheet” media=”screen” href=”styles.css” >, размещаемым внутри <head></head>. Если файл со стилями (styles.css) находится не в одной папке с <a href="/life-hacks-for-smartphones/avtomaticheskii-perehod-na-stranicu-html-perenapravlenie-na-druguyu.html">html страницей</a>, то пропишите <a href="/life-hacks-for-smartphones/kak-pravilno-sostavit-polnoe-imya-faila-ponyatiya-put-i-imya.html">полный путь</a> до него.</p><p>В файле со стилями, который я дал, каждый элемент подписан, поэтому, вы можете вносить в него любые изменения – менять цвета, размеры, форму, эффекты. Владея самыми <a href="/life-hacks-for-different-systems/bazovye-znaniya-elektroniki-nachinayushchii-radiolyubitel-shkola-shemy.html">базовыми знаниями</a>, вы сможете легко его править.</p><h2>Настройка PHP кода (добавлена защита от спама)</h2><p>Как и в случае со стилями, я дам вам готовый код, обрабатывающий <a href="/life-hacks-for-different-systems/html-formy-html-formy.html">HTML форму</a> обратной связи и защищающий от спама. Этот файл адаптирован для конкретной конфигурации и, если вы захотите задать новые поля или удалить существующие, в него придется вносить изменения. Поэтому, я расскажу вам, как он работает, чтобы вы поняли, что нужно менять.</p><blockquote><p>Для сайтов, использующих кодировку windows-1251 и <a href="/life-hacks-for-ios/ustanovka-php-7-na-windows-10-ispolzovanie-raznyh-naborov-nastroek-php.html">версию php</a> 5.4+, в код нужно будет внести дополнение, связанное с функцией htmlspecialchars. Покажу его ниже. Иначе, вместо кириллицы будут приходить пустые поля.</p> </blockquote><p>Помните, в свойствах формы (в <a href="/life-hacks-for-different-systems/chem-otkryt-html-kak-otkryt-fail-html.html">html файле</a>) мы указывали параметр action=”contact-form.php”. Вам нужно создать файл с названием contact-form.php и поместить в него находящийся ниже код.</p><p><?php /* Задаем переменные */ $name = htmlspecialchars($_POST["name"]); $email = htmlspecialchars($_POST["email"]); $tel = htmlspecialchars($_POST["tel"]); $website = htmlspecialchars($_POST["website"]); $message = htmlspecialchars($_POST["message"]); $bezspama = htmlspecialchars($_POST["bezspama"]); /* Ваш адрес и тема сообщения */ $address = "pochta@kakoy-to-sajt.com"; $sub = "Сообщение с сайта ХХХ"; /* Формат письма */ $mes = "Сообщение с сайта ХХХ.\n Имя отправителя: $name Электронный адрес отправителя: $email Телефон отправителя: $tel Сайт отправителя: $website Текст сообщения: $message"; if (empty($bezspama)) /* Оценка поля bezspama - должно быть пустым*/ { /* Отправляем сообщение, используя mail() функцию */ $from = "From: $name <$email> \r\n Reply-To: $email \r\n"; if (mail($address, $sub, $mes, $from)) { header("Refresh: 5; URL=https://сайт"); echo "<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> <body></body>";} else { header("Refresh: 5; URL=https://сайт"); echo "<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> <body></body>";} } exit; /* Выход без сообщения, если поле bezspama заполнено спам ботами */ ?></p><table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td><td class="crayon-code"><p><?php </p><p>/* Задаем переменные */ </p><p>$name = htmlspecialchars ($_POST [ "name" ] ) ; </p><p>$email = htmlspecialchars ($_POST [ "email" ] ) ; </p><p>$tel = htmlspecialchars ($_POST [ "tel" ] ) ; </p><p>$website = htmlspecialchars ($_POST [ "website" ] ) ; </p><p>$message = htmlspecialchars ($_POST [ "message" ] ) ; </p><p>$bezspama = htmlspecialchars ($_POST [ "bezspama" ] ) ; </p><p>/* Ваш адрес и тема сообщения */ </p><p>$sub = <span>"Сообщение с сайта ХХХ" </span>; </p><p>/* Формат письма */ </p><p>$mes = <span>"Сообщение с сайта ХХХ.\n </p><p>Имя отправителя: $name </p><p>Электронный адрес отправителя: $email </p><p>Телефон отправителя: $tel </p><p>Сайт отправителя: $website </p><p>Текст сообщения: </p><p>$message" ; </p><p>if (empty ($bezspama ) ) <span>/* Оценка поля bezspama - должно быть пустым*/ </p><p>/* Отправляем сообщение, используя mail() функцию */ </p><p>$from = <span>"From: $name <$email> \r\n Reply-To: $email \r\n" </span>; </p><p>if (mail ($address , $sub , $mes , $from ) ) { </p><p>header () ; </p><p>echo "<head> </p><p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> </p><p> <body>Письмо отправлено, через 5 секунд вы вернетесь на страницу XXX</body>" </span>; } </p><p>else { </p><p>header (<span>"Refresh: 5; URL=https://сайт" </span>) ; </p><p>echo "<head> </p><p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> </p><p> <body>Письмо не отправлено, через 5 секунд вы вернетесь на страницу YYY</body>" </span>; } </p><p>exit ; <span>/* Выход без сообщения, если поле bezspama заполнено спам ботами */ </p> </td> </tr></table><p>Первым делом нам необходимо задать переменные, которые будут обрабатываться php кодом. Для того, чтобы не запутаться, присваиваем им такие же имена, как были в самой форме, только начинаются все переменные со знака $. Сама команда присвоения значения имеет такой вид:</p><p>$название = htmlspecialchars($_POST["название"]);</p><table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td><td class="crayon-code"><p>$ название= htmlspecialchars ($ _POST [ "название" ] ) ; </p> </td> </tr></table><p>Если вы добавляли какие-то дополнительные поля данных, то в блоке переменных допишите их имена.</p><p>Не все переменные мы берем из формы. Как минимум, адрес электронной почты, на который придет письмо (ваш адрес) указывается отдельно. В данном случае это переменная $address – впишите в ее значение свой электронный ящик.</p><p>Также, в данном примере явным образом задано значение переменной $sub – она будет выдавать тему письма. Можно добавить тему сообщения в HTML форму в виде текстового поля (наподобие name), и брать значение этой переменной оттуда.</p><p>В блоке формат письма настраивается то сообщение, которое получите вы. Он может отличаться от того, что было написано в поле textarea под названием message. Я просто сделал еще одну переменную $mes и включил в нее дополнительный текст и важные данные отправителя (имя, почту, телефон, сайт). Эту часть вы можете сконфигурировать так, как вам удобно.</p><p>Чтобы получаемые вами письма подписывались именем отправителя, и в них включался их обратный адрес, а не адрес сервера, на котором находится ваш php файл, мы задаем новую переменную $from, в нее включаем имя и электронный ящик отправителя письма.</p><p>Затем функция mail осуществляет отправку письма по заданным параметрам. В случае успешной отправки появляется сообщение о том, что письмо отправлено, а через 5 секунд пользователя перебрасывает на страницу вашего сайта (адрес страницы и время задержки вы можете изменить). Если письмо отправить не удалось, появляется сообщение, что письмо не отправлено и через 5 секунд идет переход на страницу сайта, аналогичным образом вы можете задать адрес страницы и время.</p> <h2>Вставка формы на страницу сайта</h2><p>Для того, чтобы вставить созданную вами форму обратной связи, вам нужно скопировать html код формы и вставить его в ту часть кода страницы, где вы хотите вывести обратную связь для сайта.</p><p>Еще раз хочу напомнить, если файл с PHP программой находятся не в той же папке, что и страница, на которой размещен html код, то в коде самой формы нужно прописать полный путь к нему, иначе, работать не будет, так как форма не найдет файл обработчик.</p><p><b><span>Скачать файлы контактной формы </span> </b></p><h2>Активный анти спам с вводом данных в поле</h2><p>Спамеры действуют с помощью различных программных средств и некоторые боты умеют обходить защиту с пустым полем, которая встроена в базовую версию. Если они вас начинают донимать, то можно применить вместо или дополнительно простую защиту со вводом данных в специальное поле. Например, сделать математическое выражение с просьбой ввести ответ или задать какой-либо простой вопрос. Больших изменений в форме это не потребует.</p><p>Я покажу как изменить код формы и PHP обработчик для использования этого метода антиспама. При желании вы можете не менять защиту с пустым полем, а добавить соответствующие строки в код и у вас будет работать одновременно 2 метода – по идее, должно быть более эффективно.</p><p>Первым делом нам необходимо добавить поле для ввода и вопрос в HTML код. В качестве основы у нас уже есть строка 25 (input name = “bezspama” ). Это поле невидимо. Мы превращаем его в обычное. Для этого всю строку меняем на вот такой блок:</p><p><p> <label for="bezspama">2+2*2=:</label> <input name="bezspama" type="text" required /> </p></p><table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td><td class="crayon-code"><p><p><label for = "bezspama" > 2+2*2=: </label> </p><p><input name = "bezspama" type = "text" required /> </p> </p> </td> </tr></table><p>Вместо математического выражения 2+2*2 можете ввести любые данные – это визуальный вопрос для пользователя. Из поля input мы убрали стиль display:none и добавили обязательность заполнения.</p><p>Следующим шагом меняем данные в PHP обработчике, чтобы он делал проверку уже не на пустоту этого поля, а на правильность введенных данных. Проверка у нас делалась в строке 25 выражением empty ($bezspama ) . Мы меняем это выражение и будем делать проверку равенства заполненного поля заранее заданному числу. В моем примере, математическое выражение равно 6, поэтому вся строка будет выглядеть вот так.</p> <p><b>Форма обратной связи для сайта </b>, которую я вам покажу – основана на использовании технологии Ajax. Но не волнуйтесь, знать этого вам не надо, все уже готово, останется только установить эту форму и настроить под себя!</p> <p>Ребята - скрипт очень давно устарел. У кого-то работает, у кого то нет. А мне разбираться и уж тем более обновлять - лень. Поэтому тестируйте на своё усмотрение.</p> <h2>Форма обратной связи php с отправкой на почту</h2> <p>Эта <i>форма обратной связи на сайт </i> очень функциональна сама по себе, к ней подключено несколько плагинов, которые создают привлекательный внешний вид и проверяют валидность (читай правильность) введенных вами данных. Эти плагины работают на великом и могучем ! А называются так:</p> <ol><p>1. <i>JQTransform </i> – плагин который позволяет сделать нашу форму обратной связи красивой!</p> <p>2. <i>formValidator </i> – а этот плагин проверяет форму контактов на правильность введенной информации и в случае чего выводит всплывающие подсказки!</p> </ol><p>Для полноценной работы этой формы будет использован класс – PHPMailer. Считается одним из лучших!</p> <p>Заметка для самых умных: </p><p>Форму обратной связи для сайта можно сделать на HTML! Но работать она начнет только при помощи PHP! И никак иначе!</p> <p>Это я для тех, кто ищет форму обратной связи только на HTML. Сделать сделаете, но работать она не будет!</p> <p>Поэтому, ваш должен поддерживать PHP, а для этой формы контактов, PHP должен быть не ниже пятой версии. Надеюсь, понятно излагаю? Тем более, сейчас, любой нормальный хостинг поддерживает эти условия!</p> <p>Эту форму обратной связи я откопал на сайте www.tutorialzine.com ссылка ведет непосредственно на страницу оригинала, т.е. сайт автора данной формы!</p> <p>Там все на английском, поэтому нам с Сашей пришлось немного повозиться, что бы русифицировать данную форму контактов и сами плагины, которые подключены к ней.</p> <p>Признаюсь честно, мы с этой «формочкой» провозились два дня, так как начинали всплывать различные косяки, а недоделанную до конца форму обратной связи, тем более такую красивую, выкладывать не хотелось! Так что если вы любитель все сделать сами, и в вашу светлейшую голову влезет мысль – самому русифицировать данную форму, дам пару советов, так как просто переводом фраз не ограничишься:</p> <ol><p>1. Эта форма обратной связи заточена под буржуев, от туда же и скачена, поэтому она будет присылать вам вместо нормальных русских символов – кракозяблы. Разберитесь с кодировкой. Да и вообще все «тюлени» будут связаны с этим!</p> <p>2. Скрипт валидации изначально не понимает наши букв, поэтому их там надо будет прописать!</p> <p>3. Даже после этих действий если указать тему письма на русском, письмо приходит с темой – No subject (надеюсь правильно написал), это лечится если указать кодировку в файле класса PHPMailer.</p> <p>4. В оригинальной форме текст в полях ввода прижимался к низу, а не по середине. Это глюк плагина JQTransform.</p> </ol><p>Ну, вроде все расписал и предупредил. Поехали дальше!</p> <h3>Создание формы обратной связи</h3> <h4>Создание формы обратной связи на сайте</h4> <p>В процессе продвижения сайта наряду с изучением статистики посещений, особое значение имеет информация о сайте от самих посетителей. Одним из самых простых способов получения такой информации является размещение на сайте странички с <b>формой обратной связи </b>. Посетитель оставляет сообщение, и оно придет на ваш адрес электронной почты или любой другой, который вы укажете. При этом посетителю не надо использовать свою почтовую программу, ему даже не обязательно иметь свой e-mail.</p> <p>Простейший пример такой формы приведен на рис.1. (Это вполне рабочий образец, и вы можете с его помощью послать мне благодарственное письмо.)</p> <form class="text_forma" method="post" action=""> Ваше имя:<br><input type="text" name="name" size="30"><br> Ваш e-mail (для ответа):<br><input type="text" name="email" size="30"><br> Ваше сообщение:<br><p><input type="submit" value="Отправить сообщение" onclick="alert(" return true></p> </form> <h5><i>Рис.1. </i> Простая форма обратной связи</h5> <p>Для размещения на сайте такой формы обратной связи достаточно всего лишь элементарных сведений об HTML и умения оперировать двумя командами - <b>Копировать </b> и <b>Вставить. </b> Рассмотрим последовательность действий по созданию формы обратной связи (рис.1) на HTML-странице сайта.</p> <p><b>1. </b> Проверьте, что тарифный план вашего хостинга (контора, где размещён ваш сайт) поддерживает PHP. Если нет, то вам придётся скорее всего доплатить для перехода на другой тариф, поддерживающий эту самую PHP. Значение этой аббревиатуры можете не искать, так как знание PHP вам не понадобится.</p> <b>2. </b> Выберем страницу, на которой хотим разместить форму обратной связи, и вставим в нужное место следующий код: <form method="post" action="mail.php"><br> <strong>Ваше имя:</strong><br /><br> <input type="text" name="name" size="30"/><br> <br /><br> <strong>Ваш e-mail (для ответа):</strong><br /><br> <input name="email" type="text" size="30" /><br> <br /><br> <strong>Ваше сообщение:</strong><br /><br> <textarea name="mess" rows="3" cols="25">

Как видим, вся форма создаётся тегом

с атрибутами action=mail.php (указание на страницу сайта, где расположен сценарий обработки введенных данных) и method=post (метод отправки данных на сервер). Отдельные строки созданы тегом с вполне понятными атрибутами. Расположение отдельных элементов формы, текст, шрифты и проч. можете менять в соответствие с дизайном вашего сайта. В теге </b> задаются размеры области для ввода текста сообщения: число строк и колонок (rows="3" cols="25").</p> <p><b>3. </b> Создадим новую страницу <b>mail.php </b>, аналогичную обычной HTML, только имеющую расширение.php. Полный код страницы показан на рис.2:</p> <p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br> <html xmlns="http://www.w3.org/1999/xhtml"><br> <head><br> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><br> <title>Обратная связь</title><br> </head><br> <body><br><?php <br> if (isset($_POST["name"])) {$name = $_POST["name"];}<br> if (isset($_POST["email"])) {$email = $_POST["email"];}<br> if (isset($_POST["mess"])) {$mess = $_POST["mess"];}</p><p> $to = "pupkin@rambler.ru "; /*Укажите ваш адрес электоронной почты*/<br> $headers = "Content-type: text/plain; charset = windows-1251";<br> $subject = "Сообщение с вашего сайта";<br> $message = "Имя пославшего: $name \nЭлектронный адрес: $email \nСообщение: $mess";<br> $send = mail ($to, $subject, $message, $headers);<br> if ($send == "true")<br> {<br> echo "<b>Спасибо за отправку вашего сообщения!<p>";<br> echo "<a href=index.html> Нажмите,</a> чтобы вернуться на <a href="/internet/yandeks-brauzer-nachalnaya-stranica-kak-sdelat-glavnuyu-stranicu-yandeks.html">главную страницу</a>";<br> }<br> else <br> {<br> echo "<p><b>Ошибка. Сообщение не отправлено!";<br> }<br>?> <br> </body><br> </html></p> <h5><i>Рис.2. </i> Код страницы обработки формы обратной связи</h5> <p>Красным цветом выделены адреса ссылок, на которые необходимо обратить внимание:</p> <ul><li>pupkin@rambler.ru - адрес г.Пупкина заменить на адрес вашей почты, куда будут поступать сообщения от посетителей сайта, а также от неутомимых спамеров. Кстати, для защиты от них в форму часто вводят так называемую капчу (англ. <b>CAPTCHA </b> - Completely Automated Public Turing test to tell Computers and Humans Apart - полностью автоматизированный публичный тест Тьюринга для различия компьютеров и людей). Обычно это сильно искаженные цифры и буквы, которые просят ввести перед отправкой сообщения. О капче поговорим в одной из следующих статей. <br> Если вы хотите отправлять письма на несколько адресов, то просто перечислите их через запятую.</li> <li>a href=index.html - адрес главной (домашней) страницы сайта.</li> </ul><p>Созданную страницу <b>mail.php </b> необходимо поместить в тот же каталог сайта (директорию, папку), где расположена и страница с формой обратной связи.</p> <p>Проверьте работоспособность формы обратной связи. Если всё сделано аккуратно, то после заполнения формы и нажатия <b>Отправить сообщение </b> должен появиться следующий текст: "<b>Спасибо за отправку вашего сообщения. , чтобы вернуться на главную страницу </b>". После этого вы обнаружите в своём почтовом ящике (или другом, который вы указали при создании формы обратной связи) собственное послание себе любимому.</p> <blockquote> <p><b><i>Замечание: </i> </b> на некоторых хостингах новая (только что установленная на сайте) форма обратной связи начинает работать не сразу, и первые письма не доходят совсем или поступают с задержкой на 1-2 дня. Вероятно, идет "притирка шестеренок", а затем все работает нормально. Кроме того, с некоторых хостингов не доходят письма на определенные адреса, например, у меня были проблемы с ящиком на Рамблере и Mail.ru. Для решения этих проблем обратитесь к вашему хостеру - обычно помогают.</p> </blockquote> <p>Иногда при использовании описанной формы обратной связи возникают проблемы с кодировкой. Если в пришедшем письме вместо родной кириллицы текст состоит из "кракозяблов" или пустых квадратиков, то приходится вручную подбирать кодировку, что конечно же неудобно. Чтобы этого не происходило, проверьте, что ваша страница с формой обратной связи имеет кодировку <b>charset=UTF-8 </b>. Если вы используете программу <b>Adobe Dreamweaver </b>, то для этого надо выбрать раздел меню <b>Изменить - Свойства страницы - Кодировка </b>.</p> <p>Подробнее проблема с кодировкой файлов сайта рассмотрена в статье Проблемы с кодировкой в форме обратной связи .</p> <p>В описанном примере для простоты сообщение об отправке письма выводится на <a href="/life-hacks-in-vk/ne-udalyaetsya-poslednyaya-stranica-word-udalenie-pustyh-stranic-word.html">пустой странице</a>. Конечно, вы можете разместить его на любой странице своего сайта, чтобы посетитель мог использовать навигацию (меню) для выбора <a href="/life-hacks/fleshka-ne-raspoznaetsya-kompyuter-ne-vidit-fleshku-prichiny-i-resheniya.html">дальнейших действий</a>. Для этого поместите РНР-код (то, что расположено от <<b>?php </b> до <b>?> </b>) в нужное место страницы с меню и измените её название на mail.php.</p> <p>Кроме размещения самой формы обратной связи, желательно проверять правильность заполнения её полей посетителем. Это необходимо делать для того, чтобы вам не приходили пустые письма и ваш <a href="/ios/kreplenie-pochtovogo-yashchik-na-zabor-iz-profnastila-originalnye-resheniya-ulichnyi-pochtovyi-yashchik-svoimi.html">почтовый ящик</a> не забивался хламом, отсылаемым шутниками, любящими просто понажимать кнопку <b>Отправить сообщение </b>. О методах проверки заполнения формы обратной связи и защиты от спама рассказано в статьях "</p> <p>Создание форм – трудное и отнимающее массу времени дело. Это явно не то занятие, за которым Вы бы хотели просидеть целый рабочий день. В основном, формы используются для реализации обратной связи на сайте и лидогенерации в <a href="/life-hacks-for-ios/primery-prostyh-landing-page-primery-prodayushchih-lendingov-landing-page-vygody-i.html">Landing Page</a>. Более <a href="/life-hacks-for-pc/tegi-dlya-formy-v-html-neskolko-bolee-slozhnaya-forma-primer-polnaya-forma.html">сложные формы</a> часто используют для создания каких-либо анкет, опросников и пр. В ситуации, когда требуется много полей, настройка серверных скриптов займет очень много драгоценного времени. На помощь приходят saas-сервисы. С их помощью, используя встроенный конструктор, можно создать в <a href="/computers/kak-mozhno-zarabatyvat-million-v-mesyac-kak-samostoyatelno.html">кратчайший срок</a> форму любой сложности без <a href="/game/oblako-rezervnogo-kopirovaniya-sbros-nastroek-kak-vosstanovit-telefon-android-iz.html">особых усилий</a>. Если же вы не ищете легких путей, предлагаю использовать скрипт для создания форм, который был ранее опубликован на . <br> Многие хотят создавать надежные и удобные <b>веб формы </b> быстро, и явно не в ручную. Оказывается, что создание форм с помощью специально разработанного для данного дела конструктора происходит намного легче и быстрее. Они способны создавать за несколько кликов полезные и хорошо оформленные проекты. Правда, некоторые разработчики берут плату за пользование своим ресурсом, но зачастую это стоит того. К тому же она не настолько большая, чтобы особо повлиять на Ваш бюджет. Мы решили немного сэкономить Ваше время и составили список из <b>13-и самых лучших онлайн конструкторов форм </b>, наделенных огромным числом функций.</p><h4>Google Forms</h4>Несомненно, <b><a href="/game/kak-sdelat-anketirovanie-v-gugl-sozdaem-formu-dlya-anketirovaniya-v.html">Google Формы</a> </b> – это самый лучший и популярный сервис. Этот бесплатный <b>конструктор форм </b> автоматически помещает результаты в <a href="/reviews/formuly-v-elektronnoi-tablice-mogut-soderzhat.html">электронных таблицах</a> после ответов пользователя. Создание нужных форм облегчают наличием горячих клавиш и сохранением изменений в ваших <a href="/life-hacks-in-vk/rabota-s-xiaomi-mi-home---lichnyi-opyt-nastroika-nyuansy.html">личных настройках</a>. Все это помогает без проблем отсылать приглашение <a href="/life-hacks-for-ios/dlya-chego-lyudi-ispolzuyut-kompyuter-zachem-nuzhny-sverhbystrye-kompyutery-sposoby.html">нужным людям</a>, давать ответы по обычной <a href="/life-hacks-in-vk/bezopasnaya-elektronnaya-pochta-bez-slezhki-bezopasnaya-elektronnaya-pochta.html">электронной почте</a> или в <a href="/internet/odna-iz-krupneishih-rossiiskih-socialnyh-setei-socialnye-seti---chto-eto.html">социальных сетях</a>.<p><img src='https://i2.wp.com/postovoy.net/uploads/images/00/00/06/2015/07/02/d14ae1.jpg' width="100%" loading=lazy></p><h4>Wufoo</h4>Данный сервис также является одним из лучших онлайн <b>конструкторов web форм </b>, который способен всего за несколько минут решить все Ваши задачи. Являетесь ли Вы секретарем на предприятии или <a href="/ios/chem-zanimayutsya-it-specialisty-samye-vostrebovannye-specialnosti-v-sfere.html">IT- специалистом</a>, Wufoo поможет вам быстро собрать данные, не написав ни строчки кода.<p><img src='https://i1.wp.com/postovoy.net/uploads/images/00/00/06/2015/07/04/3de3a6.jpg' width="100%" loading=lazy></p><h4>Formstack</h4>Formstack – это отличный <b>онлайн конструктор веб форм </b> для пользователей сети, оснащенный всеми функциями для оптимизации. Он способен реализовать все Ваши маркетинговые идеи. Вручную набирать код в этом <b>конструкторе веб форм </b> не нужно. <a href="/game/kakie-ispolzovat-programmy-dlya-rezervnogo-kopirovaniya-dannyh-na-svoem.html">Данная программа</a> позволяет интегрировать форму на свой индивидуальный ресурс без особых познаний пользователя в деле программного обеспечения.<p><img src='https://i2.wp.com/postovoy.net/uploads/images/00/00/06/2015/07/04/7cbb16.jpg' width="100%" loading=lazy></p><h4>iFormbuilder</h4>FormBuilde является <a href="/life-hacks-for-windows/unikalnyi-servis-dlya-generacii-trafika-iz-vkontakte-chto-takoe-adalt-i-kak.html">уникальным сервисом</a>, на основе <a href="/internet/what-is-meant-by-cloud-computing-technology-what-are-cloud-services.html">облачных вычислений</a> он способен по всему миру собирать данные своим клиентам из <a href="/life-hacks/kak-sdelat-menyu-dlya-mobilnyh-ustroistv-mobilnaya-versiya.html">мобильных устройств</a>. Кроме того, данный <b>конструктор форм </b> может создавать такие элементы, как форму заявок, форму тестирования, форму заказа и подписки. Пользователи практически на ходу способны вводить данные и даже изменять многие параметры. Это идеальный инструмент для вашей работы.<p><img src='https://i0.wp.com/postovoy.net/uploads/images/00/00/06/2015/07/04/ccab96.jpg' width="100%" loading=lazy></p><h4>Formbakery</h4>Это платный, но очень эффективный сервис для создания простых и быстрых <b>форм </b>. Что от вас требуется – перетащить в рабочее поле <a href="/ios/sposoby-podklyucheniya-plansheta-k-internetu-podklyuchenie-s-pomoshchyu.html">необходимые элементы</a> (текстовые блоки, кнопки выбора нужных опций, флажки и другое), и ввести адрес, куда вы желаете отправить созданную форму. Генерируемый код, который Вы используете в проектах, читается легко, словно написанный не роботом, а человеком.<p><img src='https://i1.wp.com/postovoy.net/uploads/images/00/00/06/2015/07/04/5db4b9.jpg' width="100%" loading=lazy></p><h4>FormDesk</h4>Данный ресурс также позволяет создавать свои собственные <b>формы </b>, такие, как анкеты, форму регистрации, результаты различных исследований. Затем Вы можете выложить ее в интернет сайтах, использовать в социальных сетях или в электронной почте. Формы <b>FormDesk </b> расположены на <a href="/computers/specializirovannye-distributivy-linux-dlya-pochtovogo-servera.html">собственном сервере</a> и к ним легко перейти с помощью гиперссылки или фрейма. <p><img src='https://i1.wp.com/postovoy.net/uploads/images/00/00/06/2015/07/04/0de5dd.jpg' width="100%" loading=lazy></p><h4>Reformed</h4>Reformed - открытый и <b>бесплатный конструктор форм </b>, имеющий прекрасный дизайн, он позволяет очень быстро реализовывать и создавать различные <a href="/life-hacks-for-different-systems/interesnye-i-poleznye-arduino-proekty-chto-takoe-arduino-i-chto-s-nim-mozhno.html">полезные проекты</a> для вашего сайта.<p><img src='https://i0.wp.com/postovoy.net/uploads/images/00/00/06/2015/07/04/21d4e3.jpg' width="100%" loading=lazy></p><h4>Typeform</h4>Еще один <b>бесплатный онлайн конструктор форм </b>, который удобен для пользователей. Все, что необходимо для работы – это <a href="/life-hacks-for-windows/registraciya-icq-bez-nomera-telefona-est-li-sposoby-icq-registraciya.html">простая регистрация</a> в аккаунте, также Typeform совершенно не требует дополнительных средств.<p><img src='https://i1.wp.com/postovoy.net/uploads/images/00/00/06/2015/07/04/f8a47e.jpg' width="100%" loading=lazy></p><h4>FormsSmarts</h4>Данный <b>онлайн конструктор форм </b> позволяет создавать отличные <b>формы </b> и публиковать их. Создатели этого сервиса предоставляют несколько способов делиться формами с пользователями мировой сети и получать от них ответы. Большинство клиентов устанавливают их на собственном ресурсе и получают форму ответ по электронной почте или уже сведенные в таблицу серию ответов в виде отчета <b>Excel </b>. <p><img src='https://i0.wp.com/postovoy.net/uploads/images/00/00/06/2015/07/04/0a86bf.jpg' width="100%" loading=lazy></p><h4>MatchForm</h4>MachForm – это ресурс профессионального уровня, он позволяет создавать <b>формы </b> с максимальной совместимостью. Он работает не только на <a href="/life-hacks-for-pc/zapuskaem-android-na-netbuke-ili-nastolnom-kompyutere.html">настольных компьютерах</a>, но и подходит для работы на большинстве мобильных / <a href="/life-hacks-for-different-systems/skachat-flesh-pleer-poslednei-versii-na-android-ustanovka-flash-player-na-portativnoe-sensornoe-andr.html">сенсорных устройств</a> (<b> , Android </b> устройств). Все новые версии Form Builder позволяют легко создавать <b>формы </b> с помощью перетаскивания и вообще без программирования. Он интегрирован с основными платежными системами (<b>PayPal, Authorize.net, Stripe, Braintree </b>). Всего за несколько кликов мышки пользователь создаст прекрасную форму и сможет отправлять онлайн-заказы или принимать платежи.<p><img src='https://i2.wp.com/postovoy.net/uploads/images/00/00/06/2015/07/04/d59fc3.jpg' width="100%" loading=lazy></p> <script type="text/javascript">  </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> </article> <div class='yarpp-related'> <div class="related-items"> <div class="headline">Рекомендуем другие статьи</div> <div class="items"> <div class="item"> <a href="/reviews/kak-prazdnovat-letnee-solncestoyanie-kak-prazdnovat-letnee-solncestoyanie.html" class="item__link"> <img src="/uploads/d002eb7ee7f8ca5839027a5ec58464a2.jpg" width="220" height="170" alt="Как праздновать летнее солнцестояние Эммануэль Дагер: Исцеляющее солнцестояние" class="item__image" / loading=lazy> <div class="item__title">Как праздновать летнее солнцестояние Эммануэль Дагер: Исцеляющее солнцестояние</div> </a> </div> <div class="item"> <a href="/internet/programmirovanie-mikrokontrollerov-dlya-nachinayushchih-legko-i.html" class="item__link"> <img src="/uploads/cc080e5fe541f0a30c5c0fdf1654e93a.jpg" width="220" height="170" alt="Программирование микроконтроллеров AVR для начинающих Программирование контроллеров avr для начинающих" class="item__image" / loading=lazy> <div class="item__title">Программирование микроконтроллеров AVR для начинающих Программирование контроллеров avr для начинающих</div> </a> </div> <div class="item"> <a href="/life-hacks-for-ios/pochemu-planshet-ne-vyklyuchaetsya-chto-delat-zavis-planshet---chto-delat-vozmozhnye.html" class="item__link"> <img src="/uploads/5ee684d277379108d1f4344cff82eff8.jpg" width="220" height="170" alt="Завис планшет - что делать?" class="item__image" / loading=lazy> <div class="item__title">Завис планшет - что делать?</div> </a> </div> </div> </div> </div> </main> <aside class="sidebar"> <div class="section"> <div class="section__headline">Самое популярное</div> <div class="sidebar-items"> <a class="sidebar-item" href="/program/videonablyudenie-cherez-usb-kameru-besprovodnaya-usb-kamera-kupit.html"> <img src="/uploads/c5ad1ebb2eec805aceb765a476962621.jpg" width="75" height="75" alt="Беспроводная USB камера купить беспроводную мини камеру компьютера Цифровая камера с usb выходом" class="sidebar-item__image" / loading=lazy> <div class="sidebar-item__title">Беспроводная USB камера купить беспроводную мини камеру компьютера Цифровая камера с usb выходом</div> </a> <a class="sidebar-item" href="/life-hacks-for-pc/sem-putei-voiti-v-svoi-lichnyi-kabinet-stoloto-russkoe-loto-obman.html"> <img src="/uploads/ef0eb579f517d663a977671e7a51ce14.jpg" width="75" height="75" alt="Столото, Русское лото – обман?" class="sidebar-item__image" / loading=lazy> <div class="sidebar-item__title">Столото, Русское лото – обман?</div> </a> <a class="sidebar-item" href="/internet/v-chem-smysl-maininga-kak-rabotaet-maining-kriptovalyuty-process.html"> <img src="/uploads/e7ccb6fbe0cf024cedb045c511cf5fad.jpg" width="75" height="75" alt="Как работает майнинг криптовалюты Процесс майнинга криптовалют" class="sidebar-item__image" / loading=lazy> <div class="sidebar-item__title">Как работает майнинг криптовалюты Процесс майнинга криптовалют</div> </a> <a class="sidebar-item" href="/game/professiya-programmist-dlya-detei-konspekt-zanyatiya-v-detskom.html"> <img src="/uploads/9d0201b81adc610408d4507ccf6f9186.jpg" width="75" height="75" alt="Конспект занятия в детском саду «Программист – великий волшебник" class="sidebar-item__image" / loading=lazy> <div class="sidebar-item__title">Конспект занятия в детском саду «Программист – великий волшебник</div> </a> <a class="sidebar-item" href="/life-hacks-for-ios/aliekspress-prosit-ukazat-proverochnyi-kod-pri-vhode-chto.html"> <img src="/uploads/85f99bb622febba2f51f6ce46c571a8f.jpg" width="75" height="75" alt="Как пройти проверку при входе в аккаунт на Алиэкспресс?" class="sidebar-item__image" / loading=lazy> <div class="sidebar-item__title">Как пройти проверку при входе в аккаунт на Алиэкспресс?</div> </a> <a class="sidebar-item" href="/game/otklyuchenie-uslugi-mobilnye-podpiski-kak-uznat-kakie-platnye.html"> <img src="/uploads/ce520cb58283add55341e217e52bd195.jpg" width="75" height="75" alt="Как узнать какие платные подписки от мегафон подключены и как их отключить" class="sidebar-item__image" / loading=lazy> <div class="sidebar-item__title">Как узнать какие платные подписки от мегафон подключены и как их отключить</div> </a> </div> </div> <script> // <![CDATA[ $(document).ready(function() { var floatsidebar = $("#float-sidebar"); var offset = floatsidebar.offset(); var left = offset.left; var top = offset.top; var width = $("#float-sidebar").width(); var height = $("#float-sidebar").height(); $(window).scroll(function() { var scrollTop = $(window).scrollTop(); if (scrollTop >= top) { $('#float-sidebar').css({ left: left + 'px', position: 'fixed', top: "50px", width: width + "px" }); } else { $('#float-sidebar').css({ position: 'static', }); } }); }); // ]]> </script> <div id="float-sidebar"> <div id="laqybe1" style="height:500px;width:270px;" align="center"></div> </div> </aside> </div> <footer class="footer"> <div class="footer-left"> <div class="footer__logo"> <div class="footer__logo-sitename">radiobud.ru</div> </div> <div class="footer__copyright"> <p>© 2024 - radiobud.ru<br /></p> <p>Обзоры, лайфхаки, игры, программы</p> </div> <nav class="footer__nav-1"> <ul> <li class="menu-item type-post_type object-page "><a href="/sitemap.xml">Карта сайта</a></li> </ul> </nav> </div> <nav class="footer__nav-2"><ul> <li class="menu-item type-taxonomy object-category "><a href="/feedback.html">Контакты</a></li> <li class="menu-item type-taxonomy object-category "><a href="">Реклама</a></li> <li class="menu-item type-taxonomy object-category "><a href="">О сайте</a></li> </ul></nav> <div class="footer__counters"> </div> <div class="footer__note"></div> </footer> </div> </div> <script type='text/javascript' src='https://radiobud.ru/wp-content/themes/radiobud.ru/js/scripts.js'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.9.1'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "smooth_scroll":"1","visibility_show":"\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c","visibility_hide":"\u0421\u043a\u0440\u044b\u0442\u044c","width":"Auto"} ; /* ]]> */ </script> <script type='text/javascript' src='https://radiobud.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9.1'></script> <script async="async" type='text/javascript' src='https://radiobud.ru/wp-content/plugins/akismet/_inc/form.js?ver=4.0.2'></script> </body> </html><script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>