この記事では【Contact Form 7】の使い方〜カスタマイズ(コピペ可)まで丁寧に解説しています。
スパム対策プラグイン「Akismet」と連携させたコードを使用しているので、まずはそちらを設定しておくとスムーズになります。
現在「Akismet」は不要なプラグインです。フォームのスパム対策は以下のプラグインを推奨しているので、後ほど解説します。

フォーム完成後は以下のようなデザインになります。

PC表示

スマホ表示
スマホでは縦並びに変わるレスポンシブデザインです。
目次・読みたい所へタップできます
Contact Form 7をインストール
「管理画面」
↓
「プラグイン」
↓
「新規追加」をクリック
↓
検索窓に「Contact Form 7」と入力」
↓
「今すぐインストール」をクリック
↓
ボタンが「有効化」に切り替わったらクリック
Contact Form 7の設定
「管理画面」
↓
「お問い合わせ」
↓
「新規追加」をクリック
↓
お問い合わせフォームのカスタマイズコード
こんな画面↓ ↓に切り替わるので、フォームに入力されているテキストを全部削除。
そこに、以下のコードを貼り付ける。
CF7フォームcopyする<table class="inquiry"> <tr> <th> <span class="haveto">必須</span><span>お名前</span> </th> <td> [text* your-name class:textsp placeholder"影影 男男"] </td> </tr> <tr> <th> <span class="haveto">必須</span><span>メールアドレス</span> </th> <td>[email* your-email class:mailsp placeholder"[email protected]"]</td> </tr> <tr> <th> <span class="any">任意</span><span>電話番号</span> </th> <td> [tel your-tel class:tel placeholder"090-1111-2222"] </td> </tr> <tr> <th> <span class="haveto">必須</span><span>ドロップダウンメニュー</span> </th> <td> [select* dpmenu include_blank class:drop "サンプル1" "サンプル2" "サンプル3"] </td> </tr> <tr> <th> <span class="any">任意</span><span>チェックボックス横並び【1つを選択】</span> </th> <td> [checkbox checkbox-1 exclusive use_label_element default:1 class:check1 "サンプル4" "サンプル5" "サンプル6"] </td> </tr> <tr> <th> <span class="haveto">必須</span><span>チェックボックス横並び【複数を選択】</span> </th> <td> [checkbox* checkbox-2 use_label_element default:1 class:check2 "サンプル7" "サンプル8" "サンプル9"]</td> </tr> <tr> <th> <span class="any">任意</span><span>チェックボックス縦並び【1つを選択】</span> </th> <td> [checkbox checkbox-3 exclusive use_label_element default:1 class:verticallist class:check3 "サンプル10" "サンプル11" "サンプル12"] </td> </tr> <tr> <th> <span class="haveto">必須</span><span>チェックボックス縦並び【複数を選択】</span> </th> <td> [checkbox* checkbox-4 use_label_element default:1 class:verticallist class:check4 "サンプル13" "サンプル14" "サンプル15"] </td> </tr> <tr> <th> <span class="any">任意</span><span>ラジオボタン横並び</span> </th> <td> [radio radio-1 use_label_element default:1 class:radio1 "サンプル16""サンプル17""サンプル18"] </td> </tr> <tr> <th> <span class="haveto">必須</span><span>ラジオボタン縦並び</span> </th> <td> [radio radio-2 use_label_element default:1 class:verticallist class:radio2 "サンプル19""サンプル20""サンプル21"] </td> </tr> <tr> <th> <span class="any">任意</span><span>数値のスピン形式</span> </th> <td> [number number-1 min:10 max:100 placeholder class:number1 "数値の値は指定できる"] </td> </tr> <tr> <th> <span class="haveto">必須</span><span>日付</span> </th> <td> [date* date-960 placeholder class:datesp ] </td> </tr> <tr> <th> <span class="any">任意</span><span>中級者向け回答形式のタグ</span> </th> <td> [quiz quiz-1 class:qyizsp "質問:2019年に発表された新元号は?|令和"] </td> </tr> <tr> <th> <span class="haveto">必須</span><span>郵便番号</span> </th> <td> [text* your-postalcode class:p-postal-code placeholder"123-4567"] </td> </tr> <tr> <th> <span class="haveto">必須</span><span>都道府県</span> </th> <td> [text* your-prefectures class:p-region placeholder"◯◯県"] </td> </tr> <tr> <th> <span class="haveto">必須</span><span>ご住所</span> </th> <td> [text* your-address class:p-locality placeholder"○○市○○1-2-3 ○○マンション 101号室"] </td> </tr> <tr> <th> <span class="haveto">必須</span><span>お問い合わせ内容</span> </th> <td> [textarea* your-message class:content placeholder "1行以上のテキスト入力欄"] </td> </tr> </table> [acceptance acceptance-442 class:spam1]スパムメール防止のため、こちらのボックスにチェックを入れてから送信してください。 [submit id:formbtn "上記の内容で送信する"]
「必須」を消したい場合は、上記の<span class="haveto">必須</span>
部分を削除。
「任意」も同様に<span class="any">任意</span>
部分を削除してください。
またデザインだけでなく「必須」と「任意」は、ショートコードの最初の文字列の最後に* アスタリスク
を付けるか否かで、設定できます。
その他の不要なコード(項目)は<tr>〜</tr>
部分を削除してください。
回答形式のタグ=[quiz]
は、質問に答えられないと送信できないため、botによるスパムを防ぎ、セキュリティを向上できます。(後ほどセキュリティプラグインを紹介しますが、プラグインを増やしたくない人はこの方法でもいいですね。)
また少し高度な使い方をすると、採用フォームやターゲット属性を絞りたい時に、特定の人しか答えられないような質問をし、スクリーニングをかけることもできます。
あとは「日本語部分」を好きな言葉に変更すればオリジナルフォームの原型ができます。(この後CSSで調整します。)
郵便番号から住所を自動入力したい
読者の方から以下のような質問をいただいたので備忘録として、回答を載せておきます。

コンタクトフォーム7読者からの質問
contact form7カスタマイズの記事を拝見させていただき、デザインも良く取り入れさせてもらっております。
郵便番号の方に自動住所入力を入れたいと思いまして、zipaddr-jpプラグインをインストールしコードをコンタクトフォームテキストのyour-postalcode の後の部分に挿入してみましたが、囲んでいるデザインが変わってしまい上手くいきません。
挿入する場所が悪いのでしょうか?それともフォームのソースコード自体を変えないと駄目なのでしょうか?宜しければご教授下さい。
郵便番号テキストフォーム
[text* your-postalcode class:p-postal-code placeholder”123-4567″] zipaddr-jpプラグインで取得した自動住所入力コード[text* zip id:zip]
私はzipaddr-jp」というプラグインをこの問い合わせで知ったのですが、これは便利。
インストールして専用コードに置き換えるだけで郵便番号を入力すると番地以外自動入力されます。

郵便番号自動入力
先ほどのコードを以下のように変更してください。
郵便番号・変更前[text* your-postalcode class:p-postal-code placeholder"123-4567"]
↓
郵便番号・変更後copyする[text* your-postalcode zip id:zip placeholder"123-4567"]
都道府県・変更前[text* your-prefectures class:p-region placeholder"◯◯県"]
↓
都道府県・変更後copyする[text* your-prefectures pref id:pref placeholder"◯◯県"]
ご住所・変更前[text* your-address class:p-locality placeholder"○○市○○1-2-3 ○○マンション 101号室"]
↓
ご住所・変更後copyする[text* your-address city id:city addr id:addr placeholder "○○市○○1-2-3 ○○マンション 101号室"]
「青字」部分を削除して「赤字」のプラグイン専用コードに置き換えています。
採用フォームなどで重宝すると思うので、よかったら活用してください。
コメント蘭にて、上記の変更後のコードに自動返信メール等で使うショートコードが抜けているとご助言をいただきました。
現在は修正済みですので、迷われていた方は申し訳ありませんでした。
またこうしたコメントは非常にありがたく管理人も助かっておりますので、何かあれば遠慮なくおっしゃってくださいませ〜。
今回の「フォーム用コード」は「Tableタグ」を使っています。もう少しデザインをカスタマイズしたい方は、こちらを参考にして下さい。

お問い合わせフォームのメール設定
まずは、お問い合わせがあった際、自分に送られてくるメール設定をしましょう。
送信先:自分のメールアドレス
|
送信元:自分のメールアドレス
|
題名:任意のものを入力
|
追加ヘッダー:変更しない
|
メッセージ本文:任意の文と※ショートコードを入力
※よく使われるショートコード
- [your-name]ー相手の名前
- [your-email]ー相手のメールアドレス
- [your-message]ー問い合わせ内容
設定が完了したら、次は問い合わせをくれた相手に送る自動返信メール設定をします。※不要な方は飛ばしてください。
メール設定画面で下にスクロール【メール(2)を使用】にチェックをいれると、設定項目が表示されます。
送信先:[your-email]
|
送信元:サイト名や自分の名前<自分のメールアドレス>
|
題名:任意のものを入力
|
追加ヘッダー:変更しない
|
メッセージ本文:画像参照
送信先を[your-email]にすると、問い合わせ時に頂いたメールアドレスに自動返信メールを送ってくれます。
これでメール設定は終了です。
お問い合わせメッセージ設定
続いて、お問い合わせフォームで表示されるメッセージを設定します。ここはデフォルトのままでも問題ないですが、変更する場合は以下の画像を参考にして下さい。(サンクスページを作るなら設定不要)
ここまで設定が終わったら「保存ボタン」を忘れずに。
上記画像の「その他の設定」は設定不要。
Contact Form 7のCSSコード
続いてCSSを子テーマのstyle.css
にコピペします。
- 外観の中にある「テーマの編集」をクリック
- コード貼り付け
- ファイルを更新をクリック
子テーマの使い方はこちら

style.csscopyする/*Contact Form 7カスタマイズ*/ /*スマホContact Form 7カスタマイズ*/ @media(max-width:500px){ .inquiry th,.inquiry td { display:block!important; width:100%!important; border-top:none!important; -webkit-box-sizing:border-box!important; -moz-box-sizing:border-box!important; box-sizing:border-box!important; } .inquiry tr:first-child th{ border-top:1px solid #d7d7d7!important; } /* 必須・任意のサイズ調整 */ .inquiry .haveto,.inquiry .any { font-size:10px; }} /*見出し欄*/ .inquiry th{ text-align:left; font-size:14px; color:#444; padding-right:5px; width:30%; background:#f7f7f7; border:solid 1px #d7d7d7; } /*通常欄*/ .inquiry td{ font-size:13px; border:solid 1px #d7d7d7; } /*横の行とテーブル全体*/ .entry-content .inquiry tr,.entry-content table{ border:solid 1px #d7d7d7; } /*必須の調整*/ .haveto{ font-size:7px; padding:5px; background:#ff9393; color:#fff; border-radius:2px; margin-right:5px; position:relative; bottom:1px; } /*任意の調整*/ .any{ font-size:7px; padding:5px; background:#93c9ff; color:#fff; border-radius:2px; margin-right:5px; position:relative; bottom:1px; } /*ラジオボタンを縦並び指定*/ .verticallist .wpcf7-list-item{ display:block; } /*送信ボタンのデザイン変更*/ #formbtn{ display: block; padding:1em 0; margin-top:30px; width:100%; background:#ffaa56; color:#fff; font-size:18px; font-weight:bold; border-radius:2px; border: none; } /*送信ボタンマウスホバー時*/ #formbtn:hover{ background:#fff; color:#ffaa56; }
送信ボタンカラーはbackground
=背景カラーと緑字部分
でお好きなカラーに変更してください。
Contact Form 7お問い合わせページの作成
ここまで来たら、あとはコピペするだけでお問い合わせページが完成します。
【管理画面】
↓
【お問い合わせ】
↓
【コンタクトフォーム】
↓
【先ほど設定したお問い合わせフォーム】
↓
【ショートコードをコピー】
続いて

【管理画面】
↓
【固定ページ】
↓
【新規作成】
先ほどコピペしたショートコード
をエディタ(ビジュアルでもテキストでもOK)に貼り付け、タイトル入力後に公開。
最後に、お問い合わせフォームから自分宛にメールを送りテストしてみましょう。
メールが届けば設定完了です。
Contact Form 7の読み込みを使用するページだけに変更
ContactForm7は重い、遅いという声が時折ネットに出ています。それならば、フォームを使用するページだけに読み込ませましょう。
以下のコードを「functions.php」に追記してください。

functions.php編集
functions.phpcopyする//コンタクトフォーム7読み込み制限 function wpcf7_file_load() { add_filter( 'wpcf7_load_js', '__return_false' ); add_filter( 'wpcf7_load_css', '__return_false' ); if( is_page( 'otoiawase' ) ){ if ( function_exists( 'wpcf7_enqueue_scripts' ) ) { wpcf7_enqueue_scripts(); } if ( function_exists( 'wpcf7_enqueue_styles' ) ) { wpcf7_enqueue_styles(); } } } add_action( 'template_redirect', 'wpcf7_file_load' );
これでコンタクトフォーム7を使用しているページだけ読み込まれます。
ContactForm7のセキュリティを高める

ReCAPTCHAマーク
Google推奨の上記セキュリティをプラグインで導入します。
これによりスパムとおさらばできます。

Contact Form 7のDOMイベントでサンクスページを作成する
問い合わせフォームだけなら上記の設定だけで十分なんですが、ビジネスとしてサイトを活用している方はサンクスページの設定も知っておくと便利です。
以前はon_sent_ok
やon_submit
を使用してサンクスページを作成していましたが、現在この方法は非推奨とされており、2017年度内に廃止されました。
ネット上にあるサンクスページの作成は古いものもあるので注意。
固定ページにサンクスページを作る

【管理画面】
↓
【固定ページ】
↓
【新規作成】
例えば、こんな感じのページを作成します。
これは問い合わせに対する簡易的なサンクスページですが、やり方を覚えておけば「クロスセル」などで別商品を勧めるページを作成することもできますね。
ある申し込み(購入や登録など)に対し、類似するまたはセット購入するとお得な商品などを勧めること。
例:テーブルの申し込み→そのテーブルに合う椅子を勧めるなど。
上記サンプルは以下コードを使用しています。
HTMLcopyする<div class="thanksPage"><img class="wp-image-22" src="画像URL" alt="画像の名前" width="150" height="150" /></div> <p>折り返し自動返信メール(確認メール)を送ってあります。</p> <p>もし、届かないようでしたら、【<strong>メールアドレスの間違い</strong>】または【<strong>迷惑メールフォルダ</strong>】に入ってしまっている可能性がありますので、ご確認ください。</p>
style.csscopyする.thanksPage img{ float:left; }
width
の値で画像サイズを調整できます。
この時、お使いのテーマに固定ページを「1カラム」に変更することが出来れば見た目が良くなります。
実際の表示
ページ公開後、送信ボタンを押すとこのページに切り替わります。
サンクスページに「noindex」設定を忘れずに↓
サンクスページは「noindex」設定にする
サンクスページは、読者やお客さんのためになるページですがSEO的にはよろしくないページです。(内容がないページなので)
こういった場合は、このページを検索エンジンに検知されないようにする必要があります。
noindexとは……検索結果に表示させないようにするもの。
やり方については、以下の記事を参考にしてください。

「noindex設定」をしたら、XMLマップからも除外してあげると検索エンジンに対して親切です。

サイトマップからサンクスページを除外する
「PS Auto Sitemap」というプラグインでサイトマップを作成している方は、サンクスページをサイトマップから除外しましょう。(除外しないとサイトマップから見れるのでサプライズ感がなくなります。)
その場合はこちらの記事を参考にして下さい

問い合わせページにサンクスページコードを埋め込む
先ほど作成したサンクスページのURLをコピーしてください。
プレビューのURLではなく正規のURLをコピーする。
問い合わせフォーム(サンクスページを表示させたいページ)に移動し、テキストエディタの先頭に以下のコードを追加。
テキストエディタcopyする<script> document.addEventListener( 'wpcf7mailsent',function( event ){ location = 'サンクスページのURL'; }, false ); </script>
サンクスページURL
部分は、送信後に表示したいURLを貼り付けてください。後は、テスト送信して貼り付けたページが表示されればフォームの完成です。
以前読者の方より、サンクスページが上手く動作しないとコメントをいただきました。その時は原因不明だったのですが、別の方よりコメ解決方法を提示したコメントをいただけました。
同じく上手く動作しない方は、以下の方法を試してみてください。
こちらの「Contact Form 7の読み込みを使用するページだけに変更」のコードを削除し、コンタクトフォームの編集のフォーム内の一番上のところにスクリプトコードを記述したらうまくいきました。
Contact Form 7のQ&A
当記事のコメント欄ではこれまで様々な質問をいただきました。
もちろんすべてのお力になれたわけではありませんが、解決できたことをこちらにまとめておこうと思います。
生年月日の入力欄を”カレンダー形式”ではなく”ドロップダウンメニュー形式”に変更したい。
CSSが効きません。(デザインが変更されない)
キャッシュを削除してみて下さい。(ショートカットキー)
- Internet Explorer・FireFox・Google Chrome
- Windows=Ctrl + F5
- Safari
- Windows=Ctrl + R
- Internet Explorer・Safari・Google Chrome
- Mac=Command + R
- FireFox
- Mac=Command + Shift + R
自動返信メールに入力内容が反映されない。
以下の赤枠で囲ってある部分をメールに貼り付けて下さい。
またこちらのショートコード生成は以下の「赤字」部分で行なっているので好きなものに変更できます。
フォームタグcopyする[select* dpmenu include_blank class:drop "サンプル1" "サンプル2" "サンプル3"]
上記はドロップダウンメニューのサンプルです。
当サイトのコードを貼り付けたら、「閲覧できません (Forbidden access)」が表示された。
お使いのレンタルサーバーに「WAF設定」という項目があるはずなので、そちらを一度「OFF」にして下さい。
ラジオボタンやチェックボックスは最初から一つ選択されていますが、それをなしにできますか?
ラジオやチェックの初期値を外すには以下の「default:1」部分を削除してください。
フォームタグcopyする[checkbox* checkbox-4 use_label_element default:1 class:verticallist class:check4 "サンプル13" "サンプル14" "サンプル15"]
ただし、ラジオボタンに関しては初期値を設定することが推奨されているので、外すのであれば「チェックボックス」のが良いと思います。
入力欄フォームの幅を調整したい。
①調整したい入力欄の上で右クリック
↓
②「検証」をクリック
↓
③そうすると「input〜」みたいなコード(赤枠部分)がズラーっと出てきます。
この中の「width:◯◯」で幅を指定して下さい。
なので、赤枠内を全部コピーして「style.css」に貼り付け「width」の値を変更する、もしくは調整したいコードだけを抜き出してもOKです。
「必須」とテキストが横並びになりません。
フォームタグに<br>
タグが含まれていないかを確認して下さい。
プレースホルダーのテキストカラーを調整したい。
以下をstyle.cssに追記して「赤字」の箇所をお好きなカラーに変更して下さいませ〜。
style.csscopyするinput::placeholder { color: #ccc; }
「お問い合わせ内容」のテキストだけ下側に配置されて見栄えが悪い。
以下のコードを追記してみて下さい。
style.csscopyするtable.inquiry span { vertical-align: middle; }
TCD系テーマだと表示が崩れる。
TCD系テーマは、テーマにオリジナルのCSSが適用されていますので、以下を追記してみてください。
style.csscopyする/* 外側の枠線と背景を消す */ .wpcf7 { background: none; border: none; margin: 0; } /* フォーム外側の余白を消す */ .wpcf7 form { margin: 0; }
Contact Form 7【まとめ】
以上「Contact Form 7」の解説でした。
たくさん質問いただくうちになかなかの大作になってしまいましたね。
このプラグインは奥が深いので、まだまだできることがたくさんあります。もっと探求したい方は色々ググってみて下さいませ〜。
コピペですぐ使える・ブログデザイン用カスタマイズコードまとめ
WordPressのおすすめプラグイン・新旧19個を紹介
初めまして。
参考にさせて戴いて、フォーム作成したのですが、
レスポンシブでのスマホ表示でデザインが崩れてしまいます。
アドバイス頂けましたら幸いです。
Sato様
該当ページのURLを送っていただけますか?
よろしくお願いします。
カゲオ様
まだ公開していないのでご覧いただけるか分かりませんが、こちらになります。
よろしくお願いいたします。
ゆな様
サイト確認しました。以下のcssコードを追記してくださいませ〜。
よろしくお願いします。
カゲオ様
お返事遅くなり申し訳ございません。
先ほどCSSを追加し改善を確認しました。
本当にありがとうございます。
これからもカゲオ様のサイトを参考にさせていただきます。
何度も申し訳ございません。
解決できたはずの一番上の項目が再度青いままになってしまっていました。
@media内にも追記してみたりキャッシュを削除したりと試行錯誤したのですがど、素人な為どうにもならず再度お問合せさせていただきました。
何度もお手間をお掛けしてしまい申し訳ございません。
宜しくお願いいたします。
ゆな様
ありゃ、なんか青い箇所増えてますね。
以下のCSSを追記してくださいませ〜。
よろしくお願いします。
何度もお手間を取らせてしまい申し訳ございません。
やっと解決できました。
本当にありがとうございます。
カゲオ様のカスタマイズ記事にいつも助けられています。
大変恐縮なのですが、コンタクトフォーム7でどうしても一番上のお名前の項目だけ色が青くなってしまい、キャッシュを削除してみても直らなかったのでお問合せをさせていただきました。
試しに青くなってしまう項目の上に同じ項目を追加してみると、一番上(追加した項目)だけが青くなり今までの項目が正常な色になります。
使用しているテンプレがAFFINGER5 EXになるので何か関係があるのかもしれませんが、もし原因がわかりましたら宜しくお願いします。
ゆな様
テーマは関係ないと思いますので、該当ページのURLを送っていただけますか?
よろしくお願いします。
サンクスページや、郵便番号の自動入力など
大変参考にさせて頂いてます。
一つ質問がありコメントさせていただきました。
ContactForm7を使って
管理者、投稿者 意外による
投稿されている記事に対して、
post_statsを変更(公開から下書きへの一方通行)できるボタン
もしくは、カテゴリーを変更できるボタンを実装できますでしょうか。
ここ5日ほど、色々なサイトのサンプルコード を調べても
解決の糸口すら見えなく、ご相談させていただきました。
test_try様
うーん、ちょっとわからないですね。
申し訳ない。
カゲオ様
ご返信ありがとうございます!
ご経験があるカゲオ様にわからないと言うのが大きな収穫です!
他のアプローチを考えようと思います!
本当にありがとうございます!
カゲオさま
すべて上手くいきました。思い通りにいきまして満足です。
初心者ながら、こちらのサイトを参考に少しずつ勉強したいと思います。
本当にありがとうございました。
カゲオさま
先日は丁寧なご教授ありがとうございました。すみませんがもう一つ質問させてください。
強制的にpタグを消し、空白を解消できましたが、おっしゃる通り、チェックボックスや送信ボタンが表示されなくなりました。
当サイトのボタンを使う、というのは[submit id:formbtn “上記の内容で送信する”]
これをフォーム内に入れるのと、こちらのサイトのCSSを追加記述する以外に何か必要なのでしょうか?
yellow様
ありゃ上手くいきませんか……そしたらこれで試してみてください。
一番下の
</table>
の上に以下のコードを追記。よろしくお願いします。
カゲオさま
お世話になります。こちらのフォームを活用させていただいたのですが、ボックス内の入力欄の前に大きくスペースが空いてしまいます。
何が原因なのかどうしても分かりません。アドバイスをいただけますでしょうか?
yellow様
サイト拝見しました。
ボックス内のスペースは「pタグ」が大量に挿入されているのが原因なので、フォーム内に記載したコード上部に余白がないか確認してみてください。
特に余白もなく原因不明の場合は、以下のコードをCSSに追記すれば強制的にフォーム内の「pタグ」を消すことはできます。
ただし、オリジナルの送信ボタンも「pタグ」で囲まれていたので、このままだとそちらも消えてしまいます。その場合は、当サイトの送信ボタンを使ってくださいませ〜。
ここからは個人的な提案です。TCD系のテーマは、コンタクトフォーム用に外枠が用意されていますので、そちらを削除したい場合は以下のコードをCSSに追記してください。
またスマホで確認した際、表示が崩れていたので、以下も合わせて追記すると綺麗に表示されるはずです。
よろしくお願いします。
カゲオさま
早速の回答ありがとうございました。結局コードに余白はなく、原因不明だったのですが、強制的にpタグを消す方法で、こちらのボタンを使わせていただきます。
テーマの更新も併せてやってしまったので、どうも不安定で、うまくできたと思ったら、また崩れてしまったりですが、もう少し頑張ってみます。ありがとうございました。
2月からワードプレスの勉強を始めたばかりで、こちらのようなサイトで一字一句真似してから加工して使用させていただいております。大変勉強になっております。zipaddr-jpのプラグインもインストール・有効化してみましたが、郵便番号の自動入力が機能しません。
コードの間違いでしょうか。すいません、idを消したり試行錯誤したあげく分からずで、教えてください。
必須お名前
[text* your-name class:textsp placeholder”(例)山田 花子”]
必須ふりがな
[text* your-furi class:textsp placeholder”(例)やまだ はなこ”]
必須郵便番号
[text* your-postalcode zip id:zip placeholder”123-4567″]
必須都道府県
[text* your-prefectures pref id:pref placeholder”◯◯県”]
必須ご住所
[text* your-address city id:city addr id:addr placeholder “○○市○○1-2-3 ○○マンション 101号室”]
必須メールアドレス
[email* your-email class:mailsp placeholder”***@gmail.com”]
必須電話番号
[tel your-tel class:tel placeholder”090-1111-2222″]
必須希望するお仕事
[tel your-job class:job placeholder””]
必須動機やアピールポイント、ご連絡させていただく時間帯の希望など
[textarea* your-message 100/10 class:content placeholder “1行以上のテキスト入力欄”]
[acceptance acceptance-442 class:spam1]スパムメール防止のため、こちらのボックスにチェックを入れてから送信してください。
[submit id:formbtn “上記の内容で送信する”]
しば様
一応コードは問題ないようです。
該当ページのURLを送っていただければ、確認してみます。
よろしくお願いします。
カゲオさま
お返事ありがとうございます。こちらローカルのワードプレスでして、URLが送れません。
ローカルだと機能しないのでしょうか?
しば様
いえコードがあってれば、ローカルでも動きますよ。
よろしくお願いします。
コチラのカスタムは、有料テーマ「JIN」にも対応してますでしょうか?
一度導入してみた所、PCでは綺麗に表示されるのですが、スマホだと表示が微ずれしてまして、、折角参考にさせて頂いたカスタムをやめました。。。
しかし、カゲサイさんのカスタムした問い合わせフォームを見てしまった、私としてはカスタムなしのフォームには納得いっておらず、、、
おっじ様
該当ページのURLを送っていただけますか?
よろしくお願いします。
お手数をお掛けして申し訳ございません。
テストページにて作成しました。
カスタム無しはこちらです。
おっじ様
キャッシュを削除すれば解決するかと思います。
よろしくお願いします。
確認して頂きありがとうございます。
私のスマホで見ると、送信ボタンが右側に突き抜けてしまってるんですよね。。。
/*送信ボタンのデザイン変更*/
の
width:350px;
の部分を削除しましたら、突き抜けることなく表示できました!
しかし、これが正しい対処法なのかは、ほぼ素人の私にはわかりません。。。
カゲオ様
先日、郵便番号などのコード修正案をコメントさせていただきましたツルトロと申します。
今回、もう一点もしかしたら、「こう記載された方が良いのかもしれない」と思った部分がりましたので再度コメントさせて頂きました。
————————————————————
Q&Aの記事にて
Q「プレースホルダーのテキストカラーを調整したい」
A「赤字」の箇所をお好きなカラーに変更して下さい。
input::placeholder {
color: #ccc;
}
————————————————————
こちらは、「スタイルシートのコードに追加」して更にフォントカラーを自由に変更するという意味で合っていますでしょうか。
私は、スタイルシートにContact Form 7のCSSをコピペさせて頂き、
/*入力例の文字色設定*/
input::placeholder {
color: #ccc;
}
というコードを最終行に追加しました。(色は薄灰色になったので変更していません)
というのもCSSのコードを色々検索したのですが、私には見つけられなかったので追記したという経緯です。(理解が間違っていたらごめんなさい)
つまり、「コードの追加をして色を変えてみてね」的な回答であれば、より良いかなと感じました。
もし、認識が合っていればご検討下さい。
ツルトロ様
ご助言ありがとうございます。
ただいま修正しておきました。
またサイトも確認させていただきましたよ。
知らないことも書いてあり、なかなか楽しく読ませていただきました。
いつもお世話になっています。
レスポンシブ化はされているのですが、スマホ(私のはiOSです)でみると、縦並びに変わらず、さらに入力欄がはみ出てしまいます。
どこが間違っているのか…。どうやって調整すればよいか教えてください。
テプラ様
該当ページのURLを送っていただけますか?
よろしくお願いします。
カゲオ様
すごくためになるContact Form 7の設定方法を公開いただき、とても勉強になりました。
私も記事を参考にさせていただき、かなりクオリティーが上がったので感動しています。
今回は、「郵便番号を入力すると住所が自動入力される」という内容を拝見し、私なりに改良を行った点がありましたので、もし参考になればと思いご連絡致しました。
====================================================
【郵便番号】
[text* zip id:zip placeholder”123-4567″]
↓
[text* your-postalcode zip id:zip placeholder”123-4567″]
【都道府県】
[text* pref id:pref placeholder”◯◯県”]
↓
[text* your-prefectures pref id:pref placeholder”◯◯県”]
【ご住所】
[text* city id:city addr id:addr placeholder “○○市○○1-2-3 ○○マンション 101号室”]
↓
[text* your-address city id:city addr id:addr placeholder”○○市○○1-2-3 ○○マンション 101号室”]
====================================================
要は、ショートコードを追加したということです。
このコード(ソース)でないと、自分宛てに来る連絡に上記の情報が反映されないという問題点があったため自分なりの改良を施しました。
もし、お役に立つのであればこの素晴らしい記事を見られる皆さんにも共有して頂けるかなと考えご連絡した次第です。
私も見様見真似ながら、個人や自社向けのサイトを管理する立場ですので、今回は本当に感動しました。ありがとうございます。
これからも、更新楽しみにしています。
ツルトロ様
おぉーーー確かにそうですね。申し訳ありません。
実は読者さんからコメントをいただくことで、記事をアップデートしてきた経緯もありますので、こうした助言は非常に助かります。
こちらこそ、わざわざありがとうございました。さっそく記事に反映させます。
今後ともよろしくお願いします。
カゲオ様
記事に記載されている通り「zipaddr-jp」をインストールしてフォームを設定したのですが、自動入力ができません。どんなけ調べても原因がわかりません…
考えられる原因はなんでしょうか?
お返事いただけましたら幸いです。
よろしくおねがいします。
andy様
該当ページのURLを送っていただけますか?
よろしくお願いします。
カゲオ 様
お返事ありがとうございます。
以下のサイトになります。
よろしくお願いします。
andy様
サイト拝見いたしました。
「市区町村」のコードが間違っていると思われます。以下のようになっているか再度ご確認お願いします。(特に太字の部分です)
[text* city id:city addr id:addr placeholder “○○市○○1-2-3 ○○マンション 101号室”]
カゲオさま
初めまして。
とても素敵なフォームデザインのため、
利用させていただいております。
PC表示時、項目の一番下「お問い合わせ内容」のタイトルのみ、
一番下の表示になってしまい困っております。
これはテーマ自体のCSSの問題なのでしょうか。
レスポンシブの追加CSSは入力済みとなります。
お手数ですが、ご教示いただけますと幸いです。
初心の者様
初めまして。
以前同じような質問をいただいたので以下のコードを追加してみて下さい。
table.inquiry span {
vertical-align: middle;
}
キャッシュを削除後、確認してうまくいかなければ「問い合わせページのURL」を送って下さい。
基本的にカスタマイズ系の質問をする際は、「該当ページのURL」を送っていただかないと確認できないので、お問い合わせの際はご注意くださいませ〜。
よろしくお願いします。
カゲオ様
はじめまして。
日付入力を楽に行うため、Contact Form 7 Datepickerを導入してみました。
ところが、パソコンであれば楽なのですが、スマホの場合はキーボード表示を被り、見づらくなってしまいました。
スマホの場合だけContact Form 7 Datepickerを無効にすることは可能でしょうか?
アドバイスいただければ幸いです。どうぞよろしくお願いします。
とおる様
初めまして。
テストページを拝見させていただきました。
う〜ん、スマホだけ無効にする方法はわからないですね。
ただスマホからも確認しましたが、特に見づらさは感じないのでそのままでいいような気がしますが……。
お力になれず申し訳ありません。
カゲオ様
はじめまして!
ひとつお聞きしたいのですがお問い合わせフォームを固定ページに反映させると左に寄った状態で表示されてしまいます。
「コンタクトフォーム 中央寄せ CSS」などと検索しても情報が無く困っています。
もし中央に寄せるいい方法があれば助言をいただきたいです。
お忙しいとは思いますが宜しくお願い致します。
たまごマン様
はじめまして。
恐れ入りますが、該当ページのURLを送っていただけますか?
よろしくお願いします。
お忙しいところ早速すいません。
URLはこちらになります。
ご確認よろしくお願い致します。
たまごマン様
サイト確認致しました。
お使いのテーマは入力欄が70%に指定されていたので、以下のコードで幅を100%にすれば右側の余白はなくなります。
ただこれだけだとPCで見た時、幅が広すぎるかなと思ったので、以下も合わせて追加すればお好きな幅に調整できます。
また問い合わせページだけ幅を狭めたい場合は、フォームを埋め込んだ固定ページに以下を直接追加してくださいませ〜。
クラシックエディタの場合(テキストエディタ)・グーテンベルク の場合(コードエディター)
以上ご確認のほどよろしくお願いします。
迅速な対応ありがとうございます!
ご提示頂いたCSSを入力してみましたがどうしても反映されなかったので幅を100%に変更することにしました。
貴重な時間を割いて頂き感謝します。
ありがとうございました!
たまごマン様
申し訳ない。コードが少し間違っていたので修正しておきました。
もしよければ、もう一度試してみてくださいませ〜。
いつも参考にさせていただいております。
うまくいかない点がありましたので、ご教授願いたくコメントさせていただきました。
①スマホで見た時にデザインがおかしい
②トップページの@「お名前」「メールアドレス」が左に寄っていて見ずらい
なにか対策などがありましたら、お願いいたします。
さかさま様
コメントありがとうございます。
サイトを拝見したところ、現在は当サイトのCSSを適用していないようですね。
表示崩れなどを確認する場合は、崩れた状態を見てみないことにはお答えできませんで、以後ご承知おき下さい。
よろしくお願いします。
すみませんURLを添付させていただきます。
①日付の選択の部分がスマホだと小さな□になってしまい不格好
②PCだとお問合せ内容が一番の位置に表示されてしまう
がうまく設定ができません。
あとコンタクトフォーム7以外のところでもし教えていただけることが可能でしたらご教授いただきたいのですが、カスタム投稿ページでこのページを作成したのですがアイキャッチ画像を設定しても画像が表示されません。
これはどうしたらよいか、もし可能でしたら教えていただきたいです。
よろしくお願い致します。
わけわかめ様
①について、以下のコードを追記してみてください。
.wpcf7 input,.wpcf7 select{
width:100%;
}
上記で改善されない場合、原因はわかりかねます。
②について、以下のコードを追記してみてください。
table.inquiry span {
vertical-align: middle;
}
③カスタム投稿ページではなく、固定ページで作成すれば通常の記事と同じ感じで設定できます。
余談ですが、送信ボタンカラーを
background: rgba(221, 153, 51, 0.5);
にするとヘッダーと統一感が出て、良い感じになると思います。
ではでは、よろしくお願いします。
カゲオ様
修様です。去年はご教授いただきありがとうございました。再度ご教授願います(いつもすいません、ありがとうぎざいます。)。下記のサイトで、またスマホサイズで表示すると右側が切れてしまいます。
実は下記のサイトをテーマを変え作り変えているのですが、テーマを変えただけでスマホサイズの表示がおかしくなります。修正できますか?
ご教授願います
修様
テーマによりコードが微妙に違ったりするので、変更後に表示崩れはよくありますね。
以下のコードを追記してみてください。
@media (max-width: 500px){
input.wpcf7-form-control.wpcf7-text {
width: 92%;
margin: auto;
}}
よろしくお願いします。
カゲオ様
ありがとうございます。追加しましたが、未だしっくりきません。chromeだと良い感じですが、firefoxだと崩れます。他に手立てはありますか?
修様
ありゃ、そうですか。
うーん、こちらの環境からだと綺麗に表示されているので、お力になれそうにないですね。
申し訳ありません。
カゲオ様
わかりました。どうもありがとうございます。自分でも色々いじってみます。また困ったらコメントさせてください。
大変ご丁寧にご教授ありがとうございます!
レスポンシブになりました!
合わせてもう1点教えていただけますでしょうか。
希望の日にち入力欄で、何も選択していない最初の状態だと四角のマスが小さく不格好になってしまいます。
コンタクトフォーム7の入力の際にプレースホルダ―を表示する、にしてみたのですが特に変わらないです。
ぜひ教えていただきたいです。
よろしくお願い致します。
わけわかめ様
お役に立ったのようで何よりです。
時間を空けてサイトを確認してほしい場合、都度サイトのURLを送っていただけますか?
よろしくお願いします。
素晴らしい問い合わせフォームありがとうございます。
日付のところがスマホだとスライドで表示されますが、
PCだと直接入力になりどの形で入力しても
正しい形式で入力してくださいと表示されます。
解決方法はございますでしょうか。
かず様
日付に関してはこちらの方が紹介しているようにカレンダー形式が一番わかりやすいかもしれません。
→https://tomolog.org/contact-form-7-datepicker
「Contact Form 7 Datepicker」というプラグインをインストールしたら、上記サイトを参考にしてみてください。
先日ご質問させていただきましたわけわかめです。
ご確認いただきたいURLを再度記載させていただきます。(URLは伏せてください)
同じテーマを使っているサイトを発見し参考にさせていただいているのですが、コンタクトフォームもこちらのサイトさんだと幅が細くスッキリしているのに、私のですと幅が広がってしまいます。
↑勝手に参考にさせていただいているのでURLは伏せてください。
このあたりもどうすればよいか教えていただきたいです。
よろしくお願い致します。
わけわかめ様
コメントありがとうございます。
コンタクトフォーム7のフォームデザインがスマホだとはみ出てしまうとのことですね。
参考にしているサイトより、多少スッキリしたデザインになりますが、以下のコードを追記してみてください。
@media(max-width:500px) {
.wpcf7 {
background: none!important;
border: none!important;
}
.wpcf7 form {
margin: 0!important;
}}
ちなみに送信ボタンが少し大きめだったので、以下の値を調整すれば横幅を変更できます。ご参考まで。
#formbtn {
width: 320px;
}
よろしくお願いします。
はじめまして。
こちらを参考にコンタクトフォーム7を入力したのですが、スマホですと100%表示にならず、右側にはみ出てしまいます。
初心者で知識があまりなくいろいろと調べてみましたが、修正できませんでした。
ぜひ修正の方法をご教授いただけないでしょうか。
※非表示でお願いいたします。
よろしくお願い致します。
度々失礼します。
先程のコメントですが、ボタンのカラーを変更したところ表示はされました。
ですがデザインが崩れてしまいます。。
木曜日様
コメントありがとうございます。
確認したところ、現在は綺麗に表示されていますね。
自己解決できたようで何よりです。
また何かありましたら、ご連絡くださいませ〜。
いつも参考にさせていただいております。
不明点があり自分ではどうしようもなくなってしまい、、ご質問させていただきました。
上記のサイトで、お問い合わせボタンが下層ページのみ表示されなくなってしまいます。
トップページではちゃんと表示されているためコードも間違っていないとは思うのですが、考えられることなどありますでしょうか?
大変お手数をおかけしますが、ご教授いただけたら幸いです。
はじめまして。
カゲオさんのサイトのおかげで素人の私でも素敵な問い合わせページができそうです。
素晴らしい情報をありがとうございます。
HTMLフォームで不要な項目を削除したり、項目の位置を上下させたりしたのですが、必須項目を入力せずに送信を押した場合に現れる「必須項目が入力されていません」の位置がずれてしまいます。どのように設定したら良いのでしょうか?大変お手数をおかけしますが、ご教授いただけたら幸いです。
ジジ様
はじめまして、カゲサイ運営者のものです。
参考になったようで、何よりです。
さて、ご質問の件ですが、サイトを見てみないことにはなんとも言えないので、恐れ入りますが「URL」を送っていただけますか?
よろしくお願いします。
お返事ありがとうございます。
該当ページのURLは「https://◯◯」です。
初心者の見にくいページで申し訳ありません。
ご教授のほど、よろしくお願い致します。
ジジ様
サイトを確認いたしました。
以下のコードをstyle.cssに貼り付けてみてください。
@media(max-width:500px) {
.wpcf7 span.wpcf7-not-valid-tip {
top:-20px!important;
}}
.wpcf7 span.wpcf7-not-valid-tip {
background:none
border-color:none
padding:0;
font-size: 10px;
left: auto;
top:15px;
right: 0;
}
キャッシュ削除後、スマホ・PC両方で確認してみてください。
なお、注意喚起の位置の上下はtop:◯◯の部分で調整できます。
よろしくお願いします。
カゲオ様
カゲオ様のコードで調整が効くようになり、大変助かりました。本当にありがとうございました!
たびたび申し訳ありません。
こちらを基本にアンケートフォームを作ったのですが、自分にその答えの内容が添付されてきません!初心者の質問ですみません。
例
Q1.主なご愛飲者の性別は?
[checkbox* checkbox-1 exclusive use_label_element default:0 class:check1 “男性” “女性”]
で選択されたものを自分に送るにはどうしたらいいでしょうか?
素晴らしい記事をありがとうございます。
チェックボックスかラジオボタンの後にテキストエリアをつける事はできるでしょうか?
その他( )のような形です
よろしくお願いします。
ノエル様
コメントありがとうございます。
コンタクトフォーム7に用意されているフォームタグでは、そのような実装はできません。
チェックやラジオボタンとテキストボックスを組み合わせたい場合は、通常のHTMLを書く必要があります。
加えて、細かな調整はCSSで整えるため、申し訳ありませんがコメント欄では対応できかねます。
よろしくお願いいたします。
お返事ありがとうございました!
ご提示くださっている範囲内で対応してみます。
ご質問の件、解決いたしました。
ありがとうございました!
ノエル様
自己解決されたようで何よりです。
また何かありましたら、ご連絡くださいませ〜。
はじめまして、調べ方が悪いのか、CHECKBOXの構文のところで、
わからないところがあります。
[checkbox checkbox-1 exclusive use_label_element default:1 class:check1 “サンプル4” “サンプル5” “サンプル6”]
例えば、この場合の書式で、checkbox-1ですとか、class:check1の役割がよくわからないのです…。ぜひ大きめのアンケートを作成したいと思っていまして、ここに何を書くべきなのか、そのままで良いのかが分からず、よろしければご教示おねがいできませんでしょうか…。(CONTACTFORM7専用の書式なんですよねきっと)
INN様
初めまして。
カゲサイ運営者・カゲオです。
1つずつお答えしていきますね。
「checkbox-1」は、チェックボックスの内容を自動返信メールに反映させたい場合に使用するショートコードになります。
「exclusive」は、1つにチェックが入っていると他のボックスにはチェックできないようにするコードです。
「use_label_element」は、チェックボックス横のテキストをクリックしても、チェックが入るようになります。
「default:1」は、最初にフォーム画面が表示された際、一番左側のボックスにチェックがされた状態にするためのものです。
「class:check1」は、チェックボックス部分だけをCSSで変更したい時に、使うものです。
例
.check1{}
大きめのアンケートがどのようなものか分かりませんが、チェックボックスの基本的な使い方としては
好きな動物は?
□犬□猫□熊
のように、ユーザーの手間を省く&簡単な選択肢に使うものなので、アンケート内容(チェックボックス横のテキストが複雑な場合など)によっては、チェックボックス以外のフォームを利用した方がいいかもしれません。
よろしくお願いします。
カゲサイ
コンタクトフォームを利用させていただいております。
大変見やすくて感謝しております。
さて、ドロップダウンメニューで「include_blank」の代わりに、「first_as_label “選択してください”」としたいのですが、このタグを入れても反映しません。どうすればいいでしょうか。
またラジオボタン横並びの最後で「その他」の横にテキストボックスを入れる方法はあるでしょうか?
よろしくお願い申し上げます。
RON46様
反映しないとは「選択してください」の文字列が表示されないということでしょうか?
もしそうなら、ショートコードミスの可能性が高いです。コードを送っていただければ確認いたします。
ラジオボタンの横に「テキストボックス」を入れる方法はありますが、少々面倒なのでコメント欄では対応できかねます。
申し訳ありません。
はじめまして。素晴らしいフォームデザインをご提供いただきありがとうございます!
こちらのフォームを使わせていただいているのですが、スマホ表示の際に枠が突き抜けてしまいます。コメント欄を見て試行錯誤してみましたが、自力では直せず…コメントさせていただきました。
サイトはこちらになります。ご確認いただけますと大変幸いです。
また、フォームの枠が2重(?)になってしまうのですが、こちらも原因不明です…。テーマ特有のものでしょうか?(テーマはTCD社のOOPSです)
直す方法がありましたら、教えていただけますでしょうか。
木曜日様
確認したところ、キレイに表示されていますね。
自己解決できたようで何よりです。
今後とも「カゲサイ」をよろしくお願いします。