2014

27

Jan

WordPress

contact form7に確認画面ありのフォームを作る!

wordpressで
contact form7を使って、確認画面ありのカスタマイズしました!
ライブラリを使用してしたら、簡単かなっと思いましたが、いろいろ改造が大変でした。
http://aulta.jp/library/wordpress/contactForm7Confirm.html
今回、スマホも同じフォームでということで、
“<dd><dl>”タグでフォームのテーブルを組んでやっていたのですが、
これだと確認画面はうまく動きません。
また、input typeがtel、number、email、urlとかだと、動いていませんでした。
ですので、結構、改造が必要でした。
ざっと、
・20行目のvalidatesに追加
・55行目のif (child.hasClass(‘wpcf7-text’)){
に各input type用を追加
・192行目のwpcf7-textのIF文をddで出るように改造
足りない各input type用を追加
・編集画面のみ、確認画面のみ表示するクラスを追加してshow()、hide()
[はまった点]
IE9の場合、必須のチェックがでない場合がある
→原因:入力例のplaceholderがIE9では使用できなかったため

タグ ,

同じ「WordPress」カテゴリの記事

ABOUT

福岡在住、フリーランスのプログラマのメモ日記です。組込SEからWEB系に転向。子育てしながら、在宅SOHOにてお仕事しています。
ウェブサイトを作っていて困ったことや、よく調べることを書いていきます。

[対応言語]
HTML、CSS、PHP、Javascript、jQuery
Ruby On Rails、JAVA、C、C++、VB

[運営サイト]
キャラデコ弁.com
CSSデザインジェネレーター