コピペでできる！ContactForm7でかっこいいお問い合わせフォームを作る方法
お問い合わせフォームプラグイン、
ContaftForm7は
初期設定のままだと、こんなにシンプルです。
もちろんこのままでも使えるんですが
コピペだけでこんなに
かっこよくなったらどうでしょう？
全然見栄えが違いますよね^^
お好みの色、内容にカスタマイズして使ってくださいね。
・この記事の内容・
ContactForm７コンタクトフォーム７にコピペするコード
コンタクトフォーム７を使ったことがない方のために
設定手順からお話します。
コンタクトフォーム７のメニューから
「新規追加」すると
「フォーム」「メール」
「メッセージ」「その他の設定」
の４つを設定できるようになっています。
まず、この「フォーム」を使って
メルアド、名前など、
お客様に何を入力していただくかをカスタマイズするのですが
かっこいいデザインにするにはちょっと仕込みが必要ですので
以下のコードをコピーして、
必要なところはちょっと変えて使ってください。
「フォーム」にコピペするコード
まず、「フォーム」から
以下のコードを「フォーム」欄に
貼り付けてください。
ーーーーーーーーーーーーーー
<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”例： 東京都中央区銀座１２３４５”];
</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”例： 東京都中央区銀座１２３４５”]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]
—ご入力内容は以上です—–
ーーーーーーーーーーーーーー
最後に、署名を入れるのがお勧めです。
署名とは、メール文末に入れる連絡先のことです。
たとえば、私はこんな署名を
メール文末に入れています。
↓
デザイン、同じにしていただいてもいいですよ。
え、やだ？（笑）
まだ用意していない方は、
こんなデザインサンプルなどから
お好みのものを選んで作ってくださいね。
さてこれで内容ができました。
続いてデザイン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サイトでは、色をこのように数字コードで表します。
好みの色を探すには、こちらのサイトがわかりやすくて便利ですよ^^
CSSを貼り付けても上手くいかない場合
ご紹介したコードはテーマLightningで
綺麗に表示される様に設定しました。
お使いのテーマによっては、うまく表示されない可能性もあります。
理由：
この機能は、htmlの「テーブル」という
表組みのコードを使っています。
お使いのテーマによっては、
あらかじめ「テーブル」にデザインが適用されるように
CSSがついている場合があります。
そんな場合にこのCSSをコピペをすると、
デザイン指定が二重になって、上手くいかないことがあります。
その時は、あらかじめついている
デザイン指定を一旦無効にすればokですが・・
テーマによって異なるので
コピペでok、というわけにはいかないんです。
デザインが重なって上手くいかない方は、以下のフォームからお知らせください。
https://wp-firststep.com/questionbox/
サイトを拝見して、うまく表示されるCSSを追記いたします。
使っていただけたら嬉しいです^^
「猫でもわかる！」くらい簡単にわかりやすく、WordPressの使い方をサポートする、WordPressソムリエです。デザインを学んだ後、なぜかレストランでワインサービスに従事。絵も描けるワインソムリエでした。その後大手通信会社に勤めIT・Webの各種サポートを経験。ソムリエもWebも常に「専門知識をお客様に合わせてわかりやすくご提案し、期待以上のサービスをする」ことをモットーとしています。テクニカルサポートの経験は、通算1,100人以上。現在はWebデザイン・ディレクターをしながら、ブログ集客をしたい方へWordPressの制作、使い方のレクチャーなどを行っています。
