スイッチ | ブログ・サイト運営を応援するWebマガジン

確認画面付きメールフォームをWordPressで作成する方法


こんにちは、WEBマーケッターの荒木です。

WordPressでお問い合わせなどのメールフォームを作る場合、「Contact Form 7」を使う人が多いと思います。

ただ、「Contact Form 7」の場合は、確認画面が表示されないため、ユーザーとしてはちょっと不安なところもあります。

そこで、今回は「確認画面付き」のメールフォームをWordpressで作成する方法をご紹介します。

今回使用するのは「MW WP Form」というプラグイン。

まずは、このプラグインをインストールして、有効化してください。

メールフォーム項目を作成する

メールフォームで使用する項目は、あらかじめ用意されています。

追加したいメールフォームの項目を選んで、[フォームタグを追加]をクリックします。

フォームタグはショートコードで生成されますので、テーブルタグなどで上手くレイアウトしてください。

確認画面を表示する場合は「ボタン項目」で[確認・送信]を選択してください。

完了画面メッセージを入力する

完了画面で表示するメッセージを入力します。

タグも使えますし、画像を挿入することもできます。

バリデーションルールを設定する

まず[バリデーションルールを追加]をクリックします。

必須項目を設定する場合は、必須にしたい項目の「name」に設定した名前を「バリデーションを適用する項目」に入力します。

必須項目以外にも、文字数や画像の拡張子・サイズ制限を設定することも可能です。

自動返信メールを設定する

自動返信メールは、お問い合わせをくれたユーザー宛に自動で送信するメールのことです。

自動返信メールの「件名」「送信者」「送信元」「本文」を設定します。

「送信者」には、あなたの名前やサイト名、「送信元」には、あなたのメールアドレスを設定します。

「本文」に問い合わせ内容を表示する場合は、その項目の「name」を{}で囲んで記入してください。

「自動返信メール」には「メールアドレス」の項目で設定した「name」を記入します。{}は必要ありません。

管理者宛メールを設定する

管理者宛メールは、あなた宛に届くメールのことです。

管理者宛メールの「送信先」「CC」「BCC」「件名」「送信者」「送信元」「本文」を設定します。

「送信先」には、メールを受信するあなたのメールアカウントを設定します。

複数のアカウントで受信する場合は、「CC」「BCC」を設定します。

「送信者」「本文」については、あなたが受け取りやすい内容で自由に設定してください。

メールフォームのページを作成する

フォームの項目が設定できたら、メールフォームを表示するページを作成します。

まずは、フォーム編集画面の右上にある「フォーム識別子」のショートコードをコピーします。

次に「固定ページ」の[新規追加]をクリックします。

メールフォームのタイトルを入力し、投稿内容に先ほどのショートコードを貼付けます。

最後に[公開]をクリックしたら完成です。

完成

完成したメールフォームが下記です。

▼入力フォーム

▼確認画面

▼完了画面

[確認する]をクリックしたら、ちゃんと確認画面が表示されます。

[送信する]をクリックすると、完了画面が表示されます。

WordPressのプラグインで、これだけのクオリティのメールフォームが作れると良いですね。

設定も簡単なので、ぜひ利用してみてください。


Sponsored Links

こちらの記事もおすすめです!

シェア頂けると励みになります!

ブログ更新情報はこちらから発信しています。

【完全保存版】ショッピングカートASP徹底比較2018

運営者情報

荒木 厚(株式会社コクリ 代表)

デザイン会社、WEB運営会社を経て、「株式会社コクリ」を設立。 Wordpressを使ったWebサイトやネットショップの企画・制作、SEO・リスティング広告を使った集客支援をしています。