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

基本的なフォームの作成とメッセージ設定

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「Contact Form 7」プラグインを使って、基本的なコンタクトフォームの作成方法について解説していきます。また、フォームの画面上に表示される各種メッセージをカスタマイズする方法について解説致します。
講師:
08:18

字幕

このレッスンでは Contact Form 7 の プラグインを使って 基本的なコンタクトフォームの 作成方法について解説していきます また フォームの画面上に表示される 各種メッセージを カスタマイズする方法についても ご紹介していきます それでは早速画面の方を見ていきましょう 今こちらの画面は WordPress の管理画面内にある こちらの「お問い合わせ」をクリックした Contact Form 7 のページに なっています こちらの画面から実際に フォームの作成を行っていきます それではその手順について 見ていきたいと思います まずこちらの「コンタクトフォーム」と 書かれている隣にある 「新規追加」ボタン こちらを追加してフォームの作成を開始します それではクリックしてみましょう するとこのような画面になります 基本的には「デフォルトの言語を 使用する」と書かれている 下のこの青い 「新規追加」ボタンをクリックします もし日本語以外の別の言語で フォームを作成したい場合は こちらのセレクトボックスから その言語を 選んで「新規追加」をクリックします それではこちらの青い 「新規追加」ボタンをクリックしましょう するとこのような画面が表示されてきました この画面で実際に フォームの作成を行っていきます では こちらのタイトルの部分に このフォームの名前をつけてあげます 今回はこのように入力しておきましょう 「お問い合わせ」 このようにタイトルを入力したら 次はこちらの部分にご注目ください まず 上の部分に四つのタブボタンがあります そしてこの「フォーム」が 選択されていることを確認してください この「フォーム」と書かれたタブの この画面において 実際にフォームを作成していきます すでにサンプルとして このようなタグが 入力された状態になっています このコードの中の こちらの部分 こちらの部分が Contact Form 7 の 専用のタグとなっています これらのタグですが それぞれフォームの入力項目を表しています 例えばこちらの上の部分ですが これはインプットタイプがテキストで そのネーム属性が your-name と いうことを表しています このように入力することで 実際にウェブサイト上で表示した時に こちらの部分が インプットタグに刺し変わります さて この Contact Form 7 の 専用のタグですが 自分で入力する必要はありません こちらの入力エディッターの上にある これらのボタンを押すことによって これらのボタンに該当する専用の行動を こちらのエディッターの中に 挿入することができるようになっています それでは こちらのメールアドレスの下に 「住所」という入力枠を 作ってみたいと思います まずこのように改行を開けて こちらの 部分に上と同様に p タグを書きます そしてその後に「住所」と書きます そしてこちらも 上の HTML と同様に br タグを入力してあげます そして スペースを入れて 最後に p タグの閉じるタグを書いてあげます そして こちらの カーソルを この p タグの 閉じるタグの前に持って行ってあげます そして今回は住所の入力タグを テキストフィールドへ 作ってあげたいと思いますので こちらの上に並んでいるボタンから 「テキスト」をクリックしてあげます するとこのような画面が表示さてきます まずこちらの「項目タイプ」で「必須項目」と 書かれているチェックボックスは ここにチェックを入れることによって その入力項目を必須項目とすることができます そして次は こちらの「名前」です こちらはいわゆる インプットタグのネーム属性に値します 今回はこちらの部分を address と打ってあげましょう そして次にこちらの「デフォルト値」 この「デフォルト値」に入力することで その値がすでに そのインプットタグに 入力されている状態になります そして次にこの下にある 「このテキストを項目の プレースホルダーとして使用する」と 書かれている部分ですが こちらにチェックを入れることによって ここに入力された内容が プレースホルダーとして 表示されるようになります 今回はここにチェックを入れた状態で このように入力しておきます 「住所を入力してください」 これでこのテキストが このインプットボックスの中の プレースホルダーとして 機能するようになります 続いて こちらの「Akisment」ですが ここにチェックを入れることによってスパム 対策を行うことができるようになっています 今回はこのままにしておきます 続いてこちらの「ID 属性」ですが これはその名の通り その HTML タグに付加する ID を つけることができるようになっています 今回はここに address と打っておきましょう そして次にこちらの「クラス属性」 こちらも「ID 属性」と一緒に そのインプットタグに付加する クラスをつけてあげることができます 今回は例えばこの部分を text と入力しといてあげましょう ここまで入力すると このように自動的に先ほどの Contact Form 7 の専用タグが 出力されてきますので この状態でこの 「タグを挿入する」をクリックします するとこのように カーソルがあった部分に自動的に Contact Form 7 の 専用タグが挿入されます それではもう一つ試してみましょう 例えばこの「住所」の後に 電話番号を入力させるための フォームを作りたいと思います 同じように p タグを 書いて 「電話番号」と書きます そして br タグを作って その下にスペースを開けて そして p タグの 閉じるタグを入力してあげます そしてこちらの閉じるタグの前に カーソルを持って行って 次はこちらの「電話番号」をクリックします すると同様にこのような画面になりますので 先ほどと同様 まずこちらの「名前」の部分に tel と入力してあげて そして「デフォルト値」 今回はプレースホルダーは なしにしておきましょう そして「ID 属性」を tel そして「クラス属性」を 先ほどと同様に text としておきます すると同様に このように 専用のタグが生成されましたので この状態で「タグを 挿入する」をクリッックします するとこのように専用タグが挿入されました それではこの状態で 画面のこちらの部分に ある「保存」ボタンをクリックしてあげます するとこちらの部分に このフォームの専用のショートコードという ものが表示されてきますので あとはこちらのコードをコピーして 表示したい投稿や固定ページの エディッターに貼り付けてあげれば このフォームをウェブサイト上に 表示することができるようになっています ちなみに こちらのタブの中にある この「メッセージ」 フォーム上で表示される 様々なテキストの内容を 変更することができるようになっています 例えば実際に送信が完了された時に 表示されるメッセージや 逆に送信に失敗した場合のエラーメッセージ または入力内容に不備があった場合の エラーメッセージ これらをこちらの画面の中で 設定することができるようになっています それでは「フォーム」に戻りましょう 以降のレッスンでは実際に今回作成した行動を ウェブサイト上に反映する手順について 見ていきたいと思います 以上でレッスンは終了です 今回は Contact Form 7 の プラグインを使って 基本的なコンタクトフォームの 作成方法について解説致しました

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

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

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

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

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

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