Помогите найти рабочий варианты формы Formit или Ajax. Или любой другой формы для landing page

Добрый день!
Верстаю сайт сама.
После долгих творческих исканий остановилась на cms Modx Revolution, и хостинге modhost.pro.
Почти все освоила, только уже 5 дней бьюсь с формой отправки сообщений через сайт.
Когда я настроила почту на яндексе для своего домена, она перестала работать.
Точнее, можно отправить на эту почту сообщения откуда угодно, но не из формы.
И кстати, из формы, она отправляла сообщения сама на себя, а на другие email — ни в какую.
Чувствую, я перемудрила с кодом, но уже не знаю, как это сделать, всю голову сломала.
Первый раз была успешная отправка, но тогда сообщения отправлялись от каждого чиха. Я начала искать решения — добавляла капчу, в добавок нашла красивый дизайн формы и обработала его под себя.
Потом зарегистрировала свой домен почты на яндексе (olga@lingvo-lang.com).
Всё! После этого форму как заколдовали. Не с ajax, не с formit, она не стала работать.
Чувствую, что форме не нравится доменное имя, либо emailsender ориентируется на самую первую почту, указанную при регистрации (хотя я везде ее сменила, где могла).
Как быть?
Помогите, пожалуйста!
Ольга
04 декабря 2017, 07:19
modx.pro
1 589
0

Комментарии: 18

Глеб
04 декабря 2017, 11:37
0
Можно ссылку на сайт?
Когда вы отправляете сообщение, что пишет?
Что в логах? (Управление — отчеты — журнал ошибок)
    Евгений Webinmd
    04 декабря 2017, 11:52
    0
    для некоторых моментов необходимо указывать emailFrom с почтой на текущем домене, что-то типа robot@domain.ru
      Андрей
      04 декабря 2017, 12:04
      1
      0
      Пример рабочей формы с лендинга. Так же иногда требуется указать emailFrom почтой совпадающей с доменом.

      {'!AjaxForm' | snippet : [
        'form' => '@INLINE
          <form class="form" method="post" action="">
            <input type="hidden" name="nospam">
      
            <div class="form-group">
              <div class="form-item">
                <label class="form-label" for="">Имя</label>
                <input class="form-field" type="text" name="name" value="{$_pls["fi.name"]}">
                <div class="error_name">{$_pls["fi.error.name"]}</div>
              </div>
            </div>
            <div class="form-group">
              <div class="form-item">
                <label class="form-label" for="">Компания</label>
                <input class="form-field" type="text" name="company" value="{$_pls["fi.company"]}">
                <div class="error_company">{$_pls["fi.error.company"]}</div>
              </div>
            </div>
            <div class="form-group">
              <div class="form-item">
                <label class="form-label" for="">E-mail</label>
                <input class="form-field" type="email" name="email" value="{$_pls["fi.email"]}">
                <div class="error_email">{$_pls["fi.error.email"]}</div>
              </div>
            </div>
            <div class="form-group">
              <div class="form-item">
                <label class="form-label" for="">Телефон</label>
                <input class="form-field" type="tel" name="phone" value="{$_pls["fi.phone"]}">
                <div class="error_phone">{$_pls["fi.error.phone"]}</div>
              </div>
            </div>
            <div class="form-group">
              <div class="form-item">
                <label class="form-label" for="">Сообщение</label>
                <textarea class="form-field" name="message" rows="5">{$_pls["fi.message"]}</textarea>
                <div class="error_message">{$_pls["fi.error.message"]}</div>
              </div>
            </div>
            <div class="form-group">
              <div class="form-item">
                <input type="hidden" name="privacy[]" value="">
                <div class="checkbox">
                  <input type="checkbox" name="privacy[]" id="privacy" value="agree">
                  <label for="privacy">Отправляя заявку, я соглашаюсь на обработку персональных данных.</label>
                </div>
                <div class="error_privacy">{$_pls["fi.error.privacy"]}</div>
              </div>
            </div>
            <div class="form-group">
              <div class="form-item">
                <button class="button" type="submit">Отправить</button>
              </div>
            </div>
          </form>
        ',
        'emailTpl' => '@INLINE
          <h2>Сообщение с сайта {$_modx->config.site_name}</h2>
          <p><b>Имя:</b> {$name}</p>
          <p><b>Компания:</b> {$company}</p>
          <p><b>E-mail:</b> {$email}</p>
          <p><b>Телефон:</b> {$phone}</p>
          <p><b>Сообщение:</b> {$message}</p>
        ',
      
        'hooks' => 'email, FormItSaveForm',
      
        'emailSubject' => 'Сообщение с сайта '~$_modx->config.site_name,
        'emailTo' => $_modx->config.emailsender,
        'emailFrom' => $_modx->config.emailsender,
        'emailFromName' => $_modx->config.site_name,
      
        'formName' => 'Узнать подробнее',
        'formFields' => 'name,company,email,phone,message',
        'fieldNames' => 'name==Имя,company==Компания,email==E-mail,phone==Телефон,message==Сообщение',
      
        'validate' => 'nospam:blank, name:minLength=^3^:required, company:required, email:email:required, phone:required, message:minLength=^20^:required, privacy:required'
      ]}
        Ольга
        04 декабря 2017, 15:43
        0
        Вот кое-как приляпала форму lingvo-lang.com/contact.html
        Редиректа нет, сообщений тоже нет. :(
          Ольга
          04 декабря 2017, 16:18
          0
          Похоже, что мой домен к яндексу не приклеивается.
          Посмотрите пожалуйста, настройки верны?

          SMTP аутентификация
          mail_smtp_auth
          Да

          SMTP Helo сообщение
          mail_smtp_helo
          EHLO

          SMTP хосты
          mail_smtp_hosts
          tls://smtp.yandex.ru

          SMTP удержание соединения
          mail_smtp_keepalive
          Да

          SMTP номер порта
          mail_smtp_port
          587

          SMTP префикс для соединений
          mail_smtp_prefix
          tls

          SMTP посылать по одному
          mail_smtp_single_to
          Да

          SMTP время ожидания
          mail_smtp_timeout
          60

          SMTP пользователь
          mail_smtp_user
          olga@lingvo-lang.com

          Использовать SMTP
          mail_use_smtp
          Да
            Ольга
            05 декабря 2017, 14:45
            0
            По-прежнему не работает :(
            Поднимаю темку.
            Кто-нибудь, пожалуйста.
              Андрей
              05 декабря 2017, 15:03
              0
              Пробовали отправлять письма не через SMTP? Вообще отправка писем с сайта работает? Это можно проверить через компонент QuickEmail.

              И напишите наконец код, как вы вызываете форму :)
              Ольга
              05 декабря 2017, 15:08
              0
              На хостинге мне сказали, что все работает.
              Кстати да, работала отправка, только через форму не идет.
              Но я еще раз проверю немного попозже.

              Вот код:

              [[!FormIt?
                  &hooks=`spam,email,emailUser,redirect`
                  &emailTo=`olga@lingvo-lang.com`
                  &emailSubject=`[[+subject]]`
                  &emailFromName=`[[+name]]`
                  &emailTpl=`ContactTpl`
              &validate=`name:required,email:required,message:required`
              &validationErrorMessage=`В форме содержатся ошибки!`
              &successMessage=`Сообщение успешно отправлено`
                  &redirectTo=`14`
              ]]
              <style>
              @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,100,500);
              body,
              html {
                margin: 0;
                height: 100%;
              }
              
              input {
                border: none;
              }
              
              button:focus {
                outline: none;
              }
              
              ::-webkit-input-placeholder {
                color: rgba(255, 255, 255, 0.65);
              }
              
              ::-webkit-input-placeholder .input-line:focus +::input-placeholder {
                color: #fff;
              }
              
              .highlight {
                color: rgba(255, 255, 255, 0.8);
                font-weight: 400;
                cursor: pointer;
                transition: color .2s ease;
              }
              
              .highlight:hover {
                color: #fff;
                transition: color .2s ease;
              }
              
              .spacing {
                -webkit-box-flex: 1;
                -webkit-flex-grow: 1;
                -ms-flex-positive: 1;
                flex-grow: 1;
                height: 120px;
                font-weight: 300;
                text-align: center;
                margin-top: 10px;
                color: rgba(255, 255, 255, 0.65)
              }
              
              .input-line:focus {
                outline: none;
                border-color: #fff;
                -webkit-transition: all .2s ease;
                transition: all .2s ease;
              }
              
              .ghost-round {
                cursor: pointer;
                background: none;
                border: 1px solid rgba(255, 255, 255, 0.65);
                border-radius: 25px;
                color: rgba(255, 255, 255, 0.65);
                -webkit-align-self: flex-end;
                -ms-flex-item-align: end;
                align-self: flex-end;
                font-size: 19px;
                font-size: 1.2rem;
                font-family: roboto;
                font-weight: 300;
                line-height: 2.5em;
                margin-top: auto;
                margin-bottom: 25px;
                -webkit-transition: all .2s ease;
                transition: all .2s ease;
              }
              
              .ghost-round:hover {
                background: rgba(255, 255, 255, 0.15);
                color: #fff;
                -webkit-transition: all .2s ease;
                transition: all .2s ease;
              }
              
              .input-line {
                background: none;
                margin-bottom: 10px;
                line-height: 2.4em;
                color: #fff;
                font-family: roboto;
                font-weight: 300;
                letter-spacing: 0px;
                letter-spacing: 0.02rem;
                font-size: 19px;
                font-size: 1.2rem;
                border-bottom: 1px solid rgba(255, 255, 255, 0.65);
                -webkit-transition: all .2s ease;
                transition: all .2s ease;
              }
              
              .full-width {
                width: 100%;
              }
              
              .input-fields {
                margin-top: 25px;
              }
              
              .container {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -webkit-align-items: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: center;
                -webkit-justify-content: center;
                -ms-flex-pack: center;
                justify-content: center;
                background: #eee;
                height: 100%;
              }
              
              .content {
                padding-left: 25px;
                padding-right: 25px;
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-flex-flow: column;
                -ms-flex-flow: column;
                flex-flow: column;
                z-index: 5;
              }
              
              .welcome {
                font-weight: 200;
                margin-top: 75px;
                text-align: center;
                font-size: 40px;
                font-size: 2.5rem;
                letter-spacing: 0px;
                letter-spacing: 0.05rem;
              }
              
              .subtitle {
                text-align: center;
                line-height: 1em;
                font-weight: 100;
                letter-spacing: 0px;
                letter-spacing: 0.02rem;
              }
              
              .menu {
                background: rgba(0, 0, 0, 0.2);
                width: 100%;
                height: 50px;
              }
              
              .window {
                z-index: 100;
                color: #fff;
                font-family: roboto;
                position: relative;
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-flex-flow: column;
                -ms-flex-flow: column;
                flex-flow: column;
                box-shadow: 0px 15px 50px 10px rgba(0, 0, 0, 0.2);
                box-sizing: border-box;
                height: 560px;
                width: 360px;
                background: #fff;
                background: url('https://pexels.imgix.net/photos/27718/pexels-photo-27718.jpg?fit=crop&w=1280&h=823') top left no-repeat;
              }
              
              .overlay {
                background: -webkit-linear-gradient(#8CA6DB, #B993D6);
                background: linear-gradient(#8CA6DB, #B993D6);
                opacity: 0.85;
                filter: alpha(opacity=85);
                height: 560px;
                position: absolute;
                width: 360px;
                z-index: 1;
              }
              
              .bold-line {
                background: #e7e7e7;
                position: absolute;
                top: 0px;
                bottom: 0px;
                margin: auto;
                width: 100%;
                height: 360px;
                z-index: 1;
                opacity:0.1;
                  background: url('https://pexels.imgix.net/photos/27718/pexels-photo-27718.jpg?fit=crop&w=1280&h=823') left no-repeat;
                background-size:cover;
              }
              
              @media (max-width: 500px) {
                .window {
                  width: 100%;
                  height: 100%;
                }
                .overlay {
                  width: 100%;
                  height: 100%;
                }
              }
              </style>
              <div class='bold-line'></div>
              <div class='container'>
                <div class='window'>
                  <div class='overlay'></div>
                  <div class='content'>
                    <div class='welcome'>Добрый день!</div>
                    <div class='subtitle'>Эта дружелюбная форма отправки сообщений поможет Вам связаться с нами</div>
                    <form action="" method="post">
              <div class='input-fields'>
                <input type="hidden" name="nospam:blank" value=""/></input>
                      <input type='text' placeholder='Имя' class='input-line full-width'></input>
                      <input type='email' placeholder='Email' class='input-line full-width'></input>
                      <input type='phone' placeholder='Телефон' class='input-line full-width'></input>
              <input type='message' placeholder='Сообщение' class='input-line full-width'></input>
              </div>      <div><button class='ghost-round full-width' input type="submit" name="Submit">Отправить</button></div>
                    </div>
                </div>
              </div>
                Андрей
                05 декабря 2017, 15:53
                0
                Нажимайте пожалуйста на кнопку Ответить под сообщением, тогда человек оставивший комментарий получит уведомление.

                Приведите вызов к такому виду:

                [[!FormIt?
                    &hooks=`spam,email,redirect`
                    &emailFrom=`no-reply@lingvo-lang.com`
                    &emailTo=`olga@lingvo-lang.com`
                    &emailSubject=`Письмо с сайта [[++site_name]]`
                    &emailTpl=`ContactTpl`
                    &validate=`name:required,email:required,message:required,nospam:blank`
                    &validationErrorMessage=`В форме содержатся ошибки!`
                    &successMessage=`Сообщение успешно отправлено`
                    &redirectTo=`14`
                ]]

                Откуда взялся хук — emailUser? Такого вроде как нет, если вам нужно отправлять уведомление и пользователю, для этого есть свои параметры FormIt-а.

                Форму к такому:

                <form action="[[~[[*id]]]]" method="post">
                <div class='input-fields'>
                        <input type="hidden" name="nospam" value="" /></input>
                        <input type='text' name="name" placeholder='Имя' class='input-line full-width'></input>
                        <input type='email' name="email" placeholder='Email' class='input-line full-width'></input>
                        <input type='phone' name="phone" placeholder='Телефон' class='input-line full-width'></input>
                         <input type='message' name="message" placeholder='Сообщение' class='input-line full-width'></input>
                </div>
                <div><button class='ghost-round full-width' type="submit">Отправить</button></div>
                </form>

                Во первых у вас тег form не закрыт, к input полям нужно добавлять атрибут name='имяполя', в атрибутах button вообще что то дикое намешано).

                В чанке ContactTpl соответственно плейсхолдеры по значениям атрибутов name — [[+name]],[[+email]] и т.п.

                Отключите отправку через smtp, и проверьте с приведённым выше кодом. Да, и стили тоже уберите куда нибудь в другое место.

                  Ольга
                  05 декабря 2017, 16:06
                  0
                  Всё сделала. Подскажите, как отправку через smtp отключить?
                    Андрей
                    05 декабря 2017, 16:14
                    0
                    В системных настройках которые вы приводили выше — Использовать SMTP — mail_use_smtp поставить в Нет.
                    Ольга
                    05 декабря 2017, 16:10
                    0
                    Я дизайн этой формы брала здесь: codepen.io/Tbgse/pen/JXrJGX
                    (редирект отсюда freefrontend.com/css-forms/)
                    Она изначально предназначена для регистрации, а я ее пыталась допилить для отправки сообщений.
                    Может быть, из-за этого не идет?
                      Андрей
                      05 декабря 2017, 16:17
                      +1
                      (редирект отсюда freefrontend.com/css-forms/)

                      Не совсем понял про редирект, параметр — &redirectTo=`14` отправляет на указанную страницу. Т.е. у вас должен быть ресурс с id = 14 и он должен быть опубликован.

                      Она изначально предназначена для регистрации, а я ее пыталась допилить для отправки сообщений.

                      Пробуйте код который я написал, с ним должно работать. Если не заработает, то присылайте доступы в личку, попробую вам помочь.
                        Ольга
                        05 декабря 2017, 17:44
                        0
                        заработало!!!
                        СПАСИБО ОГРОМНОЕ!
                        Вы — гений.
                          Ольга
                          06 декабря 2017, 02:22
                          0
                          Кстати, у меня новая проблема появилась — разрешает на один email только один раз отправить комментарий.
                          Допустим, я хотела бы 2 раза отправить письмо через форму с одного адреса--- нет, он уже блокирует.
                          Видимо, потому что форма изначально для регистрациии была (дизайн).
                          Как бы ее до конца допилить? Попробовать, чтоли, 'ghost-round full-width' из кнопки убрать.
                            Ольга
                            06 декабря 2017, 02:27
                            0
                            Решено)))
                            Она просто определяла тот email как мой.
                            А может, просто mail.ru игнорирует
                              Ольга
                              06 декабря 2017, 02:29
                              0
                              точно, игнорирует mail.ru :(
                        Ольга
                        06 декабря 2017, 11:50
                        0
                        Решено! В поле emailFrom — нужно ставить email домена
                          Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
                          18