Главная » MODx- профессиональный инструмент для разработки сайтов » Создание контакт-формы с помощью eForm в MODx Evo
    РейтингРейтингРейтингРейтингРейтинг

Создание контакт-формы с помощью eForm в MODx Evo

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

Возможностей сниппета:

1. Форма проверки с помощью мощных правил проверки
2. Защита скрытых полей от взлома
3. CAPTCHA поддержка
4. Поддерживает HTML
5. Гибкая настройка 
6. Уведомление для мобильных устройств
7. Автоматическое отправление почты
8. Поддержка CC и BCC полей

Приступим

1. В дереве документов MODX Evolution откройте ресурс Контакты.

На вкладке «Настройка страницы» снимите флажок напротив «Использовать HTML-редактор».

В поле «Содержимое ресурса» на вкладке «Общие» вставьте вызов сниппета eForm со следующими входными параметрами:

[ [ eForm?

&formid=`contact-form`

&tpl=`contact-form`

&to=`red-book-cms@yandex.ru`

&report=`contact-submit-message`

&thankyou=`contact-report-message`

&vericode=`1`

 ] ]

    параметры:

    • formid — идентификатор формы;
    • tpl — имя чанка контактной формы;
    • to — ящик-электронной почты на который будут отправляться письма;
    • report — сообщение о результате отправки письма через контактную форму;
    • thankyou — шаблон письма, отправленного с контактной формы;
    • vericode — использовать капчу (1) или нет (0).

     2. Создаем  важный элемент — форму обратной связи:

    <form id="contact-form" method="post" action="[ ~331~ ]">

        <input type="hidden" name="formid" value="contact-form" />

        <br />

        <label for="name">Ваше имя:</label><br />

        <input type="text" id="name" name="name" eform="Ваше имя::1" />

        <br />

        <label for="email">Электронная почта:</label><br />

        <input type="text" id="email" name="email" eform="Email:email:1" />

        <br />

        <label for="message">Ваше сообщение:</label><br />

        <textarea id="message" cols="20" rows="3" name="comments" eform="Сообщение:html:1"></textarea>

        <br />

        <label for="vericode">Введите код с изображения:</label><br />

        <p><img src="[ +verimageurl+ ]" alt="Проверочный код" /></p>

        <input type="text" id="vericode" name="vericode" />

        <br />

        <button type="submit" name="submit" id="submit">Отправить</button>

    </form>

    • [ +validationmessage+ ] — выведет сообщение о результате отправки письма;
    • [ ~331~ ] — синоним / урл текущей web-страницы;
    • [ +verimageurl+ ] — капча.

    Конструкции вида eform="Ваше имя::1" обозначают привязку к eForm-полям.

    3. Чанк contact-report-message:

    <div>

    <p>Спасибо, что воспользовались формой обратной связи на моём сайте.

    Ваше сообщение будет рассмотрено в кратчайшие сроки, и если оно

    требует ответа, Вы обязательно его получите.</p>

    <h4>Была отправлена следующая информация:</h4>

    <p>

    <strong>Ваше имя:</strong> [ +name+ ]<br />

    <strong>Ваш e-mail:</strong> [ +email+ ]<br />

    <strong>Текст сообщения:</strong><br /> [ +comments+ ]

    </p>

    </div>

     

    Посмотрим как то выглядит:

    • [ +name+ ] — поле имени / никнейма отправителя;
    • [ +email+ ] — поле email, эл. почты;
    • [ +comments+ ]  — поле текста сообщения.

    4. Чанк contact-submit-message:

    <p>Это сообщение было отправлено посетителем по имени с помощью формы обратной связи. </p>

    <table>

    <tr valign="top"><td><b>Имя:</b></td><td>[ +name+ ]</td></tr>

    <tr valign="top"><td><b>Email:</b>:</td><td>[ +email+ ]</td></tr>

    <tr valign="top"><td><b>Сообщение:</b></td><td>[ +comments+ ]</td></tr>

    </table>

    <p>Вы можете использовать эту ссылку для ответа: <a href="mailto:[ +email+ ]?subject=RE:[ +subject+ ]">[ +email+ ]</a></p>

    Вот собственно и все, контактная форма готова! 


     


     

    css template

    Не забывайте написать ваш комментарий, понравилась ли статья. От вас пару слов, а мне — признание поисковых систем, что пишу нормальные человеческий статьи. Заранее спасибо вам!