クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

トップ > JS > 【JS】フォームのinputタグにURLパラメータを渡す方法

【JS】フォームのinputタグにURLパラメータを渡す方法

JS

URLの後ろにつらつらと続くパラメータ。あれを取得してフォームのinputタグに渡す方法をご紹介。やれることはわかってて前からやってみたいと思っていた内容なので、実際に作ってみました。それでは、どうぞ！

※目次：

※参考：JSの基本についてはこちら
【JSの基本-前編】書ける前に読む！HTML、CSS、JSの書式-4 - クモのようにコツコツと

URLパラメータとはなんぞや

まずパラメータとはなんでしょう。こんな形式です。URLの後ろに続いている文字列です。

URLパラメータの形式

//普通のURL
http://ドメイン.com

//パラメータ付URL（一つ）
http://ドメイン.com?変数=値

//パラメータ付URL（複数）
http://ドメイン.com?変数=値&変数=値&変数=値&変数=値&変数=値
  • URLのあとに?を付けて変数=値を書きます。
  • 複数のパラメータを付ける場合は二つ目以降は?が&になります。

よくバナー広告のリンク先がこのようにパラメータがつらつらと入っていたりしますよね。あと、スパムメールのURLとかね。これらはURLに付属したい情報を追加しているわけです。

見た目は基本的に上記の形式ですがパラメータは2種類あります。

  • アクティブパラメータ：パラメータによってページの内容が変化する
  • パッシブパラメータ：パラメータによってページの内容が変化しない

アクティブパラメータ

アクティブパラメータの例として検索結果があります。

パッシブパラメータ

パッシブパラメータは任意で自由でつけられます。

パラメータ付きURLのアクセスを計測

さて、パッシブパラメータはページの内容に何も影響をおよぼしませんが、それではなんのためにパラメータを付けるのでしょうか？主に、計測が目的になります。

例えばある特設ページがあり、問い合わせフォームへのリンクボタンが三つあったとします。

<article>
<h1>絶対に絶対に絶対にたったの1秒で億万長者になれる方法をあなただけにこっそり伝授！！！！！！！</h1>
<img src="img/main.jpg" alt="札束のお風呂に浸かる男の写真">

<aside id="btn01"><a href="form.html?btn=001">今すぐ問い合わせる！！</a></aside>

<section class="setumei">
<h2>説明タイトル説明タイトル説明タイトル</h2>
<p>説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。</p>
</section>

<aside id="btn02"><a href="form.html?btn=002">今すぐ問い合わせる！！</a></aside>

<section class="setumei">
<h2>説明タイトル説明タイトル説明タイトル</h2>
<p>説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。説明文章、説明文章。</p>
</section>

<section class="ketsuron">
<h2>結論タイトル結論タイトル結論タイトル</h2>
<p>大金持ちになれる！なれる！なれる！なれる！なれる！なれる！なれる！なれる！なれる！なれる！なれる！なれる！なれる！なれる！なれる！なれる！なれる！なれるぞぉーーーー！！。</p>
</section>

<aside id="btn03"><a href="form.html?btn=003">今すぐ問い合わせる！！</a></aside>

</article>
  • ページTOPのすぐ下の問い合わせボタンのリンク先にはパラメータ?btn=001
  • 説明の真ん中の問い合わせボタンのリンク先にはパラメータ?btn=002
  • 結論の後の問い合わせボタンのリンク先にはパラメータ?btn=003

この3つのボタンのリンク先は基本的に同じ内容ですが、Googleアナリティクスのアクセス解析では違うページとしてカウントされます。 そのため、どのボタンが一番多くクリックされたかがわかるわけです。
この場合、001は切羽詰まってて、002は普通の人、003は慎重派ですねw

他にこんな使い方もできます。

  • 複数のSNSにシェアするときに?sns=tw、?sns=fbなど異なるパラメータを付ける→どのSNSが一番アクセスが多いか計測できる
  • メルマガ本文のリンクに?mail=20180101などのパラメータを付ける→メルマガからのアクセス数を計測できる
  • 複数のアフィリエイターに?afi_id=001、?afi_id=002などのID番号を付与する→どの紹介記事が一番アクセスが多いか計測できる

URLを取得してフォームに送信

さて、URLにパラメータを追加することで、アクセスまでは計測できました。しかし、我々の最終的なゴールはフォームの送信までですよね！
もしこのパラメータ付URLをフォームの入力情報と一緒に送信できれば、フォーム送信まで到達したパラメータの数が計測できそうです。

location.hrefでURLを取得する

JSには、現在表示されているページのURLを取得する方法があります。location.hrefです。

<P class="text">このページのURLは「<span id="thisurl"></span>」です。</P>

例えばid#thisurlのspanタグにURLを表示したい場合

  var url = location.href;
  document.getElementById("thisurl").innerHTML = url;
  • 変数urlにlocation.hrefを代入
  • DOMthisurlの中身をinnerHTMLでurlに変更

これでページのURLが表示されます。

上記の例では埋め込みコード用のパラメータ?type=embed&animations=runが追記されています。大元のリンク先はパラメータ無しのURLが表示されてます。

※参考：https://codepen.io/i_ryo/pen/bjbqLx

ためしにURLにパラメータ?boowy=psychoを追加してみると

※参考：https://codepen.io/i_ryo/pen/bjbqLx?boowy=psycho

リンク先のページにもパラメータ（BOØWYは最高）が表示されます。

フォームにURLを入れたい

さて、URLを取得して画面に表示まではできました。次にこれをフォームの項目として入力したいですね。例えばこんなフォームです。*1

     <form action="php/form.php" method="post" id="test" name="test">
      <dl>
        <dt>名前</dt>
        <dd>
          <input type="text" name="名前" id="name">
        </dd>
      </dl>
      <dl>
        <dt>E-mail</dt>
        <dd>
          <input type="text" name="E-mail" id="e-mail">
        </dd>
      </dl>
      <dl>
        <dt>URL</dt>
        <dd>
          <input type="text" name="URL" id="inputurl">
        </dd>
      </dl>

      <input type="submit" value="送信する">
    </form>

一応URL欄は作ってみましたが、まさかユーザーにURLをいちいちコピペしてもらうわけにはいきません。。

さきほどJSで取得したURLをここに渡せれば自動的に入力できそうです。

valueプロパティにURLを渡す

inputタグの入力値はvalue属性になります。例えばnameのところに「イイダリョウ」と入力するとvalue属性の値にイイダリョウが入ります。このvalueに先ほどの変数urlを代入するとどうでしょうか。

  document.getElementById("inputurl").value = url;

DOMのid#inputurlのvalueプロパティに変数urlを代入。どうだ？

おお！やりました！URLが自動的に入力されました！これでURLを送信することができますね。

パラメータのみを取得してフォームに送信

さて、URLをinputタグに渡すことができましたが、ちょっと長いですよね。URLの部分は自明であって、本当に知りたいのはURLの後ろのパラメータのみです。

location.searchでパラメータのみ取得したい

はい、パラメータのみを取得するJSもありまぁす。location.searchです！

<P class="text">このページのパラメータは「<span id="thisparam"></span>」です。</P>

今度はid#thisparamのspanタグにパラメータを表示しましょう。

var param = location.search;
  document.getElementById("thisparam").innerHTML = param;
  • 変数paramにlocation.searchを代入
  • DOMthisparamの中身をinnerHTMLでparamに変更

先ほどのURL取得とほとんど同じ書き方ですね。さあ、どうなるか。

パラメータ、表示されました！

ちなみに元ページを見ると、埋め込み用のパラメータがないので空欄です。

※参考：https://codepen.io/i_ryo/pen/rrBzab

ここに任意のパラメータ?boowy=psychoを追加すると…

※参考：https://codepen.io/i_ryo/pen/rrBzab?boowy=psycho

BOØWYは最高〜が表示されました！

valueプロパティにパラメータを渡す

さあ、URLと同様にinputのvalue属性にパラメータを渡しましょう。HTMLはこんなです。

      <dl>
        <dt>パラメータ</dt>
        <dd>
          <input type="text" name="param" id="inputparam">
        </dd>
      </dl>

先ほどのURLとほとんど同じです。idは#inputparamにしています。次、JSはこんなです。

  document.getElementById("inputparam").value = param;

DOMのid#inputparamのvalueプロパティに変数paramを代入。すると…

おお！埋め込み用のパラメータ?type=embed&animations=runのみが表示されてますね！

任意のパラメータ?boowy=psychoを追加したページはこちら

※参考：https://codepen.io/i_ryo/pen/OwLjWz?boowy=psycho

BOØWYは最高〜入りましたぁ！

type="hidden"で非表示に

さて、これでURLやパラメータがinput項目に入力できることがわかりました。なお、この項目はユーザーにとっては見えなくてもいい、あくまで内部で計測するために必要な項目ですね。 *2

表示不要の項目はtype属性をhiddenにすると非表示にすることができます。

      <dl>
        <dt><!--URL（非表示）--></dt>
        <dd>
          <input type="hidden" name="URL" id="inputurl">
        </dd>
      </dl>
      <dl>
        <dt><!--パラメータ（非表示）--></dt>
        <dd>
          <input type="hidden" name="param" id="inputparam">
        </dd>
      </dl>

id#inputurlと#inputparamのinputタグをtype="hidden"にすると…

リンク先をデベロッパーツールなどで見ていただくと、非表示ながら#inputurlのvalue属性にURLが入っているのがわかります。

※参考：https://codepen.io/i_ryo/pen/QBLMQz

パラメータ?boowy=psycho付きはこちら。#inputparamのvalue属性に「BOØWYは最高〜」が入ります。

※参考：https://codepen.io/i_ryo/pen/QBLMQz?boowy=psycho

最後に：パラメータの限界

さて、これでパラメータ付きのURLでフォームの送信まで計測することができましたが、この方法には限界があります。

このページに訪れたユーザーがその場で問い合わせや注文をする場合はこれでいいのですが、普通はそんなに即決されることは少ないと思います。
この日は認知だけで終わって、検討の結果、後日また訪れてポチった場合、もしこのときURLにパラメータがないと計測ができません。
また、即日でもサイト内を回遊してフォームに再訪したときにはもうパラメータはありません。

対策としてはパラメータ付きで訪れたユーザー情報をCookieで記録し、紐づける必要があります。また、Cookieは最近好まれない風潮ですが、これに変わる技術として、JSでローカル環境のみで完結するローカルストレージという技術も産まれました。
ここらへんについてはまた改めて触れていきたいと思います。ではまた。

※参考：ネイティブJSやってみたシリーズ
qiita.com

*1:フォームを送信するには別途PHPファイルの送信プログラムが必要です。formタグのaction属性に紐づいています

*2:このままだと打ち替えも可能なので、その意味でも非表示にしたい