自分のポートフォリオにお問合せ機能が欲しくなり、実装してみました。
こちらの記事を参考
https://qiita.com/japwork/items/145645e281b81d9bf92c
開発環境
ruby '2.7.5'
gem 'rails', '~> 6.1.4',
OS: macOS Catalina
まず最初にmailerを作成します。
rails g mailer ContactMailer
そして、送信先と件名を指定します。
自分の場合は、メールの送信先と送信元の二箇所にメールを送りたいため、
２つ作っています。
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
先ほども申し上げたんですが、メールを２つ送る場合だと、doneアクションのelse後のアクションを２つ追加しています。
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
と４つ作成します。
#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>
を追加します。
すると無事動かせると思います。
意外にも作りやすいので、是非作ってみてください。