コピペでできる！ContactForm7でかっこいいお問い合わせフォームを作る方法

お問い合わせフォームプラグイン、
ContaftForm7は

初期設定のままだと、こんなにシンプルです。

もちろんこのままでも使えるんですが
コピペだけでこんなに
かっこよくなったらどうでしょう？

全然見栄えが違いますよね^^

お好みの色、内容にカスタマイズして使ってくださいね。

・この記事の内容・

ContactForm７コンタクトフォーム７にコピペするコード
CSSを貼り付けても上手くいかない場合

ContactForm７コンタクトフォーム７にコピペするコード

コンタクトフォーム７を使ったことがない方のために
設定手順からお話します。

コンタクトフォーム７のメニューから
「新規追加」すると

「フォーム」「メール」
「メッセージ」「その他の設定」

の４つを設定できるようになっています。

まず、この「フォーム」を使って
メルアド、名前など、
お客様に何を入力していただくかをカスタマイズするのですが

かっこいいデザインにするにはちょっと仕込みが必要ですので
以下のコードをコピーして、
必要なところはちょっと変えて使ってください。

「フォーム」にコピペするコード

まず、「フォーム」から

以下のコードを「フォーム」欄に
貼り付けてください。

ーーーーーーーーーーーーーー

<tr>
<th>必須 ご相談内容</th>
<td>[checkbox* checkbox-inq "ご相談” "お見積もり” "お問い合わせ” "その他”]</td>
</tr>

<tr>
<th>必須 お名前</th>
<td>[text* y[text* your-name watermark”例：あなたのお名前”]>
</tr>

<tr>
<th>必須 メールアドレス</th>
<td>[email* [email* your-email watermark”例：×××@×××.com”]gt;
</tr>

<tr>
<th>任意会社名</th>
<td>[text yo[text your-company watermark”例：◯◯株式会社”]gt;
</tr>

<tr>
<th>任意部署名</th>
<td>[text yo[text your-dept　watermark”例：△△事業部”]gt;
</tr>

<tr>
<th>必須郵便番号</th>
<td>[text* z[text* zip id:zip watermark”例：123-4567"]>
</tr>
<tr>
<th>必須都道府県</th>
<td>[text* pre[text* pref id:pref watermark”例：東京都”];
</tr>

<tr>
<th>必須ご住所</th>
<td class=”address-100″>[text* add[text* addr id:addr watermark”例：　東京都中央区銀座１２３４５”];
</tr>

<tr>
<th>必須お電話番号</th>
<td>[text* you[text* your-tel watermark”例：03-1234-5678"];
</tr>

<tr>
<th>必須メッセージ本文</th>
<td class=”message-100″>[textarea* y[textarea* your-message watermark”お問い合わせ内容をご記入ください”]br> </tr>

</table>
[submit “�[submit "送信する”]p>

ーーーーーーーーーーーーーー

これで、この画像みたいな内容になります。

以下を参照して、いらないところは削除したり、
日本語の部分を好きな文章に変えて使ってくださいね。

「フォーム」コードのカスタマイズ方法

上記でご案内した「フォーム」のコードを変更すると
記載している項目・内容が変更できます。

（色を変えたい方は、
このあとでお話する「CSS」の方を編集してください）

お名前の入力欄を例にして説明しますね。

お名前の入力欄のコードは、この部分です。

<tr>
<th>必須 お名前</th>
<td>[text* your-na[text* your-name watermark”例：あなたのお名前”]r> </tr>

色をつけてご説明します。

<tr>

<td>[text* your-na[text* your-name watermark”例：あなたのお名前"]p>

</tr>

●「必須」を「任意」に変えたい時

オレンジ色で書かれた部分

必須　を

任意　に書き換えてください。

●例文テキスト「例：あなたのお名前」を書き換えたい時

<td>[text* your-name[text* your-name watermark”例：あなたのお名前"]

の青地　例：あなたのお名前　部分を好きな言葉に書き換えます。

例文テキスト自体がいらない場合は

[text* your-name] [text* your-name]すると、まっしろな入力欄だけになります。

●「住所」欄がいらない場合

以下の<tr>〜</tr>までの一段をまるっと削除します。

<tr>
<th>必須ご住所</th>
<td class=”address-100″>[text* addr id:add[text* addr id:addr watermark”例：　東京都中央区銀座１２３４５”]t;/tr>

（※　ここでは説明のために文字に色をつけましたが
実際に貼り付けるコードは文字だけで、同じ色は出ないのでご心配なく^^)

フォームをカスタマイズしたら、
次はお知らせメールを合わせて設定します。

「メール」にコピペするコード

続いて「メール」欄です。

「メール」の設定は２種類あります。

１）お問い合わせがあった時、
内容を　【自分に知らせるためのメール】　　と

２）お問い合わせに入力した内容を
確認のために　【お客さまご自身に送るメール】　です。

２）の方は設定しなくても使えます。

ですが、設定しておいた方が、ぐっと
「ちゃんとしたお問い合わせフォーム」っぽくなりますし

お客様は、お問い合わせしたはいいけれど
後から「何て問い合わせたっけ？」とわからなくなることもあるので
確認用に残しておくのは、とっても親切なことです。

一手間ありますが、ぜひ両方設定しておくことをお勧めします。

自分宛のメール設定

まず１）の自分宛に届くメールの設定です。

「メール」タブにはこのような入力欄があります。

「送信先」・・・１）送信先メールアドレスを指定

お知らせメールを「あなたのどのメルアドへお届けするか？」を指定します。

初期設定ではWordPressに登録したメールアドレスが自動的に入っています。
メールの送り先を変更したい時は、ここを書き換えてください。

「送信元」・・・２）送信元メールアドレスを指定

あなたに届けるメールが「誰から届いたか」表示を変えるだけ　の機能です。

・送信元の名前
自動的にWordPressのサイト名が入っています。
自分宛のメールなので、そのままで良いと思いますが、
変更したい時はここを書き換えてください。

・メールアドレス
この時、メールアドレスは自動的に
「wordpress@(サイトのドメイン）」になっています。

そんなアドレス作っていなくても、勝手にそうなっています（笑）

これも自分宛なので、放っておいてもいいですが
気になる方は＠より左側を実在のアドレスに変えてもいいでしょう。
この時、右側の（サイトドメイン側は）変更できませんのでご注意ください。

「題名」・・・３）メールのタイトル設定

あなたに届くお知らせメールのタイトルを設定します。

初期設定では、お客様に入力していただいた「タイトル」が
表示されるようになっています。

が、先ほどご案内した、フォームのコードでは
「タイトル」欄は削除しています。
（お客様のお手間を省くためです）

そのため、ここでは「タイトル」は使わずに
自分宛に届いた時にわかりやすいタイトルを

例えば・・「（ブログ名）にお問い合わせがありました」などに
変更しておきましょう。

「追加ヘッダー」

Cc、Bccなど追加できる機能ですが
使わないのでここでは割愛します。

「メッセージ本文」・・・４）メッセージ本文

これは、あなた宛に届くお知らせメール本文です。

フォームで設定した内容が反映されるように、「コード」を
正しく書く必要がありますので、
以下のテキストをコピペして使ってくださいね。

コード以外のところは
お好みの文言に自由に書き換えてくださいね。

ーーーーーーーーーーーーーー

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

ホームページにお問い合わせがありました。

このメールはホームページから送信された自動メールです。

以下の内容をご確認ください。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

ご相談内容

[checkbox-inq]

お名前

[your-name]

メールアドレス

[your-email]

会社名

[your-company]

部署名

[your-dept]

お電話番号

[your-tel]

郵便番号/ご住所

[zip][pref][addr]<[zip][pref][addr]ーーーーーーーーーーーーーー

※住所がいらない、などフォームで削除した部分がある方は
メールのその部分も消しておいてください。

お客様宛のメール設定

お客様宛のメール設定画面は隠れています。

メール設定の一番下にある、

「メール（２）を使用」にチェックを入れてください。

すると、同じようなメール入力欄が増えます。

「送信先」・・・お客様のメールアドレス

お客様が入力したご自身のメールアドレスが
自動的に入っています。これはそのままにしておいてください。

「送信元」・・・１）お客様に通知される送信者名

ここには自動的にWordPressブログのサイト名が入ります。

そのままでも良いのですが、
メールを受け取ったお客様にわかりやすいように
サイト名＋あなたご本人のお名前、
または会社名、肩書きなどに変更しておくとわかりやすいですね。

また、メールアドレスは自動的に
「wordpress@(サイトのドメイン）」になっています。

お客様から見えるところなので、
サイトドメインの連絡用アドレスを取得し、ここに表示させておきたいですね。

「題名」・・・２）メールのタイトル設定

お客様に届くお知らせメールのタイトルを設定します。

初期設定では、お客様に入力していただいた「タイトル」が
表示されるようになっています。

こちらも、ご自身宛同様「タイトル」欄は削除していますので、

「お問い合わせありがとうございます」＋「サイト名」

などに変更しておきましょう。

「追加ヘッダー」・・・メール返信先

お客様が届いたメールに返信したら
どこに届くかを設定するところです。

WordPressに登録したメールアドレスが自動的に入っているので
を変更したい時は書き換えてください。

「メッセージ本文」・・・４）メッセージ本文

本文には、お客様が入力した内容が
自動的に挿入される様に、コードを正しく書く必要があります。

以下のテキストをコピペしてください。

ーーーーーーーーーーーーーー

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

お問い合わせありがとうございます。
このメールはホームページから送信された自動メールです

以下の内容をご確認ください。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

—-お送りいただいた内容—–

【ご相談内容】

[checkbox-inq]

【お名前】

[your-name]

【メールアドレス】

[your-email]

【御社名】

[your-company]

【部署名】

[your-dept]

【お電話番号】

[your-tel]

【郵便番号/ご住所】

〒[zip]
[addr]

【メッセージ本文】

[your-message]

—ご入力内容は以上です—–

ーーーーーーーーーーーーーー

最後に、署名を入れるのがお勧めです。

署名とは、メール文末に入れる連絡先のことです。

たとえば、私はこんな署名を
メール文末に入れています。

　↓

-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵

村重　敦子　Atsuko Murashige

猫でもわかるWordPressレッスン

info@wp-firststep.com

https://wp-firststep.com/

-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵

デザイン、同じにしていただいてもいいですよ。
え、やだ？（笑）

まだ用意していない方は、
こんなデザインサンプルなどから
お好みのものを選んで作ってくださいね。

https://ferret-plus.com/11764

さてこれで内容ができました。

続いてデザインCSSです。

「追加CSS」にコピペするコード

以下のコードを「追加CSS」に貼り付けてください。

ーーーーーーーーーーーーーー

/*全体の文字の大きさ*/
.CF7_table{
font-size:1.1em;
}

/*「必須」文字デザイン*/
.CF7_req{
font-size:.9em;
padding: 5px;
background: #F57500;
color: #fff;
border-radius: 3px;
margin-right: 5px;
}

/*「任意」文字デザイン*/
.CF7_unreq{
font-size:.9em;
padding: 5px;
background: #bdbdbd;
color: #fff;
border-radius: 3px;
margin-right: 5px;
}

/*タイトル列（左列）デザイン*/
.CF7_table{
margin:0 50px;}

/* 背景グレー・
* PCサイズ横幅35% */
@media screen and (min-width: 768px){
.CF7_table th{
width:30%;
background-color:#ebedf5!important;
}
}

/* スマホ・タブレットは
横幅100% */
@media screen and (max-width: 900px){
.CF7_table tbody,
.CF7_table tr, .CF7_table td{
display: block;
width: 100%;
}
.CF7_table th{
width:100%;
display:block;
margin: 0 auto;
border:none;
background-color:#ebedf5!important;
}
}

/* 「送信する」ボタンデザイン */
.wpcf7 input.wpcf7-submit {
background-color:#F57500;
border:0;
color:#fff;
font-size:1.2em;
font-weight:bold;
margin:0 auto;
}

/* 中央に合わせる */
.CF7_btn{
text-align:center;
margin-top:20px;
}

/*境界線の打ち消しと書き直し */
table tbody tr td,table{
border:0;
}

table tr{
border-top: 2px solid #e5e5e5;
}

ーーーーーーーーーーーーーー

CSSは以上です。

どうでしょう、できましたか？^^

色を変える方法

このサンプルでは、グレーとオレンジのデザインにしましたが
変えたい場合もありますよね。

そんな時は、このコードの「数字コード」部分を書き換えてください。

以下の、色がついているところが
数字コードです。

変更したいところを確認してください。

ーーーーーーーーーーーーーー

/*全体の文字の大きさ*/
.CF7_table{
font-size:1.1em;
}

/*「必須」文字デザイン*/
.CF7_req{
font-size:.9em;
padding: 5px;
background: #F57500;
color: #fff;
border-radius: 3px;
margin-right: 5px;
}

/*「任意」文字デザイン*/
.CF7_unreq{
font-size:.9em;
padding: 5px;
background: #bdbdbd;
color: #fff;
border-radius: 3px;
margin-right: 5px;
}

/*タイトル列（左列）デザイン*/
.CF7_table{
margin:0 50px;}

/* 背景グレー・
* PCサイズ横幅35% */
@media screen and (min-width: 768px){
.CF7_table th{
width:30%;
background-color:#ebedf5!important;
}
}

/* 「送信する」ボタンデザイン */
.wpcf7 input.wpcf7-submit {
background-color:#F57500;
border:0;
color:#fff;
font-size:1.2em;
font-weight:bold;
margin:0 auto;
}

/* 中央に合わせる */
.CF7_btn{
text-align:center;
margin-top:20px;
}

/*境界線の打ち消しと書き直し */
table tbody tr td,table{
border:0;
}

table tr{
border-top: 2px solid #e5e5e5;
}

ーーーーーーーーーーーーーー

Webサイトでは、色をこのように数字コードで表します。

好みの色を探すには、こちらのサイトがわかりやすくて便利ですよ^^

https://www.colordic.org/