【WordPress】ContactForm7の備忘録 | DXシステム開発・WEB制作 SmileVision|大阪のWEBシステム開発 SmileVision

社員ブログ 【WordPress】ContactForm7の備忘録
ContactForm7の備忘録

ども、こんにちは。開発部のいろはです。

ContactForm7は問い合わせフォームを簡単に設置できるWordPressのプラグインです。
このプラグインは必須項目が未入力の時にエラー文を自動で表示してくれる機能があり、非常に便利なものです。

あわせて読みたい
contact_form_7
【WordPress】Contact Form 7を使ったお問い合わせフォームの作成こんにちは!開発部のいろはです。 今回はWordPressのプラグイン「Contact Form 7」を使用した お問い合わせフォー...

今回はこのプラグインを使用するにあたり
ここどうするの?と気になった点がありましたので、まとめてご紹介いたします。

複数のエラーメッセージが上部に表示される

必須項目が未入力状態の場合、各入力欄の下にエラーメッセージが表示されます。
しかし下記のプログラムが上部に表示されて、エラー文が必要以上に表示されてしまう場合があります。

この場合は次のcssを追加することで非表示に設定できます

エラーの表示枠の色を変更する

wp-content > plugins > contact-form7 > includes > css > styles.cssの
25行目周辺で定義されております。
デフォルトは黄色ですが任意のカラーに変更することができます。


文字の色を変更する場所は下記になります。

ContactFrom7のショートコードを埋め込む

固定ページや投稿ページではなくpage.phpなどを作成して、
その中でContactFrom7を使用する場合はdo_shortcode関数をechoします。

Contact Form 7 add confirmで全ボタンが表示される

Contact Form 7 add confirmは確認画面を追加するプラグインです。

「送信」以外に「戻る」「確認」を設置することができますが、
これら3つが入力画面に表示されたり、戻るボタンが動作しない場合があります。

この場合、page.phpの中に<?php wp_head();?>と<?php wp_footer();?>を
次の位置に追加します。

確認ボタンだけに変わりました。


以上です。

Contact Form 7について4つ解説いたしましたが、
この記事が少しでも皆様のお役に立てれば幸いです。

あわせて読みたい
【WordPress】Contact Form 7 に確認画面を追加するども、こんにちは!いろはです。 今回は「Contact Form 7 add confirm」というContact Form 7を拡張...

それではお疲れ様でした!ノシ

ABOUT ME
いろは
いろは
2017年入社 開発部所属のいろはと申します! 当ブログではWordPressなどWEBに関するアイデアや応用例をを中心に発信して参ります。