韓国留学、ベルリン短期ワーホリ、転職、Webデザイン、英語勉強、旅行、食べ物、ディズニーなど

WordPressでブログ作り8(お問い合わせフォームを作成)

WordPress

「Contact Form7」というプラグインを使って、お問い合わせフォームを作ります。

1、Contact Form7のインストールと設定

まずは、プラグイン「Contact Form7」を検索して、インストールします。
有効化すると、左メニューに「お問い合わせ」という項目ができます。
「お問い合わせ」>「コンタクトフォーム」をクリックします。
「新規追加」をクリック。
名前は適当につけます。日本語でOK。管理画面上で見るための名前です。

スポンサーリンク

2、「フォーム」タブで要素を配置

「フォーム」タブで、フォームの要素を配置していきます。
ちなみに、このブログでは、以下のようにしました。

<p>当ブログについてのご感想などお気軽にお問い合わせください。</p>
[response]
<p class="page__subtitle">お名前 (必須)</p>
<p>[text* your-name] </p>

<p class="page__subtitle">メールアドレス (必須)</p>
<p> [email* your-email] </p>

<p class="page__subtitle">内容(必須)</p>
<p>[textarea your-message] </p>
<p>[acceptance acceptance-225]送信内容は上記でよろしいですか?<br>
よろしければ、チェックをつけて、送信ボタンを押してください。</p>
[response]
<p class="submit-button">[submit "送 信"]</p>

スパム対策のために、承認用のチェックボックスを作っています。
これは、「承諾確認」というボタンをクリックし、フォームタグを作成します。
できたコードをフォーム内にコピペします。
最後に、「その他の設定」タブに、以下を記述します。

acceptance_as_validation: on

3、「メール」タブで受信用メールと確認メールをカスタマイズ

「メール」タブでは、お問い合わせがあった時の、自分宛てに送られる受信用メールと、お問い合わせした方宛てに送る確認メールをカスタマイズできます。
自分宛ての受信用メールは、最初の「メール」というところで設定します。
「送信先」に、自分のメールアドレスを入力します。

お問い合わせしてくれた方へ送る確認メールは、「メール(2)」というところで設定します。
まず、「メール(2)を使用」にチェックを入れます。
このブログの場合は、次のようにしました。

「題名」

「Mai Note」への送信が完了しました。

「メッセージ本文」

[your-name] 様
Mai Note(http://watanabemai.com/blog/)のお問い合わせフォームからの送信が完了しました。
ありがとうございます。

返信が必要なお問い合わせに関しては、多少お時間をいただく場合がございます。ご了承ください。

--
送信内容:
[your-message]

4、送信後のページを用意する

送信後のページは、固定ページで作成しておきます。
そして、「その他の設定」タブに、以下を記述します。

on_sent_ok: "window.location.href ='http://watanabemai.com/blog/contact/contact-thanks/';"

※URLは、作成した固定ページのURLにします。

5、設置とCSS調整、その他

また、「メッセージ」タブでは、不備があったときに出るアラートの文言を変更することができます。

設定が完了したら、出来上がったショートコードをコピーして、新規の固定ページを作成し、そこに貼り付けます。
最後にCSSを調整すれば完成です。

スポンサーリンク

内容をご確認の上、「送信」ボタンを押してください。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください