自由自在!WordPress上級

Contact Form7にカスタムフィールドの値を渡す

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Contact Form7に、カスタムフィールドの値を渡す方法を解説します。
講師:
06:30

字幕

このレッスンでは Contact Form 7 に カスタムフィールドの値を 渡していく方法について学習します イベントの申込フォーム画面を開いています 申込フォームの画面に そのイベントの イベント名と日付を表示していますが このイベントに実際に申込んだ時に そのメールにも イベント名と日付を表示したいと思います Contact Form 7 に どの様にイベント名と日付を 渡したら良いでしょうか フォームで情報を渡していく一つの方法に というタグがあります 実際に情報を表示しないで フォームにある情報を 渡していくという方法ですね この Hidden を上手く使って Contact Form 7 の メール送信プログラムに イベント名と日付を 渡していきたいと思います それでは管理画面に移動します Contact Form 7 はデフォルトでは 実は Hidden パラメータを 使用する事ができません そこでコンタクトフォームに Hidden フィールドを追加してくれる Contact Form 7 Hidden Fields の モジュールがありますので これをインストールしておきます Contact Form 7 Modules で 検索をすれば出てきますので インストールして有効化して下さい このモジュールを追加すると Contact Form 7 で― Hidden field というのを 追加出来る様になります 名前と ID をつける事ができます 実際に今この様に入れています event_name と event_date という 隠しのフォームを表示しています 送信するメールにもそのまま event_name event_date とすれば― ここに入っている値が 送信される様になります それでは実際に 画面を確認してみます もう一度申込フォームを表示します ページのソースを 確認してみます フォームタグの中に Hidden 属性が見つかりました input type="hidden" event_name そして event_date です この二つの入力フォームに イベント名と イベントの日時を value に渡してあげれば良さそうです Contact Form 7 では 変数を扱う事ができませんので Contact Form 7 側から ここの二つのパラメータを 与える事ができません そこで JavaScript を使って 値を入れていきたいと思います エディターに移動します イベント名が存在する場合に イベントフォームを表示する という記述の中に スクリプトを書いていきます javascript ですね ここでは― JQqueryを使って 記述をしていきます JQquery を使えば 簡単に html のあるオプジェクトを 取得する事ができます それぞれ input type hidden に ID を付けていますので ID で取得をします そして value という値に対して イベント名を入れれば良いわけですが イベント名は event の配列に保存していましたので php から呼び込む事ができます echo を使って この様に記述をします そして JavaScript を閉じます この様に JavaScript と php を 上手く連携させる事によって かなり自由に色んな事が 実現できる様になります こうですね そして― JavaScript を閉じます はいこうですね 書けたら保存をして 画面で表示を確認してみましょう リロードをします 出力されているコードを確認すると ちゃんと JavaScript を使って Value にイベント名と開催日が 入力されました これで名前とメールアドレスを入れて 送信ボタンを押せば その申込した人の名前 メールアドレス そして申込んだイベントの情報が 記載されたメールが ちゃんと届く様になります このレッスンでは Contact Form 7 に カスタムフィールドの値を渡す方法について 学習しました

自由自在!WordPress上級

このコースではWordPressを利用したさまざまな種類のサイトを構築しながら、より実践的なテクニックを解説します。コースの前半はカスタムフィールド機能などについて説明しながら、後半では自由度の高いサイト構築が可能になるマルチサイトについても学習します。

3時間17分 (26 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
カテゴリー
ウェブデザイン
CMS
価格: 2,990
発売日:2014年03月05日

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

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

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