受付9:00~18:00 ※土日祝除く
2022.11.03Web制作
最終更新日:2022年10月14日
【WordPress Tips】お問い合わせ後にthanksページへ飛ばす
WordPressでお問い合わせフォームを作る時は、やっぱり日本語ドキュメントがしっかり用意されている「Contact Form7」が使いやすいのですが、昔のお問い合わせフォームのように、問い合わせ後に内容確認のページに飛んだり、送信後にthanksページに飛んだりすることができない(する必要がない?)仕様になっています。
それはそれで理にかなった仕様かとは思いつつも、お仕事上必要な場合もありますよね。
そこで今回は、内容確認ページやthanksページに飛べるお問い合わせフォームプラグイン「MW WP Form」をご紹介します。
お問い合わせフォーム制作中
![お問い合わせフォーム制作中 お問い合わせフォーム制作中](http://a-m-t.co.jp/wps/wp-content/uploads/2022/10/thanks002.jpg)
ならすぐに分かると思います。
ちなみに↑ここでは、フォームの要素をcontainerのDIVで囲んで、classとして「form-control」を定義しています。Bootstrapで構築している時は、こうするとお問い合わせフォームの各入力フォームが、レスポンシブに幅が変わってくれるようです。
完了画面メッセージを用意します
![完了画面メッセージを用意します 完了画面メッセージを用意します](http://a-m-t.co.jp/wps/wp-content/uploads/2022/10/thanks003.jpg)
テンプレートを変えたい時は、すぐ下にある「URL設定」でジャンプ先を指定してください。
必須項目を設定します
![必須項目を設定します 必須項目を設定します](http://a-m-t.co.jp/wps/wp-content/uploads/2022/10/thanks004.jpg)
電話番号やメールアドレスなど、独自の書式がある場合はそれもチェック。
送信メール設定
![送信メール設定 送信メール設定](http://a-m-t.co.jp/wps/wp-content/uploads/2022/10/thanks005.jpg)
本文にはフォームで入力した項目を{電話番号} {メールアドレス}と
いうような感じで入れておきます。
お問い合わせフォームの見た目見本
![お問い合わせフォームの見た目見本 お問い合わせフォームの見た目見本](http://a-m-t.co.jp/wps/wp-content/uploads/2022/10/thanks007.jpg)
↑こんな感じでちゃんと幅に収まっています。
ほんとに送っちゃっていいですか画面
![ほんとに送っちゃっていいですか画面 ほんとに送っちゃっていいですか画面](http://a-m-t.co.jp/wps/wp-content/uploads/2022/10/thanks008.jpg)
「修正する」をクリックすると問い合わせフォームに戻ります。
ありあとあんした画面
![ありあとあんした画面 ありあとあんした画面](http://a-m-t.co.jp/wps/wp-content/uploads/2022/10/thanks009.jpg)
自動返信と管理者宛が届いているか確認しましょう。
Contact Form7で別画面へ飛ばすには
![Contact Form7で別画面へ飛ばすには Contact Form7で別画面へ飛ばすには](http://a-m-t.co.jp/wps/wp-content/uploads/2022/10/thanks010.jpg)
スクリプトを書くことでthanksページに飛ばすこともできるようですが、
ロリポップ!では403 Errorが出てしまいました。
なんとかなりそうではありますが、いろいろ調整がめんどくさいかもしれない….
Contact Form7 も、さまざまな追加プラグインとの組み合わせで非常に便利なお問い合わせフォームを作ることができますので、ここはうまく使い分けたいところです。
お問い合わせCONTACT
株式会社エー・エム・ティーは
印刷物からホームページ制作・更新運用管理までトータルサポート。
企業様の課題解決や企業価値向上のお手伝いをいたします。