Web制作

【WordPress Tips】お問い合わせ後にthanksページへ飛ばす

2022.11.03

WordPressでお問い合わせフォームを作る時は、やっぱり日本語ドキュメントがしっかり用意されている「Contact Form7」が使いやすいのですが、昔のお問い合わせフォームのように、問い合わせ後に内容確認のページに飛んだり、送信後にthanksページに飛んだりすることができない(する必要がない?)仕様になっています。

それはそれで理にかなった仕様かとは思いつつも、お仕事上必要な場合もありますよね。
そこで今回は、内容確認ページやthanksページに飛べるお問い合わせフォームプラグイン「MW WP Form」をご紹介します。

 

MW WP Form公式サイト

MW WP Form公式サイト
MW WP Formの公式サイト&マニュアルはこちら。
機能も豊富なので、じっくり読みましょう。

 

お問い合わせフォーム制作中

お問い合わせフォーム制作中
フォームの書式は、Contact Form7に結構似ていますので、Contact Formを使っていた人
ならすぐに分かると思います。

 

ちなみに↑ここでは、フォームの要素をcontainerのDIVで囲んで、classとして「form-control」を定義しています。Bootstrapで構築している時は、こうするとお問い合わせフォームの各入力フォームが、レスポンシブに幅が変わってくれるようです。

 

完了画面メッセージを用意します

完了画面メッセージを用意します
完了画面に表示する文章を用意します。
テンプレートを変えたい時は、すぐ下にある「URL設定」でジャンプ先を指定してください。

 

必須項目を設定します

必須項目を設定します
入力必須項目(バリデーションルール)を設定します。
電話番号やメールアドレスなど、独自の書式がある場合はそれもチェック。

 

送信メール設定

送信メール設定
自動返信・管理者宛に送信するメールを設定します。
本文にはフォームで入力した項目を{電話番号} {メールアドレス}と
いうような感じで入れておきます。

 

お問い合わせフォームの見た目見本

お問い合わせフォームの見た目見本
container DIVで囲んで 「form-control」class を入れたので、
↑こんな感じでちゃんと幅に収まっています。

 

ほんとに送っちゃっていいですか画面

ほんとに送っちゃっていいですか画面
ほんとに送っちゃっていいですか画面がこちら。
「修正する」をクリックすると問い合わせフォームに戻ります。

 

ありあとあんした画面

ありあとあんした画面
ありあとあんした画面がこちら。
自動返信と管理者宛が届いているか確認しましょう。

 

Contact Form7で別画面へ飛ばすには

Contact Form7で別画面へ飛ばすには
お使いのサーバーによっては、Contact Form7 のフォーム画面で
スクリプトを書くことでthanksページに飛ばすこともできるようですが、
ロリポップ!では403 Errorが出てしまいました。
なんとかなりそうではありますが、いろいろ調整がめんどくさいかもしれない….

 

Contact Form7 も、さまざまな追加プラグインとの組み合わせで非常に便利なお問い合わせフォームを作ることができますので、ここはうまく使い分けたいところです。