More than 5 years have passed since last update.

Wordpressでの確認画面付きフォーム利用

Last updated at 2015-05-10Posted at 2015-05-10

WPでの確認画面付きフォーム利用について

　こちらのContact Form 7でフォーム送信を利用する場合、デフォルト設定で確認画面を表示することが出来ません。Contact Form 7ではプラグインを利用すれば確認画面実装は可能ですが、今回はデフォルトで確認画面付きのプラグインを使うことにします。

　こちらのMW_WP-FORMではデフォルト（プラグイン等不要）で、フォームに確認画面を実装することが出来ます。インターネットでも情報がそこそこ有り、使い勝手は悪く無いかと思われます。（情報量で言えばさすがにContact Form 7に劣りますが・・。）

　設定自体はこれでおしまいです。そんなにひねったこともありませんが、検索して見つからなかった場合、HPより直接ダウンロードしましょう。

http://plugins.2inc.org/mw-wp-form/

管理画面よりMW WP FORMの新規追加をクリック
フォームを作りこむ！
　フォームのレイアウトは特に制限はありません、ここにHTML形式でガツガツ書きましょう！注意点としては、表示方法を「テキスト」にして入力を行います。デフォルトが「ビジュアル」になっているので、これをテキストへ変更しておきます。（もしビジュアルで入力した場合、HTMLコードのまま出力されてしまいます・・。私はこれではまりました笑）スタイルはstyle.cssに別途記述しましょう。

　確認画面や完了画面の移行ボタン（submit）は、入力画面内にある「フォームタグ」より挿入します。また、入力画面時にだけ表示されるボタン、確認画面時にみ表示されるボタンと種類があるので選んで挿入しましょう！
URLへ確認画面や完了画面のパーマリンクを入れる

　MW WP FORM内、右上あたりにあるに「表示オプション」よりURL設定にチェックを入れます。その後、画面下にURL設定が表示されるので、ここに確認画面完了画面等のパーマリンクを入力しておきます。このリンク先が文字通り確認、完了画面になります。

フォーム識別子をコピーしてテンプレートに貼り付ける
　MW WP FORM内の「フォーム識別子」をコピーして、それをテンプレートに貼り付けて作成したフォームを呼び出します。
echo do_shortcode( '[mwform_formkey key="xxxx"]' );
これをテンプレートへ貼り付けます。
⚠ここで注意点⚠
　入力画面、確認画面に同じフォーム識別子をいれます！
　確認画面は、入力画面のinput要素の位置にテキストが挿入された状態で表示されます。（もちろん入力不可。）また、確認画面で非表示にしたいinput部分が合った場合、私は確認画面のテンプレートにjavascriptでそのDOMを掴んで非表示にしました。