Contact Form 7 / Quformでフォームを送信した後、別のページに移動させる

Contact Form 7は WordPress 無料で提供されているコンタクトフォームのプラグインの基本的な機能を使用する場合に役立つことができます。 Contact Form 7や有料プラグイン Quformユーザーがフォームを送信すると、通常、そのページを逸脱していない状態で、フォームが正常に送信ドゥェオトヌンことメッセージが表示されます。

必要に応じて、監査ページ(Thank You page)などの別のページを作成し、ユーザーがフォームを送信すると、そのページに移動するように設定することも可能です。

Contact Form 7のフォーム提出後に移動するページを指定する

※Contact Form 7ではon_sent_okフックサポートを2017年末に中止しました。 Contact Form 7を使用している場合は、次の記事を参照してください。

Contact Form 7のユーザーがフォームを送信した後に移動するページを指定するには、 WordPress 管理者ページ(ダッシュボード)で Contact> Contact Forms>希望コンタクトフォーム> Additional Settingsに移動するようにします。

その後、以下のような画面が表示されます。

WordPress コンタクトフォーム

図のように Additional Settings(追加設定) 画面で空欄に次の行を追加します。

on_sent_ok: "location = 'http://yoursite.com/thank-you';"

パスは、適切な変更をするようにします。 これで、ユーザーがフォームを送信するとThank Youページにリダイレクトされます。

Quformでフォームの送信後に移動するページを指定する(アップデート)

Quformでは、設定でフォームの送信後にメッセージを表示するか、別のページに移動するかを指定するオプションを提供しています。

WordPress ダッシュボードから Forms→Formsに移動し、目的のフォームをクリックして、フォーム編集画面を開きます。

Contact Form 7 / Quformでフォームを送信した後、別のページに移動させる3

上部の設定(歯車形状)アイコンをクリックして、確認「タブを選択します。 Default confirmationの右端にある設定(歯車の形)アイコンをクリックします。

Contact Form 7 / Quformでフォームを送信した後、別のページに移動させる4

その後、上記のように Confirmation Settings 画面が表示されます。

お名前で、名前を適当に指定し でコンタクトフォームの送信後の動作を指定します。

  • Display a message(メッセージを表示)
  • Display a message then redirect to another page(メッセージ表示後、別のページにリダイレクト)
  • Display a message then redirect to a custom URL(メッセージ表示後、ユーザー定義のURLにリダイレクト)
  • Redirect to a page(ページに移動)
  • Redirect to a custom URL(カスタムURLに移動)
  • Reload the page(ページの再読み込み)

フォームの送信後、他のページやURLにリダイレクトするには、 Redirect to a pageRedirect to a custom URLを選択するようにします。

メッセージを表示するように設定した場合、 ビデオメッセージ フィールドに必要なフレーズを入力します。

Quformが新たに更新されUIと機能が大幅に改善されました。 そして必要な要素をロードしないようにして速度も改善されました。 特に段階的にコンタクトフォームを入力することができる複数のページ機能が追加された点が印象的ですね。

参考までに WordPress サイトへのお問い合わせフォームをつけたい場合Contact Form 7(無料)が多く使われており、有料のプラグインでは、 Quform, FormCraft, eForm などがあります。

メモ:


4のコメント

  1. こんにちはもしかしたら、Quformでステップバイステップのお問い合わせフォームを作成するときに
    SUBMITを2の作成オプションでクリックした時に、
    目的の場所(ページ、手順)に移動させることができますか?

    1. こんにちは?

      Quformでマルチレベルページを作成すると、次の図のように「戻る」、「次へ」ボタンが生成されます。

      https://www.screencast.com/t/oRIDqkC5MjM

      必要に応じて動作するようにするには、submitボタンをhtml形式で直接コーディングして入れて、で、本来submitボタン(Back、Nextボタン)は、非表示にされていないかと推定されるが、実際の期待どおりに動作するかどうかは保証できません。 Quform開発者にこの問題を連絡して見れば、正確な回答を受けることができます。

  2. もしコンタクトフォームに相談ボタンをクリックした時に切り替えスクリプトを挿入するには、どうすればいいですか? コンタクトフォームスクリプトのインストールに関連して情報が失わ問い合わせください。

    1. こんにちは?

      切り替えスクリプトというのが相談ボタンをクリックして提出したときに移動するurlを指定することを意味しますか?

      この問題を上から説明します。 ただしContact Form 7の場合、もはや、上記のコードが動作せず、代わりに次のスクリプトを使用する必要があります。

      <script>
      document.addEventListener( 'wpcf7mailsent', function( event ) {
      location = 'http://example.com/';
      }, false );
      </script>

      Contact Form 7はシンプルに利用するには良い機能を追加するには、容易ではないため、Quformような有料プラグインを使用すると、作業が容易になることができます。

コメントを残す

*メールアドレスは公開されません。