Webフォームを運用する中で、さまざまな理由からWebフォーム全体や一部の項目を一時的に非表示にしたいこともあるでしょう。この記事ではWebフォームを非表示にする具体的な方法について解説します。

デザイン自由なフォーム作成ツールならクライゼルをご利用ください。

Webフォームを非表示化する目的

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

一時的に非表示にしたいとき

1つ目は運用上の都合などで、削除するのではなく一時的に非表示にしておきたいケースです。Webフォーム全体を非表示にしたい場合には、下書き状態にする方法もあります。

デバイスごとに表示・非表示を設定したい

2つ目は、PCやスマホなどのデバイスごとにフォームの表示を切り替えたいケースです。デバイスごとに最適な表示にするため、Webフォーム全体を切り替えたり、一部の要素をスマホの時だけ非表示にしたりするような使い方が考えられます。

隠しデータとして送信したい

3つ目は、隠しデータを送信したいケースです。ユーザーは知る必要がなくフォームには記載しないものの、送信データのデータベースには残しておきたい情報がある場合に使われます。

HTMLを利用して非表示化する方法

Webフォームを非表示にする方法は構築方法によっても変わりますが、主にHTMLを使う方法、CSSを使う方法、JavaScriptを使う方法の3つが考えられます。まずは、HTMLで非表示にする方法から紹介します。

コメントアウト

コメントアウトは、コード内の特定の箇所を無効化するものです。

非表示にしたい箇所を

<!-- ここに書いている文字が非表示になります -->

のように囲むことでコメントアウトされます。1行だけでなく複数行に渡って使うこともできるので、フォーム全体を非表示にすることも一部のみ非表示にすることも可能です。

hiddenの使用

隠しデータを送信したい場合に活用できるのが、inputタグのhidden属性を使う方法です。hidden属性を指定するとそのinputタグは非表示になり、value属性で指定した値がフォーム送信時に送信されます。

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

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

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

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

CSSを使った非表示化の方法

CSSはHTMLとセットで使用される、Webページのデザインを指定する言語です。ここではCSSを使った非表示の方法をご紹介します。

「display:none;」を使う

「display:none」は、指定した要素をディスプレイ上で存在しないように扱うよう指示するものです。

レスポンシブデザインで、ディスプレイサイズによって表示を切り替えたい場合などでも使われます。

「visibility:hidden;」を使う

「visibility:hidden;」は指定したボックス要素を見えなくする（透明にする）ものです。

内容は非表示になるものの、レイアウト上のスペースは保持されます。

​​​​​​​

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

JavaScriptはWebサイトのブラウザ上で動くプログラムで、世界中のほとんどのWebサイトで利用されているものです。

​​​​​​​例えば、前の項目の回答によって次の質問項目を条件分岐させるなどの複雑な指定も、JavaScriptで行えます。

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

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

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

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

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

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

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

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

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