メールフォームを無料の「EasyMail（イージーメール）」で実装する方法

オールドマスク

今回のコラム記事は、株式会社ファーストネットジャパン様による寄稿記事です。

アフィリエイトサイトやブログでも、広告を出稿したいと考えている企業からのお問い合わせを期待して、メールフォームを設置することが多いですよね。

ブログの場合はほぼWordPressで構築され、アフィリエイトサイトではWordPressかホームページ作成ソフト「SIRIUS（シリウス）」で構築されることがほとんどではないかと思います。

メールフォームを設置するには、WordPressではプラグインの「Contact Form 7」を、シリウスなどで静的なサイトを構築した際は「Google フォーム」や外部のメールフォームサービスを利用するか、メールフォームのプログラムを利用してサイトに組み込むのが一般的です。

今回の記事では、Web・インターネットの情報サイト「ITキャピタル」や「ホームページ制作大阪ドットコム」も運営する株式会社ファーストネットジャパンが提供している、無料での利用が可能な「メールフォーム作成ツール EasyMail（イージーメール）」を「さくらのレンタルサーバ」で実装する方法をご紹介します。

EasyMailはメールフォームに特化したインストール型のツール

ブログをするためにサーバーへWordPressをインストールするのと同じように、メールフォームを実装するため、EasyMailをサーバーへインストールします。

インストール後、WordPressと同様に以下のようなEasyMailの管理画面でメールフォームを設定します。

WordPressの管理画面のように扱えるので、WordPressを利用されたことがある方なら、簡単にご利用いただけます。

WordPressをご利用いただいたことがない方でも、直感的な操作が可能なので、すぐ慣れると思います。

さて、それでは実際にEasyMailを実装する方法をご紹介していきます。

動作確認済みのサーバーと要件

2021年6月19日現在、下記のサーバーで動作確認済みです。

• エックスサーバー
• Conoha WING
• さくらのレンタルサーバ（スタンダードプラン以上）
• ヘテムル
• mixhost
• ロリポップ（ライトプラン以上）

サーバーは以下の要件で動作します。

• Apache2.4.6
• PHP7.3（5系は不可）
• MySQL5.7.7
• laravel6.x
• HTTPS 対応

EasyMailのダウンロードと解凍

ダウンロードページよりファイルをダウンロードし、解凍します。

解凍後のファイル構成は以下になります。

データベースとユーザーの設定

今回はさくらのレンタルサーバを利用するので「サーバコントロールパネル」にログイン後、「Webサイト/データ」から「データベース」へ移動し、「新規追加」ボタンをクリック。

「データベース名」と「データベース 接続用パスワード」、「データベース 接続用パスワード再入力」を入力、スクロールして、「同意する」にチェックを入れ、「作成する」ボタンをクリック。

作成すると以下の画面になります。

なお、さくらレンタルサーバでは、データベース作成時にユーザーを別途作成する必要はなく、自動で設定されています。

また、「データベースサーバ」で表示されているドメインが、後々、EasyMail側での設定時に必要になりますので、ここで確認できることをチェックしておきましょう。

ファイルをサーバーへアップロード

今回はFTPソフト「FileZilla」を使って、ドメイン直下に「inquiry」ディレクトリを作成しファイルをアップロードしました。

ファイル数が5000以上ありますので、アップロードまで多少時間がかかります

EasyMailのセットアップ

アップロードが完了したら、ファイルをアップロードしたディレクトリにアクセスします。

※今回の場合は、「https://■■■.sakura.ne.jp/inquiry/」です

上記の画像のように下記を入力し、「設定する」ボタンをクリック。

• インストール先 URL：EasyMailをアップロードしたURL
• ホストアドレス：前述の「データベースサーバ」のドメイン
• データベース名：先ほど設定したデータベース名
• ユーザー名：自動で追加になっているデータベースのユーザー名
• パスワード：任意で設定したデータベースのパスワード
• ログインメールアドレス：EasyMailの管理画面にログインするためのメールアドレスを任意で入力
• ログインパスワード：任意で入力
• タイムゾーン：「Asia/Tokyo」を選択

問題なく登録できれば、「登録完了画面」が表示されるので、「ログインボタン」をクリック。

EasyMailのログイン画面が表示されるので、先ほど設定した「ログインメールアドレス」と「パスワード」を入力して「Login」ボタンをクリックすると冒頭でご紹介した、下記のようなEasyMailの管理画面が表示されます。

メールフォームの作成

画面左にあるメニューから「フォーム作成」をクリック。

今回は「お問い合わせフォーム」として設置する際に一般的に必要だと考えらえる内容を設定する例をご紹介します。

上記の図のように、下記を設定します。

• 表示・非表示：「表示」に設定（通常、全ての設定が完了するまでは非表示のままの方が良いですが、今回は先に表示にさせておきます）
• フォーム名：任意に入力　※管理するフォームの名称
• 自動返信メール設定：今回は全てをONに設定
• 管理人受信メールアドレス：任意のメールアドレスを入力
• 自動返信メール件名：任意で入力
• 自動返信メールのヘッダー文：任意で入力

全て入力・設定したら、画面右上にある「保存」ボタンをクリック。

「フォーム一覧」画面になるので、次にメールフォームの項目内容を設定します。

画面右にある赤枠の「項目を編集」ボタンをクリック。

上の図のような画面が表示されたら、画面右側にある項目の中から使いたい項目の「＋」ボタンをクリックして、項目を追加していきます。

使いたい項目が無い、細かくカスタマイズしたい、という場合は、画面左にあるメニューの「項目登録」で細かく設定できます。

今回は、必要最低限の「お名前」「メールアドレス」「お問い合わせ内容」の項目を追加し、全て「必須」に設定しました。

項目の設定が完了したら、画面右上にある「更新」ボタンをクリックします。

これで必要最低限のメールフォーム設定が完了しました。

メールフォームの確認とカスタマイズ

一度、実際のメールフォームを確認してみましょう。

EasyMailをアップロードしたディレクトリにアクセスします。

※今回の場合は、「https://■■■.sakura.ne.jp/inquiry/」です

メールフォームのデザインは大きく分けて2種類あり、黒を基調としたデザインもあります。

上の画像のようなテイストには、他に2カラムのものが2種類あります。

ヘッダーとフッターはデフォルトだとEasyMailのものになっていますので、任意の内容に変更します。

画面左にあるメニューから「設定」、「テーマ」とクリックし、今使用中のテーマの右上にある「編集」ボタンをクリックします。

上の画像はヘッダーを修正しているところですが、このように直接HTMLを編集できるので、かなり自由度の高いカスタマイズが可能です。

上記の例ではサイト名を記述し、リンクはトップページへのリンクだけにしてみました。

設定が完了したら画面右上の「保存」ボタンをクリックします。

フッターも同様に編集し、完成を見てみましょう。

デザインも編集したい場合は、先ほどの管理画面上でCSSも変更できます。

便利なプラグイン

EasyMailではWordPressのようにプラグインもあり、2021年6月19日現在では以下のようなプラグインがあります。

画面左にあるメニューから「プラグイン」「プラグインを探す」とクリックしていきます。

下記の4つから任意でプラグインをインストールし利用できます（全て無料）

• PasswordForm：パスワードによるフォーム閲覧制限をかけることができます。フォーム作成・編集画面で設定するとフォーム表示時にパスワード入力が要求されます。
• PublicPeriod：公開開始日と公開終了日を入力し、フォームの公開期間を限定できます。フォーム編集画面下部に「Public Period」という項目が表示されますので、公開期間を有効にし開始日時と終了日時を設定してください。
• BlockEditor：項目登録からBlockEditorを登録して頂くと文章や画像、スタイルなどを任意の場所に挿入することができます。
• GoogleAnalytics：Google Analyticsをフォームに追加することができます。フォーム編集画面下部に「Google Analytics」という項目が表示されますので、トラッキングコードを入力してください。

まとめ

WordPressを利用中でも、シリウスのような静的サイトでも、サーバーの要件を満たせばEasyMailをご利用いただけます。

また、既存のメールフォームが使いづらいなどの場合でもEasyMailがお役に立てると思いますので、ぜひご利用ください。

⇒ EasyMailはこちら