ども、こんにちは。開発部のいろはです。
ContactForm7は問い合わせフォームを簡単に設置できるWordPressのプラグインです。
このプラグインは必須項目が未入力の時にエラー文を自動で表示してくれる機能があり、非常に便利なものです。
今回はこのプラグインを使用するにあたり
ここどうするの？と気になった点がありましたので、まとめてご紹介いたします。
Contents
複数のエラーメッセージが上部に表示される
必須項目が未入力状態の場合、各入力欄の下にエラーメッセージが表示されます。
しかし下記のプログラムが上部に表示されて、エラー文が必要以上に表示されてしまう場合があります。
|
1 2 3 4 5 6 7 |
<div class="screen-reader-response" role="alert">入力内容に問題があります。確認して再度お試しください。 <ul> <li>必須項目に入力してください。</li> <li>必須項目に入力してください。</li> <li>必須項目に入力してください。</li> </ul> </div> |
この場合は次のcssを追加することで非表示に設定できます
|
1 2 3 4 |
/* エラーメッセージの上部を消去 */ div.screen-reader-response{ display: none; } |
エラーの表示枠の色を変更する
wp-content > plugins > contact-form7 > includes > css > styles.cssの
25行目周辺で定義されております。
デフォルトは黄色ですが任意のカラーに変更することができます。
|
1 2 3 4 5 |
/* 送信NG時の枠の色 */ div.wpcf7-validation-errors, div.wpcf7-acceptance-missing { border: 1px solid #F78181; //色を指定 } |
文字の色を変更する場所は下記になります。
|
1 2 3 4 5 6 7 8 9 |
/* 送信OK時の文字色 */ div.wpcf7-mail-sent-ok { border: 2px solid #398f14; } /* 送信NG時の文字色 */ div.wpcf7-mail-sent-ng, div.wpcf7-aborted { border: 2px solid #ff0000; } |
ContactFrom7のショートコードを埋め込む
固定ページや投稿ページではなくpage.phpなどを作成して、
その中でContactFrom7を使用する場合はdo_shortcode関数をechoします。
|
1 2 3 |
<?php echo do_shortcode('[contact-form-7 id="1" title="form"]'); ?> |
Contact Form 7 add confirmで全ボタンが表示される
Contact Form 7 add confirmは確認画面を追加するプラグインです。
「送信」以外に「戻る」「確認」を設置することができますが、
これら3つが入力画面に表示されたり、戻るボタンが動作しない場合があります。
この場合、page.phpの中に<?php wp_head();?>と<?php wp_footer();?>を
次の位置に追加します。
|
1 2 3 4 5 |
<?php get_header() ; ?> <?php wp_head();?> <?php get_footer() ; ?> <?php wp_footer();?> |
確認ボタンだけに変わりました。
以上です。
Contact Form 7について4つ解説いたしましたが、
この記事が少しでも皆様のお役に立てれば幸いです。
それではお疲れ様でした！ノシ