フォローする

第6弾「JSで差をつける入力フォーム改善」

採用率との関係性

エディターのコンテキストメニューだけでもデザイン案を作成することはできますが、入力フォームのような難易度の高いページでは、エディターにJavaScriptを直接入力することで、コンテキストメニューでは再現できないデザイン案を作成することができます。

デザイン案の幅が広がると、チャレンジできるオファーやデザインのバリエーションが増え、着実に採用数も増やすことができます。

今回も皆さまのお力になれますよう、JavaScriptを使ったデザインについてご紹介して参ります。

JavaScriptについて

今回はJavaScriptの一種であるjQueryを使ってデザインいたします。
JavaScriptとjQueryの関係性や、jQueryの基礎知識についてはこちら「中級編 jQueryの書き方」をご参照ください。

※両表記による混同をふせぐため、本ページの表記はJavaScriptに統一いたします。

デザインポイント

  • JavaScriptを使って「要素を移動、追加、複製」する
  • コメント機能を使って「どこに何が書いてあるか」見やすくする
    • 見やすいと「他のデザイン案に活用しやすい」「問題箇所を見つけやすい」

作成方法

テストオファー:練習用オファー④
テストページ:入力フォーム
デザイン変更:見学予約フォームの入力エリアを「見学希望日」「お客様情報」「希望条件」の3つに分ける

  1. 練習用オファー④の「デザイン案を作成する」ボタンをクリックしエディターを開く
    1.png
  2. JavaScriptタブとCSSタブに下記コードを入力
    • JavaScriptタブの1行目
      // 見学予約フォームのテーブルにクラス「table02」を追加
      // テーブル(table02)に小見出しを追加
      $('form.reserve > table').addClass('table02');
      $('.table02').before('<h3>お客様情報をご入力ください</h3>');
    • CSSタブの1行目
      /* 見学予約フォームの小見出しに余白を指定 */
      form.reserve h3 {
        margin: 0 0 10px 0;
      }
  3. 上記コメントがデザインに反映されていることを確認

    • 見学予約フォームのテーブルにクラス「table02」を追加
    • テーブル「table02」に小見出し「お客様情報をご入力ください」を追加
    • 小見出しとテーブルの間に余白を指定
  4. JavaScriptタブに下記コードを入力
    • JavaScriptタブの4行目
      // テーブル(table02)の前に新しいテーブル(table01)を追加
      // 「見学希望日」「その他入力」項目をテーブル(table01)に移動
      $('form.reserve > h3').before('<table class="table01"></table>');
      var $kibouday = $("#tomorrow").parent().parent();
      $kibouday.appendTo('table.table01');
      var $freeans = $("th:contains('その他、ご要望などご自由にお書きください')").parent();
      $freeans.appendTo('table.table01');
  5. 上記コメントがデザインに反映されていることを確認
    5.png
    • テーブル(table02)の前に新しいテーブル(table01)を追加
    • 「見学希望日」「その他入力」項目をテーブル(table01)に移動
  6. JavaScriptタブに下記コードを入力
    • JavaScriptタブの14行目
      // テーブル(table02)の後ろに新しいテーブル(table03)を追加
      // 新しいテーブル(table03)に小見出しを追加
      // 「予算」「年収」「間取り」「面積」「人数」「入居時期」項目をテーブル(table03)に移動
      $('form.reserve > table.table02').after('<table class="table03"></table>');
      $('.table03').before('<h3>希望条件をご入力ください</h3>');
      var $kibougaku = $("th:contains('ご希望の購入額(予算)は?')").parent();
      $kibougaku.appendTo('table.table03');
      var $nensyu = $("th:contains('世帯年収は?')").parent();
      $nensyu.appendTo('table.table03');
      var $kiboumadori = $("th:contains('ご希望の間取りは?')").parent();
      $kiboumadori.appendTo('table.table03');
      var $kiboumenseki = $("th:contains('ご希望の専有面積は?')").parent();
      $kiboumenseki.appendTo('table.table03');
      var $nyukyoyoteinum = $("th:contains('ご入居予定人数は?')").parent();
      $nyukyoyoteinum.appendTo('table.table03');
      var $yoteijiki = $("th:contains('ご入居希望時期は?')").parent();
      $yoteijiki.appendTo('table.table03');
  7. 上記コメントがデザインに反映されていることを確認
    7.png
    • テーブル(table02)の後ろに新しいテーブル(table03)を追加
    • テーブル「table03」に小見出し「希望条件をご入力ください」を追加
    • 「予算」「年収」「間取り」「面積」「人数」「入居時期」項目をテーブル(table03)に移動
  8. JavaScriptタブとCSSタブに下記コードを入力
    • JavaScriptタブの32行目
      // テーブル(table02)の後ろに申し込みボタンを複製
      $('form.reserve .button').clone().insertAfter('form.reserve > table.table02');
    • CSSタブの6行目
      /* 複製した申し込みボタンに余白を指定 */
      form.reserve .button {
        margin: 0 0 20px 0;
      }
  9. 上記コメントがデザインに反映されていることを確認
    9.png
    • テーブル(table02)の後ろに申し込みボタンを複製
    • 複製した申し込みボタンに余白を指定
  10. JavaScriptタブとCSSタブに下記コードを入力
    • JavaScriptタブの35行目
      // 必須項目のth要素にクラス「th-required」を追加
      var $required = $("form.reserve th .must").parent();
      $required.addClass('th-required');
    • CSSタブの11行目
      /* 必須項目のth要素に背景色を指定 */
      .th-required {
        background: #fff1f1;
      }
  11. 上記コメントがデザインに反映されていることを確認
    11.png
    • 必須項目のth要素にクラス「th-required」を追加
    • 必須項目のth要素に背景色を指定
  12. 最後にプレビューを開き上記変更箇所を全て確認、問題なければデザイン案を投稿

採用率を上げる・修正を減らすTips

この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています
他にご質問がございましたら、リクエストを送信してください

0 コメント

ログインしてコメントを残してください。