WordPress　お問い合わせページ

2022 12/21

2022/12/19 2022/12/21

お問い合わせページプラグイン

Contact Form 7
MW WP Form

上記いづれかのプラグインを使用する。

Contact Form 7

基本作業

HTMLでお問合を作成
inputタグの部分をプラグインのショートカットに置き換え

AAAAAAA

手順

HTMLで作成したFormのコードを貼り付ける
input,textformの行をプラグインのショートコードに置き換える
全部置き換えたら保存し、お問い合わせセクションにCF7のショートコードを貼り付ける

AAAAAAA

自動返信内容（テキスト）

[your-name]：お問い合わせ者の名前
[your-email]：お問い合わせ者のメールアドレス
[your-subject]：お問い合わせ者が書いた題名
[your-message]：お問い合わせ者が書いた本文

[your-name]様
この度はお問い合わせありがとうございます。
折り返しご連絡させていただきますが、数日お時間を頂く場合がございます。
何卒こ了承くださいませ m(_ _)m
━━━━━━━━━━━━━━━━━━━━━━━━
以下の内容でメールを受け付けました。
━━━━━━━━━━━━━━━━━━━━━━━━
■ お名前　[your-name]
■ メールアドレス　[your-email]
■ 題名：[your-subject]
■ お問い合わせ内容
[your-message]
———————-
このメールはブログ名 (http://mydomein.com) のお問い合わせフォームから送信されました

https://manemichi.com/contactform7-autoresponse

サンクスページ遷移

<script>
document.addEventListener( ‘wpcf7mailsent’,function( event ){
location = ‘遷移させたいサンクスページのURL’;
}, false );
</script>

AAAAAAA

提案文

MW WP Form

基本作業

HTMLでお問合を作成
inputタグの部分をプラグインのショートカットに置き換え

AAAAAAA

手順

HTMLで作成したFormのコードを貼り付ける
input,textformの行をプラグインのショートコードに置き換える
全部置き換えたら保存し、お問い合わせセクションにCF7のショートコードを貼り付ける

AAAAAAA

自動返信内容（テキスト）

自動返信メール設定
①件名
こちらは自動返信メールの件名に表示されるテキストを入力します。
例えば、
「お問合せいただき誠にありがとうございます。」
などと入力すればいいと思います。
②送信者
サイト名や会社名などを入力しましょう。
例えば、
「tonoblog」
と記入します。
③Reply-to（メールアドレス）
Reply-to（メールアドレス）とは自動返信メールの返信先を指定します。
④本文
ここを入力しないとフォームの入力内容が送信されないので、しっかりと入力していきましょう。

自動返信メールのテンプレートを乗せておきますね。
{name-text}様、
お問合せありがとうございました。
入力内容をご確認ください。
お名前：
{name-text}
Email：
{email-text}
お問合せ内容：
{text-area-input}
３日以内にご返信しますので、よろしくおねがいします！
こちらは自動返信メールですので、返信は不要です。
この{}の部分ですが、inputタグの中にあるname=“”の部分に記入しているテキストを記入します。

⑤自動返信メール
こちらは自動返信メールを送る相手のメールアドレスが入ります。なので、Emailのinputタグの中のnameの値を記入しましょう。
今回の例をあげますと、「Email-text」と記入しまししょう。こちらは{}は不要です。
⑥送信元
送信元のメールアドレスを記入します。記入しなくてもいいですが、入力するならサーバーで作ったメールアドレスを記入しましょう。
これで自動返信メールの設定は終わりです。入力した内容はこんな感じです。
右上の「公開」をクリックして保存しておきましょう。
一度、ここまでの設定でフォームを送信してみてください。
入力したメールアドレスに自動返信メールが届いていたら成功です。
次は管理者宛メール設定を入力しましょう。

このような管理者宛メール設定の項目があると思います。
こちらも一つずつ説明しますね。
①送信先
こちらは管理者宛のメールアドレスを記入します。コンマ区切り（半角コンマ、半角スペース）で複数設定できます。
例：sample@gmail.com, sample2@gmail.com
②CC（E-mailアドレス）
送信先の人にメールアドレスを知られてもいい場合はこちらに入力。未入力でも大丈夫です。
③BCC（E-mailアドレス）
複数人にメールアドレスを送った場合に他の人にメールアドレスを知られたくない場合に入力。未入力でも大丈夫です。
④件名
こちらは管理者宛メールの件名に表示されるテキストを入力します。
例えば、「お問合せがありました。」などと入力すればいいと思います。
⑤送信者
サイト名や会社名などを入力しましょう。
例えば、「tonoblog」と記入します。
⑥Reply-to（メールアドレス）
管理者宛メールに返信することは無いとおもうので、未入力で大丈夫です。
⑦本文
ここを入力しないとフォームの入力内容が送信されないので、しっかりと入力していきましょう。
管理者宛メールのテンプレートを乗せておきますね。

{name-text}様から
お問合せがありました。
入力内容をご確認ください。
お名前：
{name-text}
Email：
{email-text}
お問合せ内容：
{text-area-input}
ご対応よろしくおねがいします！

⑧Return-Path（メールアドレス）
エラーでメールが返ってくる時のメールアドレスを設定します。
未入力でも大丈夫ですが、入力するならサーバーのメールアドレスを入れてください。
⑨送信先（E-mailアドレス）
通知メールの送信者のメールアドレスを設定します。未入力で大丈夫です。
すべてを入力するとこのような感じになります。
これで送信者宛メール設定は完了です。
右上の公開をクリックして、保存しましょう。
確認のためにお問合せフォームを送信してみましょう。
管理者宛メールが届いていたら成功です。
いかがでしたでしょうか？
意外と簡単だったのではないでしょうか？
それではこのメール設定で間違えやすいポイントを書いておきますね。

サンプルコード

<dl class="form__contents">
 	<dd class="form__item"><label for="">会社名</label></dd>
 	<dt class="form__input">[mwform_text name="company-name" id="company-name" placeholder="Engress"]</dt>
</dl>
<dl class="form__contents">
 	<dd class="form__item"><label for="name">氏名</label></dd>
 	<dt class="form__input">[mwform_text name="name" id="name" placeholder="田中　太郎"]</dt>
</dl>
<dl class="form__contents">
 	<dd class="form__item"><label for="email">メールアドレス</label></dd>
 	<dt class="form__input">[mwform_email name="email" id="email" size="60" placeholder="Example@example.com"]</dt>
</dl>
<dl class="form__contents">
 	<dd class="form__item"><label for="tel-number">電話番号</label></dd>
 	<dt class="form__input">[mwform_text name="tel-number" id="tel-number" placeholder="01-2345-6789"]</dt>
</dl>
<dl class="form__contents">
 	<dd class="form-select__item"><label for="contact-contents">お問い合わせの種類を選択してください（資料請求の方は資料請求を選択ください）</label></dd>
 	<dt class="checkbox__item">[mwform_checkbox name="contact-item" id="contact-item" class="contact-item-checkbox" children="商談のご相談,サービスに関するお問い合わせ,資料請求,その他" separator="," vertically="true"]</dt>
</dl>
<dl class="form__contents">
 	<dd class="form__item"><label class="contact-detail" for="contact-detail">お問い合わせ内容</label></dd>
 	<dt>[mwform_textarea name="contact-detail" id="contact-detail" cols="30" rows="10" placeholder="入力してください"]</dt>
</dl>
<div class="accept-privacypolicy"></div>
<div class="privacy-check">
<div class="accept-privacypolicy">

<a href="#">プライバシーポリシー</a>に同意の上、送信ください。

</div>
[mwform_checkbox name="privacy-policy" id="privacy-policy" children="プライバシーポリシーに同意する" separator=","]

</div>
<div class="btn-part">[mwform_submitButton name="submit-btn" class="submit-btn" confirm_value="確認画面へ" submit_value="送信する"]
[mwform_backButton class="rtn-btn" value="戻る"]</div>

AAAAAAA

提案文

AKIのNotion on Notion

失敗しない返信メールテンプレート | Notion ■営業メール返信について

https://www.youtube.com/watch?v=UX8RrddtOzY

Youtubeはリンクをコピーして視聴