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

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

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

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

 

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

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

 

ContactForm7コンタクトフォーム7にコピペするコード

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

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

 

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

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

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

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

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

 

まず、「フォーム」から

 

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

 

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

<table class=”CF7_table”>

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

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

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

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

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

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

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

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

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

</table>
<p class=”CF7_btn”>[submit “[submit "送信する”]p>

 

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

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

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

 

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

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

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

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

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

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

 

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

<tr>

<th><span class=”CF7_req”>必須</span> お名前</th>

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

</tr>

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

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

<span class=”CF7_req”>必須</span> 

<span class=”CF7_unreq“>任意</span> に書き換えてください。

 

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

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

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

 

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

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

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

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

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

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

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

 

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

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

 

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

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

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

2)の方は設定しなくても使えます。

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

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

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

 

自分宛のメール設定

 

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

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

 

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

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

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

 

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

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

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

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

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

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

 

「題名」・・・3)メールのタイトル設定

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

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

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

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

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

「追加ヘッダー」

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

 


「メッセージ本文」・・・4)メッセージ本文

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

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

 

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

 

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

=======================

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

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

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

=======================



ご相談内容

[checkbox-inq]


お名前

[your-name] 



メールアドレス

[your-email]


会社名

[your-company]


部署名

[your-dept]


お電話番号

[your-tel]


郵便番号/ご住所

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

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

 

 

お客様宛のメール設定

 

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

 

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

「メール(2)を使用」にチェックを入れてください。

 

 

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

 

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

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

 

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

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

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

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

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

 

「題名」・・・2)メールのタイトル設定

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

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

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

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

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

 

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

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

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

 

「メッセージ本文」・・・4)メッセージ本文

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

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

 

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

 

=======================

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

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

=======================





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



【ご相談内容】

[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;
}
}

/* スマホ・タブレットは
横幅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;
}

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

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

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

https://www.colordic.org/

 

CSSを貼り付けても上手くいかない場合

ご紹介したコードはテーマLightningで
綺麗に表示される様に設定しました。

お使いのテーマによっては、うまく表示されない可能性もあります。

理由:
この機能は、htmlの「テーブル」という
表組みのコードを使っています。

お使いのテーマによっては、
あらかじめ「テーブル」にデザインが適用されるように
CSSがついている場合があります。

そんな場合にこのCSSをコピペをすると、
デザイン指定が二重になって、上手くいかないことがあります。

その時は、あらかじめついている
デザイン指定を一旦無効にすればokですが・・
テーマによって異なるので
コピペでok、というわけにはいかないんです。

デザインが重なって上手くいかない方は、以下のフォームからお知らせください。

https://wp-firststep.com/questionbox/

サイトを拝見して、うまく表示されるCSSを追記いたします。

使っていただけたら嬉しいです^^

 

WordPressに関するご質問にお答えします。
こちらのフォームから
お気軽にお寄せください^^
https://wp-firststep.com/questionbox/