とある学生web開発者のブログ

知ったこと、感じたことを書きます

contact form 7 add comfirmのボタンがうまく表示されない時

実はwordpress案件もたまにやっています。

今回はお問い合わせフォームを導入する際に詰まったことと、そのfix方法です。

確認画面が欲しい

contact form 7はとても便利なプラグインですが、デフォルトでは入力内容の確認画面がありません。
ユーザーの作業量が増えるので確かに必須ではありませんが、今回は確認画面があった方が親切だという判断になりました。

contact form 7 add confirm が便利

さっと調べた感じだと「contact form 7 add confirm」 が良さげでした。
wordpressプラグインはダウンロード数が見れるので良いですね!

使い方は簡単で、インストールして有効化をしたら、backとconfirmのタグを入れるだけ!

tabibitojin.com

↑こちらを参考にしました。

しかしconfirmボタンが表示されず…

まずは、「contact form 7 add confirm ボタン 表示されない」とかで検索。

www.cattlemute.com

ふむふむ、js周りの問題かな。
今回の案件では、jqueryの3系を使う必要があったので、デフォルトで読み込まれるように wp_deregister_script をheadタグ内で実行していました。
おそらくこれのせいで、「contact form 7 add confirm」のjsがうまく動いていないのではと推測。

結論

  • wp_deregister_script を削除
  • jqueryの読み込みを wp_head の上へ
<script src="<?php bloginfo('template_url');?>/js/other/jquery-3.1.1.min.js"></script> <!-- 自前のjquery -->
<?php wp_head(); ?>

これで無事、back confirm submitの表示の切り替えが動きました!!