PHPを使ってメールフォームを無料で作成!

メールとデータ

メールフォーム(お問い合わせフォーム)を作ってみたいけど、どこから始めればいいのか分からなくて悩んではいませんか?

メールフォームを1から作るにはプログラミングの専門的な知識が必要となります。

プログラミングで1からコーディングするのもスキルアップに繋がりますが、まずはフリーのメールフォームや無料のサービスを使って、作り方の流れを覚えるほうが無理なくスキルアップできます。

この記事ではPHP言語で開発された無料のメールフォームを使って、サイトに実装するまでの流れを詳しく解説していきます。

\\ 無料のメールフォームなら! //

無料で簡単インストール。
オープンソースのメールフォームCMS
「EasyMail(イージーメール)」を使ってみませんか?
改変でも、再配布でも、商用利用でも、有料販売でも、
自由に無料でつかうことができるメールフォーム!

 

メールフォームの基本

メールフォームというものを簡単に説明いたします。
メールフォームというのはホームページで利用されるお問い合わせフォームのことで、プログラムを使ってメールを送信することができるシステムです。
たとえば、お名前、住所、電話番号などの個人情報を入力させたうえで、企業へのお問い合わせや質問はもとより、サービスへの質問、ちょっとしたアンケートなどを24時間365日受け付けることができます。
ホームページを運営している以上お問い合わせフォームは無くてはならないものとなっています。

一般的なメールフォームの構成

最も多い一般的なメールフォームは3ページ構成になっています。
1)入力画面
2)確認画面
3)サンクス画面(送信完了)

入力画面においては、一般的なお問い合わせフォームでは、
・「お名前(法人名)」
・「担当者名」
・「メールアドレス」
・「URL」
・「電話番号」
・「住所」
・「お問い合わせ内容」
のような項目があります。上記を基本構成にして必要な項目を追加していきます。
例えば「このサイトをどちらでお知りなりましたか?」のようなアンケートをいれるのもマーケティングの上では大事なことです。
しかしながら項目が多すぎると入力することが面倒になりフォームから離脱してしまうということもありますので、必要最低限な質問にすることも大事になります。

確認画面というのはユーザーが入力した内容を改めて表示しチェックしてもらうページになります。
チェックし間違いがある場合は入力画面に戻り訂正することができます。
最近ではこのチェック画面を作らず即送信するフォームもありますが、重要な内容を送信するメールフォームであれば、できればこのチェックはあったほうが良いと思います。

サンクス画面は送信実行後の画面でサンクス画面とも呼ばれお礼文を表示する画面です。
この画面があることでユーザーは正常に送信できたんだなと認識してもらえるものです。

メールフォームの用途

メールフォームは様々な用途で利用されます。よくあるフォームとして以下のようなものがあります。

・お問い合わせフォーム
・イベント申込フォーム
・アンケートフォーム
・資料請求フォーム
・予約フォーム
・キャンペーン申込フォーム
などなど、上記以外にも何らかの受付や申込をするときに便利な窓口となります。

メールフォームを設置するメリット

メールフォームを設置するメリットとして以下のようなことがあります。

・24時間365日受け付けることができる
・簡単に問い合わせができるようになる
・受け付けた内容をデータとして残すことができる
・受付する入力項目のミスを減らすことができる
・受付完了の証拠として自動で即通知できる

メールフォームの作り方

メールフォームを導入する方法はいくつかありますが、プログラムで作成するか、フリーのオープンソースソフトウェアやWordPressなどのCMSを使うか、クラウドサービスを使うかなどになります。

HTML・CSS・PHPプログラムを使って作る場合

メールフォームはWEBのシステムでプログラム言語で開発するものです。
PHPという言語でつくることができ、HTMLやCSS、JavaScriptというホームページを表現するコードとあわせて作ります。

HTMLの書き方

メールフォームを構成するhtmlの書き方は簡単に書くと以下のようになります。

<form>タグ

メールフォームを構成する場合、まずは<form></form>で囲う必要があります。
最初の<form>タグの中には actionやmethodなどの属性が入ります。
例:<form action=”mail.cgi” method=”post”>

<input >タグ

<input>タグはメールフォームを構成する各入力項目を作るタグで、ユーザーが入力したデータを受け取るための要素となります。
<input>のタイプは複数あり、指定しない場合はテキストエリアになります。
<input>の型は以下のようなものがあります。

参考:メールフォームのhtmlの書き方と動作について

PHPを使って1からメールフォームを作るとなるとかなりの時間と労力がかかります。
通常のWEBサイトで使われているメールフォームは、フリーのメールフォームPHPやWordPressなどのホームページ更新ツールのメールフォームを利用することがほとんどです。

WordPressのプラグインを利用

WordPressは世界一シェアの高いホームページ更新ツールです。そのWordPressには数多くのプラグインという拡張機能がありその中にメールフォームのプラグインがあります。
WEB従事者にとって人気の高いメールフォームプラグインは「Contact Form 7」「MW WP Form」などがあります。
また「Jetpack Contact Form」や「Trust Form」は高度なプログラムの知識がなくても導入できます。

WordPressのプラグインを使ってメールフォームを作ることは簡単ですが、WordPressを導入するほど大がかりなサイトではない、LP用のメールフォームなどには不向きです。

クラウドサービスを使って作る

プログラムを使ってメールフォームを作ることはそれなりの知識が必要となります。
そんな時は有料・無料のクラウドサービスを利用します。
クラウドサービスはホームページを作るうえで必要なコードの知識を知らなくてもできるフォーム作成ツールです。

無料のものから有料のものまでありますが、クラウドサービスの場合は簡単に導入できる反面、カスタマイズ性にかけ、独自ドメインが使えないなどデメリットもあります。

フリーのメールフォームを使って作る

WEBデザイナーやコーダー、WEBプログラマーなどWEB従事者であればフリー(オープンソースソフトウェア)のメールフォームで作ることもできます。
フリーのソフトウェアについてはいろいろなライセンス事項がありますが、基本的には無料で自由に利用することができカスタマイズ性にもたけています。

フリーソフトにはシンプルなものから高機能なものまでありますが、EasyMail(イージーメール)という完全無料のPHPで作られたオープンソースソフトウェアがおすすめです。

PHP初心者はフリーのメールフォームから始めるのが早道

PHP初心者の方がコードの基本的な書き方を学び、最初に作るものとしてメールフォームが定番となっています。

メールフォームは受信・送信・データベース保存と、PHPの基本が詰まっているので、作ってみることで学びになるものが多いのも理由にあるでしょう。

PHPを使って1からメールフォームを作るのは難易度が高い

サイト運営においてお問い合わせ・メールフォームの存在は必須と言ってもよく、それならば自分でPHPメールフォームを作ってみよう!と考える方もおられると思います。

しかしメールフォームは初心者が作るには難しい部分が多く、基本的な仕組みを知りたいだけであれば、最初からパッケージされたメールフォームを使うほうが無理なくPHPを学ぶことができます。

実際に導入してみて、どういうプログラムで動いているのかを見たり、自分の好きな見た目に少しずつ改造してみたりすることが、PHP上達の早道と言っていいでしょう。

改造しやすいフリーのPHPメールフォームを選ぼう

PHPメールフォームと一口に言っても、非常に簡易的なものから本格的なものまでさまざまあり、本格的なメールフォームだと豊富にデザイン・機能が備わっており、PHP上級者が自由に改造できるといった傾向にあります。

PHP習得が目的でしたら、改造の自由度が高いメールフォームを選ぶのが理想的なのですが、そういったものは有償で、しかも料金が高いという傾向があります。

これでは初心者の方にとっては敷居が高すぎるので、できれば無料で、改造の自由度が高いものを選んでいくのがいいでしょう。

メールフォームPHP「EasyMail」のアップロードの流れ

今回はフリーのメールフォーム「EasyMail」を例にして、WordPressにセットアップしていく流れを解説していきます。

【EasyMail】をダウンロード

まずは以下のリンクからEasyMailをダウンロードしましょう。

無料のメールフォーム

EasyMailトップページ

EasyMail トップ画面にある「Download」をクリックしてダウンロードページに入り、「EasyMailをダウンロードする」というボタンをクリックします。

EasyMailフォルダ

Zip形式でのダウンロードなので、ソフトを使ってこれを解凍しましょう。 EasyMailファルダの中には上の画像のように1つのフォルダの4つの項目があるかと思います。

※.htaccessは隠しファイルなので、パソコンによっては非表示設定になっていることがあります。

データベースを準備する

EasyMailファイルをサーバーにアップロードする前に、あらかじめデータベースを用意しておく必要がありますが、このデータベースはメール送信内容などデータを保存するために必須のものなのです。

今回はエックスサーバーを利用します。 まずはサーバーパネルにログインし、「MySQL設定」を選択します。 EasyMail専用のMySQLを作る必要がありますが、今回は新しくMySQLデータベースとMySQLユーザを作りましょう。

MySQLの設定

お好きなMySQLデータベース名とMySQLユーザ名を入力し、これらを結びつけます。 あとでこのデータベース名やパスワードは、EasyMailセットアップに必要になりますから、メモしておきましょう。

FTPソフトでアップロードする

エックスサーバー内のFTPページ(ファイルマネージャー)、もしくはFTPソフトによるアップロードが選べますが、今回はFTPソフトの1つ、FileZillaを使って説明していきましょう。

アップロードの流れはFFFTPやWinSCPなどとほぼ同じなので、他のFTPソフトを使う方も参考にしてください。

ログインにはホスト名・ユーザー名・パスワードが必要になりますが、ホスト名などはサーバー内に書かれているのでこれを入力しましょう。 サイトのサーバーに接続すると、いくつかのファイルやフォルダが表示されますが、今回利用するのは「public_html」フォルダです。

これはサイトのデータを保存するための場所(ディレクトリ)で、ページでコンテンツを公開する際はこれより下層にデータを入れる必要があります。

FileZilla画面

まずはpublic_htmlの直下に「contact」というフォルダを作って、その中にEasyMailのデータを入れましょう。 あくまでもEasyMailフォルダそのものを入れるのではなく、その中の1つのフォルダと4つのファイルをアップロードします。

セットアップしてログインする

次は実際にEasyMailを置いたサイトページにアクセスしますが、今回はcontactフォルダにデータを入れたのでURLは 「https://●●●●/contact」となります。

EasyMailセットアップ

無事サイトにEasyMailがアップロードできていれば、上の画像のように表示されるはずです。

URL

最初に言語を選ぶことができますが、デフォルトでは日本語になっているので、日本語をお使いの方はそのままで構いません。 URLには先ほど打ち込んだ「https://●●●●/contact」を入力してください。

DB設定

ホストアドレスは、エックスサーバーの場合だとサーバーパネルのMySQLの項目に書かれています。 サーバー会社によって表記は違いますが、エックスサーバーだと「mysql●●●●.xserver.jp」という表示になっているはずです。

ポートはエックスサーバーやmixhostなど多くのサーバーで、デフォルト通り「3306」のままでOKです。 そして、先ほど作成したデータベース名・ユーザー名・パスワードを入力します。

管理画面情報登録

「管理画面情報登録」では、あなたがこれからEasyMailにログインする際に必要な情報を決めます。 「ログインメールアドレス」は、ログインするためのメールアドレスなので、フォームから受信するメールアドレスとは違ってログインIDのようなものです。

管理画面言語選択

管理画面で使う言語をここで決めます。 他にも言語は選べますが、日本語をお使いであれば「日本語」を選択します。

タイムゾーン選択

タイムゾーンとは標準時間帯のことで、日本にお住まいの方であればAsia/Tokyoを選択すればOKです。

登録完了してログイン

セットアップ完了

このまま完了ボタンを押すと、ログイン画面が出てきますので先ほどセットアップで入力したログイン情報を入力してください。 無事ログインできれば、アップロード・セットアップは成功です。

「EasyMail」のフォーム作成の流れを解説

セットアップが終わっただけでは、まだメールフォームはサイトに表示されないので、管理画面にログインして設定していきます。

フォーム作成と項目編集

ログインするとトップ画面(ダッシュボード)に入ります。 左にはいくつかのメニューが表示されていますが、まずは「フォーム作成」「項目登録」で情報を入力し、完了したら「非表示」から「表示」に切り替えましょう。 これでサイトからメールフォームが使えるようになりました。

フォーム作成

送信チェックしてみよう

実際に使えるかどうかは、試しに送信チェックしてみれば分かります。

メールフォーム送信

フォームを送信すると「フォーム作成」で入力したメールアドレス宛に送信情報が届くほか、管理画面左メニューにある「受信履歴」から、受信したメール内容が確認できて、CSVデータで保存することもできます。

PHPで好きなように改造してみよう

EasyMailは機能が充実した本格的なメールフォームですが、PHPやCSSを編集することができるので、改造することでさらに自分好みのメールフォームを作れます。

テーマのデザインを編集する

EasyMailでは、以下のような4つのテーマがあらかじめ用意されています。 今回、解説で利用したのは「one_column」というテーマでした。 デザイン性と実用性の高いテーマではありますが、「自分好みのデザインにしてみたい」という方は、編集画面から自由に改造してみてください。

one columnのテーマ

各テーマの右上には編集マークがありますが、これをクリックすると以下のようにテーマ編集画面が出てきます。 たとえばform.blade.phpは、タグの中のHTMLを編集するファイルで、 header.blade.phpはヘッダー部分のHTMLを編集して、デザインを変えるフォルダになります。

スタイルシートを編集する時は、CSSフォルダの中のstyle.cssを開いて、編集してください。 管理画面内で、コードをすぐに編集してワンタッチで保存完了するので非常に便利です。

オリジナルのテーマを作る

管理画面から直接デフォルトのテーマを編集することはできますが、もっと本格的に改造してオリジナル性の高いテーマを作りたい時は、まずデフォルトのテーマをコピーしてからアップロードします。

オリジナルテーマ制作

最初にダウンロードしたEasyMailフォルダがあるかと思いますが、この中のthemeフォルダ内に4つのテーマが入っているので、まずはコピーするテーマを1つ選びましょう。 今回はone_columnをコピーして、編集してサーバーにアップロードしました。

やり方は、先ほどFileZillaでサーバーにアップロードした流れと同じで、テーマを入れる際はちゃんとthemeフォルダに入れるように注意してください。

ちょっとずつ手を加えてメールフォームPHPの仕組みを学ぶ

フリーのメールフォームPHPというと、一般的には作りも簡易なものが多く、カスタマイズの自由度は高くない傾向にあります。

しかし例として使ったEasyMailは、機能が豊富ですし管理画面から直接編集できるので、ちょっとずつ好きなように手を加えることで、初心者の方も無理なくメールフォームの仕組みが学べます。 まずは、こういったメールフォーム編集からやってみるのがおすすめです。

改造したメールフォームPHPをポートフォリオに

Web技術者が仕事を受注するためのスキル証明として、何か制作物を提示する、いわゆるポートフォリオが必要になるかと思います。
メールフォームはPHPのスキル証明がしやすいですし、自分のサイトのお問い合わせフォームとして実際に使えるので作る価値は高いと言えます。

しかし、何も1からコーディングして制作しなければならないという決まりはなく、たとえばあなたが今見ているこのサイトはWordPressを利用しています。 世の中の多くのサイトはWordPressで作られていますから、当然サイト制作するエンジニアにとってのポートフォリオにはWordPressで作ったサイトが必要になるでしょう。

パソコン

WordPressはPHPで作られたCMS

WordPressはPHPで作られているのですが、特別な知識がなくても編集や更新ができる、いわゆるCMS(コンテンツマネジメントシステム)と呼ばれるツールなのです。 このツールを使って多くのエンジニアはポートフォリオにしているのですから、メールフォームのポートフォリオにCMSを使ってもおかしくはありません。

※今回例として使ったEasyMailも、同じくPHPを使ったCMSです。

フリーのメールフォームを使ったポートフォリオ

実際にWeb制作現場では、1からコーディングして何かを作る仕事が全てではありません。何らかのツールを使ったり、改造したり、デザインを変えたりする仕事も非常に多いです。

今あるものをカスタマイズして、どうやって理想のものを作れるかというスキル証明もおても必要なものですから、フリーのメールフォームを使ったポートフォリオも十分に役に立ちます。

PHPを使ってメールフォームを無料で作成!【まとめ】

PHPメールフォームを作る際、まずはフリーのメールフォームを活用して、作ってみることをおすすめします。 あらかじめメールフォームに必要なデータが十分に用意されているので、このソースコードを見て、ちょっとずつデザインなどを改造することで、スキルが磨かれていくことでしょう。

今回利用したEasyMailは専用の分かりやすい管理画面が使えて、自由にコードに手を加えられるのでPHPのスキルアップにはうってつけです。 ぜひ今回の作り方の流れを参考にして、PHP初心者の方はちょっとずつ改造にチャレンジしてみてください。

1から全てを作るのは難易度が高いですから、フリーのメールフォームで無理なく学んで、自分のサイトのお問い合わせやポートフォリオに活用していってもらえたらと思います。

あなたのサイトでEasyMailを
活用してください。

高機能で無料のメールフォーム「EasyMail」を
ぜひお試しください!