ミナミ(@MinamiNakasato)です。
WordPressサイトで申し込みフォームを作成中に遭遇したエラーを共有します。
結論を言うとうっかりミスが原因でした！
##対象者
「contact form 7」と「Contact Form 7 Multi-Step Forms」の基本的な使い方が分かる人向けです。
##使用サーバー
①開発環境
②本番環境
①で開発し、挙動に問題なければ②にデプロイします。
(ほんとはステージング環境もあるけど説明に必要ないので省略)
##不具合が発生するまでの経緯
###【１：開発環境】
①開発環境のWordPress管理画面を開く。
②「contact form 7」 および 「contact form 7 multi-step Forms」を用いて問い合わせフォームを２つ作る。
####(1)申し込みフォームの末尾に以下を記述。
︙
略
︙
[submit "次へ"]
[multistep multistep-361 first_step "https://開発環境のトップドメイン/contact-confirm/"]
フォームに入力後「次へ」ボタンを押すと、入力内容の確認ページ(https://開発環境のトップドメイン/contact-confirm/)に飛べます。
※URLの「/contact-confirm/」の部分は人によって違います。
####(2)申し込み確認ページの末尾に以下を記述。
[previous "戻る"]
入力内容を確認し、「あ、間違いがある」と気付いたら「戻る」ボタンを押してフォームのページに戻れます。
③申し込みフォームに入力し、「次へ」ボタンを押す
④確認ページで「戻る」ボタンを押す
⑤フォーム画面に戻れることを確認
###【２：本番環境】
①「開発環境でうまく行ったから本番環境でも同じ事をやろうな」と言う
②開発環境の問い合わせフォームの内容をコピペし、本番環境にあらかじめ用意しておいた「問い合わせフォーム」と「確認ページ」に貼る。
問い合わせフォームには以下をコピペ。
[submit "次へ"]
[multistep multistep-361 first_step "http://開発環境のトップドメイン/contact-confirm/"]
確認ページには以下をコピペ。
[previous "戻る"]
③本番環境でフォームと確認ページの挙動を確認する。すると↓
##エラー発生
④本番環境の確認ページに「戻る」ボタンが表示されない。
検証ツールで「戻る」ボタンを確認すると、、
開発環境の場合↓
<input type="button" value="戻る" class="〜〜">
本番環境の場合↓
<input type="button" value="戻る" class="〜〜" display:none;>
なんで本番環境では「戻る」ボタンが非表示(display: none;)なんや。
ググって、この記事で原因が分かった。同じエラー出てる人いた。
申し込みフォームの
[multistep multistep-361 first_step "URL"]
の、URLが間違っとる。
とのこと。
ここが間違ってると「戻る」ボタンが非表示になるという、プラグインの仕様らしい。
確認しましたら、圧倒的な凡ミスでした！
本番環境なのに、開発環境用のURLまで丸コピして
[multistep multistep-361 first_step "https://開発環境のトップドメイン/contact-confirm/"]
を貼り付けたものだから、そりゃエラーが出るよ。
正しくは
[multistep multistep-361 first_step "https://本番環境のトップドメイン/contact-confirm/"]
でした。
ズボラをしちゃいけないね。確認が大事。
一件落着！