“Contact Form 7” タグの記事（4件）

WordPress のメールフォームプラグイン Contact From 7。デフォルトでは、送信ボタンを押下した時のエラーメッセージや送信完了などのメッセージはフォームの下に表示されます。

この応答メッセージをフォームの上に表示して、エラーがある場合にフォームの先頭にスクロールさせるというカスタマイズがあります。よく紹介されているのが次のようなものです。

まずフォームのソースで応答メッセージを表示するショーコード [response] をフォームの先頭に入れます。

[response]
（フォーム要素）
[submit "送信する"]

そして、バリデーションエラー時に発火するイベント wpcf7invalid を使ってエラーメッセージの要素 '.wpcf7-response-output' へスクロールさせます。

document.addEventListener('wpcf7invalid', function(event) {
	var position = $('.wpcf7-response-output').offset().top;
	$('html, body').animate({
		scrollTop: position
	}, 300);
}, false );

確かにこれで送信ボタン押下時にエラーがあると、フォームの先頭に表示したエラーメッセージにスクロールするのですが、このままではフォーカス移動の問題があります。

“Contact Form 7 でエラー時にフォームの先頭にスクロールするカスタマイズで、フォーカスも移動させる” の続きを読む »

メールフォームのスパム対策として、最近は Google reCAPTCHA を導入することがあります。制限はありますが（2024年4月1日に月100万回から1万回と大幅に縮小された）、無料で利用できるので。

WordPress のメジャーなメールフォームプラグイン Contact Form 7 では、標準で Google reCAPTCHA を連携できるようになっています。Contact Form 7 のサブメニュー「インテグレーション」から「reCAPTCHA　(v3)」の「インテグレーションのセットアップ」で、取得したサイトキーとシークレットキーを入力するだけでよいのですが、ここで設定するとサイト全体に reCAPTCHA バッジが表示されてしまいます。

“Contact From 7 で Google reCAPTCHA をフォーム画面だけに表示する手軽な方法” の続きを読む »

WordPress でメールフォームから送信されたデータを元に、自動で投稿を作成したい案件があり、調べてみたら Contact Form 7 を使うと実装できることがわかりました。

ContactForm7のフォーム送信時に自動でブログ記事を作成する方法

Contact Form 7 で用意されているフック「wpcf7_mail_sent」を利用して投稿を作成できるというもので、カスタムフィールドの値も登録することができ、まさに実現したい仕様でしたが、今回、Advanced Custom Fields (ACF) プラグインのグループフィールドのサブフィールドにもデータを登録する必要がありました。

そこで、次の記事を参考にして、上記の方法と組み合わせることで実現することができました。

【WordPress】PHPプログラムからAdvanced Custom Fieldsの繰り返しフィールドに値を保存する方法 – 上尾市のWEBプログラマーによるブログ

更に、Contact Form 7 Serial Numbers プラグインによる連番も取得してカスタムフィールドに反映してみました。

“Contact Form 7 の送信データから自動で投稿を作成し、ACF のグループフィールドに反映させる” の続きを読む »

WordPress のメールフォームプラグインといえば、Contact Form 7 と MW WP Form が有名ですが、それぞれに特徴があり、案件によって使い分けています。

簡単にフォームを作成できて、追加のプラグイン等による機能拡張が多いのが Contact Form 7、細かい設定ができて、出力される HTML をコントロールしやすいのが MW WP Form かなと感じています。

このたび、既に Contact Form 7 を使っているサイトで、新たなフォームの作成案件があり、その中に星形の5段階評価を付ける項目がありました。星形のインターフェイスは必須ではなかったのですが、要望ですし、フォームに（Contact Form 7 でというわけではなく）星形の5段階評価を作成する方法は、検索するといくつか紹介されていますので、できないことはないだろうと、実装してみました。

“Contact Form 7 で星形の5段階評価を作成” の続きを読む »