hirokonaBlog

ググる→忘れそう→即時メモ 京都のWebデザイナーの備忘録

Contact Form 7カスタム関連

久しぶりにやったら

やることいろいろあったのでメッも

条件分岐でフォームパーツ出し分け

WordPress Contact Form 7 Conditional Fields/ Web Design Leaves


https://www.webdesignleaves.com/pr/wp/wp_cf7_cf.html

問合せフォームに条件分岐が設定できるプラグイン「Contact Form 7 Conditional Fields」の基本的な使い方 | ワードプレステーマTCD


https://tcd-theme.com/2020/07/contact-form-7-conditional-fields.html

PHP – 【ContactForm7】radioの選択で非表示にした項目の必須を無効にしたい|teratail


https://teratail.com/questions/65809

確認画面

更新されていないのでとても微妙な立ち位置やしオススメまったくできないのだが、Contact Form 7 add confirmを使った。

確認画面・サンクス画面を別ページに分離したくて、同時にConditional Fieldsを使わないフォームなら別のプラグインが便利。
下記URLで全体像を超絶素敵にまとめてくださっていてわかりやすい。

令和も使えるContact Form 7の設定とカスタマイズで最高のフォームにする方法 | 新宿のホームページ制作会社 ITTI(イッティ)


https://www.itti.jp/web-design/heres-how-to-set-up-and-customize-contact-form-7-to-work-in-the-2020s/#chapter-6

ただ。

Conditional Fieldsで条件分岐入れるならMulti-Step Formsつこたら、戻ったとき出し分けがうまくいかへん・・・。

Conditional Fieldsを併用するなら条件分岐が引くほど言うことを聞かない(出し分けJSバグる)ので真っ先に手を引いて1ページで完結させるように仕様変更してもらおう。


※例えば、この条件ならこのstepは飛ばす、みたいな使い方は公式にもあるしできる(有料だったかもだけど)けど、stepをまたいで表示グループの出し分け、がバグる(よくわからないかもしれないが使ったらそうとしか言えない。)

そしてこれは蛇足だけど、Multi-Step Formsでは内部的にCookieが使われていて、フォーム送信したらリセットされる仕組みになっている。
GDPR対応とかで利用者にCookieつこてるよ表示がマストなサイトな場合は表示文言変わったりするから注意が必要かも。(ってことがメモしたくて書き出したこのまとめ)

Contact Form 7 add confirmのスクロールを調整 | ザリガニデザインオフィス
https://zarigani-design-office.com/blog/cf7_add-confirm_scroll/

position: fixedのヘッダーでContact Form 7 add Confirmのスクロール位置を調整する小ネタ | 日常の生活と仕事を雑記するコーダーのブログ | CattleMute
http://www.cattlemute.com/2019/01/07/1338/

ContactForm7 add confirmでスクロール位置を調整&戻るボタンやページ離脱を確認して防ぐ方法 | さやっと四苦八苦(Sick hack)

https://saya-to.com/wordpress-site/contactform7-customize/contactform7-add-confirm-customize-scroll-browser-back-back/

WordPress:Contact Form 7 add confirmでスクロール(Contact Form 7 v5.0~対応版) – Qiita

https://qiita.com/bee_d2b/items/3f0af3421a6cd5a8f57d

その他文献

WordPressのContact Form 7をフックを利用してカスタマイズ | 記事 | ShitTakaBull

https://tetch1987.com/shittakabull/web/customize-contact-form-7-using-hook/

DOM イベント | Contact Form 7 [日本語]

https://contactform7.com/ja/dom-events/

《Wordpress》Contact Form 7 add confirm使用時のスタイルを整える – Qiita
https://qiita.com/uto-usui/items/826b19818fc41f93f6e9

Contact Form 7 の独自フック一覧 – Qiita
https://qiita.com/matsumoto_sp/items/8613fc4a759f8a62da65

サンクスページ

[WP]Contact Form 7のメールフォームごとに送信完了ページを分ける方法 | WEBデザインのTIPSまとめサイト「ウェブアンテナ」

https://www.webantena.net/wordpress/functions-php-wpcf7mailsent-location-replace/


Contact Form 7でメール送信後に任意のページにリダイレクトさせる方法 | TechMemo

https://techmemo.biz/wordpress/cf7-location-replace/

不要ページでのcss,js読み込み停止

Contact Form 7のCSSをお問い合わせページにのみ有効にする方法

https://kt-life.net/contact-form-7-css/


Can I load JS and CSS only when necessary? – Conditional Fields for CF7
https://conditional-fields-cf7.bdwm.be/docs/faq/can-i-load-js-and-css-only-when-necessary/


投稿日

カテゴリー:

投稿者:

タグ:

コメント

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください