これだけ！HTMLでお問い合わせフォームを作成する方法

お問い合わせフォームはユーザーと企業をつなぐために、欠かせないツールです。お問い合わせフォームがあれば、ユーザーはすぐに企業にコンタクトを取ることが出来るようになります。

しかし、多くの方は「お問い合わせフォームの作成には専門的な知識が必要だ」と考えているようです。今回の記事では、お問い合わせフォーム作成ツールを使わずにHTMLを使ってフォームを作る方法をまとめました。

お問い合わせフォームでよく使われる項目

お問い合わせフォームは、ユーザーから集めたい情報をただ入力してもらえばいいのではなく、ユーザーに負担をかけずに入力しやすい方法で入力項目を用意するべきです。

ここでは、お問い合わせフォームによく使われる項目を紹介します。

例えば、住んでいる住所の入力で都道府県を選択してもらうのなら、テキストフィールドよりもセレクトボックスの方が入力しやすいでしょう。質問内容に合わせて項目を使い分けることが大切です。

HTMLでお問い合わせフォームを作成する手順

ここからは、HTMLでお問い合わせフォームを作成する手順を説明します。初めてHTMLを使うという方でも分かりやすい内容にしてあります。

【手順①】formタグ

お問い合わせフォームの外枠と言える囲み部分を作ります。大枠のHTMLは下記の通りです。

このfromタグの中に、テキストフィールドなどの全ての指定を入力します。このHTML内で指示されているactionとmethodの意味は下記の通りです。

action

actionタグでは、ユーザーがお問い合わせフォームを送信した後に移動するページのURLを設定します。つまり、入力内容確認ページに移行するためのタグだと考えてください。今回はサンプルとして「confirm.php」としました。

method

送信されたデータの処理方法を指定します。お問い合わせフォームを作る場合は「POST」と入力してください。

【手順②】テキストフィールド

テキストフィールドは短い文章を入力するのに適した項目です。テキストフィールドを作成するには、inputタグを使います。

例えば、氏名を入力してもらうには、以下のような指定になります。

type

「type=”〇〇”」では入力内容の種類を指定します。「text」の他に「email」や「number」があります。「email」を指定すると「xxxx@xxx.xx」という内容しか入力できず、「number」は半角数字しか入力できません。また、何も指定しない場合は「text」を指定したことになります。

氏名であれば「text」、メールアドレスであれば「email」、電話番号であれば「number」を使うなど、入力内容に合わせて指定を行いましょう。

name

nameには、入力項目を管理するための名称を半角英数字で指定します。自分自身がその内容が分かるのであれば、どんな名称でも構いません。nameは、phpなどでプログラミングする際に使用するものなので、何をつければいいのか迷ってしまう場合は入力項目を英訳して付けておきましょう。

また、nameについての使い方は、別のタグでも同様です。

【手順③】セレクトボックス

selectとopitionタグを使うと、セレクトボックスを作成出来ます。セレクトボックスは、入力欄をクリックすることでプルダウン式に選択肢が表示されます。居住地の都道府県や参加希望日時を選択してもらう時などに便利です。

8月1日から3日のうち、どれか1つの希望日を選択してもらうセレクトボックスは以下のとおりです。

optionタグで表示する選択肢を指定し、selectタグで全体を囲います。

optionタグのvalueは、選択された選択肢をプログラム内で認識するために利用されます。何を指定すればいいかよくわからない方は、上記のとおり数字や選択肢を英訳したものを指定しておきましょう。

【手順④】ラジオボタン

選択肢が少ない場合には、ラジオボタンを作ってユーザーに1つの選択肢を選んでもらうという方法もあります。セレクトボックスと異なり、入力欄をクリックしなくても、全ての選択肢が表示されます。

先ほどのセレクトボックスの例をラジオボタンに変更するには、下記のとおりです。

labelは、テキストフィールドの横に「氏名」と表示したり、ラジオボタンの横に選択肢の内容を表示したりする時に使用するタグです。

「label for」と「input id」を使うことで、labelタグとinputタグを紐づけることができます。上記の例では「8月1日（月）」という文字列をクリックすると、「8月1日（月）」が選択されます。
もし紐づける指定が無い場合は、「8月1日（月）」という文字列をクリックしても何も起こらず、「8月1日（月）」を選択するには「8月1日（月）」の横にあるラジオボタン（小さい丸）を押して選択する必要があるのです。

入力の利便性を考えるなら、「label for」と「input id」を使った方が便利です。

紐づける方法は、「label for=”1″」「input id=”1″」などforとidに同じ指定をします。例では数字ですが、英単語でも問題ありません。

【手順⑤】チェックボックス

チェックボックスを作れば、ユーザーに選択肢から複数の希望を選択してもらうことが出来ます。

チェックボックスは、いくつかの候補を提示し選んでもらう際に有効であり、さまざまなシーンで使えます。

【手順⑥】テキストエリア

テキストエリアは長文を入力するために適した項目です。ユーザーが自由に文章を書けるため、お問い合わせ内容を記載してもらう時に使えます。

【手順⑦】送信ボタン

最後に、送信ボタンを用意すればお問い合わせフォームが完成します。

または、下記のタグも使用可能です。

ただし、buttonタグの方がカスタマイズしやすいため、初めからbuttonを使っておくことをおすすめします。

まとめ

HTMLでお問い合わせフォームを作成する方法を説明しました。HTMLで作ったお問い合わせフォームはカスタマイズ性が高く、HTMLについての知識も身に付きます。自力でお問い合わせフォームを作りたいと考えているのなら、この記事を参考にしてください。

しかし、HTMLでお問い合わせフォームを作成するには、専門的な知識が必要で、時間もかかります。

もっと簡単に短時間でお問い合わせフォームを設置したいのであれば、フォームが作成出来るツールの利用も検討するといいでしょう。フォーム作成ツールにはさまざまな種類のツールが存在し、問い合わせ管理や顧客管理ができるツールもあります。お問い合わせフォームで受け付けた問い合わせをどのように管理、活用していきたいかも考え、ツールの利用も検討してみてください。

「資料請求フォーム」や「ホワイトペーパー請求フォーム」を目的としたフォーム用途なら、クラウド顧客獲得ツール「nocoセールス」のフォーム機能がオススメです。資料やホワイトペーパーの閲覧状況や開封通知なども取得できるため、営業やマーケティング用途では非常に重宝する機能を揃えているほか、複数の資料をまとめて1枚のウェブサイトに掲載できる資料サイトCMS機能も搭載。また、利用料 0円で利用できる無料プランも使えるのが嬉しいポイントです。

クラウド顧客獲得ツール nocoセールス
https://noco.sale