Webフォームの特定の項目を隠したい、デバイスによって表示を切り替えたい、 隠しデータを送りたい。こうした要件はフォーム運用の現場でよく発生します。

この記事では、HTML・CSS・JavaScriptそれぞれを使った非表示の実装方法を 具体的なコード付きで解説します。また、ノーコードでこれらを実現できる フォーム作成ツールについても紹介します。

デザイン自由なフォーム作成ツール「クライゼル」の資料はこちらから【無料】ダウンロードしていただけます。ぜひ、ご覧ください。

Webフォームを非表示にする3つのケース

まずは、Webフォームを非表示にするケースごとに見ていきましょう。

① 一時的にフォーム全体を非表示にしたい

キャンペーン終了後や改修中など、フォームを削除せず一時的に 非公開にしたいケースです。クライゼルのようなASP型フォームツールでは、 管理画面から「非公開」状態に切り替えるだけで非表示にできます。

② デバイスごとに表示・非表示を切り替えたい

スマートフォンとPCで表示項目を変えたいケースです。 レスポンシブ対応のCSSで制御するのが一般的です。。

③ 隠しデータ（hidden）をフォームに含めて送信したい

ユーザーには見せないが、送信データとして記録しておきたい情報を hidden属性で埋め込む方法です。流入経路やキャンペーンIDの 埋め込みなどによく使われます。

HTMLを使った非表示の実装方法

コメントアウト（<!-- -->）

一時的に特定のHTML要素を無効化する最も手軽な方法です。

<!-- <input type="text" name="tel" placeholder="電話番号"> -->

フォーム全体を囲めばページへの掲載を止めることができます。 ただし、ソースコードを見れば内容は確認できるため、 機密情報の隠蔽には使わないでください。

inputタグのtype="hidden"

ユーザーには表示させず、フォーム送信時に特定の値を 一緒に送りたい場合に使います。

<input type="hidden" name="campaign_id" value="spring2024">

流入元のキャンペーンIDや、セッション情報などを データベースに記録する際によく活用されます。

HTMLを非表示にする上での注意点

HTMLで非表示化するとディスプレイには表示されませんが、ソースコードを見れば記載内容は閲覧できてしまいます。

そのため、秘匿性の高い情報を隠す方法としては不適切だと言えます。

CSSやJavaScriptで非表示にする場合も同様です。これらのコードは外部から閲覧することができてしまいますので、外部に一切見られたくない場合は、サーバーサイドのプログラムから書き換えるなどしましょう。

CSSを使った非表示の実装方法

CSSによる非表示は「見た目上の制御」に適しています。 ソースコードは残るため、機密情報には不向きです。

「display:none;」を使う

要素をレイアウト上から完全に消します。スペースも詰まります。

.hidden-field {
  display: none;

}

メディアクエリと組み合わせてレスポンシブ対応にも使われます。

@media (max-width: 768px) {
        .pc-only {
           display: none;
       }
}

「visibility:hidden;」を使う

要素は非表示になりますが、レイアウト上のスペースは保持されます。 前後の要素の位置が変わると困る場合に使います。

.transparent-field {
   visibility: hidden;
}

​​​​​​​

JavaScriptを使用してhtmlの表示・非表示の切り替えも可能

JavaScriptを使うと、ユーザーの入力に応じて リアルタイムに項目を出し分けする「条件分岐フォーム」が実現できます。

【例】「法人」を選択したときだけ「会社名」欄を表示する

document.getElementById('user_type').addEventListener('change', function() {
      const companyField = document.getElementById('company_name_wrap');
      if (this.value === 'corporate') {
         companyField.style.display = 'block';
      } else { companyField.style.display = 'none';
      }
});

条件分岐フォームは、不要な質問を減らしてユーザーのストレスを下げる EFO（エントリーフォーム最適化）の定番テクニックです。

display:noneやhidden属性などはあくまで「画面上に見せないだけ」です。

ブラウザの開発者ツールを開けば、誰でも中身を確認できます。

個人情報やパスワードなど機密性の高いデータを扱う場合は、 サーバーサイドでの制御が必要です。

非表示化の設定が簡単にできるフォーム作成にはクライゼル

Webフォームは運用しながら改善していくものですが、上で紹介したようなソースコードの編集を自社で行うのは難しいもの。

非プログラマーでも簡単に扱えるユーザビリティと自由自在に作り替えられるカスタマイズ性を兼ね備えたツールがあれば、フォームの運用は大いに捗るでしょう。

自由度の高いフォーム作成ツールとして人気の「クライゼル」は、ASP型でフォーム作成に必要な機能を揃えており、項目の表示／非表示も自由自在。

また、 HTML/CSS/JavaScriptでデザインをフルカスタマイズすることも可能なため、自社サイトのイメージに合わせたwebフォームを制作することも可能です。

自社で対応することが難しい場合には、要望に合わせてフォーム制作を代行するサービスも用意しています。

さらに、強固なセキュリティも特徴で官公庁や大手企業にも導入されています。Webフォームの作成・運用にお困りの方はぜひクライゼルをご活用ください。

HTML/CSS/JavaScriptでフルカスタマイズも可能

Webフォームを作るならクライゼル