Page Comparison

...

Expand

title	Пример исходного кода OTP формы

Code Block

language	html

<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <title>Головна</title>
    <link type="text/css" rel="stylesheet" href="../resources/css/style.css"/>
  </head>
  <body id="load" class="no-js">
    <div class="remodal">
        <div class="remodal-header">
            <img src="../resources/img/modal-logo.png" class="modal-logo" />
            <div class="remodal-header-right">
                <img src="../resources/img/remodal_MC.png" />
                <img src="../resources/img/remodal_visa.png" />
            </div>
        </div>
        <form action="" method="post" name="remodal-transaction1" id="process" class="remodal-form">
            <div>
                <div id="modal1Title">Для завершення покупки введіть одноразовий пароль, який надійшов на номер Вашого мобільного телефону</div>
                <p id="modal1Desc">Якщо пароль не надійшов в найближчі 5 хвилин зателефонуйте до Інформаційного центру Банку за телефонами: ---- (Безкоштовно з мобільних у межах України); Телефон для дзвінків із-за кордону--------------</p>
                <div class="remodal-left">Торговець</div>
                <div class="remodal-right" style="width: 250px;"></div>
                <div class="remodal-left">Сума</div>
                <div class="remodal-right">UAH 1.00</div>
                <div class="remodal-left">Дата</div>
                <div class="remodal-right">
                    <span id="date"></span>
                </div>
                <div class="remodal-left">Номер картки</div>
                <div class="remodalright">ХХХХ ХХХХ ХХХХ 7924</div>
                <div class="remodal-left">Одноразовий пароль:</div>
                <div class="remodal-right">
                    <input type="text" id="randpass" name="code" maxlength="8" required>
                </div>
            </div>
            <div class="attention">Увага! Не повідомляйте та не передавайте нікому пароль!</div>
            <div class="remodal-btns">
                <button type="submit" class="modal-confirm" disabled="disabled" id="passconf">Підтвердити</button>
                <button type="button" class="modal-cancel">Відміна</button>
            </div>
        </form>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="crossorigin="anonymous"></script>
    <script type="text/javascript" src="../resources/js/main.js"></script>
    <script>
      $(function () {
        $('.modal-cancel').click(function () {
          window.location.href='';
        });
        $('#date').html(function () {
          var d = new Date();
          var day = d.getDate() > 9 ? d.getDate() : '0'+d.getDate();
          var month = (d.getMonth() + 1) > 9 ? d.getMonth() + 1 : '0'+(d.getMonth() + 1);
          return day+'/'+month+'/'+d.getFullYear()+''+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds()
        });
      });
    </script>
  </body>
</html>

Для мультиязычности: на каждый язык нужен свой html файл.
Не использовать минифицированные файлы
Тестирование верстки перед ее передачей нам: https://drive.google.com/file/d/1HLJ5KUTYFm45pw-O3htrVPC0JwS4R1Ee/view?usp=sharing

Рекомендации:

Адаптация под разные разрешения экрана
Loader при сабмите формы
Корректный copy-paste для поля номера карты (для проверки: 4444 3333 2222 1111, 4444333322221111)

autocomplete="on" для полей ввода e-mail, ФИО

При необходимости в css добавить -webkit-appearance: none и -moz-appearance: none
Автозаполнение номера карты из сохраненных в браузере

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

Versions Compared

Old Version 1

New Version 2

Key