テキストボックスの値を別のテキストボックスへ反映させる方法『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
関連記事
-
opacityの書き方 クロスブラウザ
今までも書いてましたが、ほんとIE嫌い。 そして、これからもまた同じ事書くでしょう。 さて。クロスブラウザでIE…
-
Facebookでシェアした記事のサムネイル画像がおかしい時、表示されない時の解決方法
せっかく面白そうなネタを見つけたので、早速Wordpressに記事を投稿!でもいざFBでシェアしようとしたら、サムネイル…
-
【2021】FacebookやTwitter CardのOGPの設定をする!チェックツールURLも!プラグインなし
今まで何度も『OGP』の設定に関する記事は書いてきたのですが、新規サイト立ち上げで参考にしようと見てみたら、Facebo…
-
【2024最新】スマホ・タブレットの解像度一覧表(画面サイズの割合)iPhone・iPad..
2024/6「解像度一覧表」 更新 最近はレスポンス対応が当たり前になってきて、メディアクエリの記述をしない方…
-
日付を自動更新で表示させる! 簡単コピペ その2!
以前『日付を自動更新で表示させる! 簡単コピペ!!』を書いたのですが、その時の方法はJaveScriptで『docume…