Как сделать всё на одной странице?
На большинстве сайтов имеется страница "Контакты", на которой указывается определённая информация (это могут быть e-mail, телефоны, физический адрес, карта проезда, банковские реквизиты для оплаты и т.д.), а так же страница с формой обратной связи, при помощи которой пользователь может отправить вам (главному администратору) сообщение.
Страница "Контакты" является самым обычным материалом, который "привязан" к одноимённому пункту меню, а вот страница с формой обратной связи создаётся по-другому.
Вообще, в качестве формы обратной связи вы можете использовать различные расширения (например, с сайта Joomla.org), но можно использовать и возможности самой CMS. О том, как устанавливать и настраивать расширения уже было рассказано в предыдущих главах, поэтому в этой главе будет рассмотрен вариант использования возможностей CMS Joomla для создания страницы с формой обратной связи.
Для начала создаётся контакт под названием "Обратная связь". Для этого в главном меню панели управления необходимо выбрать Компоненты > Контакты, затем Создать . На открывшейся странице контакта введите название, например, "Обратная связь", и введите адрес в поле "E-mail". На данный момент укажите адрес, который вы использовали при создании сайта как адрес главного администратора; в последствии, если вы захотите, вы сможете создать почту для сайта типа info@my_site.ru и затем указать именно этот адрес. Если есть желание, вы можете так же вставить какой-либо рисунок в поле "Изображение". Сохраните и закройте созданный контакт.
Далее создайте пункт меню с соответствующим названием, где в качестве типа пункта укажите "Контакт", а в поле "Выбор контакта" выберите только что созданный. Затем перейдите на вкладку "Параметры отображения контактов" и выставите необходимые значения для всех имеющихся здесь полей. На вкладке "Параметры почты" проверьте, что бы в поле "Показывать форму обратной связи" было установлено значение "Показать", после чего сохраните и закройте.
Кликните на созданный пункт меню; у вас должна открыться страница с формой обратной связи:
Теперь осталось с помощью таблиц CSS настроить внешний вид (о настройках читайте ниже) и проверить работоспособность формы (если вы создаёте сайт на компьютере, отключенном от Интернета, вы сможете это сделать только после переноса сайта на хостинг). Для проверки просто отправьте любое сообщение; оно должно быть доставлено на указанную почту.
Подключение CAPTCHA
Несмотря на то, что это форма обратной связи, CAPTCHA всё равно нужна. Так как соответствующий плагин уже установлен, необходимо только его подключить; это можно сделать при помощи Настроек. Через главное меню откройте Компоненты > Контакты и в правом верхнем углу нажмите кнопку "Настройки". На открывшейся странице выберите вкладку Форма и в поле Включить CAPTCHA выберите название соответствующего плагина, после чего сохраните и перезагрузите страницу обратной связи: теперь страница должна быть защищена.
Если после внесённых изменений вы не видите результат на страницах сайта, необходимо очистить кеш браузера и (возможно) сайта.
Очистка кеша Яндекс.Браузера:
Ctrl+Shift+Delete>Очистить историю
Для очистки кеша сайта кликните в админке:
Система > Очистить весь кеш >
Удалить все
Как сделать всё на одной странице?
Если вы заходили в "Контакты" на этом сайте, то наверняка обратили внимание, что эти две страницы объединены в одну (рис.238). Как это сделано?
На самом деле ничего сложного здесь нет! Это страница создана как форма обратной связи (см. выше), а вот текст (вместе с логотипом) созданы как отдельный файл в редакторе изображений, после чего данный файл был установлен в поле "Изображение" (как изображение контакта).
Оформление страницы
Как и все остальные страницы сайта, оформление происходит при помощи таблиц CSS. Вот код, который был внесён в файл stl_tpl_wds_v1.css:
** /* Оформление формы обратной связи */
** .contact .page-header h1 { /* основной заголовок */
** margin: 0 0 0px;
** }
** .contact.kontos h3 { /* скрытие ненужного заголовка */
** margin: 0 0 0px;
** font-size: 2px;
** height: 5px;
** text-decoration: none;
** color: white;
** }
** .thumbnail.pull-right { /* оформление рисунка */
** margin: 0 26px 0 0;
** box-shadow: 0 1px 3px rgb(255,255,255); /* удаление окантовки */
** border-bottom-color: rgb(0,255,255);
** border-top-color: rgb(255,255,255);
** border-left-color: rgb(255,255,255);
** border-right-color: rgb(255,255,255);
** border-radius: 0px;
** }
** #contact-form fieldset legend { /* оформление информации над формой */
** width: 714px;
** margin-bottom: 10px;
** margin-left: 10px;
** border-bottom-color: rgb(0,255,255);
** font-size: 16px;
** font-family: Georgia;
** font-style: italic;
** color: gray;
** }
** textarea#jform_contact_message { /* установка размера текстового поля */
** width: 380px;
** }
** textarea#jform_contact_message:hover, textarea#jform_contact_message:active {
** border-color: rgb(0,255,255); /* настройка активированного текстового поля */
** }
** button.btn.btn-primary.validate { /* оформление кнопки */
** background-color: rgb(0,255,0);
** margin-left: 90px;
** }
Итак, страница создана. Если всё сделано правильно и всё работает - переходите к следующей главе!
