Skip to content

Instantly share code, notes, and snippets.

@gomo
Created June 12, 2018 02:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gomo/856baff2c8b17fe4ca149b625d71eaad to your computer and use it in GitHub Desktop.
Save gomo/856baff2c8b17fe4ca149b625d71eaad to your computer and use it in GitHub Desktop.
Bootstrap4 form template for rails.
<%# app/view/shared/_form.html.erb %>
<%= form_with model: record, url: url, local: true, class: 'px-4' do |form|%>
<% elements.each do |elem|%>
<div class="form-group form-row mb-5">
<%= form.label elem.label, for: elem.id, class: 'col-md-3 col-lg-2 col-form-label'%>
<div class="col-md-9 col-lg-10">
<% if elem.type?(:collection_radio_buttons, :collection_check_boxes) %>
<div>
<%= form.public_send elem.type, elem.name, *elem.args, include_hidden: false do |check|%>
<%= tag.div class: 'form-check form-check-inline', style: elem.style do%>
<%= check.public_send elem.check_method, class: class_names('form-check-input', 'is-invalid': record.errors.include?(elem.name)) %> <%= check.label class: 'form-check-label'%>
<%end%>
<%end%>
</div>
<% elsif elem.type?(:collection_select, :grouped_collection_select) %>
<%= form.public_send elem.type, elem.name, *elem.args, {}, class: class_names('form-control', elem.class, 'is-invalid': record.errors.include?(elem.name)), id: elem.id, style: elem.style %>
<% else %>
<%= form.public_send elem.type, elem.name, class: class_names('form-control', elem.class, 'is-invalid': record.errors.include?(elem.name)), id: elem.id, style: elem.style, placeholder: elem.placeholder %>
<%end%>
<%- if record.errors.include?(elem.name) -%>
<ul class="list-unstyled mb-0 text-danger">
<% record.errors.full_messages_for(elem.name).each do |err|%>
<li><%= err %></li>
<%end%>
</ul>
<%- end -%>
<% if content_for?("form_note_for_#{elem.name}".to_sym) %>
<div class="font-weight-light"><%= yield "form_note_for_#{elem.name}".to_sym %></div>
<%end%>
</div>
</div>
<%end%>
<% if content_for?(:form_footer) %>
<%= yield :form_footer %>
<% end %>
<%end%>
# app/models/fomrs/element.rb
class Forms::Element
include ActiveModel::Model
attr_accessor :type, :name, :label, :class, :args, :style, :placeholder
def type?(*types)
types.include?(type)
end
def id
"form_element_#{name}"
end
def check_method
return :radio_button if type?(:collection_radio_buttons)
return :check_box if type?(:collection_check_boxes)
raise 'This element is not check type.'
end
end
<%# app/view/recruit/form.html.erb %>
<% content_for :form_note_for_name do%>
<p><%= _('ひらがなで、苗字と名前の間にスペースを空けてください。') %></p>
<% end %>
<% content_for :form_note_for_tel do%>
<p><%= _('ハイフンやスペースは必要ありません。半角数字で入力お願いします。') %></p>
<% end %>
<% content_for :form_footer do%>
<div class="form-group mb-5">
<input type="submit" name="submit_recruit" value="<%= _('送信') %>" class="btn btn-outline-primary btn-block mx-auto w-50">
</div>
<% end %>
<%= content_for :base_content do%>
<section>
<%= render 'layouts/small_promo', description: _('応募する'), title: _('Apply') %>
<section class="container">
<%= section_heading _('応募フォーム'), 3 %>
<p><%= _('全ての項目を入力お願いします。') %></p>
<%= render 'shares/form', record: @recruit, url: form_recruits_path, elements: [Forms::Element.new(
type: :text_field,
name: :name,
label: _('氏名'),
placeholder: 'てら ともこ'
), Forms::Element.new(
type: :email_field,
name: :email,
label: _('メールアドレス'),
), Forms::Element.new(
type: :telephone_field,
name: :tel,
label: _('電話番号'),
placeholder: '09011112222'
), Forms::Element.new(
type: :number_field,
name: :age,
label: _('年齢'),
style: 'width: 80px;',
placeholder: '20'
), Forms::Element.new(
type: :collection_radio_buttons,
name: :sex,
label: _('性別'),
args: [Forms::Recruit::SEXES, :to_s, :to_s],
style: 'width: 160px;'
), Forms::Element.new(
type: :collection_check_boxes,
name: :job_types,
label: _('職種'),
args: [Forms::Recruit::JOB_TYPES, :to_s, :to_s],
style: 'width: 160px;'
), Forms::Element.new(
type: :collection_radio_buttons,
name: :exp,
label: _('サロン勤務経験'),
args: [Forms::Recruit::YES_OR_NO, :to_s, :to_s],
style: 'width: 160px;'
), Forms::Element.new(
type: :collection_select,
name: :nail_cert,
label: _('検定・資格'),
args: [Forms::Recruit::NAIL_CERTS, :first, :second],
style: 'width: 160px;'
), Forms::Element.new(
type: :collection_radio_buttons,
name: :hair_license,
label: _('美容師免許'),
args: [Forms::Recruit::YES_OR_NO, :to_s, :to_s],
style: 'width: 160px;'
)]%>
</section>
</section>
<%end%>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment