Contact Form 7をプロ級デザインにカスタマイズする方法

この記事へのコメント数 （217件）

• カゲオ様

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

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

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

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

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

  返信

  • さくらもち様

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

    よろしくお願いします。

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

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

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

  返信

  • HIKARI様

    画像添付は少しクセがあるので、省いています。

    公式が以下で解説してくれているので、イケそうならやってみてくださいませ〜。

    https://contactform7.com/ja/file-uploading-and-attachment/

• カゲオ様

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

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

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

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

  返信

  • ちい様

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

    

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

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

    よろしくお願いします。

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

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

  返信

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

    
    
    .wpcf7-response-output {
        color: #000;
        border-color: #000!important;
    }
    
    

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

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

  返信

• こんにちは　初心者です
  今回初めて設定しました。
  コピペをする場合は、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″]

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

  返信

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

  任意電話番号

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

  返信

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

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

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

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

  返信

• カゲオ様

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

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

  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～”]

  返信

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

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

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

  返信

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

  返信

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

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

  返信

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

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

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

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

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

  以上

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

  返信

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

• カゲオ様

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

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

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

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

  返信

• はじめまして

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

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

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

  返信

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

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

  返信

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

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

    と表示されます。

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

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

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

  • 先程の件、自己解決しました。

• 日付のドロップダウンにする方法の回答を押してもページが移動しません。
  もう一度やり方を教えていただいてもよろしいでしょうか？

  返信

• はじめまして。お世話になります。以前からHPを作るたびに、こちらのコンタクト７のカスタマイズを参考にさせて頂いております。ホント感謝しております。PCサイトでの見栄えは大丈夫なのですが、スマホでの表示は、テーマによって表示が大きく変わってしまします。どのテーマでも設定が可能になるようにご教授願いますでしょうか。問題になるのが、入力欄のサイズが小さくなったり、全体の表がスマホ画面からOBしたり、ラジオボタンでその他項目を設定して入力欄を作っておりますが、これもサイズが長くなったり短くなったり。こちらのサイトでコピーした追加CSSに変更を加えたり、分かる範囲で追記したりしておりますが、中々うまく行きません。
  /*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:#fff;
  padding-right:5px;
  width:30%;
  background:#070707;
  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:12px;
  padding:5px;
  background:#ff9393;
  color:#fff;
  border-radius:2px;
  margin-right:5px;
  position:relative;
  bottom:1px;
  }
  /*任意の調整*/
  .any{
  font-size:12px;
  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:#070707;
  color:#fff;
  font-size:18px;
  font-weight:bold;
  border-radius:2px;
  border: none;
  }
  /*送信ボタンマウスホバー時*/
  #formbtn:hover{
  background:#444;
  color:#ffaa56;
  }
  /*予約ボタンの色*/
  #booking-form button[type=submit]{
  padding:1rem 1.5rem;
  background-color:#000;
  color:#fff;
  }
  /*生年月日*/
  .birthday{
  display: flex;
  }
  .birthday select {
  margin: 0 10px;
  }
  /*開始時刻*/
  .time{
  display: flex;
  }
  .time select {
  margin: 0 10px;
  }
  /*終了時刻*/
  .time2{
  display: flex;
  }
  .time2 select {
  margin: 0 10px;
  }
  /*開始終了場所*/
  .place{
  display: flex;
  }
  .place select {
  margin: 0 10px;
  }
  サイズ等のpxの数字を変えてみたりするのですが。反応するものもあれば、反応しないものもあります。もう、これ以上は自分では無理だと思い、ご連絡させて頂きました。
  ご教授宜しくお願い致します。

  返信

  • くろ様

    いつも参考にしていただきありがとうございます。

    ただいまテーマの乗り換え作業にともない、こちらの記事も大幅にアップデートする予定です。
    今しばらくお待ち下さい。

    取り急ぎ、以下のコードを試してもらえますか？
    もしこれでも表示が崩れるようでしたら、該当フォームのURLを送ってください。
    よろしくお願いいたします。

    
    /*Contact Form7スマホ用カスタマイズ*/
    @media(max-width:500px){
    .inquiry th,.inquiry td {
       display:block!important;
       width:100%!important;
       border:none!important;
    }
    .inquiry{
        border:1px solid #d7d7d7!important;
    }
    .haveto,.any{
       font-size:3vw!important;
       position: relative;
       bottom: 1px;
    }
    }
    
    
    /*Contact Form 7全体カスタマイズ*/
    
    /*自動入力されるPタグを無効にする*/
    .inquiry p {
       display: inline;
    }
    /*フォーム入力欄の余白設定を無効と背景カラーの指定*/
    .inquiry input,.inquiry select {
       margin: 0;
       background:#eff1f5;
    }
    
    /*フォーム下に余白をあける*/
    table.inquiry{
       margin-bottom: 30px;
    }
    
    /*フォームの枠線消す*/
    .inquiry input,.inquiry textarea,.inquiry select{ 
       border: none;
    }
    
    /*テーブル見出し側*/
    .inquiry th{
       text-align:left;
       font-size:14px;
       color:#444;
       padding-right:5px;
       width:30%;
       background:#f4f4f4;
       border:solid 1px #d7d7d7;
       white-space: nowrap;
    }
    
    /*テーブルフォーム側*/
    .inquiry td{
       font-size:13px;
       border:solid 1px #d7d7d7;	
    }
    /*入力エリア幅最大*/
    .wpcf7-form-control {
       width: 100%;
    }
    /*横の行とテーブル全体*/
    .entry-content .inquiry tr,.entry-content table{
       border:solid 1px #d7d7d7;	
    }
    
    /*必須と任意タグ*/
    .haveto,.any{
       font-size:13px;
       padding:5px;
       background:#ff9393;
       color:#fff;
       border-radius:2px;
       margin-right:5px;
       font-weight:normal;
    }
    
    /*任意タグの背景カラー*/
    .any{
       background:#93c9ff;
    }
    
    /*ふりがな入力フォームの下に余白*/
    .inquiry .kana{
       margin-bottom:10px;
    }
    
    /*ラジオボタンを縦並び指定*/
    .verticallist{
       display:inline-grid;
    }
    
    /*送信ボタンのデザイン*/
    .wpcf7-submit{
       display: block;
       padding:1em 0;
       width:100%;
       background:#09b555;
       color:#fff;
       font-size:18px;
       font-weight:bold;	 
       border-radius:4px;
       border: none;
    }
    /*送信ボタンマウスホバー時*/
    .wpcf7-submit:hover{
      opacity: 0.9;
      transition: 0.3s;
    }
    

• カゲサイ様
  解説ありがとうございます。
  アップデートまだ、ざっくりとしか見ておりませんが、以前より数段よくなり、とても参考になります。ありがとうございます。
  今回の件とは、関係ないと思われるのですが、スマホよりコンタクトフォームを入力するとスパム扱いされて、送信が出来なくなってしまいました。
  reCAPTCHA v3を併用しております。しかし、ある日、突然だったので、何が原因なのか、まったくわからないのです。何か、そのような事例はあるでしょうか？

  返信

  • くろ様

    参考にしていただければなによりです。

    当サイトでは確認できておりませんが、いくつかそういった事例はあるみたいです。
    reCAPTCHA v3はプラグインによる設定でしょうか？

    こちらのプラグインにしたら改善された方もいるようなので、お試しください。
    →CAPTCHA 4WP

    よろしくお願いします。

• カゲサイ様
  先ほどのスパムになると言う、続きになりますが、項目が多くて、チェックを多く入れたりするとスパム扱いで送信できなくなるっと言うのがわかりました。項目が多くてもデフォルトのままで、送信すると送信できます。なにか、スマホ上でタップする回数が多かったりするとスパムになってしまうのでしょうか？何か事例などありましたら、ご教授願います。

  返信

• カゲオ様
  早速のご対応、ありがとうございます。reCAPTCHA v3はcontact7のインテグレーションにてせっていしておりました。
  CAPTCHA４WPを試してみます。contact7にreCAPCHAの設定をしたきっかけが、[your-name]のエラーが原因で設定したのですが、contact7からreCapchaを外すとエラーにならないのでしょうか？

  返信

  • くろ様

    CF7の公式サイトを確認したところ、インテグレーション機能は廃止予定および今後は非推奨のようです。
    参考：Constant Contact インテグレーションを廃止します。

    はい、当サイトのサンプルフォームはreCapchaを設定していませんが、エラーはでてないですね。
    またスパム防止でしたら、別記事で解説したクイズタグによるものも有効です。
    →クイズタグの使い方

    先ほどのプラグインと合わせてお試しください。

    よろしくお願いします。

• カゲオ様
  色々、ご丁寧にありがとうございました。とても有難いです。
  また、色々とあるかもしれませんが、ご教授宜しくお願い致します。
  今後も、素晴らしくアップデートされた記事を参考にしていきます。

  返信

  • くろ様

    以前インテグレーションについて説明したことに、誤りがあったため訂正します。
    reCAPTCHA設定は廃止予定ではありませんでした。

    引き続き不具合がなければご利用できます。
    送信エラーなどのバランスを見て、調整してください。

    よろしくお願いします。

• カゲオ様

  こちらのサイトのお陰で、ようやく理想の問い合わせフォームが作れそうです。
  有難うございます。
  ただ、2箇所うまくいかないところがあるので質問させてください。
  1：スマホで表示すると縦にならず、横並びのまま。（キャッシュの削除はしました。）
  2：背景色、特にチェックボックスの背景色が統一されない。

  お忙しいところ恐れ入りますが、解決策をご教授いただけないでしょうか。

  返信

  • ふくすけ様

    いえいえ、オシャレでカッコいいサイトですね。

    ①について
    おそらく以下のコードを追記し忘れかと思います。

    
    @media(max-width:850px){
    table.inquiry th,table.inquiry td {
       display:block;
       padding:1em 0!important;
       width:100%;
       border:0;
    }}
    

    ②について
    ページの背景色が黒ですので、特に統一されていないわけではなさそうですが、以下のように入力欄に背景色を付けたいとのことでしょうか？
    

    であれば、以下のコードを追記してください。

    
    inquiry td {
      background: #888;
    }
    

    888の部分を好きなカラーに変更してください。

    お役に立ちましたら、投げ銭機能がありますので、お気持ちだけでもサポートしていただけると嬉しいです。
    ご確認よろしくお願いします。

• […] 【参考】カゲサイさんのブログ […]

  返信

• カゲオ　様

  お世話になります。
  ただいま、新しいサイトの製作をはじめておりまして、
  こちら記事を拝見し、コンタクトフォームを使用させていただきました。
  ご説明の通り設定してみたところ、ほぼ問題なく綺麗に表示できました。
  1点だけ文字位置のズレが生じておりますので、ご教示いただけますようお願い致します。

  タイトルのうち、「お名前」「お問い合わせ内容」の2ヶ所の縦位置がずれています。
  こちらを他のタイトルと同様に中央揃えに整えられないでしょうか。
  ご確認の程、宜しくお願い致します。

  返信

  • WK様

    フォーム拝見しました。
    確かにズレていますね。

    以下のクラス名に中のコードを追記してみてください。
    
クラス名→.inquiry th{
追加するコード→vertical-align: middle;
}


    もしお役に立ちましたら、当サイトに投げ銭機能がありますので、お気持ちだけでもサポートしていただけると嬉しいです。
    ご確認よろしくお願いします。