多くのランディングページやホームページに必須のお問い合わせフォーム。
弊社にもよく「HTMLで問い合わせフォームを作ってください」というご依頼をいただくことがあります。
しかし、このご依頼方法は場合によっては「？？？」な混乱を産むことがあります。
今回は最低限知っておきたいフォームの基礎知識をお伝えします。
HTMLにメール送信機能はない
勘違いされている方が非常に多いですが、「HTMLだけでメールを送る」ことはできません。
HTMLは目に見えるフォームを作ることはでき、その情報を送信することはできます。
しかし、
- 管理者に問い合わせ内容をメールやメッセージで送る
- フォームを入力した人に自動返信メールを送る
- 問い合わせ内容を保存する
- 問い合わせ完了後に「問い合わせ完了」ページに飛ぶ
といった動作をHTMLという言語で行うことは基本できません。
これらの動作をするためにはHTML以外の言語やシステムを使う必要があります。
Formタグがあるんじゃないの？
HTMLの<form>というタグでも確かに情報の送受信ができます。
ただし、あくまで情報を送受信するだけです。その情報を元にメールを送信したり、問い合わせを管理する方法がありません。
メールアドレスや名前を入れて送信できたとしても、その内容を処理する機能がありません。
そのため情報を受け取って「情報を整形してメールの形に変換してメールを送信する」という機能が別途必要になります。
「送信した後にサンクスページに飛ばして」もできない
「問い合わせありがとうございました」のようなサンクスページを作って、そのページに飛ばすようにしてください…というオーダーはかなり多いです。
しかし、このサンクスページに飛ばす挙動はHTML本来の機能では実装できず
- JavaScriptを使ってフォーム送信後にサンクスページに移動する
- PHP等のサーバー言語を使ってフォーム送信後にリダイレクトする
といった設定が必要になります。
JavaScriptでメールを送れないの？
JavaScriptでメールを送ることも基本「できない」と思った方が良いです。
これも先程の<form>と同様、JavaScriptで情報を送受信すること自体は可能ですが、受け取る側がありません。
問い合わせ内容を管理したり自動返信メールが届いたり…のようなことはJavaScriptを用いたとしてもほぼ不可能です。
ただし、先ほどの「送信後にサンクスページに飛ばす」はJavaScriptでも可能です。
フォームを入力してメールを送信する方法は2種類
PHPのようなサーバー言語を利用して送る
多くの場合、メール送信時に利用するのはこちらの「サーバー機能経由で送信する方法」です。
PHPやPerlといったサーバー側で動く言語（バックエンド言語とも言います）を利用して入力された情報を処理します。
WordPressのプラグインもほとんどはPHPを利用してメール送信しています。
当然、これらの言語が使えるサーバーを利用しないと動きません。一般的にWebサイトの表示に使われるレンタルサーバーであれば問題なく動作します。
静的ホスティングを利用しているケースでは動かないので注意が必要です。
サーバー側言語を利用する場合、セキュリティに気を使わなければならない点に注意しましょう。セキュリティ知識に不安があると思ったら、後述のメール送信サービスを利用するのがおすすめです。
メールを送信する専用のサービスを利用する
例えばGoogleフォームやFormrunのようなフォームサービスもあります。
これも厳密にはサーバーを利用していますが、自前のサーバーではなくメール送信サービス側のサーバーを利用します。
自分でサーバー環境を整える必要がないためHTMLファイルのみで実装でき、セキュリティに関してもそこまで強く意識する必要はありません。
ただしデザインや挙動に成約がある
これらのサービスは知識も不要で安心できますが、サービス独自の制限がある場合が多いです。
具体的には
- 自由なデザインが作れない
- フォーム送信後の挙動が決まっている
- 有料版でしか実装できない挙動がある
上記のような制限がかかっていることが多いです。
デザイン的に自由なフォームを作りたい場合は、サーバー言語を使用して送ることを検討しましょう。
フォームを作る際にいただく「よくある質問」
弊社にもフォーム制作依頼は頻繁にいただきます。中でもよくご質問いただく項目をご紹介します。
Q. フォームの見た目は自由にいじれるの？
いじれる場合といじれない場合がある…が答えです。
例えば外部のメール送信サービスを使用している場合は自由にいじれないことが多いです。
もちろん100％見た目を編集できないわけではありません。多くの場合、メール送信サービス側で編集するためのシステムが用意されています。
ただし、テンプレートを逸脱することが難しいことに変わりないので、もし自由に見た目を編集したい場合はPHP等のサーバー側言語を利用するようにしましょう。
Q. WordPressプラグインを入れたほうが良いの？
そんなことはありません。むしろデメリットの方が多いです。
特に「メール送信するためだけにWordPressを入れる」のはナンセンス。
確かにWordPressのプラグインは非常に便利ですが、そもそもWordPressを維持管理するコストの方がかかることを忘れてはいけません。
基本的にフォーム単体を導入するよりコストが高くなりますし、HTMLで作っているページよりも表示速度等のパフォーマンスが低下します。
ただし、元からサイト全体をWordPressで作るという前提であればもちろんフォームプラグインは選択肢になります。
Q. フォームのデータをメール以外に送ることはできるの？
もちろんメール以外で問い合わせを受け取ることも可能ですし、メールで受け取る場合でも特殊な挙動が可能です。
例えば
- 問い合わせデータをGoogle スプレッドシートにまとめたい
- Slackで問い合わせ通知を受け取りたい
- 問い合わせ内容の種類によってメールアドレスを変えたい
といった特殊なケースです。
もちろん、これらのフォームも実装自体は可能です。
ただし、既存のテンプレートやメール送信サービスで対応できないケースがほとんどのため、当然ながらそれ専用のシステムを組む必要があります。
Q. 段階式のフォームはどうやって作るの？
例えば
- 「住所」と「年収」を入力して、次へ
- 「名前」と「生年月日」を入力して、次へ
- 「メールアドレス」を入力したら送信
のようないくつかの段階に分かれるフォームを作りたいというパターンですね。
これらのフォームは通常、JavaScriptを用いて制作します。
段階式のフォームは分岐の方法やバリデーション（入力内容のチェック）に癖があることが多く、テンプレートが少ないです。
もし開発する場合は素直に専門家に依頼するのが最適でしょう。
まとめ：メールフォームはHTMLだけじゃ作れない
問い合わせフォームを作る際はHTMLだけでなくサーバー側の設定やメールフォームサービスを利用しなければいけないという内容をお伝えしました。
少し難しく感じられた方も多かったと思います。それだけフォームは取り扱いが難しく、セキュリティ面で最も弱くなりがちなポイントです。
ぜひしっりとした知識をもってフォーム設置に取り組んでください。
1日16円〜で頼れる技術パートナー
営業支援・技術支援ツールはこちら
