Урок 9. Создание контакт-формы с помощью FormIt
Итак сегодня мы начинаем наш 9 урок MODX Revolution для новичков. Сегодня мы рассмотрим как создать простую контакт форму на нашем вебсайте используя сниппет FormIt. В предыдущем уроке мы ознакомились с работой Wayfinder. Научились делать вывод динамического меню с этим сниппетом. Сегодня опираясь на некоторые ваши знания о сниппетах попытаемся разобраться со сниппетом FormIt, урок будет довольно-таки длинным, поэтому сразу настраиваемся на интересную и плодотворную работу.
Что такое FormIt?
FormIt – это сниппет, который позволяет строить динамические формы всередине MODX Revolution. Если вы используете MODX Evolution, то вы возможно уже использовали eForm для генерирования и обработки своих форм. FormIt – это MODX Revolution эквивалент сниппета eForm, но это абсолютно иной сниппет.
Почему использовать именно FormIt?
Есть много причин использования форм на вашем вебсайте, основной из них является создание интерфейса контакта или связи. Другими являются захват фокуса, ввод информации и т.д. Вы можете использовать FormIt для любых из этих целей, я же имею опыт использования этого сниппета лишь для создания контакт-форм и именно это мы рассмотрим на нашем уроке.
Загрузка и установка FormIt
Знакомый нам по предыдущим урокам процесс, здесь я не буду останавливатся. Думаю у вас прекрасно пройдет установка и без объяснений.
Подготовка шаблона
Я надеюсь, что сейчас вы уже прошли предыдущие уроки и портировали шаблоны внутренних страниц в вашем MODX сайте. Если вы используете тот же шаблон что и я, то вы увидите, что страница контактов является php страницой с PHP скриптами. Если вы использовали этот шаблон для построения статического сайта, то это будет как раз кстати, так как вы будете использовать для построения вашей формы существующий PHP код. В то же время, так как мы портируем наш шаблон в MODX, то нам не нужен этот код PHP, так как сам MODX разберется с построением всех наших форм. Всё, что нам нужно, – это HTML код формы и затем мы используем FormIt, который сделает всю остальную работу.
Посмотрите на статическую страницу контактов, которая идет вместе с нашим шаблоном:
Нашей задачей является портирование этой функциональности в MODX так, чтобы контакт форма сохранила свой внешний вид и вывод, но работа её полностью осуществлялась MODX. Ну что ж, начнём…
Первое, что необходимо сделать – это убрать HTML/CSS код и портировать его в MODX, если вы это уже не сделали. Так как моя контакт страница – это на самом деле PHP скрипт, то я просто открыл эту страницу в браузере и посмотрел исходный код. Это позволило мне увидеть простой выводимый HTML без кода PHP. Далее я скопировал данный код и вставил его в MODX для формирования шаблона моей страницы контактов. Дальше я по обычной схеме использовал несколько чанков для упрощения работы, то как мы уже делали на предыдущих уроках. И вот что у меня получилось:
Я сохранил этот шаблон под названием 7in1-contact и назначил его шаблоном страницы контактов.
Вы узнаете некоторые из чанков (шапка и подвал) из наших предыдущих уроков, а также появилось несколько новых чанков. Я укажу вам их для просмотра, они будут полезны тем, кто использует этот же шаблон, что и я.
Важной особенностью здесь является та, что я заменил текст Contact в h2 тегах чанком [[*pagetitle]], который всплывет в вашей памяти, если вы внимательно прошли мои уроки.
Я собираюсь еще обработать этот шаблон и извлечь текст и информацию о физическом адресе оттуда и внести ее в основную область контента или в переменные шаблона, а также вставить в боковину (сайдбар кто не понял) редактируемые области.
Но так как мы решили вначале урока сосредоточиться именно на форме, то в данный момент я оставлю в покое шаблон и доберусь до него чуть позднее. Так что это просто ремарка, чтобы вы понимали в каком направлении нужно двигаться. Также пока не обращайте внимание на форму логина в сайдбаре, мы к этому вернемся в следующих уроках, когда будем разбирать сниппет Login, а сейчас оставим всё как есть в отношении логина.
Приступим к нашей форме. Для начала я заменил HTML код для формы, который содержался между div тегами “contact-wrapper” и заменил его тегом [[*content]]. Это значит, что всё в основном поле контента появится в моей странице контактов на этом месте. Поэтому сейчас страница контактов будет иметь такой вид:
Видно, что там где должна быть форма, сейчас находится текст, который я вставил в область контента страницы контактов при её создании. Как видно на странице этот текст заключён в светлобежевый контейнер.
Как использовать сниппет FormIt
Итак, чтобы FormIt заработал, вам необходимо разместить вызов сниппета и HTML код формы в месте контакт формы. Если вы используете eForm сниппет MODX Evolution, то вам необходимо создать tpl шаблон для вашей формы, а затем вызвать его в сниппете, но при использовании FormIt вам не нужно вызывать форму в сниппете, вместо этого вы размещаете форму после вызова сниппета.
Давайте взглянем на вызов сниппета. Документация FormIt официального сайта MODX содержит отличный пример формы контакта и мы модифицируем его и используем в нашем случае. Будет полезно почитать документацию по этой ссылке http://rtfm.modx.com/display/ADDON/FormIt
Первое, что вы видите, когда смотрите на документацию – это то, что вам необходимо определить хуки вашего FormIt вызова. Хуки – это скрипты, которые срабатывают при вызове вашего сниппета. Вы можете связывать их вместе, но важно знать, что они исполняются последовательно и если один выдаст ошибку, то не сработают и остальные. Существуют предхуки и обычные хуки, но сейчас нас будут интересовать только нормальные хуки, которые запускаются после подтвержения и обработки формы. Вы можете создать собственные пользовательские хуки, но пока будем использовать обычные хуки.
Первый необходимый хук, который посылает электронную почту – это email и он имеет несколько параметров задокументированных здесь (http://rtfm.modx.com/display/ADDON/FormIt.Hooks.email). Выберите нужные для создания формы контактов параметры. Давайте сформируем наш вызов сниппета:
Как видно мы использовали вызов сниппета с одним хуком – email, и определили для него три параметра &emailTpl, &emailSubjectи &emailTo. Убедитесь что параметру &emailTo вы присвоили ваш email адрес вместо показаного в примере me@myemailaddress.com.
Параметр emailTpl определяет чанк, который содержит шаблон для сообщения высылаемого формой. Перед созданием этого чанка нам нужно добавить форму, которую будет заполнять пользователь. Как я уже сказал до этого, мы будем использовать код HTML для формы, который содержался в нашем шаблоне и модифицируем его для работы с вызовом нашего сниппета FormIt call. Сырой код выглядит вот так:
Нам нужно немного изменить эту форму, чтобы FormIt мог ее обработать. Первое, что мы сделаем – это поменяем поменяем действие, чтобы оно указывало на текущую страницу, так как именно здесь находиться вызов сниппета FormIt. Мы делаем ссылку на текущую страницу используя синтаксис MODX Revo: [[
[[*id]]]]. Если вы посмотрите внимательно на этот вызов, то увидите то, что внутренний блок – это просто тег для ID поля: [[*id]] и внешняя часть – это тег для привязки url, например: [[
Во-вторых, поменяем форму вложив в соответвтвующие FormIt заполнители в значения атрибутов каждого элемента поля для замены статических битов.
Результат выглядит приблизительно так:
Быстрый способ это сделать можно сравнив вашу контактную форму с формой представленной в документации FormIt. Также вы можете начать с формы в документации и в ней просто поменять классы для соответсвия вашей форме.
Далее разместите вызов сделанного нами сниппета в области контента вашей страницы Contact, а далее вставьте ваш код формы после вызова сниппета. Область контента должна содержать:
После сохранения превью формы выглядит вот так:
Отлично, форма выглядит в точности как оригинал. Но нам нужно протестировать её и посмотреть как MODX делает всю работу. Перед тестированием давайте создадим сообщениее, которое будет отправлено получателю с вебсайта. Этот чанк emailTpl мы обозначили в нашем FormIt вызове.
Мы используем заполнители для отправки необходимой информации из формы и мы ссылаемся на них, используя имена соответствующих полей. В моем случае я хочу знать все детали и контактную инфомацию введённую в форму. Поэтому я создал чанк sentEmailTpl и добавил к нему следующее:
Из того, что мы уже изучили вы можете догадаться что произойдет. Сниппет FormIt и парсер MODX возмёт значения из контакной формы и вставит их в заполнители в почте, которую я получу.
Теперь давайте протестируем нашу контактную форму. .
Проверим почту и увидим, что получено сообщение:
Вы видите, что введенный текст в поле параметра тема сниппета FormIt оказалась строчкой нашей строчкой темы.
Давайте откроем сообщение и увидим были ли заменены корректно наши заполнители действительным содержимым формы:
Единственной вещью, которую я заметил – это то, что я забыл добавить закрывающую скобку после (ext в моем шаблоне. Остальное выгдядит отлично и форма работает.
Добавление проверки
Следующей вещью, которую вы заметите – это то, что форма имеет поля, которые нужно обозначить как «обязательные для заполения», такие как: имя, имейл и комментарий. Дополнительно имена должны быть длинной более чем две буквы. Мы добавляем проверку к нашей форме, используя свойство &validate (смотрите ссылку в конце записи). Существует несколько встроенных валидаторов и мы будем использовать их в нашем вызове. Отмечу, что валидаторы могут быть связанными, поэтому если вам нужно проверить несколько вещей в одном поле, например, имя обязательно к заполнению И оно должно быть больше двух букв, то вы связываете эти два валидатора вместе. Поэтому для поля имя, первым шагом будет проверка наличия имени:
Теперь добавим второй валидатор:
Важно отметить, что в подобных случаях, когда у вас в конце строчки две обратных кавычки, то отделяйте их пробелом.
Замечание!…то бишь с соединёнными валидаторами, которые передают параметры, вы можете сделать так:
Отлично, давайте продолжим и добавим проверку в наш вызов FormIt.
Теперь же, если какой-нибудь Вася Петров пытается послать сообщение и вместо своих имени и фамилии ставит инициалы, то форма выдаст ошибку:
Для вывода ошибок вам необходимо воспользоваться чанком вывода ошибки работы спиппета FormIt:
[[!+fi.error.attibute_name]], где attribute_name – имя атрибута вашей контакт формы.
В контакт-форму для вывода ошибки в таком случае необходимо вставить запись вида:
Возле каждого атрибута, который мы проверяем – подвергаем валидации.
Если вас интересует откуда появились данные сообщения, то они закрепленны в Lexicon за formit. Зайдите в System->LexiconManagement, и далее поменяйте в выпадающем списке “core” на “formit” и далее вы увидите эти сообщения. Там вы можете поменять их либо же добавить свои собственные.
Мы можем продолжить и создать пользовательский валидатор для поля номера, но это тема другого урока.
Борьба со спамом
Теперь мы знаем как работает наша форма и мы получаем сообщения и проверка поля работает. Осталось выяснить как же бороться с попытками ботов высылать спам через нашу форму. Сниппет FormIt имеет два встроенных способа решения данной проблемы. Одна – это spam хук и вторая – это reCaptcha хук.
Спам хук просто проверяет поля, которые вы настроили согластно спам фильтра через http://www.stopforumspam.com/. Если они совпадают, то тогда высвечиваетсчя ошибка напротив поля(ей) и сообщение просто не посылается. Больше вы сможете почитать об этом здесь: http://rtfm.modx.com/display/ADDON/FormIt.Hooks.spam. Мы будем использовать значения по умолчанию для спам хука, который будет проверять поле имейл адреса.
Таким образом в нашем параметре хуков в FormIt добавим спам хук:
Хук reCaptcha работает на базе the reCaptcha service для обеспечения поддержки вашей формы. Для использования reCaptcha вам вначале необходимо иметь бесплатный аккаунт на http://www.google.com/recaptcha. После создания аккаунта добавте домен вашего сайта и вам выдадут два ключа: частный ключ и публичный ключ. Вы можете использовать эти ключи на ваших доменнах либо субдоменнах. Если вы создаете глобальный ключ, то вы можете использовать его на множестве доменов.
Теперь необходимо ввести эти два ключа в системных настройках для сниппета formit. Зайдите в System->System Settings, и в выпадающем списке вместо core выберите formit.
Перед вами появятся три поля, одно для частного ключа, одно для публичного и одно задаст запрос о том, хотите ли вы использовать SSL. Введите ключи от reCaptcha в эти два поля:
Отлично, теперь можно добавить рекапча хук к нашему вызову FormIt:
Замечание!Чтобы рекапча появилась в нашей форме, нам необходимо добавить заполнители в наш код формы. Давайте преейдем на страницу контакта и добавим заполнители в том месте, где вы хотите, чтобы появилась рекапча.
Теперь моя форма выглядит вот так:
Перенаправление на страницу успешного выполнения
Сейчас форма сделана так, что как только сообщение успешно послано, то пользователь переходит на пустую форму контакта. Мы можем это поменять так, что пользователь отсылается на страницу, которая показывает, что сообщение успешно отослано. Чтобы это сделать мы используем хук редиректа. Нам нужно определить на какую страницу должен быть перенаправлен пользователь и делаем это используя параметр redirectTo и добавляем что-то типа &redirectTo=`123`, где 123 это идентификатор ID страницы куда будет перенаправлятся пользователь. Я просто добавлю хук в конце списка хуков и добавлю параметр redirectTo:
После успешного выполнения формы, посетитель сайта будет отослан на страницу с ID of 10, которая является thank you странице (я создал ее и скрыл от меню).
Создание автоответчика
Последний хук о котором мы поговорим в даной записи – это хук автоответчика FormItAutoResponder hook, аон просто отсылает автоответ отсылателю комментария. Этот хук имеет несколько свойств (http://rtfm.modx.com/display/ADDON/FormIt.Hooks.FormItAutoResponder) но мы используем лишь некоторые из них в нашей форме. Вначале мы созданим шаблон содержащий имейл для обратной отсылки на имейл. Это единственное необходимое для заполнения поле. Я создал чанк с названием autoResponseTpl и добавил следующие строки:
Как вы видите я снова использовал заполнители так же, как и до этого в случае с sentEmailTpl. Теперь нужно добавть хук FormItAutoResponder и его свойства к вызову сниппета FormIt как показано ниже:
Как вы видите выше я добавил не только необходимые свойства, но и несколько доступных для заполнения. Важно отметить реквизит &fiarToField который я определил как contact_email. Это важно, потому что если вы не установите его по умолчанию в “email” но ваше поле почты может иметь другое имя, как в моём случае.
Я протестирую эту форму отсылая сообщение, используя один из моих имейл адресов. Когда я проверю этот адрес, я увижу, что получил автоответ от формы с темой, как я определил в реквизите &fiarSubject и отослал от имени указаном в реквизите&fiarFromName:
Как вы видите по полученному письму – оно соответстует тому, что мы задали в нашем чанке автоответчика
Заключение
В этом уроке мы научились как использовать сниппет FormIt для обработки контакт формы в сайте MODX Revolution. Мы исследовали различные хуки и основы их использования. Теперь мы имеем функционирующую форму полностью под управлением MODX, но по внешнему виду совпадающей с нашим шаблоном. Еще много чего можно сделать с FormIt и мы будем более детально исследовать данный сниппет в следующих уроках.
Как домашнее задание – можете исследовать сниппет FormIt Retriever и узнайте, сможете ли вы интегрировать его в вашу контакт форму.
Здравствуйте! Проясните, пожалуйста, где можно отредактировать текст сообщения, который выводится при ошибке в форме контактов?
ViktorminatorЗдравствуйте! Заходите в менеджере Модекса в Lexicon (Управление словарями) Namespace: FormIt Language:ru. Выбираете нужную фразу и изменяете на свою. Чтобы сообщения об ошибках были на русском (или другом языке) нужно поменять в системных настройках cultureKey на ru (или другой).
в вызове снипета у вас соединённые валидаторы с двумя тильдами, а перед этим с кавычками. это опечатка или так надо? (поправил комментарий, так как кавычки убивают Quip - Viktor)
ViktorminatorПометил большим жёлтым квадратом. Так надо!
С тем, что вы описали, быстро разобрался, спасибо за хорошие статьи. Но пока не понял, как сделать следующее: сверху у меня меню - одноуровневое - сделал, слева - сайдбар, примерно так должен выглядеть: Search ------ [_______] [Search]
Title1 (depended on page displayed) link1 (set1) link2 (set1) Title2 (alse depended on page displayed) link1 (set2) link2 (set2) .
Еще возникла проблема. Home страничка имеет некий (его можно поменять где-то? это значение не зависит от меню ордера). При генерации меню на эту страничку формируется ссылка вида "href" (без '=' и ссылки). Попробовал Froze URI установить галку - не помогло. Куда копать, не подскажете?
Viktorminatorid=1 - это ID ресурса, который МОДекс автоматически назначает для каждого создаваемого ресурса. Покажите какой вызов Wayfindera для генерации меню? Если вам нужно выдавать элементы меню в зависимости от показываемой страницы, то рекомендую посмотреть Output filters в rtfm.modx.com
ViktorminatorСтранно - вроде ничего особенно с вызовом. Почему он не выдаёт ссылки на ресурсы - не пойму. Они у вас опубликованы и не скрыты?
Не выдавал только ссылку на первую страницу. У меня еще косяк был - site_url не был заполнен, и поэтому совсем пустая ссылка была. Сейчас там адрес сайта, но я так и не понял, почему не используется resource alias так же, как для других ссылок.
firstВиктор, все понятно кроме ошибок. Вот сейчас вылезает красная надпись на английском "Please enter a valid email adress". Хотя в словаре formit есть и русские сообщения "Пожалуйста, введите правильный адрес электронной почты.". Может можно их как-то вывести по умолчанию на русском? Или я что-то недопонял?
ViktorminatorВыставьте в менеджере в системных настройках ключ cultureKey в ru
firstУже стоит ru - я же коменты читаю ), а надписи все равно на инглише. Причем если меняешь английскую надпись на русскую - вылезает все та же английская надпись. Кеш обновляю. Система > Управление Словарями > Пространство имен: formit, Тема: default, Язык: .
webmasterА если надо вывести Success без редиректа, что довольно часто и применяется?
АлександрЕсли обязательное поле не прошло проверку, то выскакивает ошибка, типа: "поле обязательно к заполнению" и самое главное: все поля очищаются! Представляете, если их 30-40? Далеко не каждый соберется с духом второй раз заполнить.
Viktorminator АлександрА так хотелось без JS реализовать. :-)
webmasterА если поле не обязвтельное и не заполнено, то приходит в письме как [[+contact_message]] С этим как бороться?
АлександрУ Вас в блоге комментарий добавляя такого не происходит
Александр"А если поле не обязвтельное и не заполнено" значение по умолчанию задайте: value=" ".
МаксимДелал форму по вашему уроку, все получилось, спасибо. но если в настройкой страницы ставишь "Контейнер", форма перестаёт работать. Как это можно исправить, хотелось бы использовать страницу как контейнер.
ViktorminatorПопробуйте поместить форму в чанк и вставьте вызов чанка в вашу страницу-контейнер, не уверен, что поможет, но попробуйте.
АлексейСпасибо за уроки! Возник вопрос: Есть ли какая нибудь возможность регулирования резмеров reCaptcha?
ВалерийСпасибо за уроки, все предельно понятно и доступно изложено. Текст основного сообщения из формы отображается в почте без форматирования, одним абзацем. Т.е. в нем отсутствуют тэги конца строки. Подскажите как исправить ситуацию?
АнтонПоскажите, как переслать на страницу, отличную от redirectTo, в лучае неправильно введённой капчи?
Viktorminator&redirectTo=`RANDOM()` если не сработает, тогда [[!random]], где random это сниппет, который выдаёт случайный id из вашего набора вариантов.
ВиталикА как сделать, что бы красным выделялись поля для ввода, если поле не прошло проверку.
Константин"А если надо вывести Success без редиректа, что довольно часто и применяется?"
Чтобы это сделать используйте параметр successMessage (http://rtfm.modx.com/display/ADDON/FormIt пункт 13). И тогда сообщение будет выводится прямо на странице.
АндрейСпасибо! А как сделать чтобы если ввел неверную reCaptcha, информация с полей не стиралась? а то сразу все удаляется. И что дает ssl?
ViktorminatorЯ перефразирую ваш вопрос так: "Что делать, чтобы после запроса POST данные форм оставались заполненными?" Ответ: Использовать AJAX. Либо заменить каптчу на более простую, что я и собираюсь сделать ;).
АндрейДа лучше поставить другую.. сложноватая. Вот еще проблема возникла с input checkbox. Если выбирают несколько вариантов - на почту приходит только один, последний. Как это исправить?
АндрейРешил это тем, что дал разные имена, и просто перечислил каждый и каждый отдельно. [[+one]], [[+two]], [[+three]], [[+four]], [[+five]]. Там проще всего..
МихаилЧто то я не понял куда с=вставлять код формы. Создавать новый чанк или как .
МихаилПомогите пожалуйста Делаю все по вашему уроку и ничего не получилось Вот тут застрял Может в revo 2.2.1 изменен синтаксис . Тогда на какой ?? Убираю ! из вывода снипетта снипет начинает выводиться но попрежнему везде в полях остается такие значения [[!+fi.contact_message]]что делать помогите
Доброе время суток. Спасибо Вам, замечательные уроки. Дошёл уже до этого, 9. Пока всё пучком Только проблема возникла. Я так думаю что на хостинге. Уже который раз я теряю доступ в админку. Белый экран и всё. Сайт работает. Ошибок нет. Но в одминку не могу войти.Ни другим браузером, ни с другого компутере. Подскажите, как починить это? Всё настрою, под себя шаблоны сделаю, уроки Ваши пройхожу. И тут хоп.. Трудность в том, что хостинг у буржуев,у них уже предуставновлен MODx revo 2.2.1 Сам я не могу поставить MODx. По соображениям безопасности, якобы. И теперь я несколько раз уже прошу через переводчика его переустановить.Это не сложно, но время теряется и все настройки мои тоже теряются. Как то можно починить вход в админку? FTP доступ есть, к базе - нет
ИгорьЗдравствуйте, как вы сделали выделение полей при ошибке.
ViktorminatorНе важно как я делал, сейчас я использую formalize.me для создания форм. И там же есть проверка полей. Теперь для FormIt основная функция - это только отправить сообщение. Хуки становятся не нужны.
КонстантинДобрый день. Столкнулся с проблемой. На одном из хостинков FormIt ни в какую не хочет работать - просто не отправляет письма, проверял на двух сайтах этого хостинга. На другом хостинге у меня все ок. Подскажите куда копать, может в тех потдержку написать? из-за чего это может быть и какой найти выход, сайт без формы обратной связи быть не может. Или это может быть каким-то косяком в настройке движка modx? Спасибо
ViktorminatorДа. Обратитесь в техподдержку.
Константин:Обратился, вот что мне написали: Здравствуйте. На хостинге доступен php mail. Ваше форма не выдает никаких ошибок. Включите отображение ошибок. . :( Я намучился с этим уже
ScoprSatex"Мы используем заполнители для отослания столько сколько нужно информации из формы и мы ссылаемся на них используя имена нужных полей. В моем случае я хочу знать все делали и контактную инфомацию введённую в форму. Поэтому я создал чанкsentEmailTpl и добавил к нему следующее:"
Вы бы переписали предложение, выглядит ужасно. Я только раза с 4го смог понять "В моем случае я хочу знать все __делали__ и контактную инфомацию введённую в форму."
ViktorminatorСпасибо за замечания. Долго смеялся =). Исправил то, что скорее всего писалось глубокой ночью перед сном =)
НастяЗдравствуйте. Так как не нашла урока по использованию Quip,то решила задать вопрос здесь, по скольку вижу, что на сайте используется именно эта форма.
Вопросы: 1. Не могу разобраться где менять оформление формы, которая отображается на странице. 2. При выводе комментария дата отображается некорректно(русские буквы). Кодировка utf-8 стоит. В чем дело, не пойму. 3. при нажатии на "Ответить" отсылает на главную страницу. Тоже не нашла, где значение менять (искала redirectTo).
Буду благодарна, если поможете разобраться. Спасибо.=)
НастяЕще раз, здравствуйте. забыла добавить: установила formit, все сделала как сказано, но письма не отправляются. пользуюсь xamp-ом. Может ли быть причина в localhost? Может он не пропускает? Форма вроде как обновляется после нажатия "Отправить", затем очищается, и тишинаа. Хелп, без Вашей помощт никак!
ViktorminatorИтак по порядку: 1. Как работать с квип http://rtfm.modx.com/display/ADDON/Quip 2. Параметр locale в Системных настройках должен быть ru_RU.UTF-8 3. Я так понимаю это уже вопрос про FormIt? Локальный сервер не отправляет сообщения, но он их сохраняет в определённой папке. Чтобы найти её создайте тестовое сообщение, а потом запустите поиск файлов с этим сообщением.
Настя3 вопрос также относится к quip: я когда подключила квип к сайту, автоматически отобразилась форма, после добавления комментов отображается после каждого ссылка "ответить". Как ее убрать? На Вашем сайте этой кнопки нет:) А еще дата выводится вот так: . 16, 2012 at 12:42. Как исправить? везде где можно в системе прописано utf-8.
ДенисПроверяю форму на денвире, если форму заполнить русским текстом, в письме иероглифы как исправит подскажите пожалуйста, спасибо.
ViktorminatorНастя поставьте параметр cultureKey в ru, locale в ru_RU.UTF8 - вот прямо так там и напишите. Денис - обращайте внимание на кодировку.
НастяВиктор, эти параметры выставлены так, как вы сказали, но не в этом проблема, к сожалению. Дело в том что "месяц" выводится на русском. Где-то прописано, что вывод даты происходит с помощью кодировки win-1251(пробовала менять в браузере), но где - я не знаю.
БогданЯ делаю сайт на локальном open server может быть что из за этого у меня не отправляются письма?
Sergey Kalininподскажите пожалуйста где находится каталог, в который попадают отправленные при помощи formit сообщения при ненастроенном почтовом сервисе
Maksim KuznetsovПодскажите пожалуйста, у одного меня такая проблема? Имя отправителя из реквизита "&fiarFromName" не распознается почтой Google, пишет "Неизвестный отправитель", а во других почтах все хорошо.
Maksim KuznetsovПодскажите пожалуйста, у одного меня такая проблема? Имя отправителя из реквизита "&fiarFromName" не распознается почтой Google, пишет "Неизвестный отправитель", а во других почтах все хорошо.
no peпропущено в описании кнопки, если я не ошибаюсь
lorashfuko]] Пожалуйста, воспользуйтесь формой ниже, чтобы освязаться с нами:
Имя (требуется, по крайней мере, 2 символа)
Ваш комментарий (обязательно)
Viktor MinatorПосле &validate= посмотрите какой у вас знак стоит внимательно
lorashfukoОдинарная кавычка. Поменял ее на на апостроф но рекапча не появилась. Валидация тоже не работает, что странно. Перевести вывод ошибок на русский получилось только в скпипте шаблона который отвечает за валидацию. Переименовывал поля, убирал валидация вообще прекращалась. Работает только отправка писем. Вопрос: Как вывести рекапчу (ключи введены)? Если у формы нет js валидации, как заставить работать formit валидацию? Спасибо.
lorashfukoКуда вставлять ? [[+formit.recaptcha_html]] [[!+fi.error.recaptcha]] Вставляю в чанк с формой перед кнопкой, но ничего не происходит.
ScoopЗдравствуйте, Вопрос по поводу дизайна (шаблона) для разных страниц. Если у меня для страницы "Контакты" идет другие построение html блоков и т.д. Я создаю еще 1 "шаблон", вставляю туда измененый код HTML, снова подтягиваю переменный (системные и иные) под modx, заменяю меню на WayFinder сниппет и т.д. Получается, что при изменении некоторых частей кода в дизайне страниц приходится создавать новый шаблон. Я что-то не понял или действительно новые страницы так трудоемко создаются?
ScoopПочитал дальше по тексту, нашел ответ на свой вопрос:)
lordfootballЗдравствуйте! Очень интересная статья. Спасибо! Можете подказать или объяснить как подключить к форме проверку, например “сколько будет 22+36 = ” было бы очень полезно. Спасибо огромное заранее!
Віктор Матушевський Максим КутузовСкажите, должна ли форма отправки работать именно на отправку, если сайт поднят на локальной машине? а то все формы построены, ошибки работают, но письмо с запросом не отправляется.
Viktor MinatorНа локальном сервере письма никуда не отправляются, а попадают в папку. Чтобы найти эту папку, создайте письмо с каким-нибудь текстом, а потом запустите поиск по файлам.
Дима ЗеленцовСтранно, я не вводил параметры проверки, но ои работаю
Странно, я не вводил параметры проверки, но ои работаю
SaLacosteСпасибо за очередной урок!
При адаптации кода под FormIt осталось пару вопросов:
1) Как реализовать описание поля внутри самого поля при ненаведенном курсоре? Ранее использовался код что-то типа:
value="Имя" size="30" style="width:95%;" maxlength="70">
Теперь на месте "Имя" стоит заполнитель, который по умолчанию пустой.
2) Если форма находится не в верхней части страницы и требуется центровка на форме при неправильном вводе, это возможно реализовать в рамках FormIt?
Сергей СтояновСпасибо за статью, столкнулся вот с каким делом - нужно было на одной странице сделать две формы FormIt(для отправки письма и для звонка), создать они то создались - но работала только одна.
Вторая форма проверку данных на валидацию делает - но сообщение не уходило. Обращаюсь за советом к дядюшке Гуглю - он мне подсказывает - воспользуйся еще одной переменой под названием &submitVar. Имя которой должно совпадать с именем (в данном примере это &submitVar = `myVar`), конечно же после часов мучений это для меня как спасение - я лезу в свой код добавляю &submitVar - и . результат тот же :( Возвращаюсь к дядюшке он говорит - назначить переменую нужно первой форме, что вызывается на странице. Ок делаю как он сказал - результат ноль. Я долго мучался - достал со шкафа бубен сделал пару кругов вокруг стола и он помог !
вторая форма у меня должна была принимать от клиента только 2 поля (имя и номер телефона) - к ним я добали еще одно скрытое поле с именем email задал ему произвольное значение и форма заработала!
Казалось бы сиди и радуйся . Но, гложит меня вопрос - может решение не верное - подскажите если есть какие идеи еще. Заранее спасибо.
Евгений ЕпифановСпасибо за статью. В принципе все работает, но письмо, которое приходит клиенту (в моем случае) не имеет отправителя, т.е. с пустым полем "От:". Мне же (как администратору) приходит письмо от имени клиента. Что за ерунда? С уважением.
Сергей Стояновпопробуйте &emailFrom=`почта отправителя`
Евгений ЕпифановСпасибо за ответ. Разобрался, сайт был на локальном хостинге. Перенес на нормальный - все отлично!
Егор ГуриновичДайте совет . Возникла неопределенность с &redirectTo=`10` - была создана страница (id=10), она опубликована и не показана в меню - размещен текст"Ваше сообщение отправлено бла бала" -
Выше указанный код помещен в чан, в шаблоне идет и ниже код формы
Итог сообщения отправляются но редирект не происходит, остаюсь на странице "контакты" Буду признателен.
Егор Гуринович Viktor Minatorчтобы происходил редирект, нужно добавить хук redirect. - &hooks=`email,redirect`
Егор ГуриновичСпасибо. Невнимателен оказался.
Ольга ЛисицкаяЗдравствуйте, подскажите, пожалуйста, где можно посмотреть новые чанки этого урока, такие как . Буду очень благодарна за Ваш ответ, так как только работаю над первым сайтом, и эта информация будет очень полезной.
pcheliakovЗдравствуйте. Возникло несколько вопросов 1. Как цеплять свой обработчик если нужно. И не понятно взаимодействие modx с моими php скриптами. Имеется ввиду как передавать post данные в сниппет и принимать их в formIt. 2. У вас если вбить пробелы форма всё равно отправляется. Есть в php функция trip, там удаляются все пробелы и потом проверяется на empty. Как тут быть? 3. Мне надо чтобы при успешной отправки почты грузилась эта-же страница с надписью "Успешно отправлено!". И потом если сразу ещё обновить страницу она пропадала-бы. 4. Можно ли прицепить свою капчу а не reCaptcha.
Andrey SharpeenkoДоброго времени суток! А могу ли я сделать так, чтобы e-mail, введенное в поле отправителем, передавался в заголовках сообщения, как адрес отправителя?
Viktor Minator Andrey SharpeenkoА как это можно сделать, не подскажете?
Viktor MinatorНужно сделать свой сниппет и запускать FormIt через runSnippet и задать там параметр $emailSubject => $contact_email Лучше посмотрите сюда https://modx.ws/urok-modx-ajax-forma и сделайте без FormIt'а.
Boris NizoДобрый день, подскажите пожалуйста, а как сделать, что-бы данные передавались на страницу, куда перекидывает после отправки сообщения? я указал хук- редирикт, на странице куда перекидывает после сообщения вставляю - но ничего не выводиться.
Viktor MinatorПотому что эти данные отправляются в письме. А вам, видимо, нужно записать данные в сессию, а потом получить их из неё на странице, куда произошёл редирект.
Boris NizoА можно на конкретном примере, или где почитать? В итоге должно получиться на этой странице- что-то вроде Уважаемый , ваше сообщение принято.
Viktor Minator Boris NizoСпасибо, прочел, остался вопрос, извиняюсь за назойливость, куда конкретно размещать $_SESSION['mystuff'] = array('itemOne' => 'value1', 'itemTwo' => 'value2', . ); И я так понимаю, что value1- это то, что я хочу передать? а mystuff'- нужно менять?
Viktor Minatorэто за 5 минут не решить. Копипаста тут не пройдёт, mystuff - это имя сессии, считайте имя временного массива куда записываются данные. В FormIt есть возможность создавать пользовательские хуки, то есть делаете хук, который должен записать данные в сессию. А на вашей странице с "Уважаемый", вы размещаете вызов сниппета, который получает данные из сессии и выводит их. Более детально rtfm.modx.com http://phpclub.ru/
Boris Nizoа можно не создавать новый хук, а допустим вставить эту строчку, для сохранения введенных данных , в хук - Riderict? $_SESSION['mystuff'] = array('itemOne' => 'value1', 'itemTwo' => 'value2', . );
Boris NizoЕсли что, разобрался, есть готовая возможность от formit)))- FormIt.FormItRetriever
SaLacosteВиктор, существует ли стандартная возможность включать счетчик обращений, отправленных из формы с помощью FormIt. Чтобы можно было разделять письма в теме: "Письмо с сайта номер . "
ViktorminatorСоздайте ТВ и туда каждый раз добавляйте +1 и значение в subject письма.
Игорь ЯрошевичА можно подробнее пояснить. Заранее благодарен.
Наталья БрицеваСначала пишете правильное написание &validate=`contact_name:required:minLength=^2^` и следом в примере указываете неверную строку &validate=`contact_name:required:minLength=`2`,
АлексейНе отображается при неудачном вводе рекаптчи, вот здесь http://forums.modx.com/thread/47573/recaptcha-error-not-displaying аналогичная ситуация. Т.е. рекаптча работает исправно, но вывод об ошибке ввода не осуществляется. Кто нибудь сталкивался с подобным, лечится?
Алексей ЕленаСпасибо за урок,Виктор). Но возникла одна проблема (на других страницах такого нет). Перед footer появилась черная полоса, которая никак не убирается. Chrome выдает следующий код: iframe scr="about:blank" style="height: 0px; width: 0px; visibility: hidden; border: none;" #document html head /head body /body /html /iframe При удалении из страницы контакта +formit.recaptcha_html !+fi.error.recaptcha полоса пропадает. Не подскажете, как быть?как ее убрать?
ViktorminatorИспользовать другую капчу (урок captcha slider)
Рашад Агаевшаблон контакт должен быть статичном?
Viktorminatorне обязательно. можно обычный
alistan xXxДобрый день. Почему-то перестала работать кнопка reset для очистки формы после установки сниппета. В чем ошибка? В обычном шаблоне все работает.
alistan xXx Евгений СолдатовЗдравствуйте. А можно сделать так, чтобы вместо переадресации на другую страницу, показывать на этой же страницы, что сообщение успешно отправлено?
Viktor Minator Евгений СолдатовЭто с аяксом. Решение хорошие. А есть ли возможность просто без аякса, после перезагрузки страницы, показывать что сообщение отправлено? Что-то типа как у FormitAjax ?
Viktor MinatorНапомнило анекдот из детства "Дайте мне пирожки с изюмом, только без изюма". как в formitAJAX, только без AJAX? Отсутствие перезагрузки страницы и подразумевает, что вы данные отправили "асинхронно с помощью джаваскриптов" и остались на странице.
Viktor MinatorЕщё раз перечитал вопрос. Прочитайте внимательно документацию, там есть такой плейсхолдер со словом success вот он и содержит сообщение об успешно отправленном письме.
Vitea KirichenkoДоброго времени суток ) Возникла такая проблема formit не отсылает html теги вобще не какие ( либо он их видит как текст либо - вобще игнорирует и даже в коде его не показывает создавал форму по этому ресурсу http://webhow.ru/modx-revolution/modxadd/modx-revolution-sozdanie-resursov-i-zagruzka-fajjl.html#comment-2177 За ранее спасибо за помощь .)
sergeyвы отлично описали порядок добавления формы к странице. но подскажите пожалуйста что делать если на одной странице расположены 2 формы. ведь нельзя же использовать 2 одинаковых сниппета типа
Не обрабатывается форма
Boris NizoВсе сделал, но вместо рекапчи появляется вот такое сообщение- Input error: Invalid referer, с чем может быть связано? =(
cvg cvgВывод сообщения об успешной отсылке письма почему-то не проходит. Параметры FormIl'а оформил так: "&successMessage=`Всё о'кей`, &successMessagePlaceholder=`ok`,", вызов плейсхолдера выглядит так: .
cvg cvgЧто-то не вывелся он. Придется навтыкать пробелов после каждого символа: [ [ + ok ] ]
Kamba StyleДоброго времени суток Спасибо за урок Виктор, но возникла одна проблема
почемуто когда я настроил &emailTo=`primer@mail.ru` то я получаю сообщения на два ящика.
на один primer@mail.ru и на тот который задовал при установки Modx. плюс ктому и редерикт.
а так всё работает.
Kamba StyleДоброго времени суток Спасибо за урок Виктор, но возникла одна проблема
почемуто когда я настроил &emailTo=`primer@mail.ru` то я получаю сообщения на два ящика.
на один primer@mail.ru и на тот который задовал при установки Modx. плюс ктому и редерикт.
а так всё работает.
nkov7А как бы передать параметр адреса из TV? &emailTo=`primer@mail.ru`
Viktor MatushevskyiВиктор, спасибо за статьи - оч помогают в знакомстве с MODx. Есть вопрос по реКапче: как изменить размер реКаптчи? Хочу ее вставить не только на странице Контакты, но и в форме сайдбара. Но там стандартная великовата. Спасибо!
Андрей МихеевЗдравствуйте! Благодаря этому сайту освоил MODX за несколько дней! Теперь по сути: как сделать в контакт-форме выбор получателя письма тегом select? Например, у фирмы имеется 3 отдела: отдел продаж, отдел сервиса и проектный отдел. Нужно чтобы клиент мог выбрать, в какой конкретно отдел он хочет написать, т.к у каждого отдела свой почтовый ящик.