Все для CMS » WordPress » Плагин Contact Form 7 + BootStrap 3

Плагин Contact Form 7 + BootStrap 3

  • 0
Данный материал предоставлен сайтом All4Cms.ru исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Скачать бесплатно Плагин Contact Form 7 + BootStrap 3.
Плагин Contact Form 7 + BootStrap 3

Горизонтальная форма

HTML разметка горизонтальной формы для плагина CF7 бутстрапа:
<div class="form-horizontal">
<div class="form-group">
<label class="control-label col-md-3">Ваше имя</label><div class="col-md-9">[text* your-name class:form-control]</div></div>
<div class="form-group"><label class="control-label col-md-3">Ваш e-mail</label><div class="col-md-9">[email* your-email class:form-control]</div></div>
<div class="form-group"><label class="control-label col-md-3">Тема</label><div class="col-md-9">[text your-subject class:form-control]</div></div>
<div class="form-group"><label class="control-label col-md-3">Сообщение</label><div class="col-md-9">[textarea your-message x5 class:form-control]</div></div>
<div class="form-group"><div class="col-md-offset-3 col-md-9">[submit class:btn class:btn-primary "Отправить"]</div></div>
</div>

Немного пояснений — класс «form-horizontal» добавляем не к форме, как указано на сайте бутстрапа, а к блоку. Далее все как в html разметке bootstrap 3, только для плагина CF7. Результат — на скрине:


Форма без надписей, с плейсхолдерами

В ней мы не будем использовать form-horizontal или каких либо других классов формы, а разметку сделаем с помощью сетки бутстрапа. Исходный код:
<div class="row">
<div class="col-md-6 form-group"><label class="sr-only">Ваше имя</label>[text* your-name class:form-control placeholder "Ваше имя"]</div>
<div class="col-md-6 form-group"><label class="sr-only">Ваш e-mail</label>[email* your-email class:form-control placeholder "Ваш e-mail"]</div>
</div>
<div class="form-group"><label class="sr-only">Тема</label>[text your-subject class:form-control placeholder "Тема"]</div>
<div class="form-group"><label class="sr-only">Сообщение</label>[textarea your-message x5 class:form-control placeholder "Сообщение"]</div>
<div class="form-group">[submit class:btn class:btn-primary "Отправить"]</div>


В результате получим вот такую симпатичную формочку:

  • WordPress / Полезные статьи
  • 19-01-2017, 00:26
  • 3 826
Вернуться назад
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.