У нас осталась только одна страница, которую мы еще не переделали. Это страница Контакты. Здесь у нас помимо контактной информации будет расположена форма обратной связи. В MODx существует специальный сниппет для создания такой формы - eForm. Давайте сначала рассмотрим из чего вообще может состоять форма обратной связи.

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

2. Уведомление посетителя об отправке сообщения.

3. Форма отправленного сообщения, которое придет на почту.

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

Прежде, чем создавать чанк с шаблоном для формы обратной связи, давайте изучим код, которым описывается эта форма в нашем шаблоне. Открываем в Notepad++ файл contact.html который лежит в папке C:/xampp/htdocs/site/www/assets/templates/templatemo_250_chess/. Это будут строки со 135 по 159 включительно. Как видим, это контейнер с id="contact_form", в котором находится наша форма. Беря за основу этот код, создаем новый чанк form-tpl и добавляем необходимые нам плэйсхолдеры:

                <div id="contact_form">
           
                  <h3>Обратная связь</h3>        
[+validationmessage+]      
                  <form method="post" action="[~[*id*]~]">
                   
                        <input type="hidden" name="formid" value="Send" />
                        <label for="author">Ваше имя</label> <input type="text" id="author" name="author" class="required input_field" eform="Имя::1" />
                        <div class="cleaner_h10"></div>
                       
                        <label for="email">Email:</label> <input type="text" id="email" name="email" class="validate-email required input_field" eform="Адрес электронной почты:email:1" />
                        <div class="cleaner_h10"></div>
                       
                        <label for="otdel">Тема сообщения</label>
                        <select name="otdel" class="input_field">
                            <option value="1">Запрос информации</option>
                            <option value="2">Техническая поддержка</option>
                            <option value="3">Предложение</option>
                        </select>
                        <div class="cleaner_h10"></div>
                       
                        <label for="text">Текст сообщения</label> <textarea id="text" name="text" rows="0" cols="0" class="required" eform="Текст сообщения:html:1"></textarea>
                        <div class="cleaner_h10"></div>
                       
                        <p>Введите этот код:
                            <img src="[+verimageurl+]" alt="Код проверки" border="0"/></p>
                            <input type="text" class="vericodeform input_field" name="vericode" /><br /><br />
                   
                       
                        <input type="submit" class="submit_btn" name="submit" id="submit" value=" Отправить " />
                        <input type="reset" class="submit_btn" name="reset" id="reset" value=" Сбросить " />
                   
                  </form>

            </div>

Где [+validationmessage+] - отвечает за вывод сообщений об ошибке заполнения при отправке формы.
action="[~[*id*]~] - указывает, что обработчиком формы будет та страница, на которой вызван сниппет. Вместо [~[*id*]~] MODx подставит URL текущего документа.
<input type="hidden" name="formid" value="Send" /> указывает идентификатор формы, который мы укажем при вызове сниппета.
label accesskey - устанавливает доступ к элементам формы с помощью горячих клавиш.
eform="Адрес электронной почты:email:1" - описывает поле для ввода почтового адреса, указывает тип вводимых данных и делает это поле обязательным для заполнения. Вообще, шаблон для заполения этого параметра следующий: eform="[описание поля]:[тип вводимых данных]:[обязательное ли поле]:[сообщение об ошибке ввода]:[правило проверки ввода]". Но нам достаточно только трех значений. Аналогично этому параметру заполяется eform="Имя::1".
[+verimageurl+] отвечает за вывод капчи.

Создаем чанк с уведомлением посетителя об отправке сообщения

Создаем чанк thank-tpl и в его содержимое помещаем следующий код:

<strong>Спасибо, что воспользовались формой обратной связи на нашем сайте.</strong>
<p>Ваше сообщение будет рассмотрено в кротчайшие сроки, и, если оно требует ответа, Вы обязательно его получите.</p>
<p>Отправленная информация:</p>
<ul>
<li><b>Ваше имя:</b> [+author+]</li>
<li><b>Ваш e-mail:</b> [+email+]</li>
<li><b>Текст сообщения:</b> [+text+]</li>
</ul>

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

Создаем чанк report-tpl и в его содержимое помещаем следующий код:

<p>Это сообщение было отправлено посетителем по имени [+author+] с помощью формы обратной связи. </p>
<table>
<tr valign="top"><td><b>Имя:</b></td><td>[+author+]</td></tr>
<tr valign="top"><td><b>Email:</b>:</td><td>[+email+]</td></tr>
<tr valign="top"><td><b>Сообщение:</b></td><td>[+text+]</td></tr>
</table>
<p>Вы можете использовать эту ссылку для ответа: <a href="mailto:[+email+]?subject=RE:[+subject+]">[+email+]</a></p>

В этом чанке, как и в предыдущем, вся введенная пользователем информация передается с помощью плейсхолдеров вида [+author+]. При этом название каждого плейсхолдера совпадает со значением атрибута «name» соответствующего поля в чанке с формой обратной связи (name="author", name="email" name="text").

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

Создаем чанк с именем form и помещаем туда конструкцию:

[!eForm? &formid=`Send` &tpl=`form-tpl` &to=`info@site.ru,support@site.ru,requests@site.ru` &mailselector=`otdel` &report=`report-tpl` &thankyou=`thank-tpl` &vericode=`1` &subject=`Сообщение с моего сайта`!]

Где &formid=`Send`- идентификатор формы, который мы указывали в чанке form-tpl
&tpl=`form-tpl` - шаблон для формы обратной связи
&to=`info@site.ru,support@site.ru,requests@site.ru` - адрес Email для отправки информации
&mailselector=`otdel` - устанавливает поле формы, которое будет использоваться при выборе единственного адреса из списка адресов разделенных запятой (,) в параметре &to. В нашем случае это выпадающий список <select name="otdel"> в чанке form-tpl, где otdel принимает значения 1,2 или 3, в зависимости от выбранной посетителем темы.
&report=`report-tpl` - шаблон отправляемой информации
&thankyou=`thank-tpl` - сообщение выводимое после отправки данных
&vericode=`1` - включает код проверки. Шаблон должен содержать поле для проверки и плэйсхолдер [+vericode+].
&subject=`Сообщение с моего сайта` - тема отправляемого сообщения

Помещаем вызов формы обратной связи в шаблон

Создаем чанк contacty, в который помещаем следующий код:

        <div class="cleaner_h40"></div>
       
        <div class="two_column float_l">
           
                   <h6>Наш адрес</h6>
                ХХХХХХХХХХХХХХХХХХХХХХХХ <br />
                ХХХХХХХХХХХХХХХХХХХХХХХХ<br />
                ХХХХХХХХХХХХХХХХХХХХХХХХ<br />
                <br />
                Email: хххххх@хххххх.ххх</div>
               
                <div class="two_column float_r">
          
                <h6>Дополнительный офис</h6>
                ХХХХХХХХХХХХХХХХХХХХХХХХ <br />
                ХХХХХХХХХХХХХХХХХХХХХХХХ<br />
                ХХХХХХХХХХХХХХХХХХХХХХХХ<br />
                <br />
                Email: хххххх@хххххх.ххх</div>
       
       
            <div class="cleaner_h50"></div>
{{form}}

На странице Контакты помещаем вызов чанка contacty:

{{contacty}}

Изменяем стили

Находим в файле со стилями описание наших кнопок:

#contact_form form .submit_btn {
    margin-left: 108px;
    padding: 5px 10px;
    background: #cecece;
    border: 1px solid #888888;
}

Из-за того, что мы вставили русские надписи к кнопкам Отправить и Сбросить, они сдвинулись. Еще мне не нравится, что при наведении курсора на кнопку, вид курсора не изменяется, я хочу это исправить. За одно, давайте сделаем так, чтобы кнопка меняла цвет при наведении курсора. Ну и сдвинем капчу вправо. Итак, вместо описания стиля, который я привел выше мы вставим вот что:

#contact_form form .submit_btn {
    margin-left: 55px;  /*Изменяем левый отступ у кнопок*/
    padding: 5px 10px;
    background: #cecece;
    border: 1px solid #888888;
}
#contact_form form .submit_btn:hover {
    margin-left: 55px;
    padding: 5px 10px;
    background: #505050; /*Указываем цвет кнопки при наведении курсора*/
    border: 1px solid #888888;
    color: #fff; /*Меняем цвет текста*/
    cursor: pointer;    /*Изменяем вид курсора*/
}
#contact_form form img {
    padding: 0 0 0 90px; /*Сдвигаем вправо картинку с кодом*/
}

Если все сделали правильно, форма примет следующий вид:

MODx Evolution

Теперь пробуем заполнить форму и отправить письмо. Так как мы используем локальный сервер, все поступающие письма можно посмотреть в папке C:\xampp\tmp\sendmail\. Помните, мы создавали эту папку при установке XAMPP?

Можно задать свой список слов для генерации в капче, делается это на странице системной конфигурации Инструменты >> Конфигурация >> Пользователи >> Слова для генерации CAPTCHA-кодов:

MODx Evolution

На этом интеграция дизайна нашего сайта в MODx полностью завершена. Осталось выложить наш сайт на каком-нибудь хостинге. Этим мы займемся на следующем уроке.

При создании этого урока использованы материалы с сайта efimov.ws

Поделитесь ссылкой

Статистика

Яндекс цитирования
© 2011 - 2023 Школа MODX
Напишите нам в Telegram