【WordPress】javaScriptで入力BOX

スポンサーリンク

WordPress内にテキストをさせ、その情報をURLに含めて行うことができます。まずhtmlで以下のように作成します。

入力された宛先を、以下のようにurlにつなげて渡します。”?”の後にキー=バリューの形で渡します。複数情報がある場合には、”?”で区切って整形します。

例)

https://xxx.yyy.jp/?address=東京都新宿区

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>宛先の入力</title>
  </head>
  <body>
    <script type="text/javascript" language="javascript">
      function onButtonClick() {
         var  address  = document.getElementById("address").value;
         var  url ="https://xxx.yyy.jp/?address=" + address;
         window.location.href = url;

      }
    </script>
    <form action="#" method="post">
        <input type="text" id="address" value="東京都XXXXXX" >
        <input type="button" value="宛先" onclick="onButtonClick();" ></p>
    </form>
</body>
</html>

上で作成したaddress.htmlをhtmlモードでWordPress内に埋め込みます。固定ページや投函ページ内に埋め込みます。これで完了です。

<iframe style="border: none;" frameborder="0" height="100" src="https://hogehofge/address.html" width="500>
</iframe>