大阪のホームページ制作会社

1. 名前／メールアドレス／問い合わせ内容 を入力
2. 入力漏れがないかチェックして、OKであれば確認画面へ、NGであれば入力画面に戻る
3. サイト管理者あてにメールを送信して、送信完了画面を表示する

Routesを設定する

Rails.application.routes.draw do
  get 'inquiry' => 'inquiry#index'              # 入力画面
  post 'inquiry/confirm' => 'inquiry#confirm'   # 確認画面
  post 'inquiry/thanks' => 'inquiry#thanks'     # 送信完了画面
end

コントローラ

class InquiryController < ApplicationController
  def index
    # 入力画面を表示
    @inquiry = Inquiry.new
    render :action => 'index'
  end
 
  def confirm
    # 入力値のチェック
    @inquiry = Inquiry.new(params[:inquiry])
    if @inquiry.valid?
      # OK。確認画面を表示
      render :action => 'confirm'
    else
      # NG。入力画面を再表示
      render :action => 'index'
    end
  end
 
  def thanks
    # メール送信
    @inquiry = Inquiry.new(params[:inquiry])
    InquiryMailer.received_email(@inquiry).deliver
 
    # 完了画面を表示
    render :action => 'thanks'
  end
end

– app/views/inquiry/index.html.erb
– app/views/inquiry/confirm.html.erb
– app/views/inquiry/confirm.html.erb
HTML出力用のテンプレートですね。3画面あるので3ファイル作成します。

– app/models/inquiry.rb
モデルクラス（Inquiry）を実装します。ここでバリデーションルールを記述します。

– app/controllers/mailers/inquiry_mailer.rb
メール送信に使うクラス（InquiryMailer）を実装します。

– app/views/inquiry_mailer/ received_email.text.erb
メール本文のテンプレートです。
ファイル名はinquiry_mailer.rb内のメソッド名と合わせておきます。

ビュー（HTMLテンプレート）

入力 / 確認 / 完了 の３画面分のテンプレートファイルを作成します。
Bootstrapのクラスをつけています。

<%= form_for @inquiry, :url => inquiry_confirm_path do |f| %>
  <div class="page-header">
    <h1>お問い合わせ</h1>
  </div>
 
  <% if @inquiry.errors.any? %>
    <div class="alert alert-danger" role="alert">
      <strong>入力内容にエラーがあります</strong>
      <ul>
        <% @inquiry.errors.each do |attr, msg| %>
          <li><%= msg %></li>
        <% end %>
      </ul>
    </div>
  <% end %>
 
  <table class="table">
    <tr>
      <th>名前<span class="text-danger">（必須）</span></th>
      <td><%= f.text_field :name %></td>
    </tr>
    <tr>
      <th>メールアドレス<span class="text-danger">（必須）</span></th>
      <td><%= f.text_field :email %></td>
    </tr>
    <tr>
      <th>お問い合わせ内容</th>
      <td><%= f.text_area :message %></td>
    </tr>
  </table>
  <%= f.submit '確認', class: 'btn btn-primary' %>
<% end %>

<div class="page-header">
  <h1>お問い合わせ</h1>
</div>
 
<%= form_for @inquiry, :url => inquiry_thanks_path do |f| %>
  <table class="table">
    <tr>
      <th>名前</th>
      <td>
        <%= f.hidden_field :name %>
        <%= @inquiry.name %>
      </td>
    </tr>
    <tr>
      <th>メールアドレス</th>
      <td>
        <%= f.hidden_field :email %>
        <%= @inquiry.email %>
      </td>
    </tr>
    <tr>
      <th>お問い合わせ内容</th>
      <td>
        <%= f.hidden_field :message %>
        <%= simple_format(@inquiry.message) %>
      </td>
    </tr>
  </table>
  <%= f.submit '送信', :class => 'btn btn-primary' %>
<% end %>

<div class="page-header">
  <h1>お問い合わせ</h1>
</div>
<p>
  お問い合わせいただきありがとうございました。
</p>

モデル

問い合わせフォームの入力情報を持ちまわるモデルクラスを作成します。

class Inquiry
  include ActiveModel::Model
 
  attr_accessor :name, :email, :message
 
  validates :name, :presence => {:message => '名前を入力してください'}
  validates :email, :presence => {:message => 'メールアドレスを入力してください'}
end

データベースを使わないモデルはActiveModelを使って作ります。
これだけでデータの格納やバリデーションができてしまいます。

メーラー

送信メールのインスタンス生成用のメーラークラスを作成します。
コントローラのthanks()で使っているクラスですね。

class InquiryMailer < ActionMailer::Base
  default from: "example@example.com"   # 送信元アドレス
  default to: "example@example.com"     # 送信先アドレス
 
  def received_email(inquiry)
    @inquiry = inquiry
    mail(:subject => 'お問い合わせを承りました')
  end
 
end

received_email()でメールタイトルを指定してメールインスタンスを作成して返してます。
コントローラではこれに対してdeliver()を呼んでメール送信しています。
メールのテンプレートは上記のメソッド名とあわせて作成します。

Webサイトからお問い合わせがありました。
 
--------------------------
Name: <%= @inquiry.name %>
Email: <%= @inquiry.email %>
Message:
<%= @inquiry.message %>
--------------------------

以上で完成です。

おまけ：Bootstrap3のセットアップ

Bootstrapを導入すると見た目が整います。

導入前

導入後

# 以下を追加
gem 'bootstrap-sass', '~> 3.2.0'

@import "bootstrap-sprockets";
@import "bootstrap";

# class Application に以下を追加
config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)

上記のように編集後、bundle update と bundle install を実行すればOKです。