0
Help us understand the problem. What are the problem?

posted at

Railsにメールが2通来るお問合せ機能を作ってみた

自分のポートフォリオにお問合せ機能が欲しくなり、実装してみました。

こちらの記事を参考
https://qiita.com/japwork/items/145645e281b81d9bf92c

開発環境
ruby '2.7.5'
gem 'rails', '~> 6.1.4',
OS: macOS Catalina

まず最初にmailerを作成します。

rails g mailer ContactMailer

そして、送信先と件名を指定します。
自分の場合は、メールの送信先と送信元の二箇所にメールを送りたいため、
2つ作っています。

class ContactMailer < ApplicationMailer
  default from: 'noreply@example.com'
  default to: 'admin@example.com'
  layout 'mailer'

  def send_mail(contact)
    @contact = contact
    mail(from: contact.email, to: ENV['MAIL_ADDRESS'], subject: 'Webサイトより問い合わせが届きました') do |format|
      format.text
    end
  end

  def send_mail_client(contact)
    @contact = contact
    mail(from: contact.email, to: @contact.email, subject: 'お問合せありがとうございます。') do |format|
      format.text
    end
  end
end

その次に、モデルを作成します。

rails g model Contact

config/enviroments/development.rbも編集していきます。

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

環境変数の設定もしてきますが、
参考記事と同じ手順のため省略します。

次にcontrollerの作成して、アクションを記述します。

rails g controller contacts
class ContactsController < ApplicationController
  def index
      @contact = Contact.new
    end
   
    def confirm
      @contact = Contact.new(contact_params)
      if @contact.valid?
        render :action => 'confirm'
      else
        render :action => 'index'
      end
    end

    def done
      @contact = Contact.new(contact_params)
      if params[:back]
        render :action => 'index'
      else
        ContactMailer.send_mail(@contact).deliver_now
        ContactMailer.send_mail_client(@contact).deliver_now
        render :action => 'done'
      end
    end

    private
      def contact_params
        params.require(:contact).permit(:name, :email, :content)
      end
end

先ほども申し上げたんですが、メールを2つ送る場合だと、doneアクションのelse後のアクションを2つ追加しています。

routing編集

  resources :contacts
  post 'contacts/confirm', to: 'contacts#confirm', as: 'contact_confirm'
  post 'contacts/index', to: 'contacts#index', as: 'contact_index'
  post 'contacts/done', to: 'contacts#done', as: 'contact_done'

viewの編集
app/views/contact_mailer配下に
send_mail.html.erb、send_text.html.erb 
send_mail_client.html.erb、send_mail_client.text.erb
と4つ作成します。

#send_mail.html.erb
お問合せありがとうございます。
返信まで少々お待ちください。

<%= @contact.content %>

<%= @contact.name %> (<%= @contact.email %>)
#confirm.html.erb
<% provide :title, 'お問い合わせ' %>
<div class="container mt-4">
  <div class="row">
    <div class="col-md-12 col-lg-6 offset-lg-3">
      <h2>お問い合わせ</h2>
      <nav aria-label="パンくずリスト" class="small">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><%= link_to 'トップページ', root_path %></li>
          <li class="breadcrumb-item active" aria-current="page">お問い合わせ</li>
        </ol>
      </nav>
      <hr />

      <%= form_with model: @contact, local: true, url: contact_done_path do |form| %>

        <div class="form-group">
          <%= form.label :name, '名前' %>
          <%= form.text_field :name, value: @contact.name, id: 'name', class: 'form-control-plaintext', :placeholder => '名前' %>
        </div>

        <div class="form-group">
          <%= form.label :email, 'メールアドレス' %>
          <%= form.text_field :email, value: @contact.email, id: 'email', class: 'form-control-plaintext', :placeholder => 'メールアドレス' %>
        </div>

        <div class="form-group">
          <%= form.label :content, 'お問い合わせ内容' %>
          <%= form.text_area :content, value: @contact.content, id: 'content', class: 'form-control-plaintext', :placeholder => 'お問い合わせ内容', :rows => '5' %>
        </div>

        <p>この内容で送信します。よろしいですか?</p>

        <div class="float-right">
          <%= form.submit "戻る", name: 'back', class: "btn btn-dark" %>
          <%= form.submit "送信", class: "btn btn-dark" %>
        </div>
      <% end %>

    </div>
  </div>
</div>
#done.html.erb
<% provide :title, 'お問い合わせ' %>
<div class="container mt-4">
  <div class="row">
    <div class="col-md-12 col-lg-6 offset-lg-3">
      <h2>お問い合わせ</h2>
      <nav aria-label="パンくずリスト" class="small">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><%= link_to 'トップページ', root_path %></li>
          <li class="breadcrumb-item active" aria-current="page">お問い合わせ</li>
        </ol>
      </nav>
      <hr />

      <p>ありがとうございます。お問い合わせ内容を送信しました。</p>

    </div>
  </div>
</div>
#index.html.erb
<% provide :title, 'お問い合わせ' %>
<div class="container mt-4">
  <div class="row">
    <div class="col-md-12 col-lg-6 offset-lg-3">
      <h2>お問い合わせ</h2>
      <nav aria-label="パンくずリスト" class="small">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><%= link_to 'トップページ', root_path %></li>
          <li class="breadcrumb-item active" aria-current="page">お問い合わせ</li>
        </ol>
      </nav>
      <hr />
      
      <%= form_with model: @contact, local: true, url: contact_confirm_path do |form| %>
        <% if @contact.errors.any? %>
          <div class="alert alert-danger" role="alert">
            <h5><strong>入力内容にエラーがあります。</strong></h5>
            <ul>
              <% @contact.errors.full_messages.each do |message| %>
                <li><%= message %></li>
              <% end %>
            </ul>
          </div>
        <% end %>

        <div class="form-group">
          <%= form.label :name, '名前' %>
          <span class="badge badge-info rounded-0">必須</span>
          <%= form.text_field :name, id: 'name', class: 'form-control', :placeholder => '名前' %>
        </div>

        <div class="form-group">
          <%= form.label :email, 'メールアドレス' %>
          <span class="badge badge-info rounded-0">必須</span>
          <small class="text-muted">例:user@example.com</small>
          <%= form.text_field :email, id: 'email', class: 'form-control', :placeholder => 'メールアドレス' %>
        </div>

        <div class="form-group">
          <%= form.label :content, 'お問い合わせ内容' %>
          <span class="badge badge-info rounded-0">必須</span>
          <small class="text-muted">パスワードなどの機密情報を含めないでください。</small>
          <%= form.text_area :content, id: 'content', class: 'form-control', :placeholder => 'お問い合わせ内容', :rows => '5' %>
        </div>

        <div class="float-right">
          <%= form.submit "確認", class: "btn btn-dark" %>
        </div>
      <% end %>

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

を追加します。

すると無事動かせると思います。
意外にも作りやすいので、是非作ってみてください。

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
0
Help us understand the problem. What are the problem?