Маска ввода номера телефона в формах обратной связи

Очень часто клиенты просят в формах обратной связи сделать маску ввода номера телефона наподобе такой - +7 (123) 456-78-99

Для этого существует очень удобный скрипт jQuery Masked Input, исходник можно скачать здесь.

Нужно выполнить следующие шаги:

Подключаем к нужной форме фреймворк jQuery и соответствующий плагин:


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript" src="/js/jquery.maskedinput-1.3.min.js"></script>

Далее вставляем код, определяющий маску в нашу форму:
```
<script>
jQuery(function($){
   $("#Phone").mask("+7(999) 999-99-99");
});
</script>
```

Для примера привожу исходный код формы обратной связи, сделанной с помощью компонента RS Form:

<script type="text/javascript" src="/js/jquery.maskedinput-1.3.js"></script>
<script>
jQuery(function($){
   $("#Phone").mask("+7(999) 999-99-99");
});
</script>
<h2>{global:formtitle}</h2>
{error}
<!-- Do not remove this ID, it is used to identify the page so that the pagination script can work correctly -->
<fieldset class="formHorizontal formContainer" id="rsform_1_page_0">
    <div class="rsform-block rsform-block-fullname">
        <div class="formControlLabel">{FullName:caption}<strong class="formRequired">(*)</strong></div>
        <div class="formControls">
        <div class="formBody">{FullName:body}<span class="formValidation">{FullName:validation}</span></div>
        <p class="formDescription">{FullName:description}</p>
        </div>
    </div>
    <div class="rsform-block rsform-block-email">
        <div class="formControlLabel">{Email:caption}</div>
        <div class="formControls">
        <div class="formBody">{Email:body}<span class="formValidation">{Email:validation}</span></div>
        <p class="formDescription">{Email:description}</p>
        </div>
    </div>
    <div class="rsform-block rsform-block-phone">
        <div class="formControlLabel">{Phone:caption}<strong class="formRequired">(*)</strong></div>
        <div class="formControls">
        <div class="formBody">{Phone:body}<span class="formValidation">{Phone:validation}</span></div>
        <p class="formDescription">{Phone:description}</p>
        </div>
    </div>
    <div class="rsform-block rsform-block-contactwhen">
        <div class="formControlLabel">{ContactWhen:caption}</div>
        <div class="formControls">
        <div class="formBody">{ContactWhen:body}<span class="formValidation">{ContactWhen:validation}</span></div>
        <p class="formDescription">{ContactWhen:description}</p>
        </div>
    </div>
    <div class="rsform-block rsform-block-submit">
        <div class="formControlLabel">{Submit:caption}</div>
        <div class="formControls">
        <div class="formBody">{Submit:body}<span class="formValidation">{Submit:validation}</span></div>
        <p class="formDescription">{Submit:description}</p>
        </div>
    </div>
</fieldset>

Заметки фрилансера

Маска ввода номера телефона в формах обратной связи