メールフォームの作成

作成するポイント

プラグインは「NW-WP-Form」を使用。すでにインストール済で基本となる「お問合せフォーム」を作成しています。

  • 受信したデーターをCSVで保存できます。
  • 共通する項目(名前、住所、メールなど)はコピペで対応できるようにしています。

作成したお問合せフォームはこちら

全体の流れ(フォームタグと設定)

  1. 用途に応じたフォームタグの挿入/設定
  2. 固定ページを作成
  3. テスト

1.フォームタグの挿入

1-1フォームタグ

テキスト、エキストエリア、チェックボタン、ラジオボタンなどは、メニューから簡単に挿入できます。用途(サンプル請求など)に応じて、最適なフォームを挿入してください。

1-2.ユーザー情報(名前、住所、メールなど)は、共通するためコピペするだけです。

———共通部分—————————————————————————

<h4>事業者の方は会社名など[任意]</h4>
<table style=”width: 100%; border-collapse: collapse;” border=”none”>
<tbody>
<tr>
<td style=”width: 70%; border-style: none; text-align: left;”>[mwform_text name=”会社名” size=”60″]</td>
<td style=”width: 30%; border-style: none; text-align: left;”>様</td>
</tr>
</tbody>
</table>
<h4>お名前[必須]</h4>
<table style=”width: 100%; border-collapse: collapse;” border=”none”>
<tbody>
<tr>
<td style=”width: 70%; border-style: none; text-align: left;”>[mwform_text name=”名前” size=”60″]</td>
<td style=”width: 30%; border-style: none; text-align: left;”>様</td>
</tr>
</tbody>
</table>
<h4>ふりがな[必須]</h4>
<table style=”width: 100%; border-collapse: collapse;” border=”none”>
<tbody>
<tr>
<td style=”width: 70%; border-style: none; text-align: left;”>[mwform_text name=”ふりがな” size=”60″]</td>
<td style=”width: 30%; border-style: none; text-align: left;”>様</td>
</tr>
</tbody>
</table>
<h4>電話番号[必須]</h4>
[mwform_tel name=”電話番号”] ※半角数字でご入力
<h4>郵便番号[必須]</h4>
[mwform_zip name=”郵便番号”] ※半角数字でご入力
<h4>ご住所[必須]</h4>
[mwform_text name=”住所” size=”60″] <h4>メールアドレス[必須]</h4>
[mwform_email name=”email” size=”60″] ※半角英数でご入力
<span style=”font-size: 14px;”>お間違いのないようにお願いいたします。またセキュリティー上、一部のメールアドレス(ワンタイムメールアドレス等)は送信できない場合があります。</span>
<h4>個人情報のお取扱いについて[必須]</h4>
ご一読のうえ「承諾」にチェックをお入れください。
<p class=”note”>フォームにご入力された住所・氏名・電話番号・メールアドレス、送信元IPアドレスなど、個人を特定できる情報の管理は厳重に行い、お客様の了承および法令に基づく場合を除き、個人情報を第三者に開示・提供する事はありません。お客様からの依頼による訂正・削除は、合理的な範囲内で速やかに対応いたします。</p>
[mwform_checkbox name=”個人情報の取扱い” children=”個人情報の取扱いについて承諾する” separator=”,”]<!–共通タグ(送信ボタンなど) –>

ご入力内容に間違いがなければ、送信ボタンを押してください。ご入力内容が自動返信されます。また必須項目にご入力や選択、チェック等がない場合は、該当箇所にメッセージが表示されますので、ご確認をお願いいたします。

[mwform_submit name=”送信” value=”送信する”]

————————————————————————————

1-3.完了画面メッセージを入力

送信後に表示されるメッセージを入力します。

1-4.バリテーションルールの設定

バリテーションルールとは、フォームタグごとに必須入力する場合の設定です。

例えば名前を必須にする場合は、そのフォームの必須にチェックするだけです。詳細は電話でご説明します。

ここからは左メニューの項目です。

1-5.自動返信する項目を設定

 

———共通部分—————————————————————————

このたびはお問合せをいただき、誠にありがとうございます。
内容を拝見のうえ、ご回答いたします。(土日祝日は翌営業日、またお問合せ内容によってはご返信に数日かかる場合があります)
下記はご入力された内容のコピーです。

——————————————————-
■ お問合せ内容
——————————————————-
{内容}
——————————————————-
■ ファイルを添付された場合のみ。
ファイル名は自動付与したものです。
——————————————————-
{ファイル1}
{ファイル2}
{ファイル3}

□□□ お客様情報 □□□
——————————————————-
■ 会社・店舗名
——————————————————-
{会社名}

——————————————————-
■ お名前
——————————————————-
{名前}

——————————————————-
■ ふりがな
——————————————————-
{ふりがな}

——————————————————-
■ 電話番号
——————————————————-
{電話番号}

——————————————————-
■ 郵便番号
——————————————————-
{郵便番号}

——————————————————-
■ ご住所
——————————————————-
{住所}

——————————————————-
■ 個人情報の取り扱い
——————————————————-
{個人情報の取扱い}

——————————————————-
■ メールアドレス
——————————————————-
{email}

 

============ 有限会社グリーンウッド ===================

■ 電話:0587-93-0135
■ FAX:0587-93-0116
■ HP:https://www.green-wood.tv/

お電話での受付は平日は9時~18時、土曜日は9時から12時です。
日・祝はお休みとさせていただきます。

=======================================================

————————————————————————————

1-6.管理者が受信する項目を設定

———共通部分——————————————————————

グリーンウッドのHPからお問合せが届きました。

———————————–
■ お問合せ内容
———————————–
{内容}
———————————–
■ ファイル
———————————–
{ファイル1}
{ファイル2}
{ファイル3}

□□□ お客様情報 □□□
———————————–
■ 会社・店舗名
———————————–
{会社名}

———————————–
■ お名前
———————————–
{名前}

———————————–
■ ふりがな
———————————–
{ふりがな}

———————————–
■ 電話番号
———————————–
{電話番号}

———————————–
■ 郵便番号
———————————–
{郵便番号}

———————————–
■ ご住所
———————————–
{住所}

———————————–
■ メールアドレス
———————————–
{email}

——————————————————————————————-

 説明 

{ }内に入力するのは、挿入したフォームタグごとの name です。

例えばお名前の入力フォームを設置する場合に、nameに名前と入力した場合、nameは{名前}と入力します。

それぞれのフォームタグのnameを、{ }で囲み、記述するということです。

項目名は下記のような形がいいと思います。またフォーム作成画面は小さいので、メモ帳などで記述してからコピペしたほうが簡単です。

———————————–
■ お名前
———————————–

1-7.設定

設定メニューは下記の通りです。

▲上記は、お名前 と emai のみ入力

これは迷惑メールを防ぐ機能です。さらに強化する場合は、Googleのスパムフィルター「CAPTCHA」と連携することもできます。ここでは説明を省きます。

2.固定ページの作成

2-1.新規にメールフォーム用の固定ページを作ります。

ディレクトリはmailformです。この階層で作成してください。

/mailform/名前/

  • 名前はサンプルならsampleなど
  • ページタイトルをつけます

2-2.ページの設定

  • ページ設定は1カラム(広い)を選択
  • インデックスしない、リンクをフォローしないにチェック

2-3.フォーム識別子を固定ページに記述

フォーム識別子はショートコードのことです。フォームタグ設定ページの右サイドバーに表示されています。

以上でメールフォームページの作成は完了。

3.テスト

送受信テストを行い、問題なければ該当ページのURLをサイト内にリンクします。テストする場合のメールアドレスは、フォームに使っているメールアドレスと違うものを使います。