Jetpack のコンタクトフォームをカスタマイズする方法 (送信後に別のページを表示編)
前回は
Jetpack のコンタクトフォームをカスタマイズする方法(google reCaptcha編)
前回のにてJetpackのコンタクトフォーム挿入をする方法をしました。 それでは今回はカスタマイズ第一弾、google reCaptchaの設置をする方法を紹介しようと思います。
今回はカスタマイズ第二弾、送信後に別ページを表示する方法を紹介しようと思います。
Jetpackコンタクトフォーム送信後の移動
普通に設置をして送信を押すと
のような送信後の画面が出てきます。
ですが、別の文言の入ったページを表示したい。と思われる方もいるかと思います。そんな場合の方法を紹介します。
コンタクトフォームIDの取得
まず、
Jetpack のコンタクトフォームをカスタマイズする方法(google reCaptcha編)
前回のにてJetpackのコンタクトフォーム挿入をする方法をしました。 それでは今回はカスタマイズ第一弾、google reCaptchaの設置をする方法を紹介しようと思います。
ブラウザで、設置したコンタクトフォームのあるページを開きます。
ブラウザによって差はあると思いますが、コンタクトフォームの上で右クリックをすると、「要素の調査」や「要素の検査」といった項目があると思います。それをクリックします。
するとブラウザの下や、別画面に
<form action="「自分のサーバーのアドレス」/inquiry-form/#contact-form-「コンタクトフォームID(数字)」" method="post" class="contact-form commentsblock">
というhtmlファイルがあると思います。そこの「コンタクトフォームID(数字)」をどこかに書き込んでおいてください。
表示したい文章を書いた固定ページを作る
さて次は、送信を押した後に移動するページを作成したいと思います。「固定ページ」の「新規追加」で新しいページを作り、それを保存します。このとき設定した「パーマリンク」をこれまた、どこかに書き込んでください。これで、別の文言の入ったページに移動させる準備が出来ました。
functions.phpに設定
仕上げとしてすることは、テーマフォルダの中にある「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 );
と書いて保存しそれをアップロドすれば完成です。
一度自分でコンタクトフォームに入力をしてちゃんとリダイレクトするかを確認してください。
もしどうしてもわからないという方は、下のコメント欄に投稿していただければ回答させていただきます。
それでは今回はこの辺で。