[WordPress]お問い合わせフォームを「Contact Form 7」で作成する
2017/01/31
こんにちは、okutani(@okutani_t)です。サイトを運営していて必要不可欠なのが「お問い合わせ(コンタクト)フォーム」ですね。
法人はもちろんのこと、個人サイトでもお問い合わせフォームを設置している方が訪問者に対して親切です。と言いつつ、当ブログでは設置するのがめんどうだったので10ヶ月ほど放置していました。わざわざポートフォリオサイトから連絡していただいた方々、申し訳ありませんでした……
というわけで、今回はWordPressサイトでお問い合わせフォームを設置するプラグイン『Contact Form 7』を紹介いたします。
このContact Form 7というプラグイン、日本人の三好隆之さんという方が開発しており、なんとダウンロード数がWordPressプラグイン内で実質1位なのです！
参考WordPressプラグインのダウンロードランキング・トップ200！！実質1位は日本発のあのプラグイン | 着ぐるみ追い剥ぎペンギン
同じ日本人の我々は、安心して使えるプラグインですね。
では、そんなContact Form 7プラグインの導入手順をさっそく見ていきましょう。
スポンサーリンク
もくじ
Contact Form 7のインストール
Contact Form 7プラグインをWordPressに導入していきます。
WordPress管理画面から「プラグイン」→「新規追加」を選択。
『Contact Form 7』と検索し、「今すぐインストール」をクリック。
「プラグインを有効化」しておきましょう。
これでContact Form 7が使えるようになりました。
Contact Form 7の設定をおこなう
Contact Form 7の設定をおこなってフォームを作成していきましょう。
管理画面から「お問い合わせ」→「新規追加」と進み、「新規追加ボタン」をクリック。
お問い合わせフォームの新規作成画面が開きます。
タイトルの設定
まずはお問い合わせフォームのタイトルを入力しましょう。今回は単純に「お問い合わせフォーム」としました。
フォーム項目の設定
「フォームタブ」から、フォームで使いたい項目を選択することができます。
例えば、挿入したい場所にカーソルを合わせて『URLボタン』をクリックするとします。次のような画面が表示されるので、必要に応じて項目を設定して挿入することができます。
「必須項目の有無」「プレースホルダー(入力補助文字)として使用する」以外は無視してかまいません。「名前」は分かりやすい名前に変更してもOKです。
また、CSSで装飾したい場合はクラス属性をつけてあげると、より柔軟にスタイルを変更することができます。CSSが分かる人は設定してみてください。
「タグを挿入」をクリックしてフォームを挿入します。
挿入したタグを、デフォルトで記述してある項目のとおりに合わせて記述してあげると良いですね(pタグで囲う、brタグで改行など)。
当ブログでは次のように設定してみました。『URL』の入力欄(任意)を追加、Contact Form 7には確認画面が無いようなので、確認用の『承諾確認』のチェックボックスを追加。
確認用のチェックボックスをつけておくと、迷惑メールが届きにくくなるというメリットもあるので、設置推奨です。
また、上記のようにlabelタグで囲っておくと、テキストをクリックしてもチェックできるようになるのでおすすめです。
<p><label>[acceptance acceptance名前] 上記内容にて送信します。よろしければチェックを入れてください。</label></p>メール項目の設定
「メールタブ」からメール送信の設定をおこないます。
私は次のとおり設定してみました。
私の場合『URL』の項目を追加したので、メッセージ本文に「サイトURL: [URL項目の名前]」を追記。
それ以外の「noreply@vdeep.net」や「以下の内容でお問い合わせがありました。」などの文言は、各個人好きなように設定すればOKです。もちろんデフォルトのまま使ってもいいです。
『メール（２）』にチェックすると、お問い合わせをおこなった方に、確認用の自動返信メールが送れるようになります。こちらはあると親切なのでチェックしておくことをおすすめします。
メール（２）の変更点は特にありませんが、私はメッセージ本文に「以下の内容でお問い合わせを承りました。」と追記しました。
設定が済んだら「保存」ボタンをクリック。
お問い合わせフォーム設置用コードの取得
すでにお気づきの方もいるかと思いますが、設定画面上部に表示されたコードを利用することで、お問い合わせフォームを好きな場所に設置することができます。
このコードを各自コピーしておいてください。
では、実際にお問い合わせフォームを作成してみましょう。
固定ページを使ってお問い合わせフォームを作成
お問い合わせフォームは固定ページを使って作成していきます。
「固定ページ」→「新規追加」を選択、『タイトル』『パーマリンク』『本文』をそれぞれ設定します。
パーマリンクは「contact」などとしてあげると、分かりやすくてよいですね。また、パーマリンクが上記のように設定できない場合、次の記事を参考にWordPress設定を見なおすか、無視してそのまま進めてください。
この作成した固定ページをサイトの分かりやすい位置に設定してあげればOKですね。当サイトでは次のように設定してみました。
お問い合わせフォームが設置できたか確認してみる
次のようにお問い合わせフォームが設置できていることが確認できました。
承諾確認用のチェックボックスにチェックを入れないと、送信ボタンがクリックできないように設定されていることが分かります。
必須項目に入力がないと、送信ボタンクリック時にエラー文を表示してくれます。こういった実装は個人でおこなうとかなり大変なので、とても便利ですね。
CSSで見た目を変更＆レスポンシブ対応
実はこのままだとスマートフォンの表示が崩れてしまうため、以下の方法で対応しておきましょう。
なお、テーマによってはすでにレスポンシブ対応済みの場合があるので、一度スマホで確認してから作業することをおすすめします。
Contact Form 7設定画面で次のように「class:wpcf7-style」を追記。
これでフォームにclassが追加されます。このclassに対して、レスポンシブ対応をおこないます。
CSSファイル(style.cssなど)に次のコードを記述。
.wpcf7 .wpcf7-style {
width: 90%;
border: 1px solid #ccc;
border-radius: 6px;
padding: 6px 12px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}上記のwidthは100%でもいいのですが、私が使ってるテーマではスマホ画面でフォームがなぜか横に飛び出したままだったため、90%にしています。
それ以外のコードは、角を丸くしたり、ちょっと影をつけたりです。
次のコードも追記してあげると、送信ボタンもすこしオシャレになります。
.wpcf7-submit {
font-size: 17px;
padding: 5px 20px;
background: #f8f8f8;
border: 1px solid #ccc;
border-radius: 4px;
}
.wpcf7-submit:hover {
background-color: #eee;
cursor: pointer;
}次のように見た目が変わりました。
スマートフォンで確認しても、フォームが横に飛び出していないことが確認できるかと思います。
参考【WordPress】コピペでOK！『Contact Form 7』をレスポンシブ化するカスタマイズ！ | SiteMiru（してみる）
Contact Form 7を使ったお問い合わせフォームの実装は以上です。参考になれば幸いです。
Web開発のお仕事を募集しています
フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。
「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。
ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。
LINKお問い合わせ
スポンサーリンク
