サルでもわかる!初心者ワードプレスブログ運営

挫折経験のある初心者さん大歓迎のわかりやすいブログ構築ノウハウ

ワードプレス

ワードプレスブログにお問い合わせフォームを設置するウホ!

更新日:




前回、ウィジェットを組み合わせてサイドバーを構築することに成功したエテキチ。

今回は、『ワードプレスブログにお問い合わせフォームを設置する方法』を教えてもらうようだ。


エテキチ
『どうかエテ美ちゃんの身も心もボクのものになりますように』っと…ウキキ。
ゴリキチ
何をやってるウホか?エテキチくん。
エテキチ
今日は七夕ウキからね。お願い事を短冊に書いてるウキよ(※執筆当日が7/7でした。)
ゴリキチ
なるほどウホね。でもそんな邪(よこしま)なお願い事をかなえてくれるとは思えないウホ。
エテキチ
うるさいウキなぁ。そんなのボクの勝手ウキよ!
ゴリキチ
まぁそうウホね。今回は珍しく誰にも迷惑をかけてないウホから良しとするウホ。
エテキチ
えっへんウキ。ところで今日は何を教えてくれるウキか?
ゴリキチ
今日は『ワードプレスブログにお問い合わせフォームを設置する方法』をレッスンしようと思ってるウホ。
エテキチ
あれもよくWEBサイトで見るウキね。どんどんそれっぽさが増してきて楽しいウキ。
ゴリキチ
そうウホね。それじゃあ早速レッスンを始めるウホよ。

スポンサーリンク




ワードプレスブログにお問い合わせフォームを設置するウホ!

ゴリキチ
ワードプレスブログにお問い合わせフォームを設置するために今回はプラグインの『Contact Form 7』を使うウホ。それじゃあ順を追って説明していくウホ。
エテキチ
よろしくお願いするウキ。

 

プラグイン『Contact Form 7』を導入するウホ!

ゴリキチ
まずはプラグインの『Contact Form 7』をインストールし有効化するウホ。ダッシュボードのナビゲーションメニューから『プラグイン』>『新規追加』とすすむウホ(上図参照)。
エテキチ
OKウキ。

ゴリキチ
そしたら右上の検索小窓に『Contact Form 7』と入力(上図①)して、検索結果の『Contact Form 7』を『今すぐインストール』する(上図②)ウホよ。
エテキチ
入力して…ポチっとなウキ。

ゴリキチ
続いて、『有効化』をクリックするウホ(上図参照)。これで『Contact Form 7』の導入は終了ウホ。
エテキチ
了解ウキ。

コンタクトフォームの設定をするウホ!

ゴリキチ
プラグインの『Contact Form 7』が導入されるとナビゲーションメニューに『お問い合わせ』が追加されるウホから、ここにカーソルを合わせて『コンタクトフォーム』をクリックするウホ(上図参照)。
エテキチ
ふむふむウキ。

ゴリキチ
次に表示された画面で最初から用意されている『コンタクトフォーム1』をクリックするウホ(上図参照)。
エテキチ
ポチっとなウキ。

ゴリキチ
コンタクトフォームの設定画面を見ると始めから『お名前』『メールアドレス』『題名』『メッセージ本文』の項目は用意されているウホ。もちろんこれだけで設定を終わってもいいウホけど、他にも訪問者の属性(性別や年齢、ブログのどのコンテンツに興味があるかなど)を絞れる項目を設定することが出来るウホから練習の意味も込めてやってみるウホよ。
エテキチ
なんの項目を追加するウキか?
ゴリキチ
今回は『性別』の項目を追加してみるウホ。性別などの選択肢のうち一つを選ぶような項目の場合は『ドロップダウンメニュー』を追加するウホ。逆にブログのどのコンテンツに興味があるかなどの複数選択が必要になる項目は『チェックボックス』を追加するといいウホよ。
エテキチ
分かったウキ。
ゴリキチ
実際の操作の説明に入るウホ。まず、追加項目のドロッダウンメニューを入れる場所にカーソルを表示させるウホ(上図①)。続いて『ドロップダウンメニュー』をクリック(上図②)して項目を追加するウホ。
エテキチ
ここをこうして…できたウキよ。

ゴリキチ
次に表示された画面の『オプション』のところに設定項目(この場合は男性と女性)を改行して入力するウホ(上図①)。入力出来たら『タグを挿入』をクリックするウホ(上図②)。
エテキチ
了解ウキ。

ゴリキチ
するとコンタクトフォームの設定画面でドロップダウンメニューが挿入されたのがわかるウホ(上図参照)。
エテキチ
ふむふむウキ。

ゴリキチ
このままだと前後のタグがくっついてしまっているウホから、適宜エンターキーで改行するウホ。その後、ドロップダウンメニューのタグの前に『<label>性別』を入力(上図①)して、タグの後ろには『</label>』を入力(上図②)するウホ。最後に後で使うウホからタグの中の『menu-(数字)』をコピーしておくウホよ(上図③)。
エテキチ
こことここに入力してこれをコピー…っと、できたウキよ。

ゴリキチ
次にメールタブをクリック(上図①)して、メッセージ本文のところの『[your-message]』の下に『[]』を入力してその中にさっきコピーしておいた『menu-(数字)』を入力するウホ(上図②)。最後に『保存』をクリックしてコンタクトフォームの設定は終了ウホ(上図③)。
エテキチ
クリックして…入力して…クリック…っと、出来たウキ。

ゴリキチ
保存をクリックした後に表示された画面では『フォームのコード』が表示されているウホ。これは後で固定ページで問い合わせページを作成するときに使うウホからコピーしておくウホよ(上図参照)。
エテキチ
OKウキ。

スポンサーリンク




固定ページでお問い合わせページを作成するウホ!

ゴリキチ
最後に固定ページでお問い合わせページを作成していくウホ。固定ページは前にやった方法で新規作成ページを開いて、タイトル入力(この場合はお問い合わせフォームとした)して、パーマリンクを設定するウホ。続いて、フォームとともに掲載する文章を本文に入力(上図①)して、さっきコピーしておいたフォームのコードを本文の下に貼り付けるウホよ(上図②)。最後に『公開』をクリック(上図③)するとお問い合わせフォームが作成されるウホ。
エテキチ
さささのさっと…できたウキよ。

ゴリキチ
最後に設定したお問い合わせフォームを表示してみるウホ。ちゃんと設置されているのがわかるはずウホよ(上図参照)。
エテキチ
おお!ちゃんとできてるウキ!これでエテ美ちゃんからメールが来るといいウキなあ。
ゴリキチ
そうウホね。ちなみにお問い合わせページはトップページのメインメニューにあると便利ウホからこの前に教えた方法で設定しておくといいウホよ。
エテキチ
了解したウキ!このお問い合わせフォームの完成により彦星的存在のボクと織姫的存在のエテ美ちゃんの心理的距離がグッと縮まること請け合いウキな!
ゴリキチ
……。それはこれからのエテキチくんの態度次第だと思うウホ、っていうか手遅れ感さえあるウホ…。

スポンサーリンク





今回は長丁場であったが何とかお問い合わせフォームを設置することに成功したエテキチ。

次回はどんな波乱の展開が二匹を待ち受けているのか!?

に乞うご期待!

にほんブログ村 ブログブログ ブログノウハウへ









全くのアフィリエイト初心者がブログ開設三か月で月10000円~稼いだノウハウメルマガ配信中!

メルマガの詳しい説明は以下のリンクよりご覧ください!

⇒アフィリエイトブログ構築無料セミナー: http://ippatuya.com/d/lpf/4a8258Nig5n3a3.php

すぐに登録したい!という方は以下よりどうぞ!

*は入力必須です。

氏名* 姓:名:
メールアドレス*
確認用メールアドレス*





 

-ワードプレス
-, ,

Copyright© サルでもわかる!初心者ワードプレスブログ運営 , 2017 All Rights Reserved Powered by AFFINGER4.