フリーランス|WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 IRODORI DESIGN

B L O G

【まとめ】Contact Form 7のカスタマイズ事例集

Contact Form 7
WordPress
プラグイン
まとめ

WordPressでお問い合わせフォームを作成する時、最近は「Contact Form 7」一択になりました。
そしてこのブログでは実際の案件で実装した多くのカスタマイズ方法をコードとともに紹介しています。

今回の記事では、「Contact Form 7」を使用したカスタマイズ事例を一覧にまとめました。

セレクトで動的に年月日を生成する方法

「Contact Form 7」でセレクトを使い動的に年月日を生成する方法をご紹介しています。
年を静的に指定していると毎年変更する必要があり不便ですが、このコードを使うことで自動で新しい年を選択肢に追加してくれます。

また年と月をもとにその月の最終日までを生成するコードもご紹介しています。

Google reCAPTCHAを導入する方法

「Contact Form 7」にGoogleの「reCAPTCHA」を導入する方法をご紹介しています。
無料で簡単に使うことが出来るので、スパムメール対策として是非導入しておきたいセキュリティ対策ですね。

出力されるHTMLタグ構造のまとめ

「Contact Form 7」を使った場合に出力されるHTMLタグの構造を一覧化しています。
コーダーさんに事前に共有しておくと余計な作業が削減出来ますね。

選択項目ごとにメール送信先を変更する方法

ラジオボタンの選択肢によってメール送信先を変更するカスタマイズ方法をご紹介しています。
通常、「お問い合わせ」については営業部、「採用について」は総務部など、送り先が異なることがありますが、送信先が異なるだけでフォームを複数作成する必要はありません。このカスタマイズは意外にも実装頻度が高く、効率的な方法です。

投稿タイトルを自動でフィールドに設定する方法

遷移元の情報を自動でフィールドにセットするカスタマイズ方法をご紹介しています。
特に、フィールドが多い場合はひとつでも入力項目を減らせるのは魅力的ですね。

ラジオボタンのデフォルト選択肢を未選択状態にする方法

「Contact Form 7」のラジオボタンはデフォルトでどちらかが選択されている状態になりますが、これをどちらも選択されていない状態にするカスタマイズ方法をご紹介しています。

必須項目のエラーメッセージをカスタマイズする方法

「Contact Form 7」の管理画面から設定できるエラーメッセージは、項目ごとに全て共通のメッセージになります。
例えば、「お名前は必須です」や「メールアドレスは必須です」といった具体的な項目ごとのエラーメッセージを変更するカスタマイズ方法をご紹介しています。

郵便番号から住所を自動入力する方法

郵便番号を入力すると自動で住所が入力されるカスタマイズ方法をご紹介しています。
住所は通常長くて手間がかかる項目なので、省略出来るならばその方が便利ですね。

送信完了後に完了画面を表示する方法

「Contact Form 7」はデフォルトのままだと、フォームの下に「送信しました。」と一文表示されるだけの簡素なものです。
送信後、送信完了ページを表示するカスタマイズをご紹介しています。

メールにランダム数値(乱数)を記載する方法


メールアドレスにランダムな数値(乱数)を記載するカスタマイズ方法をご紹介しています。
使用する状況が限られますが、特定のニーズに対応できる便利なカスタマイズです。

formタグにid・class・nameを追加する方法

「Contact Form 7」が出力するformタグにidやclass、name属性を追加するカスタマイズ方法をご紹介しています。
使用する状況が限られますが、特定のニーズに対応できる便利なカスタマイズです。

送信日時をメール本文に記載する方法

送信日時は通常、メールヘッダーに記載されますが、メール本文にも記載したい場合のカスタマイズ方法をご紹介しています。
これにより、受信者がメールを確認する際に送信日時をすぐに確認出来ます。

自作ショートコードを使用する方法

「Contact Form 7」の内容は通常、エディタ内に記載されますが、このエディタではPHPを直接使用することは出来ません。しかし、ショートコードを使用することで、投稿記事やWordPressの関数などを呼び出すことが可能です。このカスタマイズ方法をご紹介しています。

パスワードを*に変換してメールに記載する方法

ユーザーにパスワードを入力してもらうフォームを作成する際、入力された内容がそのままメール本文に記載されます。しかし、セキュリティの強化のために、パスワードを分からなくするために文字数に応じて「*」に変換するカスタマイズ方法をご紹介しています。

機能を拡張出来る関連プラグイン

「Contact Form 7」の機能を拡張出来るプラグインをご紹介しています。

Datepickerで日付選択をする方法

「Contact Form 7」で日付選択用のカレンダーを表示する「Datepicker」を使用する方法をご紹介しています。
これにより日付選択が容易になります。

まとめ

いかがでしたか?
これからも「Contact Form 7」を使ったカスタマイズをたくさん紹介していきたいと思います。