[初心者に最も理解しやすい] form_forの使い方

意外と載っていないform_forの丁寧な書き方を紹介いたします。
この記事を見るだけで理解せずともform_forを実装することができます。
それでは早速実装していきましょう！

form_forとは

form_forはrailsでformを作成する際に必要な便利な機能です
（http://railsdoc.com/references/form_for） 参考文献

form_tagとform_forの違いはこちら
https://qiita.com/shunsuke227ono/items/7accec12eef6d89b0aa9　 参考文献

拡張させると、お問い合わせformも作成することができます。

実装手順

まずは、コントローラーを作成します。
ここではforms_controllerとformモデルを作成します。

bash

$ rails g controller forms
$ rails g model form 

次に、先程のコマンドで生成されたmigrateファイルを編集しテーブを作成します
テーブルの内容を変更する場合は任意に変更してください！
今回は、名前、メール、電話番号、メッセージの内容でテーブルを作成します

db/migrate/2018_create_forms.rb

  def change
    create_table :forms do |t|
      t.string :name          #名前
      t.string :email         #メール
      t.text :content         #メッセージの内容
      t.integer :phone        #電話番号
      t.timestamps
    end
  end

それでは、　DBに内容を反映させていきましょう！

bash

$ rake db:migrate

次にroutesの変更を行います
下記の二行を追加してください
先程生成したformsコントローラーのnewとcreateに飛ばしています

config/routes

  get "forms/new"
  post "forms/create" #投稿を保存するためにhttpメソッドはPOST

次にcontrolerの変更を行います
先程生成したコントローラーを下記のように変更してください

controllers/forms_controller

class FormsController < ApplicationController
    
    def new
        @form = Form.new
    end
    
    def create
      @form = Form.create(form_params)  #格納された値を保存
    end
    
  private
    def form_params
        params.require(:form).permit(:name, :email, :phone, :content)  #paramsの中身をpermitして保存を許可
    end
    
end

次にviewの変更をしていきます
formのページを作成していきましょう
HTMLはご自身の下記方に合わせて変更してください。
今回はbootstrapのテンプレートのHTMLを使用しています。（https://blackrockdigital.github.io/startbootstrap-agency/）

views/forms/new.html.erb

    <!-- Contact -->
    <section id="contact">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 text-center">
            <h2 class="section-heading text-uppercase">Contact Us</h2>
            <h3 class="section-subheading text-muted">お問合わせはこちらから</h3>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12">
            
            <!--form-->
            <%= form_for(@form, url: forms_create_path) do |f| %>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <%= f.text_field :name, class: 'form-control', placeholder: 'あなたのお名前 *', id: 'name'  %>
                  </div>
                  <div class="form-group">
                    <%= f.text_field :email, class: 'form-control', placeholder: 'メールアドレス *', id: 'email'  %>
                  </div>
                  <div class="form-group">
                    <%= f.text_field :phone, class: 'form-control', placeholder: '電話番号 *', id: 'phone'  %>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <%= f.text_area :content, class: 'form-control', placeholder: 'お問い合わせ内容 *', id: 'message'%>
                  </div>
                </div>
                <div class="clearfix"></div>
                <div class="col-lg-12 text-center">
                  <%= f.submit "メッセージを送信する", class:'btn btn-primary btn-xl text-uppercase'%>
                </div>
              </div>
            <% end %>
          </div>
        </div>
      </div>
    </section>

次に、もう一枚htmlを作成します。
formを投稿した後のページです。

views/forms/create.html.erb

<section id="services">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <h2 class="section-heading text-uppercase"><%= @form.name%>様</h2>　
        <h3 class="section-subheading text-muted">お問い合わせ有難うございます</h3>
      </div>
    </div>
  </div>
  </section>

おまけ　お問い合わせフォームの簡単な作り方

goole_formを利用する(https://www.google.com/intl/ja_jp/forms/about/)

index.html.erb

  <li class="nav-item">
    <%= link_to "google_form", "https://goo.gl/forms/yLuiJjbBIE2dJ7Gf2", class: "nav-link js-scroll-trigger" %>
  </li>

これだけであっという間にformを作成できます！