テキストボックスの値を別のテキストボックスへ反映させる方法『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



    関連記事

    onMouseOver、onMouseOutで、簡単にテキストを切り替える!


    前回のonMouseOver,onMouseOutで簡単に画像を切り替える!の続き、応用編です。 実はこちらサイト…

    記事を読む▷


    お名前.comで “Whois情報公開代行” の設定にチェックを入れ忘れて登録した時の対処方法


    先日、こちら で少し書いたのですが、お名前.comでドメインを取った時に、 "Whois情報公開代行" の設定にチェック…

    記事を読む▷


    『reCAPTCHA v3』を問い合わせページのみ&左側に表示させる方法:その2


    前回書いた『reCAPTCHA v3』を問い合わせページのみ&左側に表示させる方法:その1の続きです! 今…

    記事を読む▷


    WordPress:特定カテゴリで投稿を古い順に表示させる方法


    Wordpressの投稿の表示は、デフォルトでは新しいものから表示されますよね。でも特定カテゴリーでは反対(投稿した順番…

    記事を読む▷


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


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

    記事を読む▷


    Message

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

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

    PAGE TOP