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

基本的なコンタクトフォームの作成と表示

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「Jetpack」プラグインを使って、投稿や固定ページの入稿画面から、基本的なコンタクトフォームを作成し、Webサイト上に表示する方法について、解説していきます。
講師:
06:18

字幕

このレッスンでは Jetpack プラグインを使って投稿や固定ページの 有効画面から 基本的なコンタクトフォームを 作成してウェブサイト上に表示する 方法について 解説していきます それではさっそく画面を 見ていきましょう 今回はこちらの固定ページから 新規の固定ページを作成して そこにコンタクトフォームを 作ってみたいと思います それではこちらの左メニューから 「固定ページ」の「新規追加」を クリックしてあげます するとこのような画面が 表示されてきます まずこちらのタイトル入力画面に このように入力しておきます Jetpack そして次に こちらの 「お問い合わせフォーム追加」 というボタンを クリックします するとこのような画面が 表示されてきます こちらの画面でコンタクトフォームを 作成していきます 今現状は 「名前」のテキストボックス 「メールアドレス」のテキストボックス 「ウェブサイト」のテキストボックス そして「コメント」を入力するための テキストエリアが 表示されている状態です 試しにこの状態で 「このフォームを投稿に追加」という ボタンをクリックしてみましょう するとこのように本文を入力するエディットの 部分にこの様なコードが表示されてきます それでは一度この状態で「公開」 ボタンを押してみましょう これで固定ページの公開が完了しましたので 一度こちらのページをブラウザで 確認してみたい と思います こちらをクリックします するとこのようにウェブサイトが 表示されてきました そしてこのように内容を確認してみると 先程作成したフォームが 表示されてきていますね このように Jetpack プラグインを 利用すれば 簡単にフォームをページの中に 組み込む事が できるようになっています それでは管理画面に戻りましょう 先程の管理画面の中に 戻ってきました それでは先程作成したお問い合わせフォームに 少し手を加えてみたいと思います 再度こちらの「お問い合わせ フォームを追加」をクリックします するとこのように 表示されてきましたね では こちらの部分に一つフィールドを 追加してみたいと思います 今回は「住所」の入力枠を つけてみましょうか まずはこちらの「新規フィールドを追加」を クリックします そしてこちらのラベルの部分で 「住所」と入力します するとこちらのフォームのタイトル部分も 「住所」になりましたね そしてこちらの「フィールドの種類」の 隣にあるセレクトボックスを利用する事で その入力形式を選択する事が できるようになっています 一度クリックしてみましょう するとこのように「チェックボックス」や 「ドロップダウン」 「ラジオボタン」− 等が表示されていますね 今回は「テキスト」に しておきましょう そしてこちらの部分にチェックを 入れる事でこの入力項目を 必須項目として入力してなければエラーを 出すようにする事ができます 今回はこのままの状態に しておきましょう そして「このフィールドを保存」を クリックします するとこちらに この 入力フォームが保存されました そして次にこちらの「住所」の表示位置を 「メールアドレス」の下に 持っていきたいと 思います このファームの順番を入れ替えるには こちらの「移動」というところに マウスカーソルを合わせると このように マウスカーソルが上下左右の矢印に 変わりますので これをドラッグして 持っていきたい順番のところに移動させます このようなかたちで移動させて そしてドロップで離します これで順番の変更ができました またこちらに登録されているフォームですが こちらの編集ボタンをクリックする事に よって内容を変更する事が できるようになっています 例えばこちらの「名前」って書いている ところを「氏名」と変更したい場合 こちらの「編集」というボタンを クリックして そしてこちらの「ラベル」の 部分で ここに「氏名」 と入力します そしてフィールドの種類も変更したければ こちらのセレクトボックスから選びなおします そして必須項目を外したければ こちらのチェックを外せばオッケーですね 今回はつけておきましょう そして「このフィールドを保存する」を クリックします これで編集が完了しました また 不要な項目はこちらのマイナスを クリックする事によって 取り除く事が できるようになっています クリックしてみましょう するとこのように「ウェブサイト」 という項目が無くなりましたね それでは この状態で「このフォームを 投稿に追加」をクリックします するとこのように先程追加した フォームのコードが書き換えられます この状態で再度「お問い合わせフォームを 追加」をクリックしても このように内容が保持された 状態で表示されてきます それでは再度こちらのボタンを 押して画面を閉じます そしてこちらの「更新」ボタンを クリックします これで先程登録したお問い合わせ フォームを保存しました それでは再度こちらの固定ページを ウェブサイト上で確認してみたいと思います こちらをクリックします するとウェブサイト上で表示されてきて このように先程変更した 内容に変わっていますね 「住所」が追加されていて そして「名前」が 「氏名」に変わっています そしてウェブサイトという項目が 無くなりましたね このように Jetpack プラグインを 利用すれば 簡単にフォームの設置や 内容のカスタマイズを行う事が できるようになっています 以上でレッスンは終了です 今回は Jetpack プラグインを 使って投稿や固定ページの 有効画面から基本的なコンタクトフォームを 作成し ウェブサイトに表示する方法 について解説致しました

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

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

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

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

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

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