cotanct-form-7プラグインのカスタマイズいろいろ


この記事の所要時間: 29

こんにちは。
インターンの疋田です。
WordPressサイトのお問い合わせフォームプラグインといえばcontact-form-7が有名ですよね。
今回は、contact-form-7を便利に使うためのカスタマイズ方法をいくつか紹介します。

確認画面を設置する

contact-form-7でちょっと辛いのが確認画面がないこと。日本人は特に確認したいという要望も強いため付けないわけにはいきません。
しかし、今後も確認画面を追加する予定はないって話も聞いたりします。
そんな時に便利なプラグインが「contact-form-7-add-confirm」です。
このプラグインを使えばcontact-form-7にも確認画面を追加することができます。

使い方は簡単。例によって公式からダウンロードしてpluginsフォルダに入れます。
管理画面から有効化するとcontact-form-7の管理画面に以下の様な「確認」と「戻って編集」ボタンが追加されます。

コンタクトフォームの編集_‹_コクリエ Webサイト_—_WordPress

それを設置するだけです。それぞれのボタンを設置すると、最初は「確認」ボタンのみが表示されます。「確認」ボタンを押すと確認画面が表示され、「送信」「戻って編集」ボタンも表示されます。

お問い合わせ内容をデータベースと管理画面で管理

 TrustFormみたいにお問い合わせ内容を管理画面でも確認できるようにしたい!
そんなときに便利なのが「contact-form-DB」です。これを使うとお問合せの内容がデータベースに格納され管理画面上で管理できるようになります。

screenshot-1しかも、データのエクスポート機能がついており、エクセルやCSV形式で出力することができます。

フォームにバリデーションをかける 

次はバリデーションについてです。
お問合せフォーム等でよく、氏名(フリガナ)やメールアドレス(確認)て見ると思います。今回はこの2つのバリデーションについて紹介します。私はこんな感じで書いてみました。

functions.phpに以下コードを書いて下さい。

 使い方はメールアドレス確認の場合は

メールアドレス

[email* your-email]

メールアドレス (確認用)

[email* your-email-confirm]

 

フリガナチェックの場合は

氏名(フリガナ)

[text* your-name-kana

をcontact-form-7の管理画面で入力すれば大丈夫です。

 

投稿者紹介

疋田駿
Unicast Inc. ソフトウェアエンジニアRuby,Rails,React,Redux,ReactNative,Android,Elasticsearch,Dockerとか触りながら生計を立ててる。Thinkpad×fedora。ErgoDox愛好家な一児の父。

人気の記事

コメント

  1. とおりすがり より:

    これらのソース、動かないのですが、どうすればいいでしょうか?

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PAGE TOP