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

コンタクトフォームに高度な入力項目を作成する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「Contact Form 7」プラグインを使って、フォーム内に複数選択肢を持つ選択項目や承諾確認チェックボックスの追加方法、そしてファイルアップロード機能を付ける方法について、解説していきます。
講師:
04:50

字幕

このレッスンでは Contact Form 7 の プラグインを使って フォーム内に複数選択肢を持つ選択項目や 承諾確認のチェックボックスの追加方法 そしてファイルのアップロード機能を つける方法について解説していきます それでは早速画面を見ていきましょう まずは複数の選択肢を持つ選択項目から 作成していってみたいと思います 複数選択肢を持つことができるのが 例えば ドロップダウンメニューや チェックボックス ラジオボタンなどがそれに当たります それでは今回は ドロップダウンメニューを作成してみましょう まずはこちらのエディッターの部分に 新たに HTML タグを追加してあげます 例えば こちらの「住所」の上に 同様に p タグを打って そしてここに 「都道府県」と入力します そして br タグを打って この後に p タグの閉じるタグを置いてあげます そしてこの p タグの閉じるタグの前に カーソルを移動してあげて そして「ドロップダウンメニュー」を クリックします すると このような画面が表示されてくるので 必要な情報を入力していきます 注目していただきたい部分は こちらの「オプション」の部分です こちらの部分に複数の選択肢を 入力していきます それでは今回「名前」は pref にしておきます そして「オプション」のところに 順番に 北海道 青森 秋田 岩手 としておきましょう そして次にこちらの項目です 「複数の選択を可能にする」に チェックを入れれば その名の通り Shift キーを押しながら 複数の値を選択することが できるようになります また「空の項目を先頭に挿入する」というのを チェックを入れると 通常でしたら こちらの北海道が 最初に選択された状態になりますが これにチェックを入れておくことで 何も選択されていない状態を作ることが できるようになっています それでは今回はこちらに チェックを入れておきます そして「ID 属性」の方に pref と クラスの方に selectbox と入れておきましょう そして この状態で 「タグを挿入」のボタンをクリックします するとこのように Contact Form 7 の 専用タグが挿入されました これと同じ要領でこの「チェックボックス」や 「ラジオボタン」なども 複数の選択肢を設定することが できるようになっています それでは続きまして こちらの 「承諾確認」について見ていきたいと思います こちらをクリックしてみましょう すると このような画面が表示されてきました この「承諾確認」という項目ですが これを利用することによって よくウェブサイト上で見かける 「利用契約に同意する」といった チェックボックスを 作成することができるようになっています 今回は実際にこれを作成することはしませんが もし利用契約などに 同意させるようなフォームを作る場合には これを利用すると良いでしょう それでは ばつ印を押して閉じます 次にこちらの「ファイル」というものについて 見ていきたいと思います こちらをクリックします するとこのような画面が表示されてきます こちらはファイルアップロード機能を フォームに持たせることが できるようになります 特徴的なのはこちらの二つの項目ですね 「ファイルサイズの上限」と「受け入れ可能な ファイル形式」を指定することができます こちらの「受け入れ可能なファイル形式」は 拡張子で指定してあげます 例えば このようなかたちです jpg ファイルと png ファイル と いったかたちです 複数指定してあげる場合にはこちらの縦線 これはパイプと呼びますが このパイプを拡張子の間に 挟んであげれば大丈夫です これがファイルのアップロード機能を フォームに追加してあげる方法となります それでは今回は閉じておきます それではこの状態で こちらの「保存」ボタンをクリックしましょう そしてコンタクトフォームが保存されたら こちらのフォームを掲載している ウェブページを確認してみます はい こちらがそのウェブページですね このように先ほど追加した 都道府県のドロップダウンメニューが 表示されているかと思います 以上でレッスンは終了です 今回は Contact Form 7 プラグインを使って フォーム内に複数選択肢を持つ選択項目や 承諾確認のチェックボックスの追加方法 そしてファイルのアップロード機能を つける方法について解説致しました

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

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

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

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

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

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