onepage

メールフォームを簡単に設置できるプラグイン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をクリックするとコピーできます。

次に、お使いのテンプレートのheader.phpのhead内(<head>より前)に以下のコードを追加します。

そして、下記のCSSをstyle.cssまたは任意のCSSファイルに追加すれば完成です!
追加する場所はファイルの一番最後でOKです。

header.phpとstyle.cssの編集は、外観>テーマの編集から可能です。

スマホの場合は縦一列になります。

完成したフォームは固定ページなどにコードを貼りつけて使ってくださいね!
(コードはコンタクトフォームの編集ページにある「このショートコードをコピーして、投稿、固定ページ、またはテキストウィジェットの内容にペーストしてください:」という文言の下にあります。)

The following two tabs change content below.
ワンページ編集部
名古屋に拠点を構えて、ホームページ制作やデジタルマーケティングを通してネット集客を行っています。ワンページ編集部が、当メディアを通して初心者の方にもわかりやすくウェブの情報を伝えていきます。