便利な機能

【Contact Form 7】プラグインで簡単確認画面作成【備忘録】

  • このエントリーをはてなブックマークに追加

こんにちは、ワタナベです。

今回は「Contact Form 7」でプラグイン「Contact Form 7 Multi-Step Forms」を使った、確認ページ作成(&サンクスページ遷移)の備忘録。

欲しい情報だけ簡潔に書いていきます(´・ω・`)!

さっそくスタート!(※入力フォーム作成済み前提)

「Contact Form 7 Multi-Step Forms」のインストール&有効化

WP管理画面から新規追加で「Contact Form 7 Multi-Step Forms」を検索、そしてインストール&有効化します。

有効化するとポップが出るので「許可して続ける」をクリックします。

入力画面に「確認画面へ進む」ボタンを設置

[submit “入力内容の確認”]
[multistep multistep-123 first_step “/contact-confirm“]

↑のように設置します。(ボタンテキストは任意)「 /contact-confirm」部分は確認画面のURLを入力ください。

確認画面の作成

確認画面のHTMLを完成させたら(入力画面のコピーでもOK)、入力された項目を表示させたい部分へ、

[multiform “任意の名前”]

を挿入。

例えば、[text your-name placeholder “山田太郎”]の場合、[multiform “your-name“]となります。

↑をご自身のフォームに合わせて量産していきましょう。

戻るボタン

[previous “入力画面へ戻る”]

↑を設置したい場所へ挿入。(ボタンテキストは任意)

送信ボタン

[submit “入力内容を送信”]
[multistep multistep-123 last_step send_email “/contact-thanks“]

↑のように設置します。(ボタンテキストは任意)「/contact-thanks」部分はサンクスページのURLを入力してください。

※「send_email」があることによって、入力画面のフォームで設定した自動送信メールは無効になり、確認画面のフォームで設定した内容が送信されるようになります。

 

これで完了です!👏 簡単!

尚、こちらのフォームタグ類([multistep ~…])は管理画面の生成ボタンから生成することもできるのでそちらもご利用ください。

▼より詳しく知りたい方はこちら。THANKS!

 

それではまた次回。

ご閲覧ありがとうございました♪

  • このエントリーをはてなブックマークに追加

建築に特化したホームページで集客&受注へ

実績の99%が建築業界だからわかる、"受注の取れるWebサイト"づくりを行います。
1000サイト以上の制作実績と、豊富なサービス・運営サポートが御社をバックアップ。お気軽にお問い合わせください!

D-Gripシステム Webサイトへ