WordPressプラグインでコンタクトフォームを実装する

送信完了画面として別ページに遷移させる方法

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「Contact Form 7」プラグインで作成したフォームの送信完了画面として、送信後別ページに遷移させる方法について、解説致します。
講師:
03:36

字幕

このレッスンでは Contact Form 7 プラグインで作成した フォームの送信完了画面として 送信後別ページに遷移させる方法について 解説していきます Contact Form 7 では基本的に 送信完了画面というものが存在していません フォームと同じページで 送信が完了される仕組みとなっています それでは実際に確認していきましょう 今 こちらの画面には Contact Form 7 で 作成されたフォームが表示されていて その中に必要な項目を 入力している状態となっています それではまずその送信完了画面について 何も設定していない状態で こちらの「送信」ボタンを押してみます するとこのように「あなたのメッセージは 送信されました」ということで 同じページの中で完了しているのが わかるかと思います 今回はこの「送信」ボタンを押した時に 別のページに遷移させる方法について 見ていきたいと思います それでは WordPress の 管理画面に移ります はい これが WordPress の管理画面で 今は「お問い合わせ」という コンタクトフォームの 編集画面を表示しています そして今回注目していただきたいのが こちらの「その他の設定」という タブメニューになります それではこちらをクリックしてみましょう するとこのような画面が表示されてきます この「その他の設定」というところに コードを書くことによって 送信完了時に 別ページに遷移させることが できるようになっています 今 こちらの部分に こういった文言が入っていますが これはこの Contact Form 7 をデモ環境で 利用するためのものとなっていますので ウェブサーバ上にアップロードしてこの Contact Form 7 を 利用する際には こちらは無視していただいて大丈夫です それでは こちらの この部分に その送信後のページ遷移の処理を 付け加えたいと思います はい このようにこの一文を追加しました これがフォームからの送信後 別のページに遷移させるための プログラムとなります こちらの location の後に続く シングルクォテーションの中に URL が書いていますね こちらの URL に遷移させるといった 意味になります そしてもちろん 遷移させるためのページが 必要になりますので 今回はこちらの固定ページの中で そのページを作成しています そしてその URL がこちらの部分に なるということですね それでは この状態で「保存」ボタンを押しましょう これで設定が保存されました それでは実際にウェブサイト上で 動作を確認してみたいと思います はい ウェブサイトの方に戻ってきました そしてこちらの方にすでに内容を 入力した状態となっています それでは先ほどの送信後に別のページに 遷移させるといった処理を加えた状態で こちらの「送信」ボタンを クリックしてみましょう するとこのように送信完了というページに 遷移してきましたね URL もこのように先ほど指定してきた complete という URL に 遷移してきているのがわかるかと思います これが Contact Form 7 で 送信完了画面を作成する手順となります 以上でレッスンは終了です 今回は Contact Form 7 の プラグインで作成したフォームの 送信完了画面として 送信後別のページに 遷移させる方法について解説致しました

WordPressプラグインでコンタクトフォームを実装する

このコースではWordPressの機能を人気のプラグインJetpackとContact Form 7、およびMW WP Formでさらに拡張し、簡単にサイト上に問い合わせフォームを設置する方法を解説します。それぞれの特徴や入手先、インストール方法、さらには管理者への通知メールやサンキューメールの設定方法などについても詳しく説明します。

1時間54分 (29 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年01月26日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。