おすすめの副業”治験バイト”に参加してきた

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* zip id:zip placeholder"123-4567"]

都道府県
[text* your-prefectures class:p-region placeholder"◯◯県"]

都道府県
copyする
[text* pref id:pref placeholder"◯◯県"]

ご住所
[text* your-address class:p-locality placeholder"○○市○○1-2-3 ○○マンション 101号室"]

ご住所
copyする
[text* city id:city addr id:addr placeholder "○○市○○1-2-3 ○○マンション 101号室"]

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

採用フォームなど住所入力必須の場合は重宝すると思うので、よかったら活用してください。

今回の「フォーム用コード」は「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:15px; width:350px; background:#ffaa56; color:#fff; font-size:18px; font-weight:bold; border-radius:2px; margin:25px auto 0; } /*送信ボタンマウスホバー時*/ #formbtn:hover{ background:#fff; color:#ffaa56; border:2px solid #ffaa56; }
補足

ボタンの幅を変更する場合は、width:350px;を変更してください。

送信ボタンカラーは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
copyする
input::placeholder { color: #ccc; }
質問

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

回答

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

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

Contact Form 7【まとめ】

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

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

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

125 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; }

よろしくお願いします。

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

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

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

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

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

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

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

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

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

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

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

カゲオさま

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

コメントを投稿する
アバター 木曜日

はじめまして。素晴らしいフォームデザインをご提供いただきありがとうございます!

こちらのフォームを使わせていただいているのですが、スマホ表示の際に枠が突き抜けてしまいます。コメント欄を見て試行錯誤してみましたが、自力では直せず…コメントさせていただきました。

サイトはこちらになります。ご確認いただけますと大変幸いです。

また、フォームの枠が2重(?)になってしまうのですが、こちらも原因不明です…。テーマ特有のものでしょうか?(テーマはTCD社のOOPSです)
直す方法がありましたら、教えていただけますでしょうか。

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

木曜日様

確認したところ、キレイに表示されていますね。

自己解決できたようで何よりです。

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

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

コンタクトフォームを利用させていただいております。
大変見やすくて感謝しております。

さて、ドロップダウンメニューで「include_blank」の代わりに、「first_as_label “選択してください”」としたいのですが、このタグを入れても反映しません。どうすればいいでしょうか。

またラジオボタン横並びの最後で「その他」の横にテキストボックスを入れる方法はあるでしょうか?

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

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

RON46様

反映しないとは「選択してください」の文字列が表示されないということでしょうか?
もしそうなら、ショートコードミスの可能性が高いです。コードを送っていただければ確認いたします。

ラジオボタンの横に「テキストボックス」を入れる方法はありますが、少々面倒なのでコメント欄では対応できかねます。
申し訳ありません。

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

はじめまして、調べ方が悪いのか、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{}

大きめのアンケートがどのようなものか分かりませんが、チェックボックスの基本的な使い方としては

好きな動物は?

□犬□猫□熊

のように、ユーザーの手間を省く&簡単な選択肢に使うものなので、アンケート内容(チェックボックス横のテキストが複雑な場合など)によっては、チェックボックス以外のフォームを利用した方がいいかもしれません。

よろしくお願いします。

カゲサイ

コメントを投稿する
アバター ノエル

素晴らしい記事をありがとうございます。
チェックボックスかラジオボタンの後にテキストエリアをつける事はできるでしょうか?
その他(    )のような形です
よろしくお願いします。

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

ノエル様

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

コンタクトフォーム7に用意されているフォームタグでは、そのような実装はできません。

チェックやラジオボタンとテキストボックスを組み合わせたい場合は、通常のHTMLを書く必要があります。
加えて、細かな調整はCSSで整えるため、申し訳ありませんがコメント欄では対応できかねます。

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

コメントを投稿する
アバター ノエル

たびたび申し訳ありません。
こちらを基本にアンケートフォームを作ったのですが、自分にその答えの内容が添付されてきません!初心者の質問ですみません。

Q1.主なご愛飲者の性別は?

[checkbox* checkbox-1 exclusive use_label_element default:0 class:check1 “男性” “女性”]
で選択されたものを自分に送るにはどうしたらいいでしょうか?

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

はじめまして。
カゲオさんのサイトのおかげで素人の私でも素敵な問い合わせページができそうです。
素晴らしい情報をありがとうございます。

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:◯◯の部分で調整できます。

よろしくお願いします。

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

カゲオ様

カゲオ様のコードで調整が効くようになり、大変助かりました。本当にありがとうございました!

アバター 木曜日

いつも参考にさせていただいております。
不明点があり自分ではどうしようもなくなってしまい、、ご質問させていただきました。

上記のサイトで、お問い合わせボタンが下層ページのみ表示されなくなってしまいます。

トップページではちゃんと表示されているためコードも間違っていないとは思うのですが、考えられることなどありますでしょうか?

大変お手数をおかけしますが、ご教授いただけたら幸いです。

コメントを投稿する
アバター 木曜日

度々失礼します。

先程のコメントですが、ボタンのカラーを変更したところ表示はされました。
ですがデザインが崩れてしまいます。。

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

木曜日様

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

確認したところ、現在は綺麗に表示されていますね。

自己解決できたようで何よりです。

また何かありましたら、ご連絡くださいませ〜。

コメントを投稿する
アバター わけわかめ

はじめまして。
こちらを参考にコンタクトフォーム7を入力したのですが、スマホですと100%表示にならず、右側にはみ出てしまいます。
初心者で知識があまりなくいろいろと調べてみましたが、修正できませんでした。
ぜひ修正の方法をご教授いただけないでしょうか。

※非表示でお願いいたします。

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

コメントを投稿する
アバター わけわかめ

先日ご質問させていただきましたわけわかめです。
ご確認いただきたいURLを再度記載させていただきます。(URLは伏せてください)

同じテーマを使っているサイトを発見し参考にさせていただいているのですが、コンタクトフォームもこちらのサイトさんだと幅が細くスッキリしているのに、私のですと幅が広がってしまいます。

↑勝手に参考にさせていただいているのでURLは伏せてください。

このあたりもどうすればよいか教えていただきたいです。
よろしくお願い致します。

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

わけわかめ様

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

コンタクトフォーム7のフォームデザインがスマホだとはみ出てしまうとのことですね。

参考にしているサイトより、多少スッキリしたデザインになりますが、以下のコードを追記してみてください。

@media(max-width:500px) {
.wpcf7 {
background: none!important;
border: none!important;
}
.wpcf7 form {
margin: 0!important;
}}
ちなみに送信ボタンが少し大きめだったので、以下の値を調整すれば横幅を変更できます。ご参考まで。
#formbtn {
width: 320px;
}

よろしくお願いします。

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

素晴らしい問い合わせフォームありがとうございます。
日付のところがスマホだとスライドで表示されますが、
PCだと直接入力になりどの形で入力しても
正しい形式で入力してくださいと表示されます。

解決方法はございますでしょうか。

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

かず様

日付に関してはこちらの方が紹介しているようにカレンダー形式が一番わかりやすいかもしれません。
→https://tomolog.org/contact-form-7-datepicker
「Contact Form 7 Datepicker」というプラグインをインストールしたら、上記サイトを参考にしてみてください。

コメントを投稿する
アバター わけかわめ

大変ご丁寧にご教授ありがとうございます!
レスポンシブになりました!

合わせてもう1点教えていただけますでしょうか。
希望の日にち入力欄で、何も選択していない最初の状態だと四角のマスが小さく不格好になってしまいます。
コンタクトフォーム7の入力の際にプレースホルダ―を表示する、にしてみたのですが特に変わらないです。
ぜひ教えていただきたいです。
よろしくお願い致します。

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

わけわかめ様

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

時間を空けてサイトを確認してほしい場合、都度サイトのURLを送っていただけますか?

よろしくお願いします。

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

カゲオ様

修様です。去年はご教授いただきありがとうございました。再度ご教授願います(いつもすいません、ありがとうぎざいます。)。下記のサイトで、またスマホサイズで表示すると右側が切れてしまいます。

実は下記のサイトをテーマを変え作り変えているのですが、テーマを変えただけでスマホサイズの表示がおかしくなります。修正できますか?

ご教授願います

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

修様

テーマによりコードが微妙に違ったりするので、変更後に表示崩れはよくありますね。

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

@media (max-width: 500px){
input.wpcf7-form-control.wpcf7-text {
width: 92%;
margin: auto;
}}

よろしくお願いします。

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

カゲオ様

ありがとうございます。追加しましたが、未だしっくりきません。chromeだと良い感じですが、firefoxだと崩れます。他に手立てはありますか?

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

修様

ありゃ、そうですか。
うーん、こちらの環境からだと綺麗に表示されているので、お力になれそうにないですね。

申し訳ありません。

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

カゲオ様

わかりました。どうもありがとうございます。自分でも色々いじってみます。また困ったらコメントさせてください。

アバター わけわかめ

すみませんURLを添付させていただきます。

①日付の選択の部分がスマホだと小さな□になってしまい不格好
②PCだとお問合せ内容が一番の位置に表示されてしまう
がうまく設定ができません。

あとコンタクトフォーム7以外のところでもし教えていただけることが可能でしたらご教授いただきたいのですが、カスタム投稿ページでこのページを作成したのですがアイキャッチ画像を設定しても画像が表示されません。
これはどうしたらよいか、もし可能でしたら教えていただきたいです。
よろしくお願い致します。

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

わけわかめ様

①について、以下のコードを追記してみてください。
.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を無効にすることは可能でしょうか?
アドバイスいただければ幸いです。どうぞよろしくお願いします。

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

とおる様

初めまして。
テストページを拝見させていただきました。

う〜ん、スマホだけ無効にする方法はわからないですね。

ただスマホからも確認しましたが、特に見づらさは感じないのでそのままでいいような気がしますが……。

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

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

カゲオさま

初めまして。
とても素敵なフォームデザインのため、
利用させていただいております。

PC表示時、項目の一番下「お問い合わせ内容」のタイトルのみ、
一番下の表示になってしまい困っております。

これはテーマ自体のCSSの問題なのでしょうか。
レスポンシブの追加CSSは入力済みとなります。

お手数ですが、ご教示いただけますと幸いです。

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

初心の者様

初めまして。

以前同じような質問をいただいたので以下のコードを追加してみて下さい。

table.inquiry span {
vertical-align: middle;
}

キャッシュを削除後、確認してうまくいかなければ「問い合わせページのURL」を送って下さい。

基本的にカスタマイズ系の質問をする際は、「該当ページのURL」を送っていただかないと確認できないので、お問い合わせの際はご注意くださいませ〜。

よろしくお願いします。

コメントを投稿する

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