Bootstrap формы для Webasyst

У движка Webasyst не очень симпатичные формы login, signup и forgotpasswod. Чтобы заменить их на более красивые, например, в стиле Bootstrap, можно пойти тремя путями:

  1. сгенерировать форму, взять ее код и вставить в нужное вам место
  2. переопределить значения родных стилей css
  3. использовать клиентский javascript

В этой статье я предложу вам последний вариант: клиентский джаваскрипт посредством jQuery.
Причем код будет универсальный для всех трех форм.

Вот он:

$(document).ready(function(){
    $('strong').remove();
    $('form').addClass('form-horizontal');
    $('.wa-field').addClass('form-group');
    $('.wa-value:not(:has(".wa-captcha"),:has("input:submit"))').addClass('col-sm-5');
    $('.wa-value:has(".wa-captcha")').addClass('col-sm-offset-2 col-sm-5');
    $('.wa-captcha p:eq(0)').addClass('row');        
    $('.wa-captcha p:eq(0) img').wrap('<div class="col-sm-5"></div>');
    $('.wa-captcha p:eq(0) input:text').wrap('<div class="col-sm-7"></div>');
    $('input[name="remember"]').parents('.wa-value').addClass('col-sm-offset-2'); 
    $('input:text, input:password').addClass('form-control');
    $('input:submit').addClass('btn btn-primary');
    $('.wa-value.wa-submit').addClass('col-sm-offset-2 col-sm-10'); 
    $(".wa-name").addClass('col-sm-2 control-label');
    $('.wa-form a[href*="forgotpassword"]').addClass('btn btn-danger').attr('role','button');
    $('.wa-form a[href*="signup"], .wa-form a[href*="login"]')
            .addClass('btn btn-success').attr('role','button');
    $('.wa-captcha-refresh').wrap('<em><small></small></em>')
});

Использование jQuery позволит сократить количество строк кода для переделки внешнего вида формы и сохранить родные классы и айдишники для корректной генерации ошибок формируемых движком Webasyst.