閉じる
閉じる

あまめも

[甘]コンタクトフォームを「Contact Form 7」プラグインで簡単に追加してみた。

基本的にツイッターメインの あますた(@amaguristar)です。
なので、もし何かの拍子に連絡したくなったらツイッターで絡んでくれると嬉しいです。

でも、もしかしたら「ツイッターをやってないけど連絡がとりたい!」って人が中にはいるかもしれないので(これは違うんじゃないか?とか誤字脱字多いよ!とか)、メッセージ送信フォームをつけてみました。

 

「Contact Form 7」プラグイン導入

自分でフォームを作成しても良いとは思いますが「折角プラグインがあるんだし、使わないと時間の無駄だよね?」ってことで、今回は「Contact Form 7」プラグインを導入して作成します。

インストール

いつものように「WordPress」の管理画面からインストール。

20150331_cf7_001

「キーワード」を入力して、表示されたら早速「今すぐインストール」ボタンをポチ。

20150331_cf7_002

インストールが完了したら忘れずに有効化。

問題なく有効化が完了すると

プラグインの有効化を押して「プラグイン」タグを開くと、

20150331_cf7_003

こんな感じ、WordPressの管理画面には

20150331_cf7_004

「問い合わせ」タグが表示されます。

プラグインの簡単な設定

「問い合わせ」タグを選択すると、

20150331_cf7_005

こんな感じに「新規追加」ボタンがあるので、選択。

20150331_cf7_006

こんな感じに画面が表示されます。
上の方にある「無題」という場所をクリックすると文字が打ち込めるようになるので、そこにコンタクトフォームの名前(識別子?)を入力。
今回は仮に「Contact」と入力しました。

20150331_cf7_007

入力すると、すぐ下に「コード」が表示されるので、それをコピーしてページの表示したいところにペースとするのみ。

コピーした後でもいいので「保存」ボタンを押すのを忘れずに!

まとめ

保存したコードを今回は、プロフィールの下の方に

20150331_cf7_008

こんな感じに貼り付け。
実際の表示を見てみると

20150331_cf7_009

ちゃんと反映されてます!
デフォルトの機能で十分に使えるので、特に変更しなくてもいいのですが「ど〜しても」という方はいろいろと設定ができるので、プラグインの説明を見てみてください。
製作者が日本人ということもあり、詳細な説明が日本語で書かれているので、とてもわかりやすいです。

関連記事

  1. take091-thumbnail

    【WaznFilm更新】これだけ覚えれば十分、Markdownの…

  2. リンク

    サイトでリンク箇所に分かりやすくアイコを追加する方法【css】

  3. info

    <p>タグの改行(余白)を調整したい時は【初心者用】…

  4. 文字をマーカーのように強調するCSS設定。個人用まとめです。

  5. 電話

    【HTML】「クリックして電話をかけたい!」それ簡単に実現できま…

  6. 目次のテンプレートっぽいものを作ろうとローテクで頑張ってみた

こんなメモもありますよ♪

  1. take090-thambnail

Twitter

ページ上部へ戻る