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件）
input type=”tel”に対するCSSが設定されないためか、郵便番号や電話番号などの入力欄にスタイルが適用されません。
改善方法はありますでしょうか？
dM様
ご質問ありがとうございます。
「input type=”tel”」だけということであれば
こんな感じでどうでしょうか？
上記は当サイトで使用しているテーマ「SANGO」のコードです。
高さや背景カラーなどは、お使いのテーマの「inputタグ」に合わせていただければと思います。
よろしくお願い致します。
カゲオ様、初心者にも簡単に利用できる実用的な情報のご提供、誠にありがとうございます！
一つ、非常に厚かましいお願いがございます。
完璧で何一つ欠けている項目がなく、すべてカスタマイズ可能だと思っていたのですが、どうしても自分でできない項目が一つございました。
「生年月日」をプルダウンで項目追加する方法をご教示願えませんでしょうか？
とても初心者ですので、他所様でこれをコピペしてください、という説明があっても全く作成することが出来ませんでした。
出来れば、上記のコピペコードに割り込ませてコピペする形で教えていただけたら幸いです。
お忙しところ、大変恐縮です。
カゲオ様
お忙しいところ、早速のご返信ありがとうございます！
ご回答に気づかずに、催促のようなご連絡してしまいご迷惑おかけいたしました。
家に帰って、早速試してみました。お陰様で、私にもできました！
他所様では、一番目のコピペの紹介で終わっていて、その他二つの作業が「当然理解しているべきこと」として省かれていたようで、ようやく私にも設定が出来ました。
カゲオ様は何がわからないかもわからないような、私のような初心者に対する理解力が特に優れていらっしゃるのだと存じます。
お忙しいところご丁寧にご説明頂きましたこと、またご連絡までくださったことに重ねてお礼申し上げます。
カゲオ様のご健勝心よりお祈り申し上げます。
カゲオ様
お世話になります。
お忙しいところ、度々の質問で恐れ入ります。
上記の件、プルダウンのメニューで表示される年の一覧を、デフォルトで指定の
年に選択してある状態にカスタマイズ出来ませんでしょうか？
よく、巷の同様のプルダウン生年月日選択で、1980年あたりにあらかじめ選択されていることが多いです。
1920年生まれより若い方が多く、真ん中たりにデフォルト選択させておくことで、その方たちの選択移動の手間を少しでも省く工夫だと思います。
お手数おかけいたしますが、可能でしたらこの方法に関しまして、ご教示頂けますと幸いです。
ふく様
西暦のデフォルト値を選択したいとのことですね。
その場合は、
[select* birthday-year first_as_label "年" "1940年"......の"年"部分にお好きな値を入れれば指定できます。よろしくお願いします。
カゲオ様
お忙しいところ、早速のご返信誠にありがとうございます。
ご教示通り試してみましたが、思うような結果になりませんでした。
1940年、1941年の列の前にぽこんと指定した1980年が追加されるだけで、
選択メニュー中の1980年を指定してくれていません。
よりまして、結局カーソル移動の手間も変わりません。
お手数おかけしまして恐縮ですが、ご確認頂けますと幸いです。
ふく様
あぁなるほど。初期値だけなら簡単に設定できますが、カーソルを指定位置に合わせるのはかなり面倒なので、ちょっとコメント欄では対応不可です。
一応公式サイトの解説リンクを貼っておきます。
Listo で長いリストを管理する
別途プラグインを使えばいけるみたいですね。
よろしくお願いします。
ふく様
なるほど、仕上がりイメージはこんな感じでしょうか？
であれば、以下のコードをお試しください。
返信メールに使うショートコードは、赤枠部分を使ってください。
CSSは上記を追加することで、横並び＆余白の調整できます。
よろしくお願いします。
こんにちは。とてもわかりやすい解説をありがとうございます。
早速導入してみたのですが、スマホでプレビューを見ると、レスポンシブになっていないようで、はみ出して表示されってしまいます。
どこを修正すればよいでしょうか。
よろしくお願いします。
haru様
はみ出しているのは、送信ボタンですかね？
先ほど、送信ボタンのCSSコードを訂正してみたので、試してみてください。
またフォーム全体がはみ出しているのであれば、該当ページのURLを送っていただければ、確認してみます。
よろしくお願いします。
カゲオ様
こちらでもお世話になりました。自分のイメージに近いフォームはできているのですが、画像の選択後、フォームの送信成功メッセージは表示されますが、添付したファイルが送信されないんです。なんででしょうか？重ね重ね、恐縮ですが、アドバイスお願いします。
つり清渡船様
添付ファイルについては以下の公式サイトを参照くださいませ〜。
ファイルのアップロードとメール添付
ありがとうございます。
「問い合わせページにサンクスページコードを埋め込む」をやっても、サンクスページが表示されず、フォーム全体が表で表示されその上に「フォームは送信されました。ありがとうございます」と表示されます。
対処方法を教えてください。
サンクスページが表示されない件、解決しました。サンプルコードをそのままコピペしていたのが原因でした。scriptの中にあった設定を削除したら表示されました。
お騒がせしました。すみません。
Pon様
解決されたようで何よりです。
しかしながら、ご質問を受け久々に該当部分を確認したところ、赤字にするためのタグがそのまま表示されていたことに気付けました。
また少し分かりにくかったかなぁと思い、補足説明を改善しておきました。
今回の質問がなければ、気付かなかった点なので、こちらとしても非常に助かりました。
ありがとうございます。
今後とも｢カゲサイ｣をよろしくお願いします。
こんにちは はじめまして。こちらのフォーム大変きれいで、使わせていただきました。
ありがとうございます。
一つ質問させてください。横幅が360pxを切ると フォームが見切れてしまうのですが、対策方法はありますか？
maki様
ご質問ありがとうございます。
”該当ページのURL”を送っていただければ、確認いたします。
カゲオさま
お返事ありがとうございます。ご協力いただき誠に感謝いたします。
まだ公開前のサイトなので、公開は非掲載でお願いできますか？
こちらの２つのサイトで利用いたしました。
maki様
サイトを確認いたしました。
上側のサイトは以下のコードを追記してください。
だけでイケると思います。
ご確認のほどよろしくお願いします。
お忙しい中教えていただき誠にありがとうございます。
実機のですと動作確認ができなくて お返事が遅くなりすみません。
自分の手持ちのものが iphone4で古いためか、、 seなどで確認できたらまた連絡させてください。ありがとうございました。
お世話になります。とても役立っています。弊社のサイトに適用しようと思いましたが
１．テーマがWING（アフィンガー５）の為同じように反映されないのか
２．そもそも、このページで紹介されている方法をちゃんと反映させてないのか
判断ができず、もし可能であれば、ご指導いただけますと幸いです。
該当URLは
でございます。日本語URLで見苦しく、申し訳ございません。
三木高広 様
サイトを確認いたしました。
デザインは問題なく反映されています。
おそらくキャッシュが原因かと思われるので、削除して確認してみてください。
よろしくお願いします。
大変参考になります。
ありがとうございます。
ご教示頂きたいのですが、問い合わせフォームのカスタマイズコードで項目設定して、実装したのですが、返信されるメールにカスタマイズコードの入力事項が反映されません。
最下部の「お問い合わせ内容」のみ（差出人、題名は入っています）が、返信メールに反映されて送られてきます。
設定を間違っているのでしょうか？
お手数ですが、ご教示頂けると助かります。
kaz様
コメントありがとうございます。
・返信されるメールは以下の赤枠部分のショートコードを追記すれば、欲しい情報を反映できます。
コードはフォームに入力したHTMLごとに違うので、ご自身のコンタクトフォームを確認してみてください。
よろしくお願いします。
ちょっと説明足らずでしたので、補足を。
ドロップダウンメニューで選択した、各項目や、〒番号・住所等が、返信メールに反映しないのです。
ドロップダウン項目の、メールタグの記載がいるのだと思いますが、判りますでしょうか？
カゲオ様、
判りました！
ありがとうございます。
お手数をおかけしました。
kaz様
解決されたようで何よりです。
今後とも｢カゲサイ｣をよろしくお願い致します。
カゲオ様、
もう1点教えて下さい。
「問い合わせページにサンクスページコードを埋め込む」をやっても、サンクスページが表示されず、フォーム全体が表で表示されて、その上に「フォームは送信されました。ありがとうございます」と表示がされます。
当然、サンクスページのURLに変更しての書き込みをしています。
tcdのテンプレートを使っているのですが、それも関係しているのでしょうか？
もし対処方法があればご教示頂けませんか？
宜しくお願いします。
kaz様
コメントありがとうございます。
一点だけ確認を。
「ビジュアルエディタ」ではなく「テキストエディタ」になっていますか？
もし「テキストエディタ」に貼り付けても上手くいかないのであれば、貼り付けたコードを送ってください。
カゲオ様、
ありがとうございます。
こちらです。
ーーーーーーーーーーーー
document.addEventListener( ‘wpcf7mailsent’,function( event ){
location = ‘http://◯◯/’;
}, false );
ーーーーーーーーーーーー
コードは、テキストエディタに切り替えて貼り付けています。
宜しくお願い致します。
kaz様
コードを確認したところ合ってますね。
先ほどテストメールを送らせてもらい、実際の表示も確認しました。
うーん、なんでしょう。こちらのコード「問い合わせページ」の先頭に貼っているでしょうか？
「サンクスページ」ではなく「問い合わせページ」の先頭です。
もしそこも合っているのであれば、申し訳ないですが原因は分かりかねます。
ご確認のほどよろしくお願いします。
カゲオ様、
ありがとうございます。
問い合わせページの先頭です。
お手を煩わせて申し訳ありませんでした。
今後もブログを拝見させて頂きます。
ありがとうございました。
kaz様
いえいえ、お力になれず申し訳ありません。
素敵なホームページですね。
今後とも「カゲサイ」をよろしくお願いします。
カゲオ様
いつも大変参考にさせていただいており、お世話になっております。
2019年５月１３日のkaz様の問い合わせの関連で、サンクスページに飛ばないという件ですが、wordpressのバージョン4.910の時はサンクスページに飛んでいたのですが、5.2にバージョンアップしたところ、飛ばなくなってしまいました。バージョン5.2でも問題なく動作していますでしょうか？
Classic Editorプラグインも入れてみましたがうまくいかず、なにかご存知でしたら、ご教示願えますでしょうか？
よろしくお願いいたします。
masa様
コメントありがとうございます。
参考になっているようで何よりです。
問い合わせフォームより、自己解決できた旨、了解致しました。
今後とも「カゲサイ」をよろしくお願いします。
カゲオさま
とても素敵なフォームだったので、使わせていただきたいと思い、コピペしたところ、保存すると「閲覧できません (Forbidden access)」というメッセージが出てします。
そもそも、WordPressの設定として、コンタクトフォームの設置にあたり、何か必要なのでしょうか？初心者すぎて申し訳ありません・・。
現在、有料のテーマをインストールしてWEBページを製作しております。
もし、何か思い当たる点があればご教授いただけないでしょうか？
お手数おかけしますが、何卒よろしくお願いいたします。
mayu様
コメントありがとうございます。
Contact Form 7を設置するにあたり、WordPressの設定やテーマにより、特別なにか必要ってことはないですよ。
おそらくですが、お使いのレンタルサーバーに「WAF設定」という項目があれば、そちらを一度「OFF」にすれば正常に戻るかもしれません。
ご確認のほど、よろしくお願いします。
カゲオさま、ありがとうございます！おかげで解決しました！！感謝です。
mayu様
おぉーよかったです。
今後とも「カゲサイ」をよろしくお願いします。
カゲオさま、何度もすみません。もう一つ確認ですが、ラジオボタンやチェックボックスが最初から一つ選択されていますが、それをなしにする設定はどちらですれば良いでしょうか？もしも、記載されているのを見落としていただ申し訳ありません。よろしくお願いいたします。
mayu様
ラジオやチェックの初期値を外すには以下の「default:1」部分を削除してください。
[checkbox* checkbox-4 use_label_element default:1 class:verticallist class:check4 “サンプル13” “サンプル14” “サンプル15”]
ただし、ラジオボタンに関しては初期値を設定することが推奨されているので、外すのであれば「チェックボックス」のが良いと思います。
よろしくお願いします。
カゲオさま、何度もありがとうございました！
カゲオ様
参考にさせて頂き、自分のHPに入れてみたのですが、パソコンサイトは問題ないのですが、スマホで閲覧すると、縦並びにならず見難い状態になっています。
使っているテーマはlightningなのですが、何か特殊な設定は必要でしょうか？
CSSのタグはそのままコピペで入れています。
になります。
お手数おかけしますが、よろしくお願い致します。
じょーけん様
コメントありがとうございます。
「Lightning」は使ったことがないので、わかりませんが
該当ページのURLを貼っていただければ確認致します。
よろしくお願いします。
すみません。何もしていないのですが、先ほど改めて確認したら縦並びになっていました。
理由がわかりませんが（時間が経てばOK？）解決しております。
ありがとうございました。
じょーけん様
解決されたようで何よりです。
デザインが反映されない原因の99%は「キャッシュ」ですので、今後も反映されないことがあれば
キャッシュ削除の方法を覚えておくと便利ですよ。
「キャッシュ削除」でググれば、解説記事がたくさん出てきます。
今後とも「カゲサイ」をよろしくお願いします。
カゲオさま
参考にさせて頂いており、助かっております。
ここで詳細されているラジオボタン横並び のように、「テキストを横並び」にするのはどうすれば良いのでしょうか？
2000年 普通免許取得 のように、2000年 を入力する部分と、普通免許取得 を入力するようなものにできないかと思っております。
ご教授頂けると幸いです。
wp初心者様
コメントありがとうございます。
「テキストを横並び」とはどのような状態でしょうか？
参考になるサイトなどがあればURLを貼っていただけるとイメージしやすいです。
よろしくお願いします。
カゲオさま
テキスト横並びの件ですが、下記サイトの「登録名」「ふりがな」のような感じです。
wp初心者様
参考サイト確認いたしました。
この場合「HTML・CSS・ショートコード」3つを調整する必要があるので、ちょっとコメント欄では対応できないですね。
申し訳ありません。
カゲオさま
そうねんですね。わざわざ確認までして頂きありがとうございました！
これからも参考にさせて頂きます。
カゲオ様、
こちらのページ
なのですが、スマホで見ると挿入枠が画面からはみだしてしまいます。
何か記述を間違えているのだと思いますが、お分かりになりますでしょうか？
CSSの編集で自己解決致しました。
お手数をおかけしました。
カゲオさま、とてもわかりやすく簡単に作成ができ、とても助かりました。ありがとうございます。
質問があります。
日付入力のところですが、横幅いっぱいスペースが取られてしまい、▼が右端にありすぎて気づかなそうです。カゲオさんの見本だとそ真ん中くらいに▼がありますが、この幅の調整はどこでしたら良いでしょうか？
メロン様
お役に立てたようで何よりです。
さて、入力欄の調整ですね。
ここはテーマにより、違うので調整する場合は、以下の通りです。
①調整したい入力欄の上で右クリック
↓
②「検証」をクリック
↓
③そうすると「input〜」みたいなコード（赤枠部分）がズラーっと出てきます。
この中の「width:◯◯」で幅を指定しています。
なので、赤枠内を全部コピーして、style.cssに貼り付け、widthの値を変更すればOKです。
※キャッシュ削除を忘れずに。
ご確認のほどよろしくお願いします。
かげおさま、さっそくありがとうございます！
レスポンシブなのでautoや50%など指定して、検証の際にやってみました。概ねうまくいくのですが、それ以外のところ（フリーで一行以上入力する項目など）も同じようにサイズが小さくなってしまいました。
かげおさんの見本だと、一行以上の入力項目欄は、100％のwidthで表示されていますが何か設定されていますか？
メロン様
なるほど。部分的に調整したい場合は、先ほど全部コピーした「input〜」のうち
100%のままにしたい入力欄の上で「検証」→該当セレクタ（input〜）を除外すればOKですよ。
よろしくお願いします。
カゲオ様、
2019年5月15日のmasa様の、サンクスページの自己解決ですが、解決法をご存じでしたら、ご教示頂けないでしょうか？
kaz様
masa様の件ですが、アップデートしたところ、サンクスページのコード内に<br>タグが複数入っていたとのことです。
<br>タグを削除したところ、正常に動いたと報告をいただきました。
ご確認のほど、よろしくお願いします。
kaz様
先ほど、読者の方よりサンクスページの不具合に関する、新たな自己解決法のコメントをいただきました。
記事中「Contact Form 7【まとめ】」の上に引用したので、もしまだ解決されていないようであれば試してみてください。
こんにちは
サイト大変参考になりました。
送信完了ページにリダイレクトされない件、何十回もトライしたところ、
こちらの「Contact Form 7の読み込みを使用するページだけに変更」のコードを削除し、コンタクトフォームの編集のフォーム内の一番上のところにスクリプトコードを記述したらうまくいきました。
参考になればとこちらにのこさせていただきます。
Emi様
大変有益なコメントをいただきありがとうございます。
またお手数をおかけして申し訳ありません。
さっそく記事に引用させていただきます。
今後とも｢カゲサイ｣をよろしくお願いします。
カゲオさま
お世話になります。
先日、ご質問させて頂いた件については何とか解決することが出来ました。
しかし、サンクスページは、他の質問者さまと同様、送信しましたという案内が出るだけでページは表示されません。
サイトはCocoonを使用しています。
恐れ入りますが、ご確認いただけますでしょうか。
よろしくお願い致します。
どきん様
サンクスページの件ですね。
2日前に読者の方が、解決方法をコメントしてくださいました。
当記事でも追記（最後のまとめの上あたりです）しているので、そちらの方法を試してみてください。
よろしくお願いします。
カゲオさま
お世話になります。
サンクスページですが、やはりうまくいきませんでした。
記述がおかしいのでしょうか？
あと必須を右側に一行で表示したいのですが、display: inline-block;では
二行のままになります。
記述方法が違っていたのなら申し訳ありません。
合わせてご確認頂けると幸いです。
よろしくお願い申し上げます。
どきん様
うーん、かもしれませんね。
コードが正しくても「JavaScript」は相性の悪いプラグインもありますので、一度プラグインを全停止→1つずつ有効化して干渉してるプラグインを停止させるのも1つの手です。
必須の件ですが、HTMLに<br>タグが入っちゃってますね。なので、削除すれば横に表示されます。
というか、サイトめちゃめちゃオシャレですね。Cocoonでここまでカスタムしてるサイトは初めて見ました。
まだ公開前だと思うんですけど、おそらくデザイン面で参考にしたい方かなりいると思いますよ。
少し脱線しましたが、よろしくお願いします。
カゲオさま
お世話になります。
早々にご連絡ありがとうございました。
必須の件は無事思い通りに並びました！
JavaScriptの相性…。なるほど勉強になります！
先ずは試してみます。
あとサイトをほめて頂きありがとうございます！
40歳過ぎて、新たなチャレンジの一つがサイトを作るってことで始めたのですが、
デザインを兼ねたUIって本当に難しく、毎日葛藤している状態です。
興味はあったものの、超が３つくらいつくド素人なので、他のサイトも参考させて頂きながら、日々精進しております。。
こうしてお褒めの言葉を頂くことで活力になります。
完成まではまだまだ先が見えないですが頑張ります！
本当にありがとうございました。
初めまして。とても参考にさせて頂いております。
ご紹介頂いているフォームを利用させてもらおうと設定してみたところ、
下記の二点でイメージ通りになりません。
１．PC表示の際、項目部分が上下中央揃いにならない
２．モバイル表示の際、表が崩れてしまう
該当のページアドレスは以下になります。
https:◯◯
お手すきの際にでもご教授頂ければ幸いです。
御多用の中お手数をお掛け致しますが
宜しくお願い申し上げます。
度々失礼致します。
先程質問させて頂いたものです。
その後スタイルシートを修正し、
１に関しては解決致しました。
しかし、２に関して、classやidを指定しながらフォームが画面を突き抜けない様にしたのですが、
モバイル表示の際、今度は画面が100%で表示されずに、
右側が全体的に少し空いてしまいます。
widthの％での指定が間違っているのでしょうか。
教えて頂ければ幸いです。
以上、宜しくお願い致します。
マサ様
コメントありがとうございます。
ただいまこちらで確認したところ、キャッシュ削除すれば問題なく表示されるはずですが、いかがでしょうか？
ついでに、問い合わせフォーム周りの枠線と背景色はテーマ独自のCSSだと思いますので、以下のコードを追記すれば消すことができます。
もし気になるようでしたらご参考までに。
.wpcf7 {
background: none;
border: none;
}
カゲオ様
早速のご回答誠にありがとうございます。
フォーム周りの枠線と背景色の件、助かりました。
早速対応させて頂きました。
現状、私のiphoneでキャッシュを削除して表示させてみると、
下記の様にフォームが突き出てしまいます。
そこで、下記の部分を修正してみました。
@media(max-width:500px){
内にある、
width:100%!important;
の部分を
width:83%!important;
に変更。
↑の様に表示され、フォームは画面内に収まりますが、
トップの画像の右端がなぜか少し空いてしまいます。
スタイルシートがいまいち分からず困っております。
ご確認頂ければ幸いです。
マサ様
ありゃ失礼しました。
確かに右側に大きくズレていますね。
では以下のコードを追加してみてください。
ちなみに、基本WordPressのコメント欄は相手側から画像を送ることはできない仕様になっています。
プラグインや自前でカスタムすることもできますが、そこまでしてる方はあまりいないかなと。
ただコメントに対して、サイト管理者側はimgタグを使えば画像を載せることはできます。
こんな感じ↓
<img src=”https://www.smalls-it.com/img/S__7503936.jpg”>
余談でしたがご参考まで。
よろしくお願いします。
カゲオ様
お世話になります。
ご回答ありがとうございます。
色々と勉強になります。
画像の件、失礼致しました(;^_^A
教えて頂いたコードを追加してみました。
やはり携帯で表示させると、
ヘッダー、フッターの部分がどうしてもフルサイズで表示されず、
右側が少し空いてしまいます。
コードの追加する場所が間違っているのでしょうか？(-_-;)
テーマ独自のcssが変に反映されているのか。。。
マサ様
以前いただいた以下のコメント部分
ーーーーーーーーーーーーーーーーーー
@media(max-width:500px){
内にある、
width:100%!important;
の部分を
width:83%!important;
に変更。
ーーーーーーーーーーーーーーーーーー
こちらを100%に戻せば、問題ないかと思います。
またこちらのコードも反映されていなかったので、追記しておいてくださいませ〜。
@media(max-width:500px) {
p-page-header__inner l-inner .p-page-header__desc {
text-align: center;
}
.p-breadcrumb .c-breadcrumb .u-clearfix{
margin: 0 0 0 25px;
}}
＜補足＞
・上側のコードが、お見積もり〜の下にある文言を真ん中に寄せるコード
・下側はパンくずリストを左側に寄せるコード
となります。
よろしくお願いします。
はじめまして。
初心者ですが、カゲサイ様のサイトを参考にcocoon
元の検索キーワード: cocooonでHPを作成しています。
そこで何点か質問させてください。
問い合わせフォームはカゲサイ様のページを参考に作っています。
①問い合わせフォームに確認ページとサンクスページを作りたいのですが、
確認ページの作成方法が記載されていなかったので、自分なりに調べて
Contact Form 7 add confirmのプラグインを入れました。
しかし、確認ボタン等追加しても表示されません。
何か方法はありますか？
②「スパムメール防止のため、こちらのチェックボックスにチェックを入れてから送信してください。」
ですが、チェックボタンを押さなくても送信できてしまいます。そのような仕様でしょうか？
このボタンを押さなければエラーが出る方法等ありますか？
③記入例の文字の色が少し濃く感じたので自分なりに調べてCSSに追加したのですが
この内容で間違いないでしょうか？何か注意することはありますか？
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color:#ccc;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color:#ccc;
}
::placeholder{ /* Others */
color:#ccc
}
④添付ファイルを追加したくて、下記内容を追記したのですがよかったでしょうか？
ファイルを添付（最大2MB）
[file your-images1 limit:2mb filetypes:gif|png|jpg|pdf|ai|psd|xls|xlsx|doc.docx|ppt|pptx]
[file your-images2 limit:2mb filetypes:gif|png|jpg|pdf|ai|psd|xls|xlsx|doc.docx|ppt|pptx]
[file your-images3 limit:2mb filetypes:gif|png|jpg|pdf|ai|psd|xls|xlsx|doc.docx|ppt|pptx]
[confirm “確認”][back “編集画面へ”][submit “送信”]
[acceptance acceptance-442 class:spam1]スパムメール防止のため、こちらのチェックボックスにチェックを入れてから送信してください。
[submit id:formbtn “上記の内容で送信する”]
初心者の為質問に失礼があったらすみません
どうぞよろしくお願いいたします。
うさこ様
コメントありがとうございます。
さて、4つの質問について
①と④は、自己解決でお願いいたします。
②は記事内で紹介しているセキュリティプラグインでスパムを防げるので、コードを削除してプラグインで対応してくださいませ〜。
③のCSSは以下で変更できます。
ーーーーーーーーーーーーーーーーーーー
input::placeholder {
color: #ccc;
}
ーーーーーーーーーーーーーーーーーーー
基本的に、記事の内容に関する質問にはお答えしていますが、ここから派生させたカスタムをしたい場合は、ご自身で対応いただいています。
申し訳ありませんが、よろしくお願いします。
カゲオ様
お手数をおかけしました。
有難うございます。③すぐに改善しました。
②につきましては、記事再度確認し対応してみます。
ありがとうございました。
カゲオ様
お世話になります。
ご回答ありがとうございます。
該当の箇所を100％にするとやはり右側に突き抜けてしまうんですよねぇ。
また、カゲオ様に教えて頂いた下記も追記しております。
@media(max-width:500px) {
p-page-header__inner l-inner .p-page-header__desc {
text-align: center;
}
.p-breadcrumb .c-breadcrumb .u-clearfix{
margin: 0 0 0 25px;
}}
ブラウザ特有の何かがあるのかと思い、
safari、chromeで試しましたが、
やはりモバイル表示だとうまくいきません。
マサ様
ありゃそうですか。うーん、何でしょうね。
こちらでも色々やってみたのですが、どうもうまくいきませんでした。
お力になれず申し訳ありません。
カゲオ様
いえいえ、ありがとうございました。
お陰様でとても勉強になりました。
こちらももう少し勉強したいと思います。
今後も参考にさせて頂きます。
はじめまして。
参考にしてサイトを作っているのですが、スマホサイズで表示すると右側が切れてしまいます。
CSSをいじくればいいのかなと思うのですが、どうしてもできません。
ご教授いただければ幸いです。
修様
はじめまして。
サイトを拝見いたしました。
以下のCSSを追記してみてください。
下側のCSSはフォーム外側の枠線を細くするためのものです。
ご質問とは関係ありませんが、その方がデザイン的にいいかな〜と思ったので提案してみました。
最後に1つ
@media (max-width: 900px)
.inquiry th, .inquiry td {
display: block!important;
width: 80%!important;
おそらくご自身で、上記の幅（width）を80%に変更されたと思うのですが、こちらを100%に戻していただければスマホでも綺麗に表示されます。
CSS変更後「キャッシュ削除」を忘れずに〜。
どうぞよろしくお願いします。
カゲオ様
いい感じになりました！どうもありがとうございます。
１点だけ・・・提案していただいたフォーム外側の枠線を細くするためのCSSがイマイチうまくいかないというか、お手数ですが、もう一度ご確認いただけますか？
@media (max-width: 900px){
.inquiry th, .inquiry td {
display: block!important;
width: 80%!important;
}}
少しスペースができてしまう感じですが、これでいいですか？個人的には、このCSSがない方がぴったりハマる気がします。。。
よろしくお願いします。
修様
申し訳ない。
お伝えの仕方がわかりにくかったですね。
の80%部分を100%に変更していただくと、バランスが取れますのでお試しくださいませ〜。
カゲオ様
お忙しいところ、何度もすいません。
もう一つ教えてください。
コンタクトフォームを複製し、同じように作ったときに、なぜかこのページがCSSが反映されないようで（前回同様スマホサイズで表示すると右側が切れてしまいます。）、前回観ていただいたページは修正されています。
ページごとにCSSを打ち込む必要があるのですか？
教えてください。
よろしくお願いいたします
カゲオ様
何度もすいません。
@media (max-width: 900px){
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required{
width: 100%;
}
table.inquiry {
border: 1px;
}}
↑にinput.wpcf7-form-control.wpcf7-textを追加したら自己解決できました。お騒がせしてすみません。ただなぜこれで修正されたのかわかりませんが。。。ありがとうございました。
カゲオ様
完璧です！どうもありがとうございました。
カゲサイさま、はじめまして。
コンタクトフォームの設置に際し、とてもわかり安く利用させていただいております。
PC表示では問題ないのですが、スマホでの表示にした場合、なぜか縦並びになりません。
さらに「必須」「任意」などの文字が、色無しでそのままになってしまいます。
どのようにしたらきれいなレスポンシブデザインになるのでしょうか。
アドバイスいただけたら幸いです。
何度もすみません。自己解決しました。
]でしっかり区切れていなかったのが原因のようでした…お恥ずかしいです。
無事素敵なレスポンシブデザインとなりました。ありがとうございました。
今後とも参考にさせてください。
アリ様
自己解決の旨了解しました。
ご連絡ありがとうございます。
一応サイト拝見させていただきました。（現在出先なのでスマホ閲覧のみになります。）
気になった点を2点ほどお伝えします。
1.スマホで見た時のヘッダーが大きすぎるので小さく（当サイトくらいのサイズ）すると、見栄えが良くなります。
もう一つは、メニューの表記が英字なので、カタカナにしてあげると「アクセシビリティ」が上がるかなと思います。
ご職業柄、多種多様なお客様が閲覧されると思うので、特に見やすさにはこだわった方が良いかと思い、余計なお世話をしてしまいました。
今後とも「カゲサイ」をよろしくお願いします。
カゲオさま
ヘッダーも小さくし、更にメニュー表記もわかりやすく日本語に替えました。老若男女対象にしているのでみやすさは大切ですね。デザインばかりにこだわり反省です…。アドバイス本当にありがとうございました！
アリ様
いえいえ、いい感じになりましたね。
気が向いたらまた覗きに来てくださいませ〜。