テキストボックスの値を別のテキストボックスへ反映させる方法『Contact Form 7』にて
問い合わせページだけでなく、最近は契約書ページも『Contact Form 7』で作成して使ってるのですが、ペーパーレスで管理も楽になり便利でいいですね!
『契約書』として使う時、例えば契約者の名前を最初に入力してもらって、最後にも入力する必要があった時、同じ情報を2回入力させることになりますよね。これはユーザビリティ的によくないな。と思い、テキストボックスに入力した情報(値)を、別のボックスに反映させることにしました。
ってことで今回は「テキストボックスの値を別のテキストボックスへ反映させる方法」です。
目次
Contact Form 7に関する記事:一覧
テキストボックスの値を別のテキストボックスへ反映させる方法
今回は『契約書』として作成したページにこの機能を取り入れたので、その例で説明します。
まずは完成バージョンです。
完成バージョン
この最初の『お名前をご入力ください』とあるテキストボックスに文字を入力をすれば、自動で『お名前』にその入力内容が入ります。
■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タグを使って設定してくださいね。
Google AdS
関連記事
IcoMoonでSVGスプライトを作ってSVGアイコンを使う方法:WordPress & html での設定方法
今までSVGアイコンはきちんと把握せず使ってきたので、少々トラブルがあっても『頻繁に使う訳ではないし、とりあえず使えてた…
WordPressの記事がトップページ以外、全部見れなくなった時の対処方法(404 error)
年末にサーバーの移転を進めていたのですが、以前に何度かサーバーの移転やWordpressの引っ越し等々していたので、大変…
WindowsのSafariで【background】が効かない時の原因と対処方法
最近cssではショートハンドを使って記述するのが当たり前になってきたので(ショートハンドの詳細はこちら)、今回トラブルと…
onMouseOver、onMouseOutで、簡単に画像を切り替える
今までマウスオーバー等で画像を切り替える時は、jQueryを使ったり、cssで画像を重ねてopacityで画像を透過させ…
Firefoxでなぜか消える、Tableのborder対策、cssのみでの解決法
Firefoxでなぜか消えてしまうTableのborder、いつもじゃなく、たまになのでこれがやっかい。。原因がわからな…