Merge pull request #7749 from fjordllc/corporate_training_inquiry__de…

…sign

研修申し込みフォームとメールのデザイン調整

app/views/corporate_training_inquiries/_form.html.slim

@@ -3,37 +3,54 @@
   .form__items
     .form-item
       = f.label :name, class: 'a-form-label is-required'
-      = f.text_field :name, class: 'a-text-input'
+      = f.text_field :name, class: 'a-text-input', placeholder: '人事部 駒形真幸（コマガタマサキ）'
     .form-item
       = f.label :company_name, class: 'a-form-label is-required'
-      = f.text_field :company_name, class: 'a-text-input'
+      = f.text_field :company_name, class: 'a-text-input', placeholder: '株式会社ロッカ'
     .form-item
       = f.label :email, class: 'a-form-label is-required'
-      = f.email_field :email, class: 'a-text-input'
-    .form__items-inner
-      .form-item
-        = f.label :meeting_dates, class: 'a-form-label is-required'
-        .form-item
+      = f.email_field :email, class: 'a-text-input', placeholder: 'info@lokka.jp'
+      .a-form-help
+        p
+          | この後のご連絡はメールにて差し上げます。
+    .form-item
+      = f.label :meeting_dates, class: 'a-form-label is-required'
+      .a-form-help
+        p
+          | 研修カリキュラムをご用意するにあたり、ビデオチャットを通じて、
+          | 研修の目的や受講される方のスキルについて伺わせていただきます。
+          | また、その際に研修内容に関するご質問がございましたら、ぜひお気軽にお尋ねください。
+      .form__items.mt-4
+        .form-item.is-inline
           = f.label :meeting_date1, class: 'a-form-label'
-          = f.datetime_field :meeting_date1
-        .form-item
+          = f.datetime_field :meeting_date1, class: 'a-text-input w-64'
+        .form-item.is-inline
           = f.label :meeting_date2, class: 'a-form-label'
-          = f.datetime_field :meeting_date2
-        .form-item
+          = f.datetime_field :meeting_date2, class: 'a-text-input w-64'
+        .form-item.is-inline
           = f.label :meeting_date3, class: 'a-form-label'
-          = f.datetime_field :meeting_date3
-      .form-item
-        = f.label :participants_count, class: 'a-form-label is-required'
-        = f.number_field :participants_count, min: 1, max: 10_000, placeholder: 1
+          = f.datetime_field :meeting_date3, class: 'a-text-input w-64'
+    .form-item
+      = f.label :participants_count, class: 'a-form-label is-required'
+      .a-button.is-md.is-secondary.is-select.is-block.w-24
+        = f.select :participants_count, options_for_select((1..20).map { |n| [n, n] })
+      .a-form-help
+        p
+          | 人数がまだ確定していない場合は、現時点でのおおよその人数を選択してください。
     .form-item
       = f.label :training_duration, class: 'a-form-label is-required'
-      = f.text_field :training_duration, class: 'a-text-input'
+      = f.text_field :training_duration, class: 'a-text-input', placeholder: '3ヶ月から半年'
+      .a-form-help
+        p
+          | 期間がまだ確定していない場合は、現時点でのおおよその期間を入力してください。
+          br
+          | 例: ３ヶ月から5ヶ月くらい
     .form-item
       = f.label :how_did_you_hear, class: 'a-form-label is-required'
-      = f.text_field :how_did_you_hear, class: 'a-text-input'
+      = f.text_area :how_did_you_hear, class: 'a-text-input is-sm', placeholder: '知り合いの会社である株式会社〇〇の△△さんに薦められて。'
     .form-item
       = f.label :additional_information, class: 'a-form-label'
-      = f.text_area :additional_information, class: 'a-text-input is-md'
+      = f.text_area :additional_information, class: 'a-text-input is-sm'
     .form-item
       .a-form-label
         | 個人情報の取り扱いについて

app/views/corporate_training_inquiries/new.html.slim

@@ -16,4 +16,4 @@ ruby:
         li.auth-form-nav__item
           = link_to 'トップページ', welcome_path, class: 'auth-form-nav__item-link'
         li.auth-form-nav__item
-          = link_to 'FAQ', faq_path, class: 'auth-form-nav__item-link'
+          = link_to '研修利用', training_path, class: 'auth-form-nav__item-link'

app/views/corporate_training_inquiry_mailer/incoming.html.erb

@@ -1,35 +1,51 @@
 <table width="100%">
   <tr>
-    <td style="word-wrap:break-word;font-size:0px;padding:0px 20px 0px 20px;" align="center">
+    <td style="word-wrap:break-word;font-size:0px;padding:24px 0 0;" align="center">
       <div style="cursor:auto; font-family: sans-serif ;text-align:center;">
-        <h3 style="font-family: sans-serif; font-size: 20px; color:#4638a0; line-height: 1.4; margin-bottom: 0; font-weight: bold">企業研修の申し込み</h3>
+        <h3 style="font-family: sans-serif; font-size: 24px; color:#4638a0; line-height: 1.4; margin-bottom: 0; font-weight: bold">企業研修の申し込み</h3>
       </div>
     </td>
   </tr>
   <tr>
     <td style="word-wrap:break-word;font-size:0px;padding:16px 24px 16px 24px;" align="left">
       <div style="cursor:auto;font-family:sans-serif; font-size:14px; line-height:1.8; text-align:left;">
-        <p><b>企業名：</b></p>
-        <p><%= @corporate_training_inquiry.company_name %></p>
-        <p><b>名前：</b></p>
-        <p><%= @corporate_training_inquiry.name %></p>
-        <p><b>Email：</b></p>
-        <p><%= @corporate_training_inquiry.email %></p>
-        <p><b>研修打ち合わせ希望日時：</b></p>
-          <p><b>第1希望</b></p>
-          <p><%= l @corporate_training_inquiry.meeting_date1, format: :default %></p>
-          <p><b>第2希望</b></p>
-          <p><%= l @corporate_training_inquiry.meeting_date2, format: :default %></p>
-          <p><b>第3希望</b></p>
-          <p><%= l @corporate_training_inquiry.meeting_date3, format: :default%></p>
-        <p><b>研修を受ける方の人数：</b></p>
-        <p><%= @corporate_training_inquiry.participants_count %>人</p>
-        <p><b>研修期間：</b></p>
-        <p><%= @corporate_training_inquiry.training_duration %></p>
-        <p><b>どこでフィヨルドブートキャンプを知りましたか？：</b></p>
-        <p><%= @corporate_training_inquiry.how_did_you_hear %></p>
-        <p><b>その他伝えておきたいこと：</b></p>
-        <p><%= @corporate_training_inquiry.additional_information %></p>
+        <p>
+          <b style="font-weight: bold">＜企業名＞</b><br>
+          <%= @corporate_training_inquiry.company_name %>
+        </p>
+        <p>
+          <b style="font-weight: bold">＜担当者様のお名前＞</b><br>
+          <%= @corporate_training_inquiry.name %>
+        </p>
+        <p>
+          <b style="font-weight: bold">＜Email＞</b><br>
+          <%= @corporate_training_inquiry.email %>
+        </p>
+        <p><b style="font-weight: bold">＜研修打ち合わせ希望日時＞</b></p>
+        <p>
+          <b style="font-weight: bold">第1希望</b><br>
+          <%= l @corporate_training_inquiry.meeting_date1, format: :default %>
+        </p>
+        <p>
+          <b style="font-weight: bold">第2希望</b><br>
+          <%= l @corporate_training_inquiry.meeting_date2, format: :default %>
+        </p>
+        <p>
+          <b style="font-weight: bold">第3希望</b><br>
+          <%= l @corporate_training_inquiry.meeting_date3, format: :default%>
+        </p>
+        <p>
+          <b style="font-weight: bold">＜予定している研修を受ける方の人数＞</b><br>
+          <%= @corporate_training_inquiry.participants_count %>人
+        </p>
+        <p>
+          <b style="font-weight: bold">＜予定している研修期間＞</b><br>
+          <%= @corporate_training_inquiry.training_duration %>
+        </p>
+        <p><b style="font-weight: bold">＜どこでフィヨルドブートキャンプを知りましたか？＞</b></p>
+        <%= simple_format @corporate_training_inquiry.how_did_you_hear %>
+        <p><b style="font-weight: bold">＜その他伝えておきたいこと＞</b></p>
+        <%= simple_format @corporate_training_inquiry.additional_information %>
       </div>
     </td>
   </tr>

app/views/inquiry_mailer/incoming.html.erb

@@ -1,19 +1,23 @@
 <table width="100%">
   <tr>
-    <td style="word-wrap:break-word;font-size:0px;padding:0px 20px 0px 20px;" align="center">
+    <td style="word-wrap:break-word;font-size:0px;padding:24px 0 0;" align="center">
       <div style="cursor:auto; font-family: sans-serif ;text-align:center;">
-        <h3 style="font-family: sans-serif; font-size: 20px; color:#4638a0; line-height: 1.4; margin-bottom: 0; font-weight: bold">お問い合わせ</h3>
+        <h3 style="font-family: sans-serif; font-size: 24px; color:#4638a0; line-height: 1.4; margin-bottom: 0; font-weight: bold">お問い合わせ</h3>
       </div>
     </td>
   </tr>
   <tr>
     <td style="word-wrap:break-word;font-size:0px;padding:16px 24px 16px 24px;" align="left">
       <div style="cursor:auto;font-family:sans-serif; font-size:14px; line-height:1.8; text-align:left;">
-        <p><b>名前：</b></p>
-        <p><%= @inquiry.name %></p>
-        <p><b>Email：</b></p>
-        <p><%= @inquiry.email %></p>
-        <p><b>本文：</b></p>
+        <p>
+          <b style="font-weight: bold">＜名前＞</b><br>
+          <%= @inquiry.name %>
+        </p>
+        <p>
+          <b style="font-weight: bold">＜Email＞</b><br>
+          <%= @inquiry.email %>
+        </p>
+        <p><b style="font-weight: bold">＜お問い合わせ本文＞</b></p>
         <%= simple_format @inquiry.body %>
       </div>
     </td>

app/views/users/new.html.slim

@@ -17,10 +17,10 @@
       .form-item
         .form-notice
           p
-            | 法人研修でのご利用については、
-            = link_to new_inquiry_path do
-              | こちらのお問い合わせフォーム
-            | からご連絡ください。
+            | 企業研修でのご利用は、
+            = link_to new_corporate_training_inquiry_path do
+              | こちらの企業研修申し込みフォーム
+            | からお申し込みください。
       - if !@user.adviser? && Campaign.today_campaign?
         = render 'checked_campaign'
       = render 'form', from: :new, url: users_path, user: @user

app/views/welcome/training.html.slim

@@ -40,11 +40,12 @@
             | ご利用の際の料金
         .welcome-section__description
           p
-            | 料金は月額99,800円（税込み）です。
-            br
-            | 毎月、貴社の研修担当者様へメールにて請求書をお送り致します。
+            | 料金は<strong>月額99,800円（税込み）</strong>です。
+          p
+            | 毎月、貴社の研修担当者様へメールにて請求書をお送りいたします。
+            | 領収書の宛名の指定なども柔軟に対応いたします。
             br
-            | 領収書の宛名の指定なども柔軟に対応致します。
+            | クレジットカードにも対応しています。
     section.welcome-section
       .container.is-md
         h2.welcome-section__title.has-border
@@ -69,7 +70,7 @@
           p
             | 一般の受講生が学んでいるカリキュラムは量が多く、その全てを学習すると半年〜2年以上かかります。
             | 研修でのご利用の場合、ビデオチャットで研修期間や研修で身につけてもらいたいスキルをヒヤリングし、
-            | それに合わせたカリキュラムを作成致します。
+            | それに合わせたカリキュラムを作成いたします。
             | カリキュラムは一般の受講生が行っているもの、一般の受講生の中の希望者がだけが行うものから
             | 抜粋する形になります。
           h3 チョイスの例
@@ -141,25 +142,23 @@
         .welcome-section__description
           p
             | まずは、
-            = link_to new_inquiry_path, target: 'blank', rel: 'noopener' do
-              | お問い合わせフォーム
-            | より研修利用希望の旨のご連絡をお願い致します。
-            br
-            | 研修についての質問などもお問い合わせフォームよりお願い致します。
+            = link_to new_corporate_training_inquiry_path, target: 'blank', rel: 'noopener' do
+              | 企業研修申し込みフォーム
+            | より研修利用希望の旨のご連絡をお願いいたします。
             br
-            | 担当者より返信を致します。
+            | 担当者より返信をいたします。
           p
             | 日時を調整し、ビデオチャットで研修の打ち合わせを行います。
             br
             | 研修のスタート日、研修期間、研修の目的、研修生のスキル、
             | 請求書の送付先などをヒヤリングさせていただきます。
           p
-            | 打ち合わせで決まった内容に合わせ、カリキュラムを作成致します。
+            | 打ち合わせで決まった内容に合わせ、カリキュラムを作成いたします。
           p
-            | 研修スタート日になりましたら、研修生のアカウントを作成し、研修生がログインできるように致します。
+            | 研修スタート日になりましたら、研修生のアカウントを作成し、研修生がログインできるようにいたします。
             br
             | 同時に、研修担当者、社内メンター用のサインアップもURLもお送りし、
-            | 貴社の研修担当者、社内メンターの方もログインができるように致します。
+            | 貴社の研修担当者、社内メンターの方もログインができるようにいたします。
 
     section.welcome-section
       .container.is-md
@@ -208,13 +207,10 @@
       .container.is-md
         h2.welcome-section__title.has-border
           | お申し込み
-          br
-          | お問い合わせ
         .welcome-section__description
           p
-            | 研修利用の申し込み、研修利用についてのお問い合わせは以下のお問い合わせフォームからお願い致します。
-
+            | 研修利用の申し込みは企業研修申し込みフォームからお願いいたします。
         .welcome-actions__items
           .welcome-actions__item
-            = link_to new_inquiry_path, class: 'a-welcome-button', target: 'blank', rel: 'noopener' do
-              | お申し込み・お問い合わせ
+            = link_to new_corporate_training_inquiry_path, class: 'a-welcome-button', target: 'blank', rel: 'noopener' do
+              | 企業研修のお申し込み

config/locales/ja.yml

@@ -186,15 +186,15 @@ ja:
         body: 内容
         privacy_policy: 個人情報の取り扱い
       corporate_training_inquiry:
-        name: 名前
+        name: 担当者様のお名前
         company_name: 企業名
         email: メールアドレス
         meeting_dates: 研修打ち合わせ希望日時
         meeting_date1: 第1希望
         meeting_date2: 第2希望
         meeting_date3: 第3希望
-        participants_count: 参加人数
-        training_duration: 研修期間
+        participants_count: 予定している研修を受ける方の人数
+        training_duration: 予定している研修期間
         how_did_you_hear: どこでフィヨルドブートキャンプを知りましたか？
         additional_information: その他伝えておきたいこと
         privacy_policy: 個人情報の取り扱い

test/system/corporate_training_inquiry_system_test.rb

@@ -20,14 +20,14 @@ class CorporateTrainingInquirySystemTest < ApplicationSystemTestCase
     visit '/corporate_training_inquiry/new'
     assert_equal '企業研修申し込みフォーム | FJORD BOOT CAMP（フィヨルドブートキャンプ）', title
 
-    fill_in '名前', with: '研修 する世'
+    fill_in '担当者様のお名前', with: '研修 する世'
     fill_in '企業名', with: '株式会社カンパニー'
     fill_in 'メールアドレス', with: 'corporate_training_inquiry@example.com'
     fill_in '第1希望', with: Time.zone.parse('2030-01-01-08:00')
     fill_in '第2希望', with: Time.zone.parse('2030-01-02-10:00')
     fill_in '第3希望', with: Time.zone.parse('2030-01-03-12:00')
-    fill_in '参加人数', with: '10'
-    fill_in '研修期間', with: '1ヶ月'
+    select '10', from: '予定している研修を受ける方の人数'
+    fill_in '予定している研修期間', with: '1ヶ月'
     fill_in 'どこでフィヨルドブートキャンプを知りましたか？', with: 'インターネットで知った'
     fill_in 'その他伝えておきたいこと', with: 'よろしくお願いします。'
     check '下記の個人情報の取り扱いに同意する', allow_label_click: true