サブブログ|デスク環境構築サイト運営中

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

テーブル内のテキストが上下中央に揃わない。

回答

テーマによって空のPタグが入っていたり、labelタグの余白が影響している可能性があります。 その場合、以下のコードを追記してみてください。

style.css
copyする
table.inquiry p,table.inquiry label { margin: 0!important; }

Contact Form 7【まとめ】

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

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

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

202 COMMENTS

アバター こむけん

とっても参考にさせていただいています、ありがとうございます!

お伺いしたいのですが、プレースホルダーのテキストの色指定はQAで分かったのですが、ユーザーの入力する文字色は黒に指定する方法ありますか?

コメントを投稿する
アバター さーこい

ありがとうございます。
このテンプレートを利用させていただき、いらない項目は削除したのですが

赤枠でメッセージの送信に失敗しました。後でまたお試しください。

と表示されます。

送信先メールアドレスも問題はないみたいなのですが、考え得る
エラーは何になりますでしょうか?

使っているテンプレートはLightning + G3 Pro Unit + VEKUAN Kit

余談ですがメールフォームテンプレートで違うタイプの雛形を利用した場合は
送信されました。

アバター qjcyp880

はじめまして

ご質問させて頂きます。
こちらのプロ級カスタマイズに更に以下のカスタマイズを行いたいのですが、
どなたかお詳しい方お助け下さい。

・確認ボタンを追加して確認画面を設定したい
・入力エラー時に表示される文字の大きさ、色、枠の下ギリギリの為、枠との間に少し
 スペースを設定したい
 更に、入力エラー時に枠の色を赤く表示されるようにしたい
・入力時に枠の色を青く表示されるようにしたい

以上、お手数をお掛け致しますが、是非とも宜しくお願い申し上げます。

コメントを投稿する
アバター twins-mama

カゲオ様

とても参考になる有り難い情報提供、心より感謝致しております。
TCDテーマを使用してカゲサイさんのアドバイス通りの手順で
お問い合わせページを作りました。
どうしてもページの半分の幅しか表示しません。

↑こちらのテーマの固定ページはカラムがなく
カラム有り無しの選択ボタンがありません。

別のTCDテーマでは「カラムなし」で全体に表示できたのですが
今回は半分の表示になる理由がわからず質問させていただきました。
CSSなど何も触っていません。

ご回答いただけるとありがたいです。
宜しくお願い致します。

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

該当ページ
https://kagesai.net/contactform7perfectguide/

非常に役に立つ記事をありがとうございます。
当該ページに記載の通りやってみたのですが、2点不具合が出ました。
当方初心者のため、修正方法をご教授いただけますと幸いです。

(1)フォームと灰色の背景部分について左側部分の余白がなくなってしまいました。

(2)送信ボタンがクリックできません。

 をご参照いただけますと幸いです。

以上

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

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

はじめまして。cssをコピペして貼り付けをしたのですが、pcはうまく表示されるのですがスマホの表示がうまくいきません。
必須・お名前等の欄が左にきて縦表示となり伸びてしまい、こちらのページに記載しているように上下に表示されません。また、名前を打ち込む欄は横に伸びてしまいます。解決方法はありますでしょうか。よろしくお願いします。

アバター とし

素晴らしい記事をありがとうございます!
早速コピペしてみたのですが、CSSのテーブルでの反映がうまくいっておらずサンプルのようになっていない状況があります。
これはどこが問題なのか、どのように解決できるかご教示頂けないでしょうか?

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

はじめまして。スマホで見ると、縦並びにならず、例えば、「必須お名前」が縦書きで表示されます。
どのような解決策がありますか?
お教えください。

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

muchanです。すみません。解決しました。

アバター しば

とても勉強になりました。ありがとうございます。

質問なんですが、コンタクトフォームで集まったお客様の情報を自動でまとめたり、管理するツールはありますか?

やはり自分でエクセルなどで作成しなければいけませんか?

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

カゲオ様

お世話になります。
こちらのフォームで大変助かっております。

この度質問ですが、年齢などの項目でに入れた項目を横並びにしたいのですが、どのようにしたらよろしいでしょうか。
現状は縦並びになります。

CSSはそのままコピーして使用させていただいております。

当方の知識不足で大変申し訳ないのですが、わかりましたら宜しくお願い致します。

必須生年月日
[select* menu-29 “1910” ]年[select* menu-30 “1”]月[select* menu-31 “1”]

必須第1ご希望日時
[date* date-308][select* menu-541 include_blank “10:00~” “11:00~”]

コメントを投稿する
アバター まっつん

はじめまして。
フォーム利用させていただいております。
フォームの外枠とカラーを消したいのですが可能ですか?

ちなみにTCDテーマを使用しているので、
/* 外側の枠線と背景を消す */
.wpcf7 {
background: none;
border: none;
margin: 0;
}
/* フォーム外側の余白を消す */
.wpcf7 form {
margin: 0;
}
こちらを入力したんですが、変化ありませんでした。

サイトはこちらになります。

変更方法があれば教えていただけると幸いです。
よろしくお願いします。

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

すいません。先ほどの文章が消えていたようです。一部投稿誌直します。
下記の部分が電話番号を入れようとしても反応しません。
何故でしょうか??

任意電話番号

[tel your-tel class:tel placeholder”090-1111-2222″]

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

こんにちは 初心者です
今回初めて設定しました。
コピペをする場合は、checkbox* checkbox-1 などのcheckbox-1をcheckbox-2 にしたり名前を変えたら良いのですね?
メールも checkbox-1 checkbox-2 を入れないと返信に反映されないのですね。
メールの部分の記載方法もひな形はありますか?

下の部分のみ、数字を入れても反応がありません。何故でしょう??
数字を普通に入れる場合は
[text card1 class:textsp placeholder”****”]
かんな感じでいいのでしょうか?

******************************

任意電話番号

[tel your-tel class:tel placeholder”090-1111-2222″]

*******************************

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

カゲオ様
無事テキストカラー変えることができました!
ありがとうございます。
初歩的な質問に丁寧にご対応いただき、ありがとうございました!

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

カゲオ様
背景テーブルのカラー設定ができました!!!
ご丁寧にありがとうございます

もう一点ご相談だったのですが、ボタンクリック時のエラーメッセージが、背景に画像が設定されている場合は白、
ない場合は黒となるようです。
こちらは色指定は可能でしょうか・・・

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

ちい様
以下のコードを追記してくださいませ~。

style.css
copyする
.wpcf7-response-output { color: #000; border-color: #000!important; }

※上側がテキストカラー
下側が枠線のカラーです。

アバター ちい

カゲオ様

大変有益な情報を公開いただきありがとうございます!
とても初歩的な質問なのですが、テーブルの背景色を指定で行いたい場合についてご教授いただきたく・・・。

テーブルの部分に背景色を指定することは可能でしょうか?
(現在はサイトの背景色が反映してしまっています)
素人考えで
/*横の行とテーブル全体*/
.entry-content .inquiry tr,.entry-content table{
border:solid 1px #d7d7d7;
}
の部分にbackground:を追加してみましたが反映がない状態です。

以下も試しましたが、フォーム全体のコードなので送信ボタンとフォームの間に隙間が空いてしまうため、テーブル部分を指定できればと思った所存です。
/* 外側の枠線と背景を消す */
.wpcf7 {
background: none;
border: none;
margin: 0;
}

該当サイト:
未完成のサイトです

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

ちい様

テーブル部分の背景色とは以下の箇所でしょうか?

テーブルタグカスタム

であれば、こちらをお好きなカラーに変更してください。

style.css
copyする
/* 左側の背景カラー */ table.inquiry th { background: #fff; } /* 右側の背景カラー */ table.inquiry td { background: #000; }

よろしくお願いします。

アバター HIKARI

とても分かりやすく、非常に参考になりました
ありがとうございます。

画像の添付を、5枚くらい設置したいのですが
画像添付は難しいのでしょうか?

忙しいとは思いますが、宜しくお願い足します

コメントを投稿する
アバター さくらもち

カゲオ様

とても参考になる有り難い情報提供、心より感謝致します。

TCDテーマを使用しています。Q&Aも参考にしながらお問い合わせページを作成したのですが、PCで見た時の幅が半分くらいになってしまう問題が発生しました。

色々試してみた結果、見出し欄の文字数が少ないものしかないと上記のようになってしまうようです。カゲオ様の作ってくださったコピペにある「チェックボックス縦並び【複数を選択】」が見出し欄にあるときは、幅いっぱいになりました。

/*通常欄*/の下に「width:100% !important;」を入れてみたりしたのですが、効果はありませんでした。

何か解決策はあるでしょうか?
大変恐縮ですが、アドバイス頂けたら嬉しいです。

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

さくらもち様

該当ページのURLを送っていただけますか?

よろしくお願いします。

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

※日本語が含まれていないコメントは投稿できません。(スパム対策)