ミナミ(@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/"]

でした。

ズボラをしちゃいけないね。確認が大事。

一件落着！