お問い合わせ機能の実装

参考にしたサイト https://www.web-knowledge-info.com/wp/ruby-on-rails26/

お問い合わせのページはフッターにリンクを用意してどのページからもアクセスできるようにします。

<%= link_to "お問い合わせ", "#", class: "copylight-link" %>

お問い合わせのコントローラを作成します。

$ bundle exec rails g controller Contacts
Running via Spring preloader in process 10657
      create  app/controllers/contacts_controller.rb
      invoke  erb
      create    app/views/contacts

問い合わせするフォームが必要なので作成していきます。今作成したコントローラのアクションは新規作成の分だけで良いのでnewとcreateアクションだけ追加します。またログインしていなくてもお問い合わせフォームにはアクセスできるようにしたいのでrequire_loginをスキップします。

class ContactsController < ApplicationController
  skip_before_action :require_login

  def new
  end

  def create
  end
end

ルーティングを追加します。

resources :contacts, only: [:new, :create]

次のお問い合わせフォームで送られたemailとname、お問い合わせ内容を扱うためのモデルを作成します。

$ bundle exec rails g model Contact name:string email:string content:text
Running via Spring preloader in process 11324
      invoke  active_record
      create    db/migrate/20210717131106_create_contacts.rb
      create    app/models/contact.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.text :content, null: false

      t.timestamps
    end
  end
end

どの項目も入力必須にしたいのでこのように記入しました。

記入が終わったらデータベースを作成しました。

$ bundle exec rails db:migrate
== 20210717131106 CreateContacts: migrating ===================================
-- create_table(:contacts)
   -> 0.2038s
== 20210717131106 CreateContacts: migrated (0.2039s) ==========================

cnotact.rbにもnull制約をつけます。

class Contact < ApplicationRecord
  validates :name, presence: true
  validates :email, presence: true
  validates :content, presence: true
end

先ほど作成したcontacts_controller.rbに記述していきます。

class ContactsController < ApplicationController
  skip_before_action :require_login

  def new
    @contact = Contact.new
  end

  def create
    @contact = Contact.new(contact_params)
    if @contact.save
      ContactMailer.contact_us_email(@contact).deliver
      redirect_to root_path
    else
      render :new
    end
  end

    private

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

お問い合わせフォームを作成します。まず最初にビューファイルを作成します。

$ touch app/views/contacts/new.html.erb

次に作成したビューファイルにフォームを記述します。

<% content_for(:title, 'contact us') %>

<div class="container">
  <div class="row justify-content-center">
    <div class="card resulting col-10 col-md-6">
      
      <div class="card-body">
        <h2 class="result card-title text-center">✉️ contact us</h2>
        <div class="register">
        <%= simple_form_for @contact, local: true do |f| %>
            <div class="form-group">
              <%= f.input :name, class: 'form-control', placeholder: 'たろう' %>
            </div>
            <div class="form-group">
              <%= f.input :email, class: 'form-control', placeholder: 'emory@example.com' %>
            </div>
            <div class="form-group">
            <%= f.input :content, as: :text, class: 'form-control', input_html: { rows: 5, cols: 5 }, placeholder: 'お問い合わせ内容をご記入ください' %>
            </div>

            <div class="text-center">
              <%= f.submit t('defaults.submit'), class: "btn btn-normal" %>
            </div>
          <% end %>
        </div>
      </div>
    </div>
  </div>
</div>

次にMailerを作成しました。

$ bundle exec rails g mailer ContactMailer contact_us_email
Running via Spring preloader in process 10808
      create  app/mailers/contact_mailer.rb
      invoke  erb
      create    app/views/contact_mailer
      create    app/views/contact_mailer/contact_us_email.text.erb
      create    app/views/contact_mailer/contact_us_email.html.erb

作成されたMailerに送信するための設定を行います。

class ContactMailer < ApplicationMailer

  # Subject can be set in your I18n file at config/locales/en.yml
  # with the following lookup:
  #
  #   en.contact_mailer.contact_us_email.subject
  #
  def contact_us_email(contact)
    @contact = contact
    mail(:to => ENV["YOUR_GMAIL_ADDRESS"],
        :subject => "emoryへのお問い合わせ")
  end
end

メールの送信先には.envファイルで管理している私のメールアドレスを登録しています。

次にメールのテンプレートを作成します。

contact_mailer/contact_us_email.html.erb

<p>emoryへのお問い合わせ内容</p>
<p>====================================</p>
<p>お名前 : <%= @contact.name %></p>
<p>メールアドレス : <%= @contact.email %></p>
<p>内容 : <%= @contact.content %></p>

contact_mailer/contact_us_email.text.erb

emoryへのお問い合わせ内容

お名前 : <%= @contact.name %>
メールアドレス : <%= @contact.email %>
内容 : <%= @contact.content %>

フッターのお問い合わせのリンクにパスを記述しておきます。

<%= link_to "お問い合わせ", new_contact_path, class: "copylight-link" %>

お問い合わせフォームの内容を記入するtextareaの大きさを変えることができてしまっているのでcssで固定します。またフォームのレイアウトを綺麗にします。

/* お問い合わせフォームのtextareaを固定する */
textarea {
  resize: none !important;
  border: 1px solid var(--color5) !important;
  padding: 5px 8px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: var(--color5) !important;
  color: gray !important;
}

/* お問い合わせフォームのtextarea選択中 */
textarea:focus {
  outline: none !important;
  background: var(--color5) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  outline: 0 !important;
  border-color: var(--color2) !important;
}

/* お問い合わせフォームのプレースホルダー */
textarea::placeholder { 
  color: lightgray !important;
}

何故か!importantをつけないとcssがつかなかったので全てに記入しました。

参考にしたサイト https://www-creators.com/archives/2496

学習記録

アウトプット用に作りました

お問い合わせ機能の実装