【無料でできる】PHPメールフォームの作り方を解説!初心者でもサクッと完成

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

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

この記事ではフリーのメールフォームを使って、サイトに実装するまでの流れを詳しく解説していきます。

メールとデータ

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

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

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

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

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

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

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

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

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

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

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

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

今回はフリーのメールフォーム「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です。

登録完了してログイン

セットアップ完了

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

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

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

フォーム作成と項目編集

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

フォーム作成

送信チェックしてみよう

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

メールフォーム送信

フォームを送信すると「フォーム作成」で入力したメールアドレス宛に送信情報が届くほか、管理画面左メニューにある「受信履歴」から、受信したメール内容が確認できて、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フォルダに入れるように注意してください。

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

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

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

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

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」を
ぜひお試しください!