Дизайн формы регистрации в Битрикс

Задача:
Внедрить шаблон дизайна в стандартную форму регистрации Битрикс
Используется шаблон Sailor (см)

На странице user/registration.php добавляем компонент “настраиваемая регистрация”

Скопируем шалон .default в папку local (под именем registration)
Выберем поля для заполнения

E-mail,Имя, Фамилия, Отчество, Организация, Департамент, должность, мобильный телефон

Сделаем их обязательными для заполнения

Первоначальный вид формы

Форма шаблона выглядит следующим образом:

Ее код

<div class="row">
    <div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">
        <form role="form" class="register-form">
            <h2>Please Sign Up <small>It's free and always will be.</small></h2>
            <hr class="colorgraph">
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-6">
                    <div class="form-group">
                        <input type="text" name="first_name" id="first_name" class="form-control input-lg" placeholder="First Name" tabindex="1">
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-6">
                    <div class="form-group">
                        <input type="text" name="last_name" id="last_name" class="form-control input-lg" placeholder="Last Name" tabindex="2">
                    </div>
                </div>
            </div>
            <div class="form-group">
                <input type="text" name="display_name" id="display_name" class="form-control input-lg" placeholder="Display Name" tabindex="3">
            </div>
            <div class="form-group">
                <input type="email" name="email" id="email" class="form-control input-lg" placeholder="Email Address" tabindex="4">
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-6">
                    <div class="form-group">
                        <input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password" tabindex="5">
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-6">
                    <div class="form-group">
                        <input type="password" name="password_confirmation" id="password_confirmation" class="form-control input-lg" placeholder="Confirm Password" tabindex="6">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-4 col-sm-3 col-md-3">
               <span class="button-checkbox">
                  <button type="button" class="btn" data-color="info" tabindex="7">I Agree</button>
                        <input type="checkbox" name="t_and_c" id="t_and_c" class="hidden" value="1">
               </span>
                </div>
                <div class="col-xs-8 col-sm-9 col-md-9">
                    By clicking <strong class="label label-primary">Register</strong>, you agree to the <a href="#" data-toggle="modal" data-target="#t_and_c_m">Terms and Conditions</a> set out by this site, including our Cookie Use.
                </div>
            </div>
            <hr class="colorgraph">
            <div class="row">
                <div class="col-xs-12 col-md-6"><input type="submit" value="Register" class="btn btn-theme btn-block btn-lg" tabindex="7"></div>
                <div class="col-xs-12 col-md-6">Already have an account? <a href="login.html">Sign In</a></div>
            </div>
        </form>
    </div>
</div>

Начнем процесс внедрения дизайна в форму

добавим

class="form-control input-lg"

в тэги input битрикс
Обернем форму битрикс в тэги:

<div class="row">
    <div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">
       
    </div>
</div>

Заголовок формы:


Вообще порядок поиска элемента формы в коде такой –
смоттрим его название и идем в файл lang/ru/template.php нашего шаблона
и ищем какому значение элемента массива MESSAGE оно соотвествует
Регистрация = AUTH_REGISTER

Соответсвенно, для
подставляем оформление в шаблоне –

Меняем оформление кнопки «Регистрация» добавим

class="btn btn-theme btn-block btn-lg"

После первых манипуляций получаем:

Поставим в input

placeholder=":*"

Уберем теперь подписи слева

Удалим:

<td><?= GetMessage("REGISTER_FIELD_" . $FIELD) ?>
    :<? if ($arResult["REQUIRED_FIELDS_FLAGS"][$FIELD] == "Y"): ?><span
            class="starrequired">*</span><? endif ?></td>

и лишние тэги

Добавим элемент оформления


Дизайн внедрен

Leave a Reply

Your email address will not be published. Required fields are marked *