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

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

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「MW WP Form」プラグインを使って、基本的なコンタクトフォームを作成する方法について、解説致します。
講師:
06:47

字幕

このレッスンでは MW WP Form のプラグインを使って 基本的なコンタクトフォームを 作成する方法について解説していきます それでは早速画面の方を見ていきましょう 今画面に表示されているのが WordPress の管理画面の中にある MW WP Form の 設定画面となっています 今回はここから実際にフォームを 作っていってみたいと思います フォームを新規に追加するためには こちらの「新規追加」ボタンか もしくは同様に こちらの「新規追加」ボタンを クリックしてあげれば OK です それではこちらをクリックしてみます するとこのような画面が表示されてきました この画面で実際にフォームを作成していきます まず こちらのタイトル部分に このフォームの名前をつけてあげます 今回は「お問い合わせ」としておきます そして実際にフォームを組み立てるところは こちらのエディッター部分となっています こちらのエディッター部分では HTML タグを利用しないで 見た目で編集していくことができる ビジュアルエディッターと そして HTML タグを使って コーディングをしていく こちらのテキストエディッター部分があります 今回はこちらのビジュアルエディッターの方を 使っていってみたいと思います それではまず こちらのエディッターの中に 入力項目として設置したい項目の タイトルを書いていきます まずは「お名前」そして 「メールアドレス」そして 「お問い合わせ内容」と今回は三つの 入力項目を作っておきたいと思います そしてここから こちらの「お名前」と 「メールアドレス」そして 「お問い合わせ内容」に対応した 入力枠を作ってあげたいと思います その入力枠を作成する機能が こちらの「フォームタグを追加」という ボタンになります では こちらの使い方を見ていきましょう まず 入力枠を作りたいところに こちらのカーソルを持って行ってあげます まずはこちらの「お名前」の下に 持って行ってあげます そして こちらから その入力項目を選択してあげます 今回はこちらの 「テキストフィールド」を選んであげます そしてこちらの 「フォームタグを追加」をクリックします するとこのような画面が表示されてきます この画面で 例えば「テキストフィールド」であれば インプットタグですが そのインプットタグに対して 付与する属性の値をつけていきます まずこちらは name 属性ですね 今回はこの部分を name にしてあげます そしてこちらは ID 属性 こちらも同様に name としておきましょう そして サイズの指定を行ったり 最大入力値を指定できたり あとは「初期値」や placeholder なども 設定することができるようになっています また エラー表示の有無や このように半角英数字に変換する 機能もあったりします 今回は name と ID を 入力した状態で こちらの Insert というボタンを クリックします するとこのように コードが出力されてきました このコードが実際に ウェブサイト上に反映されると テキストフィールドとなって表示されます 同様にこちらの「メールアドレス」そして 「お問い合わせ内容」もやってみましょう まずは「メールアドレス」の下に カーソルを持って行って そしてこちらの「入力項目」から 「テキストフィールド」を同じく選択します 同様に 「Email フィールド」とありますが この「Email フィールド」は インプットタイプ E メールのタグを 生成するためのものです もしこのプラグインのバリデーション機能を 利用したいということであれば こちらのテキストフィールドを 選んでおきましょう こちらを選択して 同様に 「フォームタグを追加」をクリックします そして こちらの name のところに mail と打ちます そして ID のところにも mail と打って そして この状態で Insert をクリック 同じようにタグが生成されましたね そして「お問い合わせ内容」の下に カーソルを持って行って 同じようにこちらのセレクトボックスから 次はこちらの「テキストエリア」を 選んであげます そして「フォームタグを追加」をクリックして そして今度はこちらの name の部分に body と打ってあげます 同じくこちらの ID も body としておきます そしてこの「テキストエリア」を選択すると こちらの部分でそのテキストエリアのサイズを 指定してあげることも できるようになっています 今回はこの状態でこのまま Insert をクリックします するとこのようにコードが 生成されてきましたね あとは「戻る」ボタンと 「確認・送信」ボタンを置いてあげましょう こちらの「お問い合わせ内容」の 下に改行を入れて こちらの部分に まずはこのセレクトボックスから こちらの「戻る」ボタンを選択します そしてこちらの 「フォームタグを追加」をクリックします するとこのように 「ボタンに表示する文字列」という項目が 出てきますので こちらに「戻る」と打ってあげます そして Insert をクリックします そしてその次に この「戻る」ボタンの下に 今度は「確認・送信」ボタンを 設置してみたいと思います 改行を入れて そしてセレクトボックスから こちらの「確認・送信」というのを選択して こちらのボタンをクリックします 同じく name 属性を 指定する部分がありますので こちらに send と入力しておいて 次に「確認ボタンに表示する文字列」 こちらは 「確認する」というボタンを 入れておきます そして「送信ボタンに表示する文字列」を 「送信する」としておきます この状態で Insert をクリックします するとこのようにコードが生成されてきました ちなみにこの「戻る」ボタンというのは 入力内容確認画面の際に 利用するためのものです 通常の入力画面には表示されてきません またこちらの「確認・送信」ボタンについても フォームの入力画面では「確認」ボタン そして確認画面においては「送信」ボタンと 自動的に切り替わるボタンとなっています それではこの状態でこちらの 「公開」をクリックします すると先ほど設定した フォームの内容が保存されました 以降のレッスンでは 今回作成したフォームを 実際にウェブサイト上に表示する方法について 解説していきたいと思います 以上でレッスンは終了です 今回は MW WP Form プラグインを使って 基本的なコンタクトフォームを 作成する方法について解説致しました

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

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

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

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

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

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