HoBoFoTo

Hobo everyday foto.

Jetpack のコンタクトフォームをカスタマイズする方法 (送信後に別のページを表示編)

前回は

でgoogle reCaptchaを設置する方法を書きました。
今回はカスタマイズ第二弾、送信後に別ページを表示する方法を紹介しようと思います。

Jetpackコンタクトフォーム送信後の移動

普通に設置をして送信を押すと


のような送信後の画面が出てきます。
ですが、別の文言の入ったページを表示したい。と思われる方もいるかと思います。そんな場合の方法を紹介します。

コンタクトフォームIDの取得

まず、

の時に作成したコンタクトフォームのIDを調べないといけません。
ブラウザで、設置したコンタクトフォームのあるページを開きます。
ブラウザによって差はあると思いますが、コンタクトフォームの上で右クリックをすると、「要素の調査」や「要素の検査」といった項目があると思います。それをクリックします。
するとブラウザの下や、別画面に

<form action="「自分のサーバーのアドレス」/inquiry-form/#contact-form-「コンタクトフォームID(数字)」" method="post" class="contact-form commentsblock">

というhtmlファイルがあると思います。そこの「コンタクトフォームID(数字)」をどこかに書き込んでおいてください。

表示したい文章を書いた固定ページを作る

さて次は、送信を押した後に移動するページを作成したいと思います。「固定ページ」の「新規追加」で新しいページを作り、それを保存します。このとき設定した「パーマリンク」をこれまた、どこかに書き込んでください。これで、別の文言の入ったページに移動させる準備が出来ました。

functions.phpに設定

仕上げとしてすることは、テーマフォルダの中にある「functions.php」に設定を書き込む形になります。これがなかなかやっかいで出来ないという方も折られると思いますが、頑張っていきましょう。
まず、子テーマを使っていない方は、テーマがアップデートしてしまうとせっかく書いた内容が消えてしまいますので、是非、子テーマを作ってからしていただければと思います。
子テーマの作り方がわからない方は、

で検索するとたくさん出てきますので、それを参考にしてください。

さて、

などで、サーバーに接続してもらい、/wp-content/themes/「使用テーマ名」/のところに「functions.php」ファイルがあると思います。これを一旦自分の端末内にダウンロードしてください。

それを

などで開いて一番最後の行に、

function jetpack_custom_form_redirect( $redirect, $id, $post_id ) {
    $redirects = array(
        'コンダクトフォームID' => home_url( 'リダイレクトしたいパーマリンク(例 inquiry-form/thanks/のように最初の/は書かない。)' ),
    );
 
    // Let's loop though each custom redirect.
    foreach ( $redirects as $origin => $destination ) {
        if ( $id == $origin ) {
            return $destination;
        }
    }
 
    // Default Redirect for all the other forms.
    return $redirect;
}
add_filter( 'grunion_contact_form_redirect_url', 'jetpack_custom_form_redirect', 10, 3 );

と書いて保存しそれをアップロドすれば完成です。
一度自分でコンタクトフォームに入力をしてちゃんとリダイレクトするかを確認してください。
もしどうしてもわからないという方は、下のコメント欄に投稿していただければ回答させていただきます。

それでは今回はこの辺で。
 

よかったらクリックしてください。
にほんブログ村 IT技術ブログ WordPressへ

共有:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です