メールフォームを簡単に設置できるプラグインContact Form 7（コンタクトフォーム7）の使い方をご紹介します。
Contact Form 7はTakayuki Miyoshiさんという方が開発された国産のプラグイン。言うまでもなく、日本語対応しており、項目を選んでいくだけでメールフォームやアンケートフォームを作成できるのですが、今回はコピペするだけで使えるようにベーシックな問い合わせフォームを作ってみました！
コピペで使えるContact Form 7のフォームはいろいろあると思いますので、今回はFontAwesomeというアイコンフォントを利用してデザインしています。
完成形はこちら。（画像はクリックすると拡大表示します。）
- FontAwesomeについて
- FontAwesomeは、サイト上で使用するさまざまなアイコンをフォントとして（つまり普通の文字と同様に）利用できるアイコンフォントの一つです。
CSSで色やサイズの変更ができ、各種スマートフォン上でもぼやけることなく綺麗に表示されるため、とても使い勝手が良く、数多くのサイトで用いられています。
この「FontAwesomeについて」という見出しの横にある電球のマークもFontAwesomeを使っています。
まずはContact Form 7プラグインをインストール
- プラグイン＞新規追加＞検索ボックスに「Contact Form 7」＞有効化
WordPress管理画面の左側にあるメニューからプラグインをクリックし、「新規追加」（「プラグインを追加」）ページの左上にある検索ボックスで「Contact Form 7」を検索します。
「今すぐインストール」をクリックし、インストールが終了したら、「有効化」させます。
有効化すると左側のメニューに「お問い合わせ」の項目が増えます。
Contact Form 7の設定
- プラグイン＞Contact Form 7＞設定
プラグイン＞Contact Form 7＞設定、もしくは、お問い合わせ＞新規追加をクリックします。
「コンタクトフォームを追加」ページに任意のフォーム名を付けます。ユーザーには公開されない項目ですので、管理上わかりやすい名前で大丈夫です。
「フォーム」タブに入力されている項目の代わりに下記のコードをコピー＆ペーストしてください。
下のコードが書かれている部分にカーソルを持っていくと上にメニューが出るので、右から二つ目のCopyをクリックするとコピーできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<dl class="cf7"> <dt><i class="fas fa-user"></i>お名前<span class="rqd">必須</span></dt> <dd>[text* your-name akismet:author]</dd> <dt><i class="fas fa-envelope"></i>メールアドレス<span class="rqd">必須</span></dt> <dd>[email* your-email akismet:author_email]</dd> <dt><i class="fas fa-phone"></i>お電話番号</dt> <dd>[tel your-tel]</dd> <dt><i class="fas fa-home"></i>ご住所</dt> <dd>[text your-address]</dd> <dt><i class="fas fa-edit"></i>お問い合わせ内容<span class="rqd">必須</span></dt> <dd>[textarea* your-message]</dd> </dl> <p class="btn_cf7">[submit "この内容で送信する"]</p> |
次に、お使いのテンプレートのheader.phpのhead内（<head>より前）に以下のコードを追加します。
|
1 |
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"> |
そして、下記のCSSをstyle.cssまたは任意のCSSファイルに追加すれば完成です！
追加する場所はファイルの一番最後でOKです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
/* コンタクトフォーム７ */ .cf7 { max-width: 100%; box-sizing: border-box; } .cf7 dt i { margin-right: .5em; } .cf7 dd { margin: 0 0 2vh 0; } .cf7 .rqd { color: #ff6666; font-size: .8em; margin-left: .5em; } .btn_cf7 { text-align: center; } .btn_cf7 input { width: 100%; } @media screen and (min-width: 768px) { .cf7 dt { float: left; clear: left; width: 35%; padding: .5em 1em .5em 0; } .cf7 dd { margin-left: 35%; } .cf7 .rqd { float: right; margin-left: 0; margin-top: .2em; } .btn_cf7 input { width: 70%; } } |
header.phpとstyle.cssの編集は、外観＞テーマの編集から可能です。
スマホの場合は縦一列になります。
完成したフォームは固定ページなどにコードを貼りつけて使ってくださいね！
（コードはコンタクトフォームの編集ページにある「このショートコードをコピーして、投稿、固定ページ、またはテキストウィジェットの内容にペーストしてください:」という文言の下にあります。）
