お問い合わせページ作成

2019年03月04日 2021年04月11日

Jo Masafumi

学習状況をツイッターでつぶやく

作業目安時間30分

次は、お問い合わせページ作成をします。

お問い合わせページ作成　作業手順

ワードプレスの管理画面を開きます。

左側の「MW WP Form」を押します。

左上の「新規追加」を押します。

左上の「タイトルを追加」に「お問い合わせ」と入力します。

右側の「テキスト」を押します。

「テキスト」に下記コードをコピーして貼り付けます。

<table class="table-res-form">
<tr>
<th>お名前<br>ニックネーム可
<span class="requied">必須</span>
</th>
<td>[mwform_text name="お名前" size="20" maxlength="20"]
<span class="gray">例）田中太郎</span></td>
</tr>
<tr>
<th>メールアドレス
<span class="requied">必須</span>
</th>
<td>[mwform_text name="メールアドレス" size="24" maxlength="60"]
<span class="gray">例）test@yahoo.co.jp</span></td>
</tr>
<tr>
<th>メールアドレス確認
<span class="requied">必須</span>
</th>
<td>[mwform_text name="メールアドレス確認" size="24" maxlength="60"]
<span class="gray">例）test@yahoo.co.jp</span></td>
</tr>
<tr>
<th>題名</th>
<td>[mwform_text name="題名" size="60"]</td>
</tr>
<tr>
<th>メッセージ本文</th>
<td>[mwform_textarea name="メッセージ本文" cols="50" rows="5"]</td>
</tr>
<tr>
<th class="empty">&nbsp;</th>
<td>[mwform_submitButton preview_value="確認画面へ" submit_value="送信する"]　[mwform_backButton value="戻る"]</td>
</table>


<div class="entry_btn"></div>

「テキスト」に貼り付けました。

完了画面メッセージの設定

少し下へ移動します。

「完了画面メッセージ」の右側の「テキスト」を押します。

「完了画面メッセージ」に下記の文章をコピーして貼り付けます。

<font size="5"><span class="futozi">送信完了</span></font>

この度はお問い合わせいただきありがとうございます。
後ほど、担当よりご連絡をさせていただきます。
今しばらくお待ちくださいますようよろしくお願い申し上げます。

なお、3日以上たっても弊社より返信、返答がない場合は、
お客様によりご入力いただいたメールアドレスに誤りがある場合がございます。
その際は、お手数ですが再度送信いただくか、
test@yahoo.co.jpまでご連絡いただけますと幸いです。

何かご不明な点等ございましたら、お気軽にお問合せ下さい。

「完了画面メッセージ」に文章を貼り付けました。

「test@yahoo.co.jp」のところは、自分のメールアドレスに変更しておいてください。

お問い合わせ画面のルール設定

次は、バリテーションルール設定をします。

バリテーションルールとは？
バリテーションルールは、入力項目ごとにルールを決めるところです。
例えば、「メールアドレス入力の項目」と、「メールアドレス確認の項目」のこの２つの項目に入力したメールアドレスが一致するかなどの、ルールを設定するところです。

お名前　設定

少し下へ移動します。

左側の「バリテーションルールを追加」を押します。

「バリテーションを適用する項目」に「お名前」と入力します。

左側の「必須項目」にチェックを入れます。

メールアドレス設定

少し上に戻ります。

左側の「バリテーションルールを追加」を押します。

「バリテーションを適用する項目」に「メールアドレス」と入力します。

左側の「必須項目」と「メールアドレス」の２か所にチェックを入れます。

メールアドレス確認設定

少し上に戻ります。

左側の「バリテーションルールを追加」を押します。

「バリテーションを適用する項目」に「メールアドレス確認」と入力します。

左側の「必須項目」と「メールアドレス」の２か所にチェックを入れます。

「一致する項目」に「メールアドレス」と入力します。

これで、バリテーションルール設定は終わりです。

自動返信メール設定

次は、自動返信メール設定をします。

一番上に戻ります。

右側の「件名」に「自分のブログ名　お問い合わせ」と入力します。

私の場合は、「サンプル　お問い合わせ」と入力します。（サンプル部分に「自分のブログ名」を入れてください。）

「送信者」に「自分のブログ名」を入力します。

私の場合は、「サンプル」と入力します。（サンプル部分に「自分のブログ名」を入れてください。）

「Reply-to（メールアドレス）」に「自分のメールアドレス」を入力します。

右側の「本文」に下記の文章をコピーして貼り付けてください。

「自分のブログ名」より、お問い合わせありがとうございます。
土日祝を除く、３営業日以内にご対応いたします。
今後ともよろしくお願いいたします。


お問い合わせ内容:

お名前：
{お名前}

メールアドレス：
{メールアドレス}

題名：
{題名}

メッセージ本文：
{メッセージ本文}


お問い合わせ内容のご確認よろしくお願いします。
「田中太郎」より回答いたしますので、しばらくお待ちください。

-- 
このメールは「自分のブログ名」(http://test.com/) のお問い合わせフォームから送信されました。

「自分のブログ名」、「田中太郎」、「http://test.com/」のところは自分のに変更してください。

貼り付けました。

私の場合の記入例

「サンプル」より、お問い合わせありがとうございます。
土日祝を除く、３営業日以内にご対応いたします。
今後ともよろしくお願いいたします。

お問い合わせ内容:

お名前：
{お名前}

メールアドレス：
{メールアドレス}

題名：
{題名}

メッセージ本文：
{メッセージ本文}

お問い合わせ内容のご確認よろしくお願いします。
「城雅文」より回答いたしますので、しばらくお待ちください。

--
このメールは「サンプル」(http://wpsensei6.wp.xdomain.jp/) のお問い合わせフォームから送信されました。

少し下へ移動します。

「自動返信メール」に「メールアドレス」と入力します。

「送信元（E-mailアドレス）」に「自分のメールアドレス」を入力します。

管理者宛メール設定

少し下へ移動します。

「送信先（E-mailアドレス）」に「自分のメールアドレス」を入力します。

「件名」に「自分のブログ名　お問い合わせ」と入力します。

私の場合は、「サンプル　お問い合わせ」と入力します。（サンプル部分に「自分のブログ名」を入れてください。）

「送信者」に「自分のブログ名」と入力します。

私の場合は、「サンプル」と入力します。（サンプル部分に「自分のブログ名」を入れてください。）

「Reply-to（メールアドレス）」に「自分のメールアドレス」を入力します。

「本文」に下記の文章をコピーして貼り付けてください。

「自分のブログ名」より、お問い合わせありがとうございます。
土日祝を除く、３営業日以内にご対応いたします。
今後ともよろしくお願いいたします。


お問い合わせ内容:

お名前：
{お名前}

メールアドレス：
{メールアドレス}

題名：
{題名}

メッセージ本文：
{メッセージ本文}


お問い合わせ内容のご確認よろしくお願いします。
「田中太郎」より回答いたしますので、しばらくお待ちください。

-- 
このメールは「自分のブログ名」(http://test.com/) のお問い合わせフォームから送信されました。