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

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

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

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

目次

  1. テキストボックスの値を別のテキストボックスへ反映させる方法
    1. テキストエリアにIDを設定する
    2. JavaScriptの記述を追加する

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ファイルをインポート

    IcoMoonでSVGスプライトを作ってSVGアイコンを使う方法:WordPress & html での設定方法


    今までSVGアイコンはきちんと把握せず使ってきたので、少々トラブルがあっても『頻繁に使う訳ではないし、とりあえず使えてた…

    記事を読む▷


    WPで全ページ見れなくなった時

    WordPressの記事がトップページ以外、全部見れなくなった時の対処方法(404 error)


    年末にサーバーの移転を進めていたのですが、以前に何度かサーバーの移転やWordpressの引っ越し等々していたので、大変…

    記事を読む▷


    WindowsのSafariで【background】が効かない時の原因と対処方法


    最近cssではショートハンドを使って記述するのが当たり前になってきたので(ショートハンドの詳細はこちら)、今回トラブルと…

    記事を読む▷


    onMouseOver、onMouseOutで、簡単に画像を切り替える


    今までマウスオーバー等で画像を切り替える時は、jQueryを使ったり、cssで画像を重ねてopacityで画像を透過させ…

    記事を読む▷


    Thumbnail_Icon_firefox_bug

    Firefoxでなぜか消える、Tableのborder対策、cssのみでの解決法


    Firefoxでなぜか消えてしまうTableのborder、いつもじゃなく、たまになのでこれがやっかい。。原因がわからな…

    記事を読む▷


    Message

    メールアドレスが公開されることはありません。

    このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    Google AdS

    • 人気の記事

    新着記事

    PAGE TOP