お問い合わせ機能

はじめに

お問い合わせ機能を実装していきます。

流れ

1. mailerを作成、編集
　2. テーブルの作成
　3. config/enviroments/development.rbの編集
　4. 環境変数の設定
　5. controllerの作成
　6. routing編集
　7. viewの編集

mailerを作成、編集

$ rails g mailer ContactMailer

送信先と件名を指定します。
ENV['TOMAIL']は後ほど設定します。

app/mailers/contact_mailer.rb

class ContactMailer < ApplicationMailer
  def send_mail(contact)
    @contact = contact
    mail to:   ENV['TOMAIL'], subject: '【お問い合わせ】' + @contact.subject
  end
end

テーブルの作成

rails g model Contact

migrate/xxxx_create_contacts.rb

class CreateContacts < ActiveRecord::Migration[6.1]
  def change
    create_table :contacts do |t|

      t.string :name, null: false
      t.string :email, null: false
      t.string :subject, null: false
      t.text :message, null: false

      t.timestamps
    end
  end
end

rails:db:migrateを忘れずに

config/enviroments/development.rbの編集

migrate/xxxx_create_contacts.rb

...

config.action_mailer.raise_delivery_errors = false　
 ↓　true　に変更
config.action_mailer.raise_delivery_errors = true

...

config.action_mailer.delivery_method = :smtp
  config.action_mailer.smtp_settings = {
      port: 587,
      address: 'smtp.gmail.com',
      domain: 'smtp.gmail.com',
      user_name: ENV['SMTP_USERNAME'],
      password: ENV['SMTP_PASSWORD'],
      enable_starttls_auto: true
  }
end

環境変数の設定

Gemfile

gem "dotenv-rails"

bundle installを忘れずに

次にGemfileと同じ階層に .envファイルを作成

.env

TOMAIL=送信先のアドレス

SMTP_USERNAME=送信元のgmailアドレス
SMTP_PASSWORD=送信元のgmailアドレスのパスワード

.gitignoreファイルの一番下に下記を追加。

.env

コントローラの作成

$ rails g controller public/contacts new confirm done

controllers/public/contacts_controller

class Public::ContactsController < ApplicationController

  def new
    @contact = Contact.new
  end

  def confirm
    @contact = Contact.new(contact_params)
    if @contact.invalid?
      flash[:alert] = @contact.errors.full_messages.join(", ")
      @contact = Contact.new
      render :new
    end
  end

  def back
    @contact = Contact.new(contact_params)
    render :new
  end

  def create
    @contact = Contact.new(contact_params)
    if @contact.save
      ContactMailer.send_mail(@contact).deliver_now
      redirect_to done_contacts_path
    else
      flash[:alert] = @contact.errors.full_messages.join(", ")
      @contact = Contact.new
      render :new
    end
  end

  def done
  end

    private

    def contact_params
      params.require(:contact).permit(:name, :email, :subject, :message)
    end
end

ルーティングの編集

resources :contacts, only: [:new, :create] do
  collection do
      post 'confirm'
      post 'back'
      get 'done'
  end
end

ビューの編集

views/public/contacts/new.html.erb

<div class="container-fluid light-blue-container p-5">
  <div class="row">
    <div class="col-md-8 offset-md-2">
    
    <div class="mb-2">
      <%= flash[:alert] %>
    </div>

      <%= form_with model: @contact, url: confirm_contacts_path, local: true do |f| %>
        <div class="form-group">
          <%= f.label :name, 'お名前' %><span class="text-danger">*</span>
          <%= f.text_field :name, autofocus: true, class: 'form-control' %>
        </div>

        <div class="form-group">
          <%= f.label :email, 'メールアドレス' %><span class="text-danger">*</span>
          <%= f.email_field :email, class: 'form-control' %>
        </div>

        <div class="form-group">
          <%= f.label :subject, '件名' %><span class="text-danger">*</span>
          <%= f.text_area :subject, class: 'form-control' %>
        </div>

        <div class="form-group">
          <%= f.label :message, 'メッセージ' %><span class="text-danger">*</span>
          <%= f.text_area :message, size: '10x10', class: 'form-control' %>
        </div>

        <div>
          <%= f.submit '入力内容確認', class: "btn btn-outline-info bg-white" %>
        </div>
      <% end %>

    </div>
  </div>
</div>

views/public/contacts/confirm.html.erb

<div class="container p-5">
  <div class="row">
    <div class="col-md-10 offset-md-1">

      <table class="table">
        <tbody>
          <tr>
            <td class="text-right" style="width: 30%;">お名前</td>
            <td><%= @contact.name %></td>
          </tr>
          <tr>
            <td class="text-right mt-3" style="width: 30%;">メールアドレス</td>
            <td><%= @contact.email %></td>
          </tr>
          <tr>
            <td class="text-right mt-3" style="width: 30%;">件名</td>
            <td><%= @contact.subject %></td>
          </tr>
          <tr>
            <td class="text-right mt-3">メッセージ</td>
            <td style="white-space: pre-wrap;"><%= @contact.message %></td>
          </tr>
        </tbody>
      </table>

      <div class="d-flex">
        <div class="mr-3">
        <%= form_with model: @contact do |f| %>
          <%= f.hidden_field :name %>
          <%= f.hidden_field :email %>
          <%= f.hidden_field :subject %>
          <%= f.hidden_field :message %>
          <div><%= f.submit '送信', class: "btn btn-success" %></div>
        <% end %>
        </div>

        <div>
        <%= form_with model: @contact, url: back_contacts_path do |f| %>
          <%= f.hidden_field :name %>
          <%= f.hidden_field :email %>
          <%= f.hidden_field :subject %>
          <%= f.hidden_field :message %>
          <div><%= f.submit '入力画面に戻る', class: "btn btn-info" %></div>
        <% end %>
        </div>
      </div>


    </div>
  </div>
</div>

views/public/contacts/done.html.erb

<div class="container p-5">
  <h5 class="text-center">お問い合わせありがとうございました。</h5>
</div>

views/contact_mailer/send_mail.html.erb, send_text.html.erb

<%= @contact.name %> 様 から問い合わせがありました。<br>

【メールアドレス】：<%= @contact.email %><br>
【件名】：<%= @contact.subject %><br>
【お問い合わせ内容】<br>
<span style="white-space: pre-wrap;"><%= @contact.message %></span>

↑これはなぜか２つのファイルを作成しないと本文が表示されませんでした。。。
なぜか分かる方コメントで教えて欲しいです。。。。