WordPress
その他
運営中のサブブログ
主に私のデスク周りアイテムを紹介しています。
在宅作業の参考になるかもしれません。
Contact Form 7をプロ級デザインにカスタマイズする方法
当ページのリンクには広告が含まれています。
当記事では問い合わせフォームContact Form7の基本的な使い方〜カスタマイズまで網羅的に解説しました。
プロ級とは、見た目だけでなく機能面も含めたフォームを指します。
サンクスページの作り方、自動返信メール設定、セキュリティ対策などもバッチリです。
気軽にフォームを作りたいブロガーやアフィリエイターさんは、目次のシンプルフォームを参考にしてください。
フォーム完成後は以下のようなデザインになります。
デモモードにしてありますので、エラーメッセージの確認も含めて、ご自由にお試しください。
なおプラグインのインストールは事前に済ませておきましょう。
PC表示
スマホ・タブレット表示
スマホ・タブレットは縦に並びます。
パソコンでは、横並びにしました。
スマホ・タブレット表示
スマホ・タブレットでは縦並びになります。
PC表示
パソコンでは、横並びにしました。
Contact Form7講座
- フォームデザイン（この記事）
- エラーメッセージ設定
- 自動返信メール設定
- セキュリティ設定
- フォーム内タグの完全解説
目次
Contact Form 7フォーム用カスタマイズコード
管理画面のサイドバー「お問い合わせ」→「新規追加」を開く。
フォーム内のテキストをすべて消し、以下のHTMLコードをコピペしてください。
※.こちらのコードだけではサンプルフォームようになりません。
後ほど解説しているCSSを追加する必要があります。
<table class="inquiry">
<tr>
<th>
<span class="haveto">必須</span><ruby>お名前<rt>ふりがな</rt>
</ruby>
</th>
<td>
[text* your-kana placeholder "ふりがなを入力してください"]
[text* your-name placeholder "漢字で入力してください"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span>メールアドレス
</th>
<td>
[email* your-email]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span>URL
</th>
<td>
[url* your-url placeholder "サイトのURLを入力してください"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span>電話番号
</th>
<td>
[tel* your-tel placeholder"数字と半角ハイフンしか入力できません"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span>数値限定の項目
</th>
<td>
[number* your-number min:10 max:100 placeholder "数値の下限〜上限を10〜100に設定"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span>日付
</th>
<td>
<span class="pcdate">アイコンをクリックしてください</span><span class="spdate">フォームをタップしてください</span>
[date* your-date class:dateform min:2024-02-01 max:2024-03-31]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span>ドロップダウンメニュー
</th>
<td>
[select* dpmenu include_blank "サンプル1" "サンプル2" "サンプル3"]
</td>
</tr>
<tr>
<th>
<span class="any">任意</span>チェックボックス横（1つ選択）
</th>
<td>
[checkbox checkbox-1 exclusive use_label_element default:1 "サンプル1" "サンプル2" "サンプル3"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span>チェックボックス横（複数選択）
</th>
<td>
[checkbox* checkbox-2 use_label_element default:1 default:2 default:3 "サンプル4" "サンプル5" "サンプル6"]
</td>
</tr>
<tr>
<th>
<span class="any">任意</span>チェックボックス縦（１つ選択）
</th>
<td>
[checkbox checkbox-3 exclusive use_label_element class:verticallist default:1 "サンプル7" "サンプル8" "サンプル9"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span>チェックボックス縦（複数選択）
</th>
<td>
[checkbox* checkbox-4 use_label_element class:verticallist default:1 default:2 default:3 "サンプル10" "サンプル11" "サンプル12"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span>ラジオボタン横並び
</th>
<td>
[radio radio-1 use_label_element default:1 "男性""女性"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span>ラジオボタン縦並び
</th>
<td>
[radio radio-2 use_label_element class:verticallist default:1 "はい""いいえ"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span>回答形式のタグ
</th>
<td>
[quiz quiz-1 class:quiz "質問：2024年から始まった税制優遇制度の名称は？|新NISA"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span>郵便番号
</th>
<td>
[text* your-postalcode]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span>ご住所
</th>
<td>
町名以下は入力してください
[text* your-address]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span>お問い合わせ内容
</th>
<td>
[textarea* your-message placeholder "問い合わせ内容入力欄"]
</td>
</tr>
<tr>
<th>
<span class="any">任意</span>ファイル添付
</th>
<td>
[file* your-file limit:5mb filetypes:jpg|jpeg|png|webp|svg|gif|pdf|csv|mov|mp4|zip]
</td>
</tr>
</table>
[acceptance acceptance-sample]内容にお間違えなければ、こちらにチェックを入れてから送信ボタンを押してください。 [/acceptance]
[submit "上記の内容で送信する"]不要な項目（行）を削除する方法
<tr>
<th>
<span class="haveto">必須</span>日付
</th>
<td>
<span class="pcdate">アイコンをクリックしてください</span><span class="spdate">フォームをタップしてください</span>
[date* date-sample class:dateform min:2024-02-01 max:2024-03-31]
</td>
</tr>例えば日付項目が不要なら、上記部分を削除してください。
他の項目も<tr>〜</tr>部分を削除すると1行がまるっと消えます。
必須と任意タグの使い方
“必須”や”任意”が不要であれば、<span class="haveto">必須</span>または<span class="any">任意</span>部分を削除してください。
実際に必須を有効化（入力しないとエラー表示）するには、タグ（[]で囲まれた部分）の最初の文字列後に* アスタリスクを付けるか否かで決まります。
プレースホルダーを削除したい
タグ内の[text* your-name placeholder"陰影 男漢"]
placeholder”〇〇”部分を削除してください。
フォームの上にテキストを表示したい
<tr>
<th>
<span class="haveto">必須</span>お名前
</th>
<td>
例：陰影 男漢｜名字と名前の間は半角スペースをあけてください
[text* your-name]
</td>
</tr>例：陰影 男漢｜名字と名前の間は半角スペースをあけてください
[text* your-name]
各タグの真上にお好きな文言を入力してください。
郵便番号から住所を自動入力したい
contact form7カスタマイズの記事を拝見させていただき、デザインも良く取り入れさせてもらっております。
挿入する場所が悪いのでしょうか？それともフォームのソースコード自体を変えないと駄目なのでしょうか？宜しければご教授下さい。
郵便番号の方に自動住所入力を入れたいと思いまして、zipaddr-jpプラグインをインストールしコードをコンタクトフォームテキストのyour-postalcode の後の部分に挿入してみましたが、囲んでいるデザインが変わってしまい上手くいきません。
郵便番号テキストフォーム
[text* your-postalcode class:p-postal-code placeholder"123-4567"]
zipaddr-jpプラグインで取得した自動住所入力コード[text* zip id:zip]
読者の方からこのような質問をいただいたので備忘録として、回答を載せておきます。
zipaddr-jpというプラグインを追加し、専用コードに置き換えると、郵便番号から町名以前の自動入力が可能となります。
※.2024年3月時点、プラグインを有効化するだけで自動入力対応しています。
問い合わせフォーム内で使えるタグの解説
コンタクトフォーム7で使えるタグは、フォームにズラッと並んでいます。
すべて解説していると長くなるため、別記事にまとめました。
選択項目以外にカスタム指定する方法などもあるため、一読しておくと役に立つかもしれません。
メール設定
メール設定は問い合わせを自分に知らせる通知メールと相手に送る自動返信メールの設定ができます。
ブログやアフィリエイトサイトであれば、そこまでこだわる必要はありませんが、ビジネス用途でサイト運営をしている方はしっかり作りましょう。
自分用メールの作り方
問い合わせがあった際、フォームに入力された内容を自分宛てに送る設定です。
- 送信先
自分のメールアドレス - 送信元
変更しない - 題名
[_site_title]に問い合わせがありました - 追加ヘッダー
変更しない - メッセージ本文
フォームのタグを使って作成 - 空のメールタグを含む行を出力から除外する
チェックする - HTML形式のメールを使用する
チェックしない - ファイル添付
ファイル添付をフォームに使用している方は、ファイルタグを貼り付ける
当記事のサンプルをそのまま使うなら[your-file]
基本上記の通りに設定しておけば問題ありません。
メッセージ本文の作り方などは、以下でくわしく解説しています。
自動返信メールの作り方
- 送信先：[your-email]
エラー表示されますが無視してOKです。 - 送信元：変更しない
メールの送信者にサイト名が表示されます。 - 題名：お問い合わせありがとうございますなどに変更しましょう。
メールのタイトル部分になります。 - 追加ヘッダー：変更しないもしくは空白にする
- メッセージ本文：フォームのタグを使って作成
- 空のメールタグを含む行を出力から除外する
チェックする - HTML形式のメールを使用する
チェックしない - ファイル添付：基本は空白のままでOK
フォームに添付した画像を相手にも確認してもらいたい場合は、ファイルタグを貼り付ける。
基本上記の通りに設定しておけば問題ありません。
細かい設定方法は以下で解説しました。
メッセージ設定
“フォームの入力不備“や”送信完了の知らせ“を表示する文言です。
デフォルトだと不自然なものもあるため、お好みで変更しておきましょう。
入力エラーサンプル
送信完了を知らせるメッセージ
それぞれどんな場合でに表示されるのか？を解説すると非常に長くなるため、別記事にて解説しました。
使わないタグの文言は設定する必要ありません。
以下では当サイトのサンプルを上から順に紹介しておきます。
| メッセージ設定 |
|---|
メッセージが正常に送信されたお問い合わせありがとうございます。内容を確認の上、ご連絡致します。 |
メッセージの送信に失敗した現在サーバー側に障害が起きているようです。時間をおいて再度お試しください。 |
入力内容に不備が見つかった入力内容に不備があるようです。エラー内容をご確認の上、再度お試しください。 |
| 送信がスパムと見なされた デフォルトのまま |
承認が必要な項目が承認されていないボックスにチェックがされていません利用規約をご確認の上、ボックスにチェックを入れてください。個人情報取扱内容をご確認の上、ボックスにチェックを入れてください。※.設置する内容により変更してください。 |
入力必須の項目が入力されていないこちらは必須項目です。 |
ユーザー入力が最大許容文字数を超える項目がある〇〇字以下で入力してください。 |
ユーザー入力が最小許容文字数に満たない項目がある〇〇以上入力してください。 |
ファイルアップロードが何らかの理由により失敗している現在ファイル添付ができない状態のようです。時間を置いて再度お試しください。 |
アップロードされたファイルが許可されたファイル形式に適合しない対応しているファイルはJPG/JPEG/PNG/Webp/svg/gif/pdf/zip形式のみです。※.添付できる拡張子を指定した場合 |
アップロードされたファイルが大きすぎる〇〇MB以下でないと添付できません。ファイルの容量をお確かめください。 |
ファイルのアップロードが PHP のエラーにより失敗している現在サーバー側に問題が起きているようです。時間を置いて再度お試しください。 |
| 入力された日付の形式が正しくない デフォルトのまま |
| 日付が最小成約日より小さい デフォルトのまま |
| 日付が最大成約日より大きい デフォルトのまま |
| 入力された数値の形式が正しくない デフォルトのまま |
数値が最小制約値より小さい〇〇以上を入力してください。 |
数値が最大制約値より大きい〇〇以下で入力してください。 |
クイズに対する正しい答えが入力されなかった答えが正しくありません。ひらがなとカタカナは区別されます。 |
入力されたメールアドレスの形式が正しくないメールアドレスの形式に不備があるようです。もう一度お確かめください。 |
入力されたURLの形式が正しくないURLの形式に不備があるようです。もう一度お確かめください。 |
入力された電話番号の形式が正しくない数字と半角「-」以外は入力できません。 |
〇〇の部分はそれぞれ、タグに指定した数値を入れてください。
数値を指定するコードの解説もこちらでしています。
その他の設定
“その他の設定“にカスタムコードを入力すると使用できます。
参考：公式サイトのカスタムコード解説
ここではよく使うであろう2つを紹介します。
デモモード：demo_mode:on
承認確認エラー表示：acceptance_as_validation: on
デモモードの使い方
フォームの動作テストに使います。
デモモードをONdemo_mode:onにすると、送信ボタンを押してもメールが送信されなくなります。
“フォームの挙動“や”エラーメッセージの確認だけ“を行いたい時に活用しましょう。
承認確認エラーを表示させる
“承認確認タグ“はチェックをすることが前提となっているため、デフォルトだとエラーは表示されず、送信ボタンを押せないだけになっています。
例えば、利用規約などを設置するなら、エラー表示をONにしておいたほうが親切でしょう。
一方で確認のためだけに使用するなら、チェックを促す文言を設定できるため、エラー表示は不要です。
用途によって使い分けてください。
お問い合わせページの作成
管理画面サイドバーのコンタクトフォームをクリック
↓
先ほど作成したフォームのショートコードをコピーする
管理画面サイドバーの固定ページをクリック
↓
新規固定ページを追加をクリック
①ページタイトルを入力
②ショートコードを貼り付ける
③ページのURLを入力
④公開する
カゲオこのままではデフォルトのフォームなので、CSSを追加してデザインを整えよう
Contact Form 7のCSSデザイン
CSSは子テーマのstyle.cssにコピペしてください。
①外観→テーマファイルエディター
②Stylesheet（スタイルシート）ファイル
③上段にあるコードの下にペーストする。
/* Contact Form7スマホ・タブレット用カスタマイズ */
@media(max-width:850px){
/* テーブルの見出しとフォーム */
table.inquiry th,table.inquiry td {
display:block;
padding:1em 0!important;
width:100%;
border:0;
}
/* 送信ボタン */
input.wpcf7-submit{
margin-bottom:30px;
width:100%;
}
}
/* 日付タグ上のテキストをPCとスマホで変更 */
@media(max-width:900px){
.pcdate{
display: none;
}
}
@media(min-width:1000px){
.spdate{
display: none;
}
/* 日付タグの幅を調整 */
.wpcf7-date.dateform{
width: 25%;
}
}
/* Contact Form7全体カスタマイズ */
/* 自動入力されるPタグを無効にする */
.inquiry p {
display: inline;
}
/*テーブル下に余白.枠線・テキストの行間 */
table.inquiry {
margin-bottom: 30px;
border:solid 1px #d7d7d7;
line-height:1.2;
vertical-align:middle;
}
/* テーブルの行 */
.inquiry tr {
border:0!important;
}
/* テーブルの見出し側 */
.inquiry th{
text-align:left;
font-size:14px;
color:#444;
padding:1em 0.5em;
width:0;
background:#efefef;
border:solid 1px #d7d7d7;
white-space: nowrap;
vertical-align: middle;
}
/* 必須と任意タグ */
.haveto,.any{
font-size:13px;
padding:5px;
background:#ff9393;
color:#fff;
border-radius:2px;
margin-right:5px;
font-weight:normal;
}
/* 任意タグの背景カラー */
.any{
background:#93c9ff;
}
/* テーブルフォーム側 */
.inquiry td{
font-size:13px;
border:solid 1px #d7d7d7;
}
/* 入力エリア幅最大 */
.wpcf7-form-control {
width: 100%;
}
/* フォーム入力欄の余白・背景カラー・枠線消す指定 */
.inquiry input,.inquiry select,.inquiry textarea {
margin: 5px 0;
background:#eff1f5;
border: none;
padding:0.7em;
}
.inquiry textarea {
padding-bottom:10em;
}
/* チェックボックスとラジオボタンの位置調整 */
.wpcf7-list-item-label,.wpcf7-checkbox,input[type=checkbox],input[type=radio]{
vertical-align:middle;
}
.wpcf7-list-item-label{
padding:0 5px 0 2px;
}
/*ラジオボタンを縦並び指定*/
.verticallist{
display:inline-grid;
}
/* 送信ボタンのデザイン */
.wpcf7-submit{
display: block;
margin:10px auto;
padding:1em 0;
width:80%;
background:#09b555;
color:#fff;
font-size:18px;
font-weight:bold;
border-radius:4px;
border: none;
}
/* 送信ボタンマウスホバー時 */
.wpcf7-submit:hover{
opacity: 0.9;
transition: 0.3s;
}
/* フォーム上部に表示されるエラーメッセージを非表示 */
.screen-reader-response {
display: none;
}
/* フォーム内エラーメッセージを赤色に指定 */
.wpcf7-not-valid-tip {
color: #e92323;
}一応それぞれのコードをどこに割り当てているかを書きましたので、不要なものがあれば削除するなり、各自調整してください。
シンプルフォームデザイン
ブログなどの簡易的フォームでよければ、これくらいで良い気がします。
クイズタグの質問にあえて答えを明記することで、スパム対策をしています。
カゲオ管理しているサイトをこの仕様にしてから、5年以上スパムメール来てないよ
コードを表示する
<table class="inquiry">
<tr>
<th>
<span class="haveto">必須</span>お名前
</th>
<td>
[text* your-name]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span>メールアドレス
</th>
<td>
[email* your-email]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span>スパム対策
</th>
<td>
[quiz quiz-1 class:quiz "カタカナでカゲサイと入力してください|カゲサイ"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span>お問い合わせ内容
</th>
<td>
[textarea* your-message]
</td>
</tr>
</table>
[acceptance acceptance-sample]内容にお間違えなければ、こちらにチェックを入れてから送信ボタンを押してください。 [/acceptance]
[submit "上記の内容で送信する"]
<style>
input.quiz {
background: #ff555a4a;
}
</style>26行目を任意の質問と答えに変更してください。
/* Contact Form7スマホ用カスタマイズ */
@media(max-width:500px){
/* テーブルの見出しとフォーム */
table.inquiry th,table.inquiry td {
display:block;
width:100%;
border:0;
}
/* 必須と任意タグの調整 */
table .haveto,table .any{
font-size:3vw;
position: relative;
bottom: 1px;
}
/* 送信ボタン */
input.wpcf7-submit{
margin-bottom:30px;
width:100%;
}
}
/* Contact Form7全体カスタマイズ */
/* 自動入力されるPタグを無効にする */
.inquiry p {
display: inline;
}
/*テーブル下に余白.枠線・テキストの行間 */
table.inquiry {
margin-bottom: 30px;
border:solid 1px #d7d7d7;
line-height:1.2;
}
/* テーブルの行 */
.inquiry tr {
border:0!important;
}
/* テーブルの見出し側 */
.inquiry th{
text-align:left;
font-size:14px;
color:#444;
padding:1em 0.5em;
width:0;
background:#efefef;
border:solid 1px #d7d7d7;
white-space: nowrap;
}
/* 必須と任意タグ */
.haveto{
font-size:13px;
padding:5px;
background:#ff9393;
color:#fff;
border-radius:2px;
margin-right:5px;
font-weight:normal;
}
/* フォーム入力欄の余白・背景カラー・枠線消す指定 */
.inquiry input,.inquiry select,.inquiry textarea {
margin: 5px 0;
background:#eff1f5;
border: none;
padding:0.25em 0.5em;
}
.inquiry textarea {
padding-bottom:10em;
}
/* 送信ボタンのデザイン */
.wpcf7-submit{
display: block;
margin:10px auto;
padding:1em 0;
width:80%;
background:#09b555;
color:#fff;
font-size:18px;
font-weight:bold;
border-radius:4px;
border: none;
}
/* 送信ボタンマウスホバー時 */
.wpcf7-submit:hover{
opacity: 0.9;
transition: 0.3s;
}
/* フォーム上部に表示されるエラーメッセージを非表示 */
.screen-reader-response {
display: none;
}
/* フォーム内エラーメッセージを赤色に指定 */
.wpcf7-not-valid-tip {
color: #e92323;
}今回の「フォーム用コード」は「tableタグ」を使っています。
デザインをカスタマイズしたい方は、こちらが参考になるかもしれません。
問い合わせフォームのアイコン化デザイン
プロフィールやサイドバーに問い合わせフォームのアイコンボタンを作成したい方は、以下の記事を参考にしてください。
主要なSNSも合わせて32パターン作成しました。
設定したURLにフォームが崩れることなく表示されていればOKです。
実際に入力し、送信テストもしてみましょう。
合わせて”自分宛ての確認メール“や”相手への自動返信メール“も確認してください。
カゲオ特に問題なければこれで設定完了です。
この先は知っておくと便利なものをいくつか紹介しておきます。
Contact Form 7で使える便利なカスタマイズ
プラグインの読み込みを使用ページだけにする
ContactForm7は重い、遅いという声が時折ネットに出ています。
以下のコードを追記すれば、フォームを使用するページだけに読み込ませることができます。
//コンタクトフォーム７読み込み制限
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' );ただし次章で解説する”サンクスページ“と競合してしまうようなら、こちらは削除してください。
サンクスページの作成
サンクスページは、フォーム送信後に特定のページへ移動させることができます。
例えば、送信完了したことをわかりやすくしたり、申し込みフォームであれば、クロスセルやアップセルで続けざまに別の商品を勧めることも可能です。
ある申込みに対し、顧客のメリットになる別の提案を同時にする手法です。
例：テーブルの申し込み→そのテーブルに合う椅子を勧めるなど。
当記事では、送信完了を知らせるサンクスページを例に解説しました。
固定ページにサンクスページを作成
任意のものを固定ページに作成してみましょう。
①送信完了を知らせるサンクスページは、検索エンジンに知らせる必要はないため「noindex、nofollow」設定にします。
②任意のURLを入力したら公開してください。
サイトマップからも除外
HTMLサイトマップを設置している方は、サンクスページを作成した固定ページのIDを除外してください。
ユーザーが確認できるページに、載せておく必要がないからです。
HTMLサイトマップがよくわからない方は、無視してOKです。
問い合わせフォームにサンクスページ用コードを埋め込む
問い合わせフォームの固定ページの先頭に「カスタムHTMLブロック」を追加し、以下のコードを貼り付けて更新してください。
<script>
document.addEventListener( 'wpcf7mailsent',function( event ){
location = 'サンクスページのURL';
}, false );
</script>問い合わせページを表示し、送信ボタンを押してみましょう。
送信後、サンクスページに移行すれば完成です。
Contact Form 7のセキュリティ対策
Google先生が提供してくれいているスパム対策reCAPTCHAをコンタクトフォーム7にも連携できます。
ただし送信エラーやサンクスページの不具合などの報告も受けているため、フォームとのバランスをみて導入してください。
やり方は以下で解説しました。
Contact Form 7によくある質問
当記事のコメント欄にはこれまで様々な質問をいただきました。
もちろんすべてのお力になれたわけではありませんが、解決できたことをいくつかまとめました。
生年月日の入力をドロップダウンメニュー形式にしたい
CSSが効かない
キャッシュを削除してみてください。
Windows：Ctrl＋F5
Mac：Ctrl＋R
もしくは、優先!important;指定をしてみましょう。
例：color:#000!important;
自動返信メールに入力内容が反映されない
メール設定に表示されているタグに間違いはないか？
合わせてフォーム内のタグもご確認ください。
閲覧できません (Forbidden access)が表示された
お使いのレンタルサーバーに「WAF設定」という項目がありますので、そちらを一度「OFF」にしてみて下さい。
ラジオボタンやチェックボックスをデフォルトでチェックされていない状態にしたい
以下のdefault:1部分を削除してください。
[checkbox checkbox-1 exclusive use_label_element default:1 "サンプル1" "サンプル2" "サンプル3"]ただし、ラジオボタンは初期値を設定することが推奨されています。
外すのであれば「チェックボックス」を使いましょう。
フォームの入力欄の幅を変更したい
/*入力エリア幅最大*/
.wpcf7-form-control {
width: 100%;
}入力欄すべての幅を調整するなら100％の部分をお好みに変更してください。
特定の入力欄だけ変更したい場合はそのタグにclassを追加してください。
ノーマル：[date* your-date]
カスタム：[date* your-date class:sample]
その後、スタイルシートに以下を追加しましょう。
.sample {
width: 80%!important;
}「必須」や「任意」とテキストが横並びになりません
フォームタグ内に<br>タグが含まれていないかを確認して下さい。
プレースホルダーのテキストカラーを変更したい
以下をstyle.cssに追加し「ccc」部分をお好みのカラーに変更してください。
input::placeholder {
color: #ccc;
}TCD系テーマだと表示が崩れる
以下をstyle.cssに追加してみてください。
/* 外側の枠線と背景を消す */
.wpcf7 {
background: none;
border: none;
margin: 0;
}
/* フォーム外側の余白を消す */
.wpcf7 form {
margin: 0;
}結論：Contact Form 7のデザインはコピペして中身を練ろう
以上、Contact Form7をプロ級フォームにカスタマイズする方法でした。
たくさん質問をいただくうちになかなかの大作になってしまいましたね。
フォームデザインはささっとコピペで済ませ、メール内容やサンクスページなどを作り込み、ぜひユーザーファーストのフォームを完成させてください。
このプラグインは非常に奥が深く、まだまだできることがたくさんあります。
もっと探求したい方は以下も合わせてどうぞ。
Contact Form7講座
- フォームデザイン（この記事）
- エラーメッセージ設定
- 自動返信メール設定
- セキュリティ設定
- フォーム内タグの完全解説
この記事が気に入ったら
フォローしてね！
記事への質問等はこちらからどうぞ
この記事へのコメント数 （217件）
はじめまして。素晴らしいフォームデザインをご提供いただきありがとうございます！
こちらのフォームを使わせていただいているのですが、スマホ表示の際に枠が突き抜けてしまいます。コメント欄を見て試行錯誤してみましたが、自力では直せず…コメントさせていただきました。
サイトはこちらになります。ご確認いただけますと大変幸いです。
また、フォームの枠が2重（？）になってしまうのですが、こちらも原因不明です…。テーマ特有のものでしょうか？（テーマはTCD社のOOPSです）
直す方法がありましたら、教えていただけますでしょうか。
木曜日様
確認したところ、キレイに表示されていますね。
自己解決できたようで何よりです。
今後とも「カゲサイ」をよろしくお願いします。
コンタクトフォームを利用させていただいております。
大変見やすくて感謝しております。
さて、ドロップダウンメニューで「include_blank」の代わりに、「first_as_label “選択してください”」としたいのですが、このタグを入れても反映しません。どうすればいいでしょうか。
またラジオボタン横並びの最後で「その他」の横にテキストボックスを入れる方法はあるでしょうか？
よろしくお願い申し上げます。
RON46様
反映しないとは「選択してください」の文字列が表示されないということでしょうか？
もしそうなら、ショートコードミスの可能性が高いです。コードを送っていただければ確認いたします。
ラジオボタンの横に「テキストボックス」を入れる方法はありますが、少々面倒なのでコメント欄では対応できかねます。
申し訳ありません。
はじめまして、調べ方が悪いのか、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{}
大きめのアンケートがどのようなものか分かりませんが、チェックボックスの基本的な使い方としては
好きな動物は？
□犬□猫□熊
のように、ユーザーの手間を省く＆簡単な選択肢に使うものなので、アンケート内容（チェックボックス横のテキストが複雑な場合など）によっては、チェックボックス以外のフォームを利用した方がいいかもしれません。
よろしくお願いします。
カゲサイ
素晴らしい記事をありがとうございます。
チェックボックスかラジオボタンの後にテキストエリアをつける事はできるでしょうか？
その他（ ）のような形です
よろしくお願いします。
ノエル様
コメントありがとうございます。
コンタクトフォーム７に用意されているフォームタグでは、そのような実装はできません。
チェックやラジオボタンとテキストボックスを組み合わせたい場合は、通常のHTMLを書く必要があります。
加えて、細かな調整はCSSで整えるため、申し訳ありませんがコメント欄では対応できかねます。
よろしくお願いいたします。
お返事ありがとうございました！
ご提示くださっている範囲内で対応してみます。
ご質問の件、解決いたしました。
ありがとうございました！
ノエル様
自己解決されたようで何よりです。
また何かありましたら、ご連絡くださいませ〜。
たびたび申し訳ありません。
こちらを基本にアンケートフォームを作ったのですが、自分にその答えの内容が添付されてきません！初心者の質問ですみません。
例
Q1.主なご愛飲者の性別は？
[checkbox* checkbox-1 exclusive use_label_element default:0 class:check1 “男性” “女性”]
で選択されたものを自分に送るにはどうしたらいいでしょうか？
はじめまして。
カゲオさんのサイトのおかげで素人の私でも素敵な問い合わせページができそうです。
素晴らしい情報をありがとうございます。
HTMLフォームで不要な項目を削除したり、項目の位置を上下させたりしたのですが、必須項目を入力せずに送信を押した場合に現れる「必須項目が入力されていません」の位置がずれてしまいます。どのように設定したら良いのでしょうか？大変お手数をおかけしますが、ご教授いただけたら幸いです。
ジジ様
はじめまして、カゲサイ運営者のものです。
参考になったようで、何よりです。
さて、ご質問の件ですが、サイトを見てみないことにはなんとも言えないので、恐れ入りますが「URL」を送っていただけますか？
よろしくお願いします。
お返事ありがとうございます。
該当ページのURLは「https://◯◯」です。
初心者の見にくいページで申し訳ありません。
ご教授のほど、よろしくお願い致します。
ジジ様
サイトを確認いたしました。
以下のコードをstyle.cssに貼り付けてみてください。
キャッシュ削除後、スマホ・PC両方で確認してみてください。
なお、注意喚起の位置の上下はtop:◯◯の部分で調整できます。
よろしくお願いします。
カゲオ様
カゲオ様のコードで調整が効くようになり、大変助かりました。本当にありがとうございました！
いつも参考にさせていただいております。
不明点があり自分ではどうしようもなくなってしまい、、ご質問させていただきました。
上記のサイトで、お問い合わせボタンが下層ページのみ表示されなくなってしまいます。
トップページではちゃんと表示されているためコードも間違っていないとは思うのですが、考えられることなどありますでしょうか？
大変お手数をおかけしますが、ご教授いただけたら幸いです。
度々失礼します。
先程のコメントですが、ボタンのカラーを変更したところ表示はされました。
ですがデザインが崩れてしまいます。。
木曜日様
コメントありがとうございます。
確認したところ、現在は綺麗に表示されていますね。
自己解決できたようで何よりです。
また何かありましたら、ご連絡くださいませ〜。
はじめまして。
こちらを参考にコンタクトフォーム７を入力したのですが、スマホですと100％表示にならず、右側にはみ出てしまいます。
初心者で知識があまりなくいろいろと調べてみましたが、修正できませんでした。
ぜひ修正の方法をご教授いただけないでしょうか。
※非表示でお願いいたします。
よろしくお願い致します。
先日ご質問させていただきましたわけわかめです。
ご確認いただきたいURLを再度記載させていただきます。(URLは伏せてください)
同じテーマを使っているサイトを発見し参考にさせていただいているのですが、コンタクトフォームもこちらのサイトさんだと幅が細くスッキリしているのに、私のですと幅が広がってしまいます。
↑勝手に参考にさせていただいているのでURLは伏せてください。
このあたりもどうすればよいか教えていただきたいです。
よろしくお願い致します。
わけわかめ様
コメントありがとうございます。
コンタクトフォーム7のフォームデザインがスマホだとはみ出てしまうとのことですね。
参考にしているサイトより、多少スッキリしたデザインになりますが、以下のコードを追記してみてください。
ちなみに送信ボタンが少し大きめだったので、以下の値を調整すれば横幅を変更できます。ご参考まで。
#formbtn {
width: 320px;
}
よろしくお願いします。
素晴らしい問い合わせフォームありがとうございます。
日付のところがスマホだとスライドで表示されますが、
PCだと直接入力になりどの形で入力しても
正しい形式で入力してくださいと表示されます。
解決方法はございますでしょうか。
かず様
日付に関してはこちらの方が紹介しているようにカレンダー形式が一番わかりやすいかもしれません。
→https://tomolog.org/contact-form-7-datepicker
「Contact Form 7 Datepicker」というプラグインをインストールしたら、上記サイトを参考にしてみてください。
大変ご丁寧にご教授ありがとうございます！
レスポンシブになりました！
合わせてもう１点教えていただけますでしょうか。
希望の日にち入力欄で、何も選択していない最初の状態だと四角のマスが小さく不格好になってしまいます。
コンタクトフォーム７の入力の際にプレースホルダ―を表示する、にしてみたのですが特に変わらないです。
ぜひ教えていただきたいです。
よろしくお願い致します。
わけわかめ様
お役に立ったのようで何よりです。
時間を空けてサイトを確認してほしい場合、都度サイトのURLを送っていただけますか？
よろしくお願いします。
カゲオ様
修様です。去年はご教授いただきありがとうございました。再度ご教授願います（いつもすいません、ありがとうぎざいます。）。下記のサイトで、またスマホサイズで表示すると右側が切れてしまいます。
実は下記のサイトをテーマを変え作り変えているのですが、テーマを変えただけでスマホサイズの表示がおかしくなります。修正できますか？
ご教授願います
修様
テーマによりコードが微妙に違ったりするので、変更後に表示崩れはよくありますね。
以下のコードを追記してみてください。
@media (max-width: 500px){
input.wpcf7-form-control.wpcf7-text {
width: 92%;
margin: auto;
}}
よろしくお願いします。
カゲオ様
ありがとうございます。追加しましたが、未だしっくりきません。chromeだと良い感じですが、firefoxだと崩れます。他に手立てはありますか？
修様
ありゃ、そうですか。
うーん、こちらの環境からだと綺麗に表示されているので、お力になれそうにないですね。
申し訳ありません。
カゲオ様
わかりました。どうもありがとうございます。自分でも色々いじってみます。また困ったらコメントさせてください。
すみませんURLを添付させていただきます。
①日付の選択の部分がスマホだと小さな□になってしまい不格好
②PCだとお問合せ内容が一番の位置に表示されてしまう
がうまく設定ができません。
あとコンタクトフォーム７以外のところでもし教えていただけることが可能でしたらご教授いただきたいのですが、カスタム投稿ページでこのページを作成したのですがアイキャッチ画像を設定しても画像が表示されません。
これはどうしたらよいか、もし可能でしたら教えていただきたいです。
よろしくお願い致します。
わけわかめ様
①について、以下のコードを追記してみてください。
.wpcf7 input,.wpcf7 select{
width:100%;
}
上記で改善されない場合、原因はわかりかねます。
②について、以下のコードを追記してみてください。
table.inquiry span {
vertical-align: middle;
}
③カスタム投稿ページではなく、固定ページで作成すれば通常の記事と同じ感じで設定できます。
余談ですが、送信ボタンカラーを
background: rgba(221, 153, 51, 0.5);
にするとヘッダーと統一感が出て、良い感じになると思います。
ではでは、よろしくお願いします。
いつも参考にさせていただいております。
うまくいかない点がありましたので、ご教授願いたくコメントさせていただきました。
①スマホで見た時にデザインがおかしい
②トップページの＠「お名前」「メールアドレス」が左に寄っていて見ずらい
なにか対策などがありましたら、お願いいたします。
さかさま様
コメントありがとうございます。
サイトを拝見したところ、現在は当サイトのCSSを適用していないようですね。
表示崩れなどを確認する場合は、崩れた状態を見てみないことにはお答えできませんで、以後ご承知おき下さい。
よろしくお願いします。
カゲオ様
はじめまして。
日付入力を楽に行うため、Contact Form 7 Datepickerを導入してみました。
ところが、パソコンであれば楽なのですが、スマホの場合はキーボード表示を被り、見づらくなってしまいました。
スマホの場合だけContact Form 7 Datepickerを無効にすることは可能でしょうか？
アドバイスいただければ幸いです。どうぞよろしくお願いします。
とおる様
初めまして。
テストページを拝見させていただきました。
う〜ん、スマホだけ無効にする方法はわからないですね。
ただスマホからも確認しましたが、特に見づらさは感じないのでそのままでいいような気がしますが……。
お力になれず申し訳ありません。
カゲオ様
はじめまして！
ひとつお聞きしたいのですがお問い合わせフォームを固定ページに反映させると左に寄った状態で表示されてしまいます。
「コンタクトフォーム 中央寄せ CSS」などと検索しても情報が無く困っています。
もし中央に寄せるいい方法があれば助言をいただきたいです。
お忙しいとは思いますが宜しくお願い致します。
たまごマン様
はじめまして。
恐れ入りますが、該当ページのURLを送っていただけますか？
よろしくお願いします。
お忙しいところ早速すいません。
URLはこちらになります。
ご確認よろしくお願い致します。
たまごマン様
サイト確認致しました。
お使いのテーマは入力欄が70%に指定されていたので、以下のコードで幅を100%にすれば右側の余白はなくなります。
ただこれだけだとPCで見た時、幅が広すぎるかなと思ったので、以下も合わせて追加すればお好きな幅に調整できます。
また問い合わせページだけ幅を狭めたい場合は、フォームを埋め込んだ固定ページに以下を直接追加してくださいませ〜。
クラシックエディタの場合（テキストエディタ）・グーテンベルク の場合（コードエディター）
以上ご確認のほどよろしくお願いします。
迅速な対応ありがとうございます！
ご提示頂いたCSSを入力してみましたがどうしても反映されなかったので幅を100％に変更することにしました。
貴重な時間を割いて頂き感謝します。
ありがとうございました！
たまごマン様
申し訳ない。コードが少し間違っていたので修正しておきました。
もしよければ、もう一度試してみてくださいませ〜。
カゲオさま
初めまして。
とても素敵なフォームデザインのため、
利用させていただいております。
PC表示時、項目の一番下「お問い合わせ内容」のタイトルのみ、
一番下の表示になってしまい困っております。
これはテーマ自体のCSSの問題なのでしょうか。
レスポンシブの追加CSSは入力済みとなります。
お手数ですが、ご教示いただけますと幸いです。
初心の者様
初めまして。
以前同じような質問をいただいたので以下のコードを追加してみて下さい。
table.inquiry span {
vertical-align: middle;
}
キャッシュを削除後、確認してうまくいかなければ「問い合わせページのURL」を送って下さい。
基本的にカスタマイズ系の質問をする際は、「該当ページのURL」を送っていただかないと確認できないので、お問い合わせの際はご注意くださいませ〜。
よろしくお願いします。
カゲオ様
記事に記載されている通り「zipaddr-jp」をインストールしてフォームを設定したのですが、自動入力ができません。どんなけ調べても原因がわかりません…
考えられる原因はなんでしょうか？
お返事いただけましたら幸いです。
よろしくおねがいします。
andy様
該当ページのURLを送っていただけますか？
よろしくお願いします。
カゲオ 様
お返事ありがとうございます。
以下のサイトになります。
よろしくお願いします。
andy様
サイト拝見いたしました。
「市区町村」のコードが間違っていると思われます。以下のようになっているか再度ご確認お願いします。（特に太字の部分です）
[text* city id:city addr id:addr placeholder “○○市○○1-2-3 ○○マンション 101号室”]
カゲオ様
すごくためになる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号室”]
====================================================
要は、ショートコードを追加したということです。
このコード(ソース)でないと、自分宛てに来る連絡に上記の情報が反映されないという問題点があったため自分なりの改良を施しました。
もし、お役に立つのであればこの素晴らしい記事を見られる皆さんにも共有して頂けるかなと考えご連絡した次第です。
私も見様見真似ながら、個人や自社向けのサイトを管理する立場ですので、今回は本当に感動しました。ありがとうございます。
これからも、更新楽しみにしています。
ツルトロ様
おぉーーー確かにそうですね。申し訳ありません。
実は読者さんからコメントをいただくことで、記事をアップデートしてきた経緯もありますので、こうした助言は非常に助かります。
こちらこそ、わざわざありがとうございました。さっそく記事に反映させます。
今後ともよろしくお願いします。
いつもお世話になっています。
レスポンシブ化はされているのですが、スマホ（私のはiOSです）でみると、縦並びに変わらず、さらに入力欄がはみ出てしまいます。
どこが間違っているのか…。どうやって調整すればよいか教えてください。
テプラ様
該当ページのURLを送っていただけますか？
よろしくお願いします。
カゲオ様
先日、郵便番号などのコード修正案をコメントさせていただきましたツルトロと申します。
今回、もう一点もしかしたら、「こう記載された方が良いのかもしれない」と思った部分がりましたので再度コメントさせて頂きました。
————————————————————
Q&Aの記事にて
Q「プレースホルダーのテキストカラーを調整したい」
A「赤字」の箇所をお好きなカラーに変更して下さい。
input::placeholder {
color: #ccc;
}
————————————————————
こちらは、「スタイルシートのコードに追加」して更にフォントカラーを自由に変更するという意味で合っていますでしょうか。
私は、スタイルシートにContact Form 7のCSSをコピペさせて頂き、
/*入力例の文字色設定*/
input::placeholder {
color: #ccc;
}
というコードを最終行に追加しました。(色は薄灰色になったので変更していません)
というのもCSSのコードを色々検索したのですが、私には見つけられなかったので追記したという経緯です。(理解が間違っていたらごめんなさい)
つまり、「コードの追加をして色を変えてみてね」的な回答であれば、より良いかなと感じました。
もし、認識が合っていればご検討下さい。
ツルトロ様
ご助言ありがとうございます。
ただいま修正しておきました。
またサイトも確認させていただきましたよ。
知らないことも書いてあり、なかなか楽しく読ませていただきました。
コチラのカスタムは、有料テーマ「JIN」にも対応してますでしょうか？
一度導入してみた所、PCでは綺麗に表示されるのですが、スマホだと表示が微ずれしてまして、、折角参考にさせて頂いたカスタムをやめました。。。
しかし、カゲサイさんのカスタムした問い合わせフォームを見てしまった、私としてはカスタムなしのフォームには納得いっておらず、、、
おっじ様
該当ページのURLを送っていただけますか？
よろしくお願いします。
お手数をお掛けして申し訳ございません。
テストページにて作成しました。
カスタム無しはこちらです。
おっじ様
[yoko2 responsive][cell]
[/cell][cell][div class=”huki2″]
確認したところ問題なく表示されていました。
キャッシュを削除すれば解決するかと思います。
よろしくお願いします。
[/div][/cell][/yoko2]
確認して頂きありがとうございます。
私のスマホで見ると、送信ボタンが右側に突き抜けてしまってるんですよね。。。
/*送信ボタンのデザイン変更*/
の
width:350px;
の部分を削除しましたら、突き抜けることなく表示できました！
しかし、これが正しい対処法なのかは、ほぼ素人の私にはわかりません。。。
２月からワードプレスの勉強を始めたばかりで、こちらのようなサイトで一字一句真似してから加工して使用させていただいております。大変勉強になっております。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 “１行以上のテキスト入力欄”]
[acceptance acceptance-442 class:spam1]スパムメール防止のため、こちらのボックスにチェックを入れてから送信してください。
[submit id:formbtn “上記の内容で送信する”]
しば様
一応コードは問題ないようです。
該当ページのURLを送っていただければ、確認してみます。
よろしくお願いします。
カゲオさま
お返事ありがとうございます。こちらローカルのワードプレスでして、URLが送れません。
ローカルだと機能しないのでしょうか？
しば様
いえコードがあってれば、ローカルでも動きますよ。
よろしくお願いします。
カゲオさま
お世話になります。こちらのフォームを活用させていただいたのですが、ボックス内の入力欄の前に大きくスペースが空いてしまいます。
何が原因なのかどうしても分かりません。アドバイスをいただけますでしょうか?
yellow様
サイト拝見しました。
ボックス内のスペースは「pタグ」が大量に挿入されているのが原因なので、フォーム内に記載したコード上部に余白がないか確認してみてください。
特に余白もなく原因不明の場合は、以下のコードをCSSに追記すれば強制的にフォーム内の「pタグ」を消すことはできます。
ただし、オリジナルの送信ボタンも「pタグ」で囲まれていたので、このままだとそちらも消えてしまいます。その場合は、当サイトの送信ボタンを使ってくださいませ〜。
ここからは個人的な提案です。TCD系のテーマは、コンタクトフォーム用に外枠が用意されていますので、そちらを削除したい場合は以下のコードをCSSに追記してください。
またスマホで確認した際、表示が崩れていたので、以下も合わせて追記すると綺麗に表示されるはずです。
よろしくお願いします。
カゲオさま
早速の回答ありがとうございました。結局コードに余白はなく、原因不明だったのですが、強制的にｐタグを消す方法で、こちらのボタンを使わせていただきます。
テーマの更新も併せてやってしまったので、どうも不安定で、うまくできたと思ったら、また崩れてしまったりですが、もう少し頑張ってみます。ありがとうございました。
カゲオさま
先日は丁寧なご教授ありがとうございました。すみませんがもう一つ質問させてください。
強制的にｐタグを消し、空白を解消できましたが、おっしゃる通り、チェックボックスや送信ボタンが表示されなくなりました。
当サイトのボタンを使う、というのは[submit id:formbtn “上記の内容で送信する”]
これをフォーム内に入れるのと、こちらのサイトのCSSを追加記述する以外に何か必要なのでしょうか？
yellow様
ありゃ上手くいきませんか……そしたらこれで試してみてください。
一番下の
</table>の上に以下のコードを追記。よろしくお願いします。
カゲオさま
すべて上手くいきました。思い通りにいきまして満足です。
初心者ながら、こちらのサイトを参考に少しずつ勉強したいと思います。
本当にありがとうございました。
サンクスページや、郵便番号の自動入力など
大変参考にさせて頂いてます。
一つ質問がありコメントさせていただきました。
ContactForm7を使って
管理者、投稿者 意外による
投稿されている記事に対して、
post_statsを変更（公開から下書きへの一方通行）できるボタン
もしくは、カテゴリーを変更できるボタンを実装できますでしょうか。
ここ5日ほど、色々なサイトのサンプルコード を調べても
解決の糸口すら見えなく、ご相談させていただきました。
test_try様
うーん、ちょっとわからないですね。
申し訳ない。
カゲオ様
ご返信ありがとうございます！
ご経験があるカゲオ様にわからないと言うのが大きな収穫です！
他のアプローチを考えようと思います！
本当にありがとうございます！
カゲオ様のカスタマイズ記事にいつも助けられています。
大変恐縮なのですが、コンタクトフォーム７でどうしても一番上のお名前の項目だけ色が青くなってしまい、キャッシュを削除してみても直らなかったのでお問合せをさせていただきました。
試しに青くなってしまう項目の上に同じ項目を追加してみると、一番上(追加した項目)だけが青くなり今までの項目が正常な色になります。
使用しているテンプレがAFFINGER5 EXになるので何か関係があるのかもしれませんが、もし原因がわかりましたら宜しくお願いします。
ゆな様
テーマは関係ないと思いますので、該当ページのURLを送っていただけますか？
よろしくお願いします。
カゲオ様
まだ公開していないのでご覧いただけるか分かりませんが、こちらになります。
よろしくお願いいたします。
ゆな様
サイト確認しました。以下のcssコードを追記してくださいませ〜。
よろしくお願いします。
カゲオ様
お返事遅くなり申し訳ございません。
先ほどCSSを追加し改善を確認しました。
本当にありがとうございます。
これからもカゲオ様のサイトを参考にさせていただきます。
何度も申し訳ございません。
解決できたはずの一番上の項目が再度青いままになってしまっていました。
@media内にも追記してみたりキャッシュを削除したりと試行錯誤したのですがど、素人な為どうにもならず再度お問合せさせていただきました。
何度もお手間をお掛けしてしまい申し訳ございません。
宜しくお願いいたします。
ゆな様
ありゃ、なんか青い箇所増えてますね。
以下のCSSを追記してくださいませ〜。
よろしくお願いします。
何度もお手間を取らせてしまい申し訳ございません。
やっと解決できました。
本当にありがとうございます。
初めまして。
参考にさせて戴いて、フォーム作成したのですが、
レスポンシブでのスマホ表示でデザインが崩れてしまいます。
アドバイス頂けましたら幸いです。
Sato様
該当ページのURLを送っていただけますか？
よろしくお願いします。