【保存版】Contact Form 7のインストールとカスタマイズのすべて

2018年9月3日2019年12月18日

Contact Form 7（コンタクトフォーム）のインストール方法とデザインのカスタマイズ方法について解説致します。

カスタマイズは、

・確認画面の表示方法
・項目デザインの変更方法
・送信ボタンのデザイン変更方法

になります。

こちらの方法でContact Form 7を導入しカスタマイズをしていただければ見た目の良い問い合わせフォームを設置することができますのでぜひ参考にしてください。

Contact Form 7とは？

ワードプレスに問い合わせフォームを設置する際に便利なプラグインがContact Form 7（コンタクトフォーム）になります。

このような問い合わせフォームをワードプレス上に設置できます。

まずはインストール方法を解説します。

Contact Form 7のインストール方法

「プラグイン」→「新規追加」→「Contact Form 7を検索」

管理画面から「お問い合わせ」→「コンタクトフォーム」

コンタクトフォーム1をクリック

すると、フォームの編集画面が開きます。

基本的にはこのまま使っても大丈夫ですが、項目を増やしたい場合には上部のボタンから追加できます。

※項目がどう反映されるか、一通り確認してみましょう。

編集が完了したら、画面上部の「コード」をコピーして「保存」ボタンをクリックします。

続いて、「固定ページ」→「新規追加」をクリックします。

記事本文に上記でコピーしたコードを貼り付けし、「公開」ボタンをクリックします。
この際、ビジュアルではなく、テキスト表示で貼り付けしてください。

記事タイトルは、「お問い合わせ」などの任意なものを入力してください。

１．コードを貼り付け
２．「公開」ボタンをクリック

これで設定完了です。

Contact Form 7のデザインカスタマイズ

Contact Formは初期設定の状態だと非常にシンプルなデザインです。
このまま理由してもいいのですが、せっかくなら見た目を整えたいという方向けにカスタマイズ方法をお伝え致します。

Contact Form 7の項目のカスタマイズ

各項目部分のカスタマイズ方法を解説します。

管理画面の「固定ページ」→「新規追加」をクリックします。

ビジュアル形式の「テーブル」から「２×４」を選択し、表を作成します。

このように表ができます。このセルに「氏名」「メールアドレス」「題名」「問い合わせ内容」を入力し、セルに色付けをします。

色をつける箇所を選択し、「テーブル」→「セル」→「セルのプロパティ」を選択します。

「詳細」→「背景色」の順にクリックします。

セルの色を選択し、OKボタンをクリックします。

テキスト形式に変更してコードをコピーします。

「お問い合わせ」→「コンタクトフォーム1」をクリックし、上記のコードをペースト

フォームに表示させる加工項目を表に入力していきます。

[ text* your-name ] [ email* your-email ] [ text your-subject ] [ textarea your-message ]

各項目を表に入力が完了したら「保存」ボタンをクリックして完了です。

Contact Form 7に「確認ボタン」と「戻るボタン」を設置する方法

Contact Form 7をそのまま使うと確認画面は表示されません。確認画面が表示されないと問い合わせする人は正しく送信できているか分からず不安になる事があります。これを解消するために確認画面を表示する方法をお伝えいたします。

確認画面を表示するには、「Contact Form 7」だけでなく、「Contact Form 7 add confirm」というプラグインを追加する必要があります。

Contact Form 7 add confirmはContact Form 7をより便利に利用することができるプラグインになります。

Contact Form 7 add confirmをインストールしていないと「確認」「戻る」ボタンが表示されておりません。Contact Form 7 add confirmを追加すると「確認」「戻る」ボタンが表示されるようになります。

Contact Form 7 add confirmプラグインをインストールすると、「確認」「戻る」ボタンが表示されるようになりました。

表示された「確認」「戻る」ボタン利用し、下記のように設定していきます。

入力が完了したら保存ボタンをクリックして設定は完了です。

Contact Form 7の送信ボタンのデザインカスタマイズ方法

続いて、コンタクフォームの送信ボタンのデザインをカスタマイズする方法について解説します。カスタマイズは下記のHTMLコードをスタイルシートにペーストしていきます。

※こちらを貼り付けてください

/* --- お問い合わせフォームのカスタマイズ --- */
/* 入力部分 */
.wpcf7 select, input[type=&quot;email&quot;], input[type=&quot;text&quot;], textarea {
width: 96%; /* 最大の幅 */
font-size: 100%; /* フォントの大きさ */
padding: 0.5em; /* 文字と入力枠の間の余白（0.5文字を指定）*/
border: 1px solid #ccc; /* 枠の指定 */
border-radius: 4px; /* コーナーを微妙に丸く */
}
/* 送信ボタン */
.wpcf7 input[type=&quot;submit&quot;] {
width: 270px; /* ボタンの幅 */
font-size: 18px; /* フォントの大きさ */
font-weight: bold; /* 太文字 */
text-align: center; /* 位置を中央に */
text-decoration:none; /* 文字の下線は消す */
color: #ffffff; /* 文字色 */
background: #73BB77; /* ボタンの背景色 */
padding: 10px 40px; /* ボタンの余白 */
border-radius: 5px; /* ボタンの角を丸く */
border: 0; /* ボタンの枠線を消す */
border-bottom : 1px solid #757575 ; /* 下部にだけ1pxの線を引く */
	}
/* 戻るボタン */
.wpcf7 input[type=&quot;button&quot;] {
width: 270px; /* ボタンの幅 */
font-size: 18px; /* フォントの大きさ */
font-weight: bold; /* 太文字 */
text-align: center; /* 位置を中央に */
text-decoration:none; /* 文字の下線は消す */
color: #ffffff; /* 文字色 */
background: #949494; /* ボタンの背景色 */
padding: 10px 40px; /* ボタンの余白 */
border-radius: 5px; /* ボタンの角を丸く */
border: 0; /* ボタンの枠線を消す */
border-bottom : 1px solid #757575 ; /* 下部にだけ1pxの線を引く */
}
.wpcf7 input[type=&quot;submit&quot;]:hover {
opacity: 0.5; /* マウスオンで半透明にする */
}

これをそのままコピー＆ペーストしたら表示が切り替わります。