ほとんどの企業が、見込み客の獲得や顧客であるユーザーの情報取得のために、Webサイトにお問合せフォームを設けます。
お問合せフォームを自作で設置する場合には、PHPを使う方法が一般的です。
しかし、「どうやって作ればいいの?」「初めてで何から始めればいいのかわからない」とお悩みの方も多いのではないでしょうか?
ここでは、PHPを使ったお問合せフォームの作り方について紹介します。
コードの専門的な知識不要で作成できる方法も解説していますので、参考にしてください。
【超入門】PHPを使ったお問合せフォームの作り方
お問合せフォームは多くの場合「入力画面」「確認画面」「完了画面」で構成されます。
それぞれの画面の具体的な作り方を解説します。
入力画面を作る
HTMLでボタン・テキストボックスといった、お問合せフォームに必要なパーツを用意します。
以下のようにコードを書くことで、「名前」「電話番号」「メールアドレス」「お問合せ内容」の項目が設けられた入力画面を構成できます。
入力画面の下部には「送信」ボタンを設置するようになっており、項目を入力した後、ボタンを押すことで、確認画面に遷移するようにします。
確認画面を作る
確認画面は、入力画面に設置した「送信」ボタンを押すことで表示される画面です。
ユーザーが入力した内容が表示され、再度「送信」ボタンを押すことで情報が送信される設定にします。
以下がコード例です。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>sample</title> </head> <body> <h2>問合せ内容</h2> <form action="mailto.php" method="post"> <table border="1"> <tr> <td>名前</td> <td><?php echo $_POST["name"]; ?></td> </tr> <tr> <td>電話番号</td> <td><?php echo $_POST["tel"]; ?></td> </tr> <tr> <td>メールアドレス</td> <td><?php echo $_POST["mail"]; ?></td> </tr> <tr> <td>問い合わせ内容</td> <td><?php echo $_POST["inquiry"]; ?></td> </tr> </table> <input type="submit" value="送信" /> </form> </body> </html>
完了画面を作る
完了画面は、入力した情報が送信・処理されたことをユーザーに伝える画面です。
完了画面があることで、ユーザーに安心感を与えられます。
以下がコード例です。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sample</title>
</head>
<body>
<h2>メール送信完了</h2>
<p class="message">
お問合せありがとうございます。<br>
お送りいただいた情報につきましては速やかに確認し、対応をすすめてまいります。<br>
</p>
</body>
</html>
上記の構成では「メール送信完了」の見出しの下に、「<p class=”message”>」以下で記載したメッセージが表示されるようになっています。
コピペで簡単!PHPを使ったお問合せフォーム4選
PHPを使ったお問合せフォームの基本をご紹介しましたが、プログラミングやPHPになじみのない方は、知識の習得に時間がかかりますし、難しそうに感じてしまう方も多くいらっしゃいます。
そんな方に向けて、お問合せフォームをコピペするだけで作成できるよう、Webサイト上に共有されているコードが数多くあります。
以下Codepenより引用し、コピペで作成できるシンプルなお問合せフォームを4つ紹介します。
例1:簡潔・シンプルなフォームContact Form (codepen.io)
See the Pen Contact Form by Aina Requena (she/her) (@ainarela) on CodePen.
シンプルでわかりやすい問い合わせフォームの例です。
余計な装飾がないため、さまざまなサイトに対応できます。
例2:簡潔なフォームに、枠や囲みをつけるAngular Contact Form (codepen.io)
See the Pen Angular Contact Form by Katy DeCorah (@katydecorah) on CodePen.
シンプルな作りに枠や囲みをつけて見やすくしたフォームです。
送信ボタンの色を変更することで、ユーザーはどのボタンを押せばいいのかひと目で把握できます。
例3:シンプルフォームで、項目を増やす場合Ultra-Clean UI ‘Contact Us’ Form (codepen.io)
See the Pen Ultra-Clean UI ‘Contact Us’ Form by Dave Lunny (@hi_mynameisdave) on CodePen.
上記2つの例よりも、設問数は多いですが、項目の横にイラストをつけることで、何を入力すればいいのか視覚で判断できます。
例4:項目が増えたフォームに、さらに色をつけるA Pen by harukasato (codepen.io)
See the Pen Untitled by harukasato (@satosubarusan) on CodePen.
必須項目に赤で「必須」と表示することで、項目数が多くなってもユーザーのストレスを軽減するように工夫がされています。
他にもバリエーションに富んだお問合せフォームのコードが、様々なページで共有されています。
コードを探す際には、フォームの内容が設置するサイトに合致しているか、フォームのデザインがWebページになじむかなど確認したうえで活用するようにしましょう。
PHPの知識不要!お問合せフォームをつくる方法
PHPを活用できると、自分の希望や周りの要望に沿ったお問合せフォームの作成ができます。
しかし、ある程度の知識を持っていないと充実したフォームの作成は困難です。
コピペで作成できるお問合せフォームもありますが、改良したいときや不具合が起こったときに自分で解決するには、やはり知識が必要です。
PHPの知識がない、自作でお問合せフォームを作るのに不安がある場合は、以下2つの作成方法があります。
お問合せフォームの作成ツールを使用する
プログラミングの知識が充分でない場合、また細かいデザインや機能・セキュリティの設定が必要な場合は、お問合せフォームの作成ツールを使用するのがおすすめです。
作成ツールを使用する大きな利点は、短時間でクオリティの高いお問合せフォームが作成できることです。
フォーム作成に便利な機能が搭載されており、無料で導入できるサービスが多くコストを抑えることが可能です。
有料のサービスは、無料のものよりも機能面が豊富です。コストはかかりますが、お問合せフォームを充実したものにできます。
無料でお問合せフォーム作成ツールなら「formrun」
formrunでは、40種類以上のテンプレートからデザインを選択、テキストの入力をするだけでお問合せフォームが作成できます。
プログラミングの知識は不要で、フォームの設置からお問合せの状況確認やメール対応も一括して管理が可能です。
フォームの回答データを連携する機能もあり、データ分析やマーケティングにも役立ちます。
formrunは4つの料金プランがあり、無料でスタートすることが可能です。
WordPressのプラグインを使用する
Webサイトなどの作成にWordPressを利用していれば、「WordPressプラグイン」機能を使ってお問合せフォームの作成が可能です。
WordPressのサイト内で「お問合せフォーム」と検索すると、関連するプラグインが40ほど出てきます。
お問合せフォームの目的や、備えておきたい機能に合わせてプラグインを活用すれば、簡単にお問合せフォームが出来上がります。
ただし、プラグインに様々なカスタマイズをしたい場合には、プログラミングの知識が必要となるため注意しましょう。
PHPのお問合せフォームは知識が必要
PHPを使ったお問い合わせフォームは以下の3つのページを作成することで完成します。
- 入力画面
- 確認画面
- 完了画面
PHPは、プログラミング言語の中でも文法がシンプルで規則的です。
初心者でも学習しやすいことが、大きな特徴の一つに挙げられます。
そのため、知識を習得すれば、PHPでお問合せフォームを作ること自体は、そこまで困難なものではありません。
ただし、お問合せフォームの機能やセキュリティを充実させようとすると、PHPだけでなく他のプログラミング言語などさらに知識が必要となります。
作成期限や、フォームに求められる機能に応じて、作成ツールを使用することも有効な手段のひとつです。
お問合せフォーム作成ツールは、無料のものから有料のもの、利用できる機能など種類が多岐にわたります。
お問合せフォームに求められる機能に応じて、適したツールを使用することも選択肢に入れましょう。
弊社の「formrun」も簡単な操作でフォームが作成でき、セキュリティも万全なため、お問い合わせフォームの作成におすすめです。まずは無料でフォームを作成してみましょう。
公式サイト:https://form.run/home