AD5 WordPress Lab

WordPressにメールフォームを自力で実装する

WordPressにメールフォームを自力で実装する

WordPressにメールフォームを実装する優秀なプラグインは沢山ありますが、
ほとんどのプラグインは非開発者向けに導入しやすさを重視して作られているため、
例えば入力項目を動的にするなど、少し複雑なことをしようと思うと、
詰んでしまいます。

WordPressにはメール送信処理やデータの保存などを簡単に実装できる関数が用意されているので、
メールフォームを自力で実装するのもそれほど難しくなく、かえってその方が好都合な場合があります。

メールフォームの実装方法

※本記事の途中の暫定版ソースをコピペして使用しないでください。

単一のフォームであれば、固定ページで実装してしまうのが簡単です。

まずは固定ページを作成し、ページテンプレートに(page-{slug}.php)にフォームのHTMLを記載します。

そして、functions.php にメール送信処理を記述します。
ここでは、template_redirect アクションにフックしていますが、
処理によっては init アクションなどでも良いでしょう。

is_page() で判定し、対象のページ以外では動作しないようにします。

wp_mail() 関数が、メール送信処理をいい感じにやってくれるので、
基本的には、フォームから送信したデータをこの関数に渡すだけで動きます。

より実用的なメールフォームへ

メールフォームとして実践で使えるようにするためには、最低限、

・エラーチェックとエラー表示処理
・CSRF対策
・完了画面表示+二重送信対策

が必要だと思います。

CSRF対策

とりあえずこのままでは不正送信し放題なので、nonceチェックを入れましょう。

テンプレート側でnonceデータを生成し、

送信処理の前にチェックを行います。

完了画面表示+二重送信対策

フォームページの子ページとして、送信完了ページを子ページで作成しておきます。

そして、送信完了時にリダイレクト処理を入れます。

エラーチェックとエラー表示処理

ここはPHP的に地道に実装していきましょう。
やり方は色々ありますが、例えば以下のような実装です。

フォームを自前で実装する際に悩ましいのはデータの妥当性チェックです。

多くの場合、正規表現やPHPの filter_var() を使用して検証することになりますが、メールアドレスの妥当性チェックに関しては、WordPressの is_email() 関数を使用することもできます。

Plugin Outbound Posts – 記事リスト内に外部リンクを挿入

Outbound Posts – 記事リスト内に外部リンクを挿入

投稿のリストの中に、見た目は他の投稿のリンクと同じように、外部リンクを差し込みたい、なんてことはありませんか? こんな風に・・・ Outbound Posts は、このような記事風の外部リンクを簡単に投稿できるプラグインです。 このプラグインを有効化すると、各記事の投稿画面に、「外部リンク」という欄が現
Column WordPressが重い・遅いときは、まず「プラグインのスリム化」をしよう 〜調査篇〜

WordPressが重い・遅いときは、まず「プラグインのスリム化」をしよう 〜調査篇〜

WordPressが重い、遅い!? WordPressのサイトが重い、読み込みが遅いので高速化したい、という相談をよく受けます。 本シリーズでは、実際の高速化の実例を元に、事前調査から対応までの手順をご紹介します。 WordPressが遅い原因 経験上、WordPressが遅い原因の80%以上はプラグインの過剰使用です。 プラグイン
Column WordPressにXMLサイトマップを独自実装するカスタマイズ

WordPressにXMLサイトマップを独自実装するカスタマイズ

WordPressに限らず、SEO対策に不可欠なXMLサイトマップ。 カスタマイズせずとも「Google XML Sitemaps」などのプラグインで瞬殺なわけですが、 多くのXMLサイトマッププラグインは、柔軟に設定できるように作られている分、 「このサイトでは要らない機能」がたくさん含まれることになるので、多少なりともリソー
Plugin AD5 LOYALTY – WordPressで会員制サイト作成

AD5 LOYALTY – WordPressで会員制サイト作成

当サイトで使用しているプラグインです。 WordPressのサイトを簡単に会員制サイトにすることができます。 ショートコードで簡単に会員登録フォーム、ログインフォームが設置可能で、全ての投稿に対して、会員用コンテンツと非会員用コンテンツを設定することができます。 ショートコートで簡単に会員登録フォーム
Column WordPressテーマ・プラグイン開発時のセキュリティ対策

WordPressテーマ・プラグイン開発時のセキュリティ対策

WordPressのテーマやプラグインを開発、カスタマイズする際には、脆弱性を生まないよう、セキュリティ対策を十分に考慮する必要があります。 CSRF対策 管理画面内外を問わず、WordPressにリクエストを送信するフォームや、データを更新するAJAXを実装する場合には、CSRF対策を施しましょう。 リクエストを送信する
Plugin Mobile Sticky Footer – スマホ用固定フッター

Mobile Sticky Footer – スマホ用固定フッター

Mobile Sticky Footerは、スマートフォンサイトに簡単に固定フッターを設置できるWordPressプラグインです。 選べる3タイプのレイアウト 複数ボタンタイプは2ボタンから5ボタンまで設定可能。 お問合せフォームやSNSへのリンクのほか、電話ボタンの設置も可能です。 リアルタイムプレビューつきの直感的な設定画
Column WordPressにメールフォームを自力で実装する

WordPressにメールフォームを自力で実装する

WordPressにメールフォームを実装する優秀なプラグインは沢山ありますが、 ほとんどのプラグインは非開発者向けに導入しやすさを重視して作られているため、 例えば入力項目を動的にするなど、少し複雑なことをしようと思うと、 詰んでしまいます。 WordPressにはメール送信処理やデータの保存などを簡単に実装できる
Plugin WP LOYALTY Checkout add-on – クレジットカード決済

WP LOYALTY Checkout add-on – クレジットカード決済

当サイトで使用しているプラグインです。 AD5 LOYATYのアドオンとして、決済機能を提供します。 決済サービスとして、カード決済手数料が3.0%〜と安く、個人事業主でも利用可能なPAY.JPと連携できます。 (別途PAY.JPのアカウントが必要です。)
Column WordPressのテーマファイル構成を本気出して考えてみた

WordPressのテーマファイル構成を本気出して考えてみた

エンジニアの端くれとして、たかがWordPressテーマであっても、綺麗なモジュール設計がしたいわけです。 そこで、以前作ったサイトのテーマをモチーフに、テーマファイルを再設計してみました。 対象にしたサイトは、ユーザーが会員登録し、PDFコンテンツを投稿でき、ダウンロード結果を集計できるなど、そこそこ高機
Column WordPressサイトにパンくずリストをプラグインなしで実装する

WordPressサイトにパンくずリストをプラグインなしで実装する

意外と大変なパンくずリスト WordPressサイトに限らず、SEOの面でも重要視されるパンくずリスト(breadcramb nav)。 WordPressでガチで実装すると意外と面倒ですよね。 個別投稿ページだけでも、 A. 標準投稿 HOME > 親カテゴリ > 子カテゴリ > 投稿名 B. 固定ページ HOME > 親ページ >
 
ログイン
メールアドレス
パスワード
会員登録
お名前
メールアドレス
パスワード
購入手続き
カード番号
有効期限 (MM/YY)
/
セキュリティコード (CVC)