ホームページ制作・大阪インフォメーションメディアデザイン

06-6809-5021

Column
コラム

Ruby on Rails 4 でお問い合わせフォーム(確認画面つき)を作成する

  • Twitterでシェア
  • このエントリーをはてなブックマークに追加
  • Google+でシェア
  • follow us in feedly
Ruby on Rails 4 でお問い合わせフォーム(確認画面つき)を作成する

コーポレートサイトでは必須のお問い合わせフォーム、特にデータベースを利用する必要はないけどRuby on Railsを使って簡単に実装したい、ということがあると思います。

ここでは、サイト管理者あてにメールを送るシンプルなアプリケーションの作成方法をまとめたいと思います。

フォーム入力からメール送信までの流れは以下のようになります。

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

動作確認に利用したRuby on Railsのバージョンは4.1.1です。
以下のサイトを参考にさせていただきました。

【ruby】ActiveModelを使ってDBと関係ないFormを作成する【Rails】
Rails4 の ActionMailer でメール送信

Routesを設定する

まずはroutes.rbでURLを決定してしまいましょう。

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

コントローラ

続いてコントローラです。3つのアクションを作成します。

/app/controllers/inquiry_controller.rb
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テンプレート)

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

/app/views/inquiry/index.html.erb
<%= 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 %>

/app/views/inquiry/confirm.html.erb
<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 %>

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

モデル

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

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

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

メーラー

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

/app/mailers/inquiry_mailer.rb
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()を呼んでメール送信しています。
メールのテンプレートは上記のメソッド名とあわせて作成します。

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

以上で完成です。

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

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

導入前

Bootstrap_before

導入後

Bootstrap_after

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

/app/assets/stylesheets/custom.css.scss
@import "bootstrap-sprockets";
@import "bootstrap";

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

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

この記事を共有する

この記事を読んだ方におすすめの記事

その他の最新コラム記事

人気記事ランキング

コラムカテゴリ
  • このエントリーをはてなブックマークに追加
  • follow us in feedly
お問い合わせ