【WordPress】Contact Form 7の導入方法と使い方について

 

 

どうもやすです^^

 

 

今回は【WordPress】のプラグインにあります

 

 

【Contact Form 7】の導入方法と設定について

 

 

解説をしていきたいと思います＾＾

 

 

 

 

Contact Form 7ってどんなプラグインなの？

 

プラグインの【Contact Form 7】とはお問い合わせのフォームを作ることができる

 

プラグインになります

 

お問い合わせフォームはブログの訪問者さんとコミュニケーションが取れる

 

大切な機能がついているのでぜひ導入して設置をしましょう＾＾

 

 

サイトを育てていき、コメントがくるようになると嬉しいですよ^^

 

 

 

Contact Form 7の導入方法について

 

 

WordPress内の左側にありますダッシュボード欄から

 

 

【プラグイン】にマウスをあわせて、右に出てくる【新規追加】を

 

 

クリックします

 

 

プラグインの検索画面にいくので

 

 

赤枠で囲っている【プラグインの検索】の項目内に

 

 

導入するプラグインの名前を入力します

 

今回は【Contact Form 7】のプラグインを導入するので

 

検索内に入力します＾＾　拡大しておきますね！

 

 

検索にプラグイン名を入れますと自動で検索されますので

 

プラグイン名を確認して、赤枠で囲っている【今すぐインストール】をクリックします

 

 

この表示がでるので

 

少し待ちます

 

 

待っているとこの表示が出てくるので

 

赤枠で囲っている【有効化】をクリックします

 

 

有効化をクリックしますとこのように

 

左上に【プラグインを有効化しました。】と表示が出るので

 

 

これでプラグイン【Contact Form 7】の導入は以上になります

 

 

お次はContact Form 7の設定についての解説になります

 

 

 

 

Contact Form 7の設定方法について

 

 

では早速設定について解説します＾＾

 

 

まず左側にありますダッシュボード欄から

 

【お問い合わせ】のマウスを合わせて、右に出てくる【新規追加】を

 

クリックします

 

 

この画面になりますので

 

赤枠で囲っている場所にタイトルを入力します

 

 

このようにタイトルを入力して

 

赤枠で囲っている【保存】をクリックします

 

 

保存できますと【コンタクトフォームが作成されました。】と

 

表示が出るので、それを確認して赤枠で囲っている【Contact Form 7　id〇〇】の

 

 

部分をコピーします

 

ここでのコピーの仕方は今の【Contact Form 7　id〇〇】の場所に

 

 

マウスを合わせて、マウスの右クリックを押して

 

この表示が出るので赤枠で囲っている【コピー】をクリックします

 

 

これで保存できました

【この保存したコードは後で貼り付ける場所があります＾＾】

 

 

同じ画面の下に【メール】の項目があるので

 

ここの設定は特に変更は無いのですが、あなた自身がお問い合わせメールは

 

違うメールアドレスで受け取りたい場合は変更します

 

 

変更場所は赤枠で囲っている【送信元】の箇所を変更します

 

 

違うメールアドレスに変更した場合は下の方に画面を動かして

 

下の方にあります【保存】をクリックします

 

 

クリックしますとこのように

 

【コンタクトフォームが保存されました。】と表示されるので

 

これで設定は完了です

 

 

お次はWordPress内の【固定ページ】という場所に

 

 

このお問い合わせフォームを設置するやり方についての解説になります＾＾

 

 

 

固定ページにお問い合わせフォームを設置する方法

 

 

まず左側にありますダッシュボード欄から

 

【固定ページ】にマウスを合わせて右に出てきます【新規追加】をクリックします

 

 

この画面になりますので

 

赤枠で囲っている場所にタイトルを入力します

 

 

 

タイトルを入力しますとこのように

 

【お問い合わせはこちら＾＾】がタイトル欄に入りました

 

ここで赤枠で囲っている【ビジュアル】になっているか確認して

 

 

下の赤枠で囲っている場所に先程コピーした

 

【contact from7　id〇〇】のコードを貼り付けます

 

このコードの上に文章を少し付けておくと見栄えも良くなりますよ＾＾

 

 

そしてこの【固定ページ】にもパーマリンクの場所があるのですが

編集ボタンを押して変更しなければなりません

 

赤枠で囲っている【パーマリンク】を見てみると【日本語】の

 

表記があると思います

 

これ、固定ページでは日本語の表記を英字に変えないとだめなのです^^;

 

 

なのでこのように

 

日本語表記の箇所を【Toiawase】という表記に変更します

 

 

そして【OK】の場所をクリックします

 

 

クリックしますと英字になっているので

 

赤枠で囲っている【公開】をクリックします

 

 

この表示になるので

 

赤枠で囲っている【ページを表示】をクリックして

 

実際にどのようになっているか確認します

 

 

こんな感じのフォームが出来上がります＾＾

 

これで固定ページへの設置は完了になります

 

 

このあとグローバルメニューという場所に設置をするようになるので

 

その解説もしたいと思います＾＾

 

 

 

グローバルメニューへの設置について

 

このグローバルメニューなのですが、テーマによって表示が異なるので

【表示が異なるだけで設定方法は変わりません＾＾】

 

 

今回ここでは【賢威】のテーマでの設置方法になります^^;

 

 

まずWordPress内の左側にあります【外観】にマウスを合わせ

 

右側にでてくる【メニュー】をクリックします

 

 

この画面になりますので

 

赤枠で囲っている【メニュー名】の項目に名前を入れて

 

赤枠で囲っている【メニューを作成】をクリックします

 

 

この画面になるので

 

ここから今度はメニューを追加していきます

 

 

その画面の状態で

 

左側にあります【固定ページ】の項目から

 

追加したい固定ページのチェックマークを入れて

 

そして赤枠で囲っている【メニューに追加】をクリックします

 

 

するとこのように

 

画面の右側にメニューが追加されたと思いますので

 

下の画面にあります【メニュー設定】の項目から

 

 

赤枠で囲っているメニューの位置の【メインメニュー】にチェックを入れます

 

 

そして右下にあります【メニューを保存】をクリックします

 

 

メニューの保存が完了しますとこのように

 

【お問い合わせを更新しました。】と表示されますので

 

赤枠で囲っている【ライブプレビューで確認】をクリックして

 

どんな感じの表示になるか見てみます＾＾

 

 

こんな感じの表示になりますので　これは【賢威】のテーマで

メニューは1個だけの表示の場合です

 

この赤枠で囲っている【お問い合わせはこちら＾＾】をクリックしますと

 

 

先程のこのページに

 

飛ぶことができるようになります＾＾

 

 

以上でグローバルメニューへの設置の方法について

 

 

解説しました

 

 

他にも固定ページで作ったものをこの上段に設置するのであれば

 

 

上記と同じように【外観】から【メニュー】で

 

同じように追加していくこともできますので

 

これでメニューを充実させていくとサイトの見栄えもかなり

 

良くなりますよ＾＾

 

 

 

 

 

まとめ

 

 

長くなってしまいましたが以上で

 

 

【WordPress】Contact Form 7の導入方法と使い方についての

 

 

解説を終わりにします＾＾

 

 

やすでした^^

 

 

 

 

 

P.S.

 

わからない事、どうしたら良いの？という疑問、または感想など

 

なんでもご連絡下さい＾＾→やすに連絡してみる