テキストボックスの値を別のテキストボックスへ反映させる方法『Contact Form 7』にて

問い合わせページだけでなく、最近は契約書ページも『Contact Form 7』で作成して使ってるのですが、ペーパーレスで管理も楽になり便利でいいですね！

『契約書』として使う時、例えば契約者の名前を最初に入力してもらって、最後にも入力する必要があった時、同じ情報を2回入力させることになりますよね。これはユーザビリティ的によくないな。と思い、テキストボックスに入力した情報（値）を、別のボックスに反映させることにしました。

ってことで今回は「テキストボックスの値を別のテキストボックスへ反映させる方法」です。

テキストボックスの値を別のテキストボックスへ反映させる方法

今回は『契約書』として作成したページにこの機能を取り入れたので、その例で説明します。
まずは完成バージョンです。

完成バージョン

この最初の『お名前をご入力ください』とあるテキストボックスに文字を入力をすれば、自動で『お名前』にその入力内容が入ります。

■ABC契約書■

WebデザインABCは（以下「甲」）と（以下「乙」）は、以下の契約を締結します。

〇契約内容〇
〇〇〇〇〇〇
〇〇〇〇〇〇

その他の情報はサンプルとしての飾りです。『送信』ボタンを押しても何も送信されません。
ちなみに日付が『今日（本日）』になっているのは、前回の記事「『Contact Form 7』で今日の日付けを表示させ、メールで送信する時『年月日』に変更する方法」に記載してますので、気になる方はこちらをチェックしてください。

ということで、このようにする方法です。

1 テキストエリアにIDを設定する

上記の例をそのまま持ってくると

1つ目のボックス（入力する側：input・textareaタグの場合）

<input type="text" size="25" id="InputName" placeholder="お名前をご入力ください" class="InputNameBox">

2つ目のボックス（出力される側:『Contact Form 7』の設定画面のショートコードの場合）

[text* your-name id:OutputName placeholder "「乙」に入力した名前が自動で入力されます"]

こんな感じにります。最小限の設定なので、css等の設定は適宜追加・変更してくださいね。

ちなみに2つ目は『Contact Form 7』を使っているので、ショートコードで作ったものを記載していますが、1つ目と同様、inputタグやtextareaタグでもidをきちんと設定できれば問題ありません。

2 JavaScriptの記述を追加する

何もしないと入力した値は何も反応してくれないので、以下の記述を追加します。

<script type="text/javascript">
  const inputName = document.getElementById("InputName");//入力する側
  const outputName = document.getElementById("OutputName");//出力される側
  if (inputName && outputName) {
    inputName.addEventListener("input", function() {
      outputName.value = inputName.value;
    });
  }
</script>

これは投稿内にそのまま記載していますが、jsファイルに分けて、他のページでも同じように使いたい場合は、以下のコードを別のjsファイルに追記するか、作成して読み込みませます。

$(document).ready(function() {
  const inputName = document.getElementById("InputName");
  const outputName = document.getElementById("OutputName");
  if (inputName && outputName) {
    inputName.addEventListener("input", function() {
      outputName.value = inputName.value;
    });
  }
});

投稿内に記載するか、jsファイルとして読み込むかについては、前回の記事「『Contact Form 7』で今日の日付けを表示させ、メールで送信する時『年月日』に変更する方法」に記載がありますので、気になる方は参考にしてください。

ちなみにこれは『Contact Form 7』で作ったテキストボックスに限らず、inputタグやtextareaタグを使用して情報を入力し、別のボックスにその値を反映させたい時にも同様に使えますので、その場合はショートコードの設定を、入力する側と同様、inputタグやtextareaタグを使って設定してくださいね。