SWELLで特化サイト作ってみた

Contact Form 7をプロ級フォームにカスタマイズする方法

Contact Form 7カスタマイズ

この記事では【Contact Form 7】の使い方〜カスタマイズ(コピペ可)まで丁寧に解説しています。

スパム対策プラグイン「Akismet」と連携させたコードを使用しているので、まずはそちらを設定しておくとスムーズになります。

現在「Akismet」は不要なプラグインです。フォームのスパム対策は以下のプラグインを推奨しているので、後ほど解説します。

Invisible reCaptcha for WordPressの設定【セキュリティ対策】

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

コンタクトフォーム7サンプルフォーム

PC表示

スマートフォンフォームサンプル

スマホ表示

スマホでは縦並びに変わるレスポンシブデザインです。

2020年3月30日:追記

当記事に寄せられた質問がかなり増えてきたので、記事下に「Q&A」を作りました。

もしかしたら何かの役に立つかもしれません。

Contact Form 7をインストール

クリックorタップで画像拡大

コンタクトフォーム7インストール方法

管理画面

プラグイン

新規追加」をクリック

検索窓に「Contact Form 7」と入力」

今すぐインストール」をクリック

ボタンが「有効化」に切り替わったらクリック

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>部分を削除してください。

またデザインだけでなく「必須」と「任意」は、ショートコードの最初の文字列の最後* アスタリスクを付けるか否かで、設定できます。

コンタクトフォーム7必須の設定

その他の不要なコード(項目)は<tr>〜</tr>部分を削除してください。

回答形式のタグ=[quiz]は、質問に答えられないと送信できないため、botによるスパムを防ぎ、セキュリティを向上できます。(後ほどセキュリティプラグインを紹介しますが、プラグインを増やしたくない人はこの方法でもいいですね。)

また少し高度な使い方をすると、採用フォームやターゲット属性を絞りたい時に、特定の人しか答えられないような質問をし、スクリーニングをかけることもできます。

あとは「日本語部分」を好きな言葉に変更すればオリジナルフォームの原型ができます。(この後CSSで調整します。)

郵便番号から住所を自動入力したい

2018年10月8日:追記

読者の方から以下のような質問をいただいたので備忘録として、回答を載せておきます。

コンタクトフォーム7読者からの質問

コンタクトフォーム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」というプラグインをこの問い合わせで知ったのですが、これは便利。

インストールして専用コードに置き換えるだけで郵便番号を入力すると番地以外自動入力されます。

郵便番号自動入力

郵便番号自動入力

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号室"]

青字」部分を削除して「赤字」のプラグイン専用コードに置き換えています。

採用フォームなどで重宝すると思うので、よかったら活用してください。

2020年4月・追記

コメント蘭にて、上記の変更後のコードに自動返信メール等で使うショートコードが抜けているとご助言をいただきました。

現在は修正済みですので、迷われていた方は申し訳ありませんでした。

またこうしたコメントは非常にありがたく管理人も助かっておりますので、何かあれば遠慮なくおっしゃってくださいませ〜。

今回の「フォーム用コード」は「Tableタグ」を使っています。もう少しデザインをカスタマイズしたい方は、こちらを参考にして下さい。

TableタグデザインHTMLテーブルをCSSでオシャレにデザインする為の講座

お問い合わせフォームのメール設定

まずは、お問い合わせがあった際、自分に送られてくるメール設定をしましょう。

※クリックorタップで画像拡大

コンタクトフォーム7メール設定

送信先:自分のメールアドレス

送信元:自分のメールアドレス

題名:任意のものを入力

追加ヘッダー:変更しない

メッセージ本文:任意の文と※ショートコードを入力

補足

※よく使われるショートコード

  • [your-name]ー相手の名前
  • [your-email]ー相手のメールアドレス
  • [your-message]ー問い合わせ内容

設定が完了したら、次は問い合わせをくれた相手に送る自動返信メール設定をします。※不要な方は飛ばしてください。

メール設定画面で下にスクロール【メール(2)を使用】にチェックをいれると、設定項目が表示されます。

※クリックorタップで画像拡大

コンタクトフォーム7メール2設定

送信先:[your-email]

送信元:サイト名や自分の名前<自分のメールアドレス>

題名:任意のものを入力

追加ヘッダー:変更しない

メッセージ本文:画像参照

補足

送信先を[your-email]にすると、問い合わせ時に頂いたメールアドレスに自動返信メールを送ってくれます。

これでメール設定は終了です。

スポンサーリンク




お問い合わせメッセージ設定

続いて、お問い合わせフォームで表示されるメッセージを設定します。ここはデフォルトのままでも問題ないですが、変更する場合は以下の画像を参考にして下さい。(サンクスページを作るなら設定不要)

Contact Form 7設定

ここまで設定が終わったら「保存ボタン」を忘れずに。

補足

上記画像の「その他の設定」は設定不要。

Contact Form 7のCSSコード

続いてCSSを子テーマのstyle.cssにコピペします。

WordPressスタイルシート

手順
  1. 外観の中にある「テーマの編集」をクリック
  2. コード貼り付け
  3. ファイルを更新をクリック

子テーマの使い方はこちら

WordPress子テーマCyberduckの使い方WordPressの子テーマを分かりやすく解説
style.css
copyする
/*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お問い合わせページの作成

ここまで来たら、あとはコピペするだけでお問い合わせページが完成します。

コンタクトフォーム7コンタクトフォーム

Contact Form 7設定

管理画面

お問い合わせ

コンタクトフォーム

先ほど設定したお問い合わせフォーム

ショートコードをコピー

続いて

WordPress固定ページ新規作成

管理画面

固定ページ

新規作成

先ほどコピペしたショートコードをエディタ(ビジュアルでもテキストでもOK)に貼り付け、タイトル入力後に公開。

お問い合わせページ作成

最後に、お問い合わせフォームから自分宛にメールを送りテストしてみましょう。

メールが届けば設定完了です。

Contact Form 7の読み込みを使用するページだけに変更

ContactForm7は重い、遅いという声が時折ネットに出ています。それならば、フォームを使用するページだけに読み込ませましょう。

以下のコードを「functions.php」に追記してください。

functions.php編集

functions.php編集

functions.php
copyする
//コンタクトフォーム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マーク

ReCAPTCHAマーク

Google推奨の上記セキュリティをプラグインで導入します。

これによりスパムとおさらばできます。

Invisible reCaptcha for WordPressの設定【セキュリティ対策】

Contact Form 7のDOMイベントでサンクスページを作成する

問い合わせフォームだけなら上記の設定だけで十分なんですが、ビジネスとしてサイトを活用している方はサンクスページの設定も知っておくと便利です。

注意

以前はon_sent_ok やon_submitを使用してサンクスページを作成していましたが、現在この方法は非推奨とされており、2017年度内に廃止されました。

ネット上にあるサンクスページの作成は古いものもあるので注意。

固定ページにサンクスページを作る

WordPress固定ページ新規作成

管理画面

固定ページ

新規作成

例えば、こんな感じのページを作成します。

サンクスページサンプル

これは問い合わせに対する簡易的なサンクスページですが、やり方を覚えておけば「クロスセル」などで別商品を勧めるページを作成することもできますね。

クロスセルとは?

ある申し込み(購入や登録など)に対し、類似するまたはセット購入するとお得な商品などを勧めること。

例:テーブルの申し込み→そのテーブルに合う椅子を勧めるなど。

上記サンプルは以下コードを使用しています。

HTML
copyする
<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.css
copyする
.thanksPage img{ float:left; }

widthの値で画像サイズを調整できます。

この時、お使いのテーマに固定ページを「1カラム」に変更することが出来れば見た目が良くなります。

WordPress設定

実際の表示

サンクスページサンプル2

補足

ページ公開後、送信ボタンを押すとこのページに切り替わります。

サンクスページに「noindex」設定を忘れずに↓

サンクスページは「noindex」設定にする

サンクスページは、読者やお客さんのためになるページですがSEO的にはよろしくないページです。(内容がないページなので)

こういった場合は、このページを検索エンジンに検知されないようにする必要があります。

補足

noindexとは……検索結果に表示させないようにするもの。

やり方については、以下の記事を参考にしてください。

WordPressでnoindexとnofollow設定する方法WordPressでnoindexとnofollow設定をする2つの方法

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

Google XML Sitemaps設定Google XML Sitemaps設定とサーチコンソールの登録はセットで行う

サイトマップからサンクスページを除外する

PS Auto Sitemap」というプラグインでサイトマップを作成している方は、サンクスページをサイトマップから除外しましょう。(除外しないとサイトマップから見れるのでサプライズ感がなくなります。)

その場合はこちらの記事を参考にして下さい

PS Auto Sitemap設定PS Auto Sitemapの設定と使い方【HTMLサイトマッププラグイン】

問い合わせページにサンクスページコードを埋め込む

先ほど作成したサンクスページのURLをコピーしてください。

注意

プレビューのURLではなく正規のURLをコピーする。

WordPress固定ページ表示

WordPressURLコピー

問い合わせフォーム(サンクスページを表示させたいページ)に移動し、テキストエディタの先頭に以下のコードを追加。

サンクスページ サンプル

テキストエディタ
copyする
<script> document.addEventListener( 'wpcf7mailsent',function( event ){ location = 'サンクスページのURL'; }, false ); </script>

サンクスページURL部分は、送信後に表示したいURLを貼り付けてください。後は、テスト送信して貼り付けたページが表示されればフォームの完成です。

2019年:5月追記

以前読者の方より、サンクスページが上手く動作しないとコメントをいただきました。その時は原因不明だったのですが、別の方よりコメ解決方法を提示したコメントをいただけました。

同じく上手く動作しない方は、以下の方法を試してみてください。

こちらの「Contact Form 7の読み込みを使用するページだけに変更」のコードを削除し、コンタクトフォームの編集のフォーム内の一番上のところにスクリプトコードを記述したらうまくいきました。

Contact Form 7のQ&A

当記事のコメント欄ではこれまで様々な質問をいただきました。
もちろんすべてのお力になれたわけではありませんが、解決できたことをこちらにまとめておこうと思います。

質問

生年月日の入力欄を”カレンダー形式”ではなく”ドロップダウンメニュー形式”に変更したい。

回答

コンタクトフォーム7ドロップダウンメニュー
回答はこちら

質問

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
質問

自動返信メールに入力内容が反映されない。

回答

以下の赤枠で囲ってある部分をメールに貼り付けて下さい。
contactフォーム7返信メール設定
またこちらのショートコード生成は以下の「赤字」部分で行なっているので好きなものに変更できます。

フォームタグ
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のサンプルコード
①調整したい入力欄の上で右クリック

②「検証」をクリック

③そうすると「input〜」みたいなコード(赤枠部分)がズラーっと出てきます。
この中の「width:◯◯」で幅を指定して下さい。
なので、赤枠内を全部コピーして「style.css」に貼り付け「width」の値を変更する、もしくは調整したいコードだけを抜き出してもOKです。

質問

「必須」とテキストが横並びになりません。

回答

フォームタグに<br>タグが含まれていないかを確認して下さい。

質問

プレースホルダーサンプル

プレースホルダーのテキストカラーを調整したい。

回答

以下をstyle.cssに追記して「赤字」の箇所をお好きなカラーに変更して下さいませ〜。

style.css
copyする
input::placeholder { color: #ccc; }
質問

お問い合わせ内容」のテキストだけ下側に配置されて見栄えが悪い。

回答

以下のコードを追記してみて下さい。

style.css
copyする
table.inquiry span { vertical-align: middle; }
質問

TCD系テーマだと表示が崩れる。

回答

TCD系テーマは、テーマにオリジナルのCSSが適用されていますので、以下を追記してみてください。

style.css
copyする
/* 外側の枠線と背景を消す */ .wpcf7 { background: none; border: none; margin: 0; } /* フォーム外側の余白を消す */ .wpcf7 form { margin: 0; }

Contact Form 7【まとめ】

以上「Contact Form 7」の解説でした。

たくさん質問いただくうちになかなかの大作になってしまいましたね。

このプラグインは奥が深いので、まだまだできることがたくさんあります。もっと探求したい方は色々ググってみて下さいませ〜。
HTML&CSSカスタマイズ特集コピペですぐ使える・ブログデザイン用カスタマイズコードまとめWordPressプラグインWordPressのおすすめプラグイン・新旧19個を紹介

180 COMMENTS

アバター dM

input type=”tel”に対するCSSが設定されないためか、郵便番号や電話番号などの入力欄にスタイルが適用されません。
改善方法はありますでしょうか?

コメントを投稿する
カゲオ カゲオ

dM様

ご質問ありがとうございます。

「input type=”tel”」だけということであれば

input[type=”tel”]{
display: block;
width: 100%;
height:45px;
margin-bottom:14px;
padding:0 12px;
border:0;
border-radius:3px;
background-color:#eaedf2;
box-shadow:none;
color:#5c6b80;
font-size:1em;
vertical-align:middle;
line-height:45px;
transition:background-color 0.24s ease-in-out;
}
こんな感じでどうでしょうか?
上記は当サイトで使用しているテーマ「SANGO」のコードです。
高さや背景カラーなどは、お使いのテーマの「inputタグ」に合わせていただければと思います。

よろしくお願い致します。

コメントを投稿する
アバター ふく

カゲオ様、初心者にも簡単に利用できる実用的な情報のご提供、誠にありがとうございます!

一つ、非常に厚かましいお願いがございます。
完璧で何一つ欠けている項目がなく、すべてカスタマイズ可能だと思っていたのですが、どうしても自分でできない項目が一つございました。
「生年月日」をプルダウンで項目追加する方法をご教示願えませんでしょうか?

とても初心者ですので、他所様でこれをコピペしてください、という説明があっても全く作成することが出来ませんでした。
出来れば、上記のコピペコードに割り込ませてコピペする形で教えていただけたら幸いです。

お忙しところ、大変恐縮です。

コメントを投稿する
カゲオ カゲオ

ふく様

なるほど、仕上がりのイメージはこんな感じでしょうか?
コンタクトフォーム7ドロップダウンメニュー

であれば以下をお好きなところへ挟めばいけるはずです。
特に指定がなかったので「西暦」にしましたが、数値を変更すれば「和暦」にもできます(ちょっと面倒ですが)。

CF7フォームコード
copyする
<tr> <th> <span class="haveto">必須</span>生年月日 </th> <td class="birthday"> [select* birthday-year first_as_label "年" "1940年" "1941年" "1942年" "1943年" "1944年" "1945年" "1946年" "1947年" "1948年" "1949年" "1950年" "1951年" "1952年" "1953年" "1954年" "1955年" "1956年" "1957年" "1958年" "1959年" "1960年" "1961年" "1962年" "1963年" "1964年" "1965年" "1966年" "1967年" "1968年" "1969年" "1970年" "1971年" "1972年" "1973年" "1974年" "1975年" "1976年" "1977年" "1978年" "1979年" "1980年" "1981年" "1982年" "1983年" "1984年" "1985年" "1986年" "1987年" "1988年" "1989年" "1990年" "1991年" "1992年" "1993年" "1994年" "1995年" "1996年" "1997年" "1998年" "1999年" "2000年"] [select* birthday-month first_as_label "月" "1月" "2月" "3月" "4月" "5月" "6月" "7月" "8月" "9月" "10月" "11月" "12月"] [select* birthday-day first_as_label "日" "1日" "2日" "3日" "4日" "5日" "6日" "7日" "8日" "9日" "10日" "11日" "12日" "13日" "14日" "15日" "16日" "17日" "18日" "19日" "20日" "21日" "22日" "23日" "24日" "25日" "26日" "27日" "28日" "29日" "30日" "31日"] </td> </tr>

返信メール等に使うショートコードはフォームコードの「赤字」部分で変更できます。

CSSは以下を追加することで、横並び&余白の調整をしています。

style.css
copyする
.birthday{ display: flex; } .birthday select { margin: 0 10px; }

よろしくお願いします。

コメントを投稿する
アバター ふく

カゲオ様
お忙しいところ、早速のご返信ありがとうございます!
ご回答に気づかずに、催促のようなご連絡してしまいご迷惑おかけいたしました。

家に帰って、早速試してみました。お陰様で、私にもできました!
他所様では、一番目のコピペの紹介で終わっていて、その他二つの作業が「当然理解しているべきこと」として省かれていたようで、ようやく私にも設定が出来ました。

カゲオ様は何がわからないかもわからないような、私のような初心者に対する理解力が特に優れていらっしゃるのだと存じます。

お忙しいところご丁寧にご説明頂きましたこと、またご連絡までくださったことに重ねてお礼申し上げます。

カゲオ様のご健勝心よりお祈り申し上げます。

コメントを投稿する
アバター ふく

カゲオ様

お世話になります。
お忙しいところ、度々の質問で恐れ入ります。

上記の件、プルダウンのメニューで表示される年の一覧を、デフォルトで指定の
年に選択してある状態にカスタマイズ出来ませんでしょうか?
よく、巷の同様のプルダウン生年月日選択で、1980年あたりにあらかじめ選択されていることが多いです。
1920年生まれより若い方が多く、真ん中たりにデフォルト選択させておくことで、その方たちの選択移動の手間を少しでも省く工夫だと思います。

お手数おかけいたしますが、可能でしたらこの方法に関しまして、ご教示頂けますと幸いです。

コメントを投稿する
カゲオ カゲオ

ふく様

西暦のデフォルト値を選択したいとのことですね。

その場合は、[select* birthday-year first_as_label "年" "1940年"......"年"部分にお好きな値を入れれば指定できます。

よろしくお願いします。

アバター ふく

カゲオ様

お忙しいところ、早速のご返信誠にありがとうございます。

ご教示通り試してみましたが、思うような結果になりませんでした。
1940年、1941年の列の前にぽこんと指定した1980年が追加されるだけで、
選択メニュー中の1980年を指定してくれていません。
よりまして、結局カーソル移動の手間も変わりません。

お手数おかけしまして恐縮ですが、ご確認頂けますと幸いです。

カゲオ カゲオ

ふく様

あぁなるほど。初期値だけなら簡単に設定できますが、カーソルを指定位置に合わせるのはかなり面倒なので、ちょっとコメント欄では対応不可です。

一応公式サイトの解説リンクを貼っておきます。

Listo で長いリストを管理する

別途プラグインを使えばいけるみたいですね。

よろしくお願いします。

アバター haru

こんにちは。とてもわかりやすい解説をありがとうございます。
早速導入してみたのですが、スマホでプレビューを見ると、レスポンシブになっていないようで、はみ出して表示されってしまいます。
どこを修正すればよいでしょうか。
よろしくお願いします。

コメントを投稿する
カゲオ カゲオ

haru様

はみ出しているのは、送信ボタンですかね?

先ほど、送信ボタンのCSSコードを訂正してみたので、試してみてください。

またフォーム全体がはみ出しているのであれば、該当ページのURLを送っていただければ、確認してみます。

よろしくお願いします。

コメントを投稿する
アバター つり清渡船

カゲオ様
こちらでもお世話になりました。自分のイメージに近いフォームはできているのですが、画像の選択後、フォームの送信成功メッセージは表示されますが、添付したファイルが送信されないんです。なんででしょうか?重ね重ね、恐縮ですが、アドバイスお願いします。

コメントを投稿する
アバター Pon

ありがとうございます。
「問い合わせページにサンクスページコードを埋め込む」をやっても、サンクスページが表示されず、フォーム全体が表で表示されその上に「フォームは送信されました。ありがとうございます」と表示されます。

対処方法を教えてください。

コメントを投稿する
アバター Pon

サンクスページが表示されない件、解決しました。サンプルコードをそのままコピペしていたのが原因でした。scriptの中にあった設定を削除したら表示されました。
お騒がせしました。すみません。

コメントを投稿する
カゲオ カゲオ

Pon様
解決されたようで何よりです。

しかしながら、ご質問を受け久々に該当部分を確認したところ、赤字にするためのタグがそのまま表示されていたことに気付けました。

また少し分かりにくかったかなぁと思い、補足説明を改善しておきました。

今回の質問がなければ、気付かなかった点なので、こちらとしても非常に助かりました。

ありがとうございます。

今後とも「カゲサイ」をよろしくお願いします。

コメントを投稿する
アバター maki

こんにちは はじめまして。こちらのフォーム大変きれいで、使わせていただきました。
ありがとうございます。

一つ質問させてください。横幅が360pxを切ると フォームが見切れてしまうのですが、対策方法はありますか?

コメントを投稿する
アバター maki

カゲオさま

お返事ありがとうございます。ご協力いただき誠に感謝いたします。
まだ公開前のサイトなので、公開は非掲載でお願いできますか?
こちらの2つのサイトで利用いたしました。

コメントを投稿する
カゲオ カゲオ

maki様

サイトを確認いたしました。

上側のサイトは以下のコードを追記してください。
@media(max-width:360px){
table.inquiry {
margin-top:80%;
}
.content{
padding:10px 0px!important;
}}

下側のサイトは
.content{
padding:10px 0px!important;
}

だけでイケると思います。

ご確認のほどよろしくお願いします。

コメントを投稿する
アバター maki

お忙しい中教えていただき誠にありがとうございます。
実機のですと動作確認ができなくて お返事が遅くなりすみません。
自分の手持ちのものが iphone4で古いためか、、 seなどで確認できたらまた連絡させてください。ありがとうございました。

コメントを投稿する
アバター 三木高広

お世話になります。とても役立っています。弊社のサイトに適用しようと思いましたが

1.テーマがWING(アフィンガー5)の為同じように反映されないのか
2.そもそも、このページで紹介されている方法をちゃんと反映させてないのか

判断ができず、もし可能であれば、ご指導いただけますと幸いです。

該当URLは

でございます。日本語URLで見苦しく、申し訳ございません。

コメントを投稿する
カゲオ カゲオ

三木高広 様

サイトを確認いたしました。

デザインは問題なく反映されています。

おそらくキャッシュが原因かと思われるので、削除して確認してみてください。

よろしくお願いします。

コメントを投稿する
アバター kaz

大変参考になります。
ありがとうございます。

ご教示頂きたいのですが、問い合わせフォームのカスタマイズコードで項目設定して、実装したのですが、返信されるメールにカスタマイズコードの入力事項が反映されません。

最下部の「お問い合わせ内容」のみ(差出人、題名は入っています)が、返信メールに反映されて送られてきます。

設定を間違っているのでしょうか?
お手数ですが、ご教示頂けると助かります。

コメントを投稿する
カゲオ カゲオ

kaz様
コメントありがとうございます。
・返信されるメールは以下の赤枠部分のショートコードを追記すれば、欲しい情報を反映できます。
コードはフォームに入力したHTMLごとに違うので、ご自身のコンタクトフォームを確認してみてください。
contactフォーム7返信メール設定

よろしくお願いします。

コメントを投稿する
アバター kaz

ちょっと説明足らずでしたので、補足を。

ドロップダウンメニューで選択した、各項目や、〒番号・住所等が、返信メールに反映しないのです。

ドロップダウン項目の、メールタグの記載がいるのだと思いますが、判りますでしょうか?

コメントを投稿する
アバター kaz

カゲオ様、

もう1点教えて下さい。

「問い合わせページにサンクスページコードを埋め込む」をやっても、サンクスページが表示されず、フォーム全体が表で表示されて、その上に「フォームは送信されました。ありがとうございます」と表示がされます。

当然、サンクスページのURLに変更しての書き込みをしています。

tcdのテンプレートを使っているのですが、それも関係しているのでしょうか?
もし対処方法があればご教示頂けませんか?

宜しくお願いします。

コメントを投稿する
カゲオ カゲオ

kaz様

コメントありがとうございます。

一点だけ確認を。
「ビジュアルエディタ」ではなく「テキストエディタ」になっていますか?

もし「テキストエディタ」に貼り付けても上手くいかないのであれば、貼り付けたコードを送ってください。

コメントを投稿する
アバター kaz

カゲオ様、

ありがとうございます。
こちらです。
ーーーーーーーーーーーー

document.addEventListener( ‘wpcf7mailsent’,function( event ){
location = ‘http://◯◯/’;
}, false );

ーーーーーーーーーーーー
コードは、テキストエディタに切り替えて貼り付けています。
宜しくお願い致します。

コメントを投稿する
カゲオ カゲオ

kaz様

コードを確認したところ合ってますね。
先ほどテストメールを送らせてもらい、実際の表示も確認しました。

うーん、なんでしょう。こちらのコード「問い合わせページ」の先頭に貼っているでしょうか?
サンクスページ」ではなく「問い合わせページ」の先頭です。

もしそこも合っているのであれば、申し訳ないですが原因は分かりかねます。

ご確認のほどよろしくお願いします。

コメントを投稿する
アバター kaz

カゲオ様、
ありがとうございます。

問い合わせページの先頭です。
お手を煩わせて申し訳ありませんでした。

今後もブログを拝見させて頂きます。
ありがとうございました。

カゲオ カゲオ

kaz様

いえいえ、お力になれず申し訳ありません。

素敵なホームページですね。
今後とも「カゲサイ」をよろしくお願いします。

アバター masa

カゲオ様
いつも大変参考にさせていただいており、お世話になっております。
2019年5月13日のkaz様の問い合わせの関連で、サンクスページに飛ばないという件ですが、wordpressのバージョン4.910の時はサンクスページに飛んでいたのですが、5.2にバージョンアップしたところ、飛ばなくなってしまいました。バージョン5.2でも問題なく動作していますでしょうか?
Classic Editorプラグインも入れてみましたがうまくいかず、なにかご存知でしたら、ご教示願えますでしょうか?
よろしくお願いいたします。

コメントを投稿する
カゲオ カゲオ

masa様

コメントありがとうございます。
参考になっているようで何よりです。

問い合わせフォームより、自己解決できた旨、了解致しました。

今後とも「カゲサイ」をよろしくお願いします。

コメントを投稿する
アバター mayu

カゲオさま
とても素敵なフォームだったので、使わせていただきたいと思い、コピペしたところ、保存すると「閲覧できません (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”]

ただし、ラジオボタンに関しては初期値を設定することが推奨されているので、外すのであれば「チェックボックス」のが良いと思います。

よろしくお願いします。

コメントを投稿する
アバター mayu

カゲオさま、何度もありがとうございました!

アバター じょーけん

カゲオ様

参考にさせて頂き、自分のHPに入れてみたのですが、パソコンサイトは問題ないのですが、スマホで閲覧すると、縦並びにならず見難い状態になっています。
使っているテーマはlightningなのですが、何か特殊な設定は必要でしょうか?
CSSのタグはそのままコピペで入れています。
になります。
お手数おかけしますが、よろしくお願い致します。

コメントを投稿する
カゲオ カゲオ

じょーけん様

コメントありがとうございます。
「Lightning」は使ったことがないので、わかりませんが
該当ページのURLを貼っていただければ確認致します。

よろしくお願いします。

コメントを投稿する
アバター じょーけん

すみません。何もしていないのですが、先ほど改めて確認したら縦並びになっていました。
理由がわかりませんが(時間が経てばOK?)解決しております。
ありがとうございました。

コメントを投稿する
カゲオ カゲオ

じょーけん様

解決されたようで何よりです。

デザインが反映されない原因の99%は「キャッシュ」ですので、今後も反映されないことがあれば
キャッシュ削除の方法を覚えておくと便利ですよ。

「キャッシュ削除」でググれば、解説記事がたくさん出てきます。

今後とも「カゲサイ」をよろしくお願いします。

コメントを投稿する
アバター wp初心者

カゲオさま
参考にさせて頂いており、助かっております。

ここで詳細されているラジオボタン横並び のように、「テキストを横並び」にするのはどうすれば良いのでしょうか?

2000年 普通免許取得 のように、2000年 を入力する部分と、普通免許取得 を入力するようなものにできないかと思っております。
ご教授頂けると幸いです。

コメントを投稿する
カゲオ カゲオ

wp初心者様

コメントありがとうございます。

「テキストを横並び」とはどのような状態でしょうか?

参考になるサイトなどがあればURLを貼っていただけるとイメージしやすいです。

よろしくお願いします。

コメントを投稿する
カゲオ カゲオ

wp初心者様

参考サイト確認いたしました。
この場合「HTML・CSS・ショートコード」3つを調整する必要があるので、ちょっとコメント欄では対応できないですね。
申し訳ありません。

コメントを投稿する
アバター wp初心者

カゲオさま

そうねんですね。わざわざ確認までして頂きありがとうございました!
これからも参考にさせて頂きます。

コメントを投稿する
アバター kaz

カゲオ様、

こちらのページ

なのですが、スマホで見ると挿入枠が画面からはみだしてしまいます。

何か記述を間違えているのだと思いますが、お分かりになりますでしょうか?

コメントを投稿する
アバター メロン

カゲオさま、とてもわかりやすく簡単に作成ができ、とても助かりました。ありがとうございます。

質問があります。
日付入力のところですが、横幅いっぱいスペースが取られてしまい、▼が右端にありすぎて気づかなそうです。カゲオさんの見本だとそ真ん中くらいに▼がありますが、この幅の調整はどこでしたら良いでしょうか?

コメントを投稿する
カゲオ カゲオ

メロン様

お役に立てたようで何よりです。

さて、入力欄の調整ですね。
ここはテーマにより、違うので調整する場合は、以下の通りです。
inputのサンプルコード
①調整したい入力欄の上で右クリック

②「検証」をクリック

③そうすると「input〜」みたいなコード(赤枠部分)がズラーっと出てきます。
この中の「width:◯◯」で幅を指定しています。
なので、赤枠内を全部コピーして、style.cssに貼り付け、widthの値を変更すればOKです。

※キャッシュ削除を忘れずに。

ご確認のほどよろしくお願いします。

コメントを投稿する
アバター メロン

かげおさま、さっそくありがとうございます!
レスポンシブなのでautoや50%など指定して、検証の際にやってみました。概ねうまくいくのですが、それ以外のところ(フリーで一行以上入力する項目など)も同じようにサイズが小さくなってしまいました。
かげおさんの見本だと、一行以上の入力項目欄は、100%のwidthで表示されていますが何か設定されていますか?

コメントを投稿する
カゲオ カゲオ

メロン様

なるほど。部分的に調整したい場合は、先ほど全部コピーした「input〜」のうち
100%のままにしたい入力欄の上で「検証」→該当セレクタ(input〜)を除外すればOKですよ。

よろしくお願いします。

コメントを投稿する
アバター kaz

カゲオ様、

2019年5月15日のmasa様の、サンクスページの自己解決ですが、解決法をご存じでしたら、ご教示頂けないでしょうか?

コメントを投稿する
カゲオ カゲオ

kaz様

masa様の件ですが、アップデートしたところ、サンクスページのコード内に<br>タグが複数入っていたとのことです。
<br>タグを削除したところ、正常に動いたと報告をいただきました。

ご確認のほど、よろしくお願いします。

コメントを投稿する
カゲオ カゲオ

kaz様

先ほど、読者の方よりサンクスページの不具合に関する、新たな自己解決法のコメントをいただきました。
記事中「Contact Form 7【まとめ】」の上に引用したので、もしまだ解決されていないようであれば試してみてください。

コメントを投稿する
アバター Emi

こんにちは
サイト大変参考になりました。
送信完了ページにリダイレクトされない件、何十回もトライしたところ、
こちらの「Contact Form 7の読み込みを使用するページだけに変更」のコードを削除し、コンタクトフォームの編集のフォーム内の一番上のところにスクリプトコードを記述したらうまくいきました。
参考になればとこちらにのこさせていただきます。

コメントを投稿する
カゲオ カゲオ

Emi様

大変有益なコメントをいただきありがとうございます。
またお手数をおかけして申し訳ありません。

さっそく記事に引用させていただきます。

今後とも「カゲサイ」をよろしくお願いします。

コメントを投稿する
アバター どきん

カゲオさま

お世話になります。
先日、ご質問させて頂いた件については何とか解決することが出来ました。
しかし、サンクスページは、他の質問者さまと同様、送信しましたという案内が出るだけでページは表示されません。
サイトはCocoonを使用しています。
恐れ入りますが、ご確認いただけますでしょうか。
よろしくお願い致します。

コメントを投稿する
カゲオ カゲオ

どきん様

サンクスページの件ですね。
2日前に読者の方が、解決方法をコメントしてくださいました。

当記事でも追記(最後のまとめの上あたりです)しているので、そちらの方法を試してみてください。

よろしくお願いします。

コメントを投稿する
アバター どきん

カゲオさま

お世話になります。
サンクスページですが、やはりうまくいきませんでした。
記述がおかしいのでしょうか?

あと必須を右側に一行で表示したいのですが、display: inline-block;では
二行のままになります。
記述方法が違っていたのなら申し訳ありません。

合わせてご確認頂けると幸いです。

よろしくお願い申し上げます。

コメントを投稿する
カゲオ カゲオ

どきん様

うーん、かもしれませんね。
コードが正しくても「JavaScript」は相性の悪いプラグインもありますので、一度プラグインを全停止→1つずつ有効化して干渉してるプラグインを停止させるのも1つの手です。

必須の件ですが、HTMLに<br>タグが入っちゃってますね。なので、削除すれば横に表示されます。

というか、サイトめちゃめちゃオシャレですね。Cocoonでここまでカスタムしてるサイトは初めて見ました。
まだ公開前だと思うんですけど、おそらくデザイン面で参考にしたい方かなりいると思いますよ。

少し脱線しましたが、よろしくお願いします。

コメントを投稿する
アバター どきん

カゲオさま

お世話になります。
早々にご連絡ありがとうございました。
必須の件は無事思い通りに並びました!

JavaScriptの相性…。なるほど勉強になります!
先ずは試してみます。

あとサイトをほめて頂きありがとうございます!
40歳過ぎて、新たなチャレンジの一つがサイトを作るってことで始めたのですが、
デザインを兼ねたUIって本当に難しく、毎日葛藤している状態です。
興味はあったものの、超が3つくらいつくド素人なので、他のサイトも参考させて頂きながら、日々精進しております。。
こうしてお褒めの言葉を頂くことで活力になります。
完成まではまだまだ先が見えないですが頑張ります!
本当にありがとうございました。

アバター マサ

初めまして。とても参考にさせて頂いております。

ご紹介頂いているフォームを利用させてもらおうと設定してみたところ、
下記の二点でイメージ通りになりません。

1.PC表示の際、項目部分が上下中央揃いにならない
2.モバイル表示の際、表が崩れてしまう

該当のページアドレスは以下になります。
https:◯◯

お手すきの際にでもご教授頂ければ幸いです。

御多用の中お手数をお掛け致しますが
宜しくお願い申し上げます。

コメントを投稿する
アバター マサ

度々失礼致します。
先程質問させて頂いたものです。

その後スタイルシートを修正し、
1に関しては解決致しました。

しかし、2に関して、classやidを指定しながらフォームが画面を突き抜けない様にしたのですが、
モバイル表示の際、今度は画面が100%で表示されずに、
右側が全体的に少し空いてしまいます。

widthの%での指定が間違っているのでしょうか。

教えて頂ければ幸いです。

以上、宜しくお願い致します。

コメントを投稿する
カゲオ カゲオ

マサ様

コメントありがとうございます。

ただいまこちらで確認したところ、キャッシュ削除すれば問題なく表示されるはずですが、いかがでしょうか?

ついでに、問い合わせフォーム周りの枠線と背景色はテーマ独自のCSSだと思いますので、以下のコードを追記すれば消すことができます。
もし気になるようでしたらご参考までに。

.wpcf7 {
background: none;
border: none;
}

コメントを投稿する
アバター マサ

カゲオ様

早速のご回答誠にありがとうございます。
フォーム周りの枠線と背景色の件、助かりました。
早速対応させて頂きました。

現状、私のiphoneでキャッシュを削除して表示させてみると、
下記の様にフォームが突き出てしまいます。

そこで、下記の部分を修正してみました。
@media(max-width:500px){
内にある、
width:100%!important;
の部分を
width:83%!important;
に変更。

↑の様に表示され、フォームは画面内に収まりますが、
トップの画像の右端がなぜか少し空いてしまいます。

スタイルシートがいまいち分からず困っております。
ご確認頂ければ幸いです。

コメントを投稿する
カゲオ カゲオ

マサ様

ありゃ失礼しました。
確かに右側に大きくズレていますね。

では以下のコードを追加してみてください。
@media(max-width:500px) {
p-page-header__inner l-inner .p-page-header__desc {
text-align: center;
}
.p-entry__inner .l-inner{
width:100%;
}
.p-breadcrumb .c-breadcrumb .u-clearfix{
margin: 0 0 0 25px;
}}

ちなみに、基本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を追記してみてください。
@media (max-width: 900px)
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
width: 100%;
}
table.inquiry {
border: 1px;
}}
下側のCSSはフォーム外側の枠線を細くするためのものです。
ご質問とは関係ありませんが、その方がデザイン的にいいかな〜と思ったので提案してみました。

最後に1つ

@media (max-width: 900px)
.inquiry th, .inquiry td {
display: block!important;
width: 80%!important;

おそらくご自身で、上記の幅(width)を80%に変更されたと思うのですが、こちらを100%に戻していただければスマホでも綺麗に表示されます。

CSS変更後「キャッシュ削除」を忘れずに〜。

どうぞよろしくお願いします。

コメントを投稿する
アバター 修様

カゲオ様

いい感じになりました!どうもありがとうございます。

1点だけ・・・提案していただいたフォーム外側の枠線を細くするためのCSSがイマイチうまくいかないというか、お手数ですが、もう一度ご確認いただけますか?

@media (max-width: 900px){
.inquiry th, .inquiry td {
display: block!important;
width: 80%!important;
}}

少しスペースができてしまう感じですが、これでいいですか?個人的には、このCSSがない方がぴったりハマる気がします。。。

よろしくお願いします。

コメントを投稿する
カゲオ カゲオ

修様

申し訳ない。
お伝えの仕方がわかりにくかったですね。

@media (max-width: 900px){
.inquiry th, .inquiry td {
display: block!important;
width: 80%!important;
}}

の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.スマホで見た時のヘッダーが大きすぎるので小さく(当サイトくらいのサイズ)すると、見栄えが良くなります。

もう一つは、メニューの表記が英字なので、カタカナにしてあげると「アクセシビリティ」が上がるかなと思います。

ご職業柄、多種多様なお客様が閲覧されると思うので、特に見やすさにはこだわった方が良いかと思い、余計なお世話をしてしまいました。

今後とも「カゲサイ」をよろしくお願いします。

コメントを投稿する
アバター アリ

カゲオさま

ヘッダーも小さくし、更にメニュー表記もわかりやすく日本語に替えました。老若男女対象にしているのでみやすさは大切ですね。デザインばかりにこだわり反省です…。アドバイス本当にありがとうございました!

コメントを投稿する

コメントはお気軽にどうぞ

\最強のSEO対策ツール・Rank Trackerを解説/