Make
to
Mail

メールアドレスの取得とメールフォーム設定

メールとは

メールフォームで必要なものはメールアドレスです。

そもそもメールアドレスとは何でしょうか?

メールアドレスは電子メールの宛先のことを言います。

電子メールアドレスは、「name@luvicon.jp」のように「任意の名前@ドメイン名」で表記します。

メールアドレスが無いと、送りたい人へ自分の電子メールを送ることはできません。

メールアドレスは、エックスサーバーや他のドメイン会社で取得したドメインを元に作成することができます。

ここで、お勧めのエックスサーバーによるメールアドレス取得・設定方法の手順をご紹介します。

まずはエックスサーバーの管理画面にログインします。

右上のログインボタンより自分のIDとパスワードを入力しログインしてください。

ご契約一覧の中からメールアドレスを取得したいドメインが入っているサーバーを選択し「ログイン」をクリックします。

サーバーの管理画面に入ることができました。

「メールアカウント設定」をクリックします。

どのドメインでメールアドレスを設定するか選択します。

ここではjisaku-homepage.comでメールアドレスを作りますので、一番上の「選択する」をクリックします。

jisaku-homepage.comのメールアカウント設定画面に移りました。

jisaku-homepage.comでは現在メールアドレスを1つも設定していないため、メールアカウント一覧には何も表示されていません。

今から新しくメールアドレスを取得するため、「メールアカウント追加」タブをクリックします。

メールアドレスの@以下はjisaku-homepage.comと決まっていますので、@より前にどんな文字を入れるかをここで決めます。

ここではinfo@jisaku-homepage.comというメールアドレスに設定します。

パスワードは任意の文字で結構なのですがセキュリティ面を考慮して最大文字数の15文字で入力しましょう。

メールアカウント設定の最終確認画面に移りますので、間違いがなければ「メールアカウントの作成(確定)」をクリックします。

メールアドレスの取得が完了しました。

これで、メールソフトに設定さえすればメールを送受信することができます。

尚、メールソフトにメールアドレスを設定する際に必要な情報が「メールソフト設定」に表示されていますので、設定の際にはこちらの画面を開いておくとスムーズに作業することができます。

メールソフトに設定する

メールソフトは無料で使用することができる「ウィンドウズライブメール」を使います。

outlookでも設定方法はほぼ同じです。

ウィンドウズライブメールは既にインストールされているものとしてご説明します。

ウィンドウズライブメールを開くとまず下記のような画面が開きます。

メールアドレスを全く設定していないので、情報が何も表示されません。

これからメールアドレスを設定していきます。

アカウントタブの新規作成グループの「電子メール」をクリックします。

エックスサーバーのメールアカウント設定画面で設定した情報を入力します。

手動でサーバー設定を構成するに☑を入れて「次へ」をクリックします。

次に受信メールサーバーや送信メールサーバーを設定する画面に移ります。

サーバー名にはエックスサーバーのメールソフト設定画面に表示されていたサーバー名を入力します。

画面を開いたままにされている方はコピペすると楽です。

送信サーバーのポートは587と入力します。受信サーバーは110と入力します。

ユーザー名にメールアドレスを入力したら「次へ」をクリックします。

これでメールアカウントの設定は完了です。

メールアカウントの設定は完了しましたが、実際に送受信できるかどうかを必ず確認しましょう。

自分ないしは会社などのテスト送信しても問題ないメールアドレス宛に実際にメールを送ってみましょう。

送信されると下記のように送信済みメールの一覧に表示されることになります。

念のため送信先のメール受信箱も確認しましょう。

そのメールに届いていたら無事に送信が完了しているという事です。

送信先のメール受信箱で確認できたら返信してみましょう。

返信すると今設定したメール受信箱に届くはずです。

受信が確認できましたら送信も受信もできる状態になっています。

メールソフト設定は以上で終了です。

お問い合わせフォームを設置する

ワードプレスでは、お問い合わせ用のプラグインが多数準備されています。

いちいちプログラミングをいじって高度な設定をする必要はありません。

ここではよく使われているお問い合わせフォームプラグインを使って実際ホームページに設定してみます。

使用するプラグインは「Contact Form 7」です。

プラグイン画面からContact Form 7をインストールしましょう。

検索バーに「Contact Form 7」と入力し、エンターキーを押します。

するとContact Form 7が出てきますので「インストール」ボタンをクリックします。

すぐに有効化しましょう。

プラグイン設定画面に入る

有効化すると左のメニュー欄に「お問い合わせ」というボタンが出現します。

これがContact Form 7の設定画面への入り口ボタンです。

フォームを設定するために「お問い合わせ」→「コンタクトフォーム」とクリックしましょう。

Contact Form 7では既に一つコンタクトフォームが作られた状態でインストールされます。

新規に作成しても良いのですがせっかくなのでコンタクトフォーム1を修正して使います。「編集」をクリックします。

下記のような画面に移ります。

現在、お問い合わせ時に入力してもらう項目が表示されます。

これは裏の設定画面なので分かりづらいですが、表で見るために一つ作業を行います。

まず、ショートコードをコピーします。

固定ページボタンを押し、お問い合わせページを開きます。

(お問い合わせページが無い場合は新規作成で作りましょう)

先程コピーしたショートコードを固定ページのブラウザ表示状態でどこでも良いので貼り付けます。

表を見ると、Contact Form 7を使ったお問い合わせ画面を確認することができます。

ショートコードを理解する

先程の裏の管理画面と表の画面と見比べてみると、どのようなコードだとどう見えるかが分かります。

例えばお名前欄です。

お名前 (必須)
[text* your-name]

と入力してありましたよね?

は一つの段落を意味します。

そして、

の間に入っている
は改行を意味します。

[text* your-name]が名前を入力してもらうボックスになります。

上記のコードがこのような表示になることは、なんとなく分かっていただけましたでしょうか?

[text* your-name]の部分を何にするかは、そのお問い合わせフォームを作る目的によって変わってきます。

電話番号を取得したいときもあれば、画像を送ってほしいときもあるでしょう。

また、サービスを選択してもらうやり方も良くあるやり方です。

質問事項を増やす

ここでは、電話番号と画像、選択式項目を実際に挿入してみます。

まずは、どれでも良いので既にある

をコピーして挿入したい場所に張り付けましょう。

「お名前」を「電話番号」に入力し直します。

電話番号も必須項目とするため(必須)の文字も残します。

次に[text* your-name]を消します。

電話番号用で新たに挿入するため必要ないからです。

電話番号入力用のボックスを挿入したいので、「電話番号」をクリックします。

クリックすると電話番号を入力してもらうためのボックスを設定する画面に移ります。

電話番号は必須項目なので☑を入れます。

名前には電話番号と分かるローマ字を小文字で入れます。

ここでは”tel”と入力します。

すると下記のように電話番号入力用ボックスのショートコードが埋め込まれました。

これで電話番号入力用のボックスが完成です。同じ手順で「画像」「選択式項目」を挿入してみます。

のコピー貼り付け手順は割愛させていただきます。

表側から見た場合の画像の入力項目名は「メニューに追加してほしい料理の画像」で、選択式項目は「問い合わせサービス」として作ってみます。

まず、画像から挿入してみます。画像は「ファイル」ボタンを押して挿入します。

ファイル添付用項目の設定画面に移ります。ファイルサイズの上限は、最近の画像は1メガを超える画像も多い為余裕を持って10メガバイトで設定します。「10000000」と入力します。

受け入れ可能なファイル形式には「jpg|png|gif」と入力します。

その他の拡張子も追加したい場合は、「|○○」と入力しましょう。

これで「タグを挿入」ボタンをクリックします。

下記図のようなショートコードが挿入されました。

続いて選択式項目の挿入のために「ドロップダウンメニュー」をクリックします。

下記のような画面に移動します。必ずどの項目のお問い合わせか選択してほしい為☑を入れます。

選択する項目はオプション欄に一行ごとに改行して入力します。

「タグを挿入」ボタンをクリックした後に、保存ボタンをクリックします。

再度、お問い合わせの固定ページを見てみる(一度も閉じていない場合はF5ボタンを押すなどして更新する必要があります)と設定したお問い合わせ項目が増えています。

他にもいろいろな質問項目を作ることができるので、試してみてください。

通知されるメールアドレス等を設定する

設置したお問い合わせフォームから実際に閲覧者からお問い合わせがあった時に、1.どのメールアドレスに通知を送信し、2.メール本文にどこまでの情報を載せるかを設定する必要があります。

ここでは、先ほど取得したメールアドレス宛に通知が来るように設定し、情報は閲覧者がお問い合わせフォームに入力した全ての情報を得られるように設定します。

フォームの隣のタブのメールをクリックします。

ここで、どのメールに通知するかを設定します。また、独自に増やした質問項目のショートコードが上部に表示されます。

今回の場合[tel][menu][file]を追加したので、コピーしてメッセージ本文の好きな個所に貼り付けます。

これで設定は完了です。また、メッセージタブでは、お問い合わせフォームの様々なシーンで表示される文章の編集ができます。

お問い合わせ送信時の感謝文も設定できますので独自の文章を表示させたい方はこちらから修正してみてください。

まとめ

今回はメールアドレスの取得の仕方から、その設定方法、そしてメールアドレスを使ったお問い合わせフォームの設定まで手順をご説明させていただきました。

今回ご紹介したプラグインもお問い合わせ機能を設置できる一例です。

他にも様々な機能を有したプラグインが存在します。

「contact」という言葉を入れてプラグインを検索してみるのも良いかもしれません。

今回までの講座で、実際にホームページを見た人で商品やサービスを気になった人がお問い合わせフォームから実際にお問い合わせできるページを作ることができるようになったはずです。