Форма обратной связи с загрузкой файлов

Скриншот формы

  • Под какой шаблон

    yootheme pro
  • Какой фреймворк использует

    UIKit 3
  • Количество полей

    5
  • Количество колонок

    2
  • Загрузка файлов

    Есть
Шаблон: Yootheme Pro
Фреймворк шаблона: UIKit 3
Количество полей: 4

Код формы

<form class="uk-form">
<div data-uk-grid>
<div class="uk-width-1-3@s tm-panel">
<div class="uk-margin"><input class="required uk-width-1-1 uk-input" name="name" type="text" placeholder="Ваше имя" /></div>
<div class="uk-margin"><input class="required uk-width-1-1 uk-input" name="phone" type="text" placeholder="Телефон" /></div>
<div class="uk-margin"><input class="required uk-width-1-1 uk-input" name="email" type="text" placeholder="Email" /></div>
</div>
<div class="uk-width-2-3@s uk-grid-item-match">
    <textarea class="uk-width-1-1 uk-textarea tm-panel" cols="" name="question" rows="5" placeholder="Описание"></textarea></div>
</div>
<div data-uk-grid>
<div class="uk-width-1-3@s uk-row-first">
	<div class="uk-width-1-1" uk-form-custom="">
    <button class="uk-button uk-button-primary uk-width-1-1 rf-upload-button-text">ПРИЛОЖИТЬ ФОТО</button> 
    <input class="rf-upload-button" name="fileupload" type="file" />
    </div>
</div>
<div class="uk-width-2-3@s uk-text-right"><button class="uk-button uk-button-primary rf-button-send">ОТПРАВИТЬ</button></div>
</div>
<div class="rf-filenames-list"></div>
</form>

Заполнение полей в настройках плагина

Код поля Javascript №2

UIkit.modal.alert(rfMessage);

CSS класс для невалидных полей

uk-form-danger uk-animation-shake
© Hika.su